@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -12,91 +12,99 @@ wrapperTag: div
12
12
  <a
13
13
  class="pf-v6-c-button pf-m-primary"
14
14
  href="#main-content-masthead-basic-example"
15
- >Skip to content</a>
15
+ >
16
+ <span class="pf-v6-c-button__text">Skip to content</span>
17
+ </a>
16
18
  </div>
17
19
  <header class="pf-v6-c-masthead" id="masthead-basic-example-masthead">
18
- <span class="pf-v6-c-masthead__toggle">
19
- <button
20
- class="pf-v6-c-button pf-m-plain"
21
- type="button"
22
- aria-label="Global navigation"
23
- >
24
- <i class="fas fa-bars" aria-hidden="true"></i>
25
- </button>
26
- </span>
27
20
  <div class="pf-v6-c-masthead__main">
28
- <a class="pf-v6-c-masthead__brand" href="#">
29
- <svg height="40px" viewBox="0 0 679 158">
30
- <title>PF-HorizontalLogo-Color</title>
31
- <defs>
32
- <linearGradient
33
- x1="68%"
34
- y1="2.25860997e-13%"
35
- x2="32%"
36
- y2="100%"
37
- id="linearGradient-masthead-basic-example-masthead"
38
- >
39
- <stop stop-color="#2B9AF3" offset="0%" />
40
- <stop
41
- stop-color="#73BCF7"
42
- stop-opacity="0.502212631"
43
- offset="100%"
44
- />
45
- </linearGradient>
46
- </defs>
47
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
48
- <g
49
- transform="translate(206.000000, 45.750000)"
50
- fill="var(--pf-t--global--text--color--regular)"
51
- fill-rule="nonzero"
52
- >
53
- <path
54
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
55
- />
56
- <path
57
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
58
- />
59
- <path
60
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
61
- />
62
- <path
63
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
64
- />
65
- <path
66
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
67
- />
68
- <path
69
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
70
- />
71
- <path
72
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
73
- />
74
- <polygon
75
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
76
- />
77
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
78
- <path
79
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
80
- />
81
- </g>
82
- <g transform="translate(0.000000, 0.000000)">
83
- <path
84
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
85
- fill="#0066CC"
86
- />
87
- <path
88
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
89
- fill="url(#linearGradient-masthead-basic-example-masthead)"
90
- />
91
- <path
92
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
93
- fill="url(#linearGradient-masthead-basic-example-masthead)"
94
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
95
- />
21
+ <span class="pf-v6-c-masthead__toggle">
22
+ <button
23
+ class="pf-v6-c-button pf-m-plain"
24
+ type="button"
25
+ aria-label="Global navigation"
26
+ >
27
+ <span class="pf-v6-c-button__icon">
28
+ <i class="fas fa-bars" aria-hidden="true"></i>
29
+ </span>
30
+ </button>
31
+ </span>
32
+ <div class="pf-v6-c-masthead__brand">
33
+ <a class="pf-v6-c-masthead__logo" href="#">
34
+ <svg height="37px" viewBox="0 0 679 158">
35
+ <title>PF-HorizontalLogo-Color</title>
36
+ <defs>
37
+ <linearGradient
38
+ x1="68%"
39
+ y1="2.25860997e-13%"
40
+ x2="32%"
41
+ y2="100%"
42
+ id="linearGradient-masthead-basic-example-masthead"
43
+ >
44
+ <stop stop-color="#2B9AF3" offset="0%" />
45
+ <stop
46
+ stop-color="#73BCF7"
47
+ stop-opacity="0.502212631"
48
+ offset="100%"
49
+ />
50
+ </linearGradient>
51
+ </defs>
52
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
53
+ <g
54
+ transform="translate(206.000000, 45.750000)"
55
+ fill="var(--pf-t--global--text--color--regular)"
56
+ fill-rule="nonzero"
57
+ >
58
+ <path
59
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
60
+ />
61
+ <path
62
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
63
+ />
64
+ <path
65
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
66
+ />
67
+ <path
68
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
69
+ />
70
+ <path
71
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
72
+ />
73
+ <path
74
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
75
+ />
76
+ <path
77
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
78
+ />
79
+ <polygon
80
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
81
+ />
82
+ <polygon
83
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
84
+ />
85
+ <path
86
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
87
+ />
88
+ </g>
89
+ <g transform="translate(0.000000, 0.000000)">
90
+ <path
91
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
92
+ fill="#0066CC"
93
+ />
94
+ <path
95
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
96
+ fill="url(#linearGradient-masthead-basic-example-masthead)"
97
+ />
98
+ <path
99
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
100
+ fill="url(#linearGradient-masthead-basic-example-masthead)"
101
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
102
+ />
103
+ </g>
96
104
  </g>
97
- </g>
98
- </svg>
99
- </a>
105
+ </svg>
106
+ </a>
107
+ </div>
100
108
  </div>
101
109
  <div class="pf-v6-c-masthead__content">
102
110
  <div
@@ -133,114 +141,126 @@ wrapperTag: div
133
141
  >
134
142
  <ul class="pf-v6-c-nav__list" role="list">
135
143
  <li class="pf-v6-c-nav__item">
136
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
144
+ <a href="#" class="pf-v6-c-nav__link">
145
+ <span class="pf-v6-c-nav__link-text">System panel</span>
146
+ </a>
137
147
  </li>
138
148
  <li class="pf-v6-c-nav__item">
139
149
  <a
140
150
  href="#"
141
151
  class="pf-v6-c-nav__link pf-m-current"
142
152
  aria-current="page"
143
- >Policy</a>
153
+ >
154
+ <span class="pf-v6-c-nav__link-text">Policy</span>
155
+ </a>
144
156
  </li>
145
157
  <li class="pf-v6-c-nav__item">
146
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
158
+ <a href="#" class="pf-v6-c-nav__link">
159
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
160
+ </a>
147
161
  </li>
148
162
  <li class="pf-v6-c-nav__item">
149
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
163
+ <a href="#" class="pf-v6-c-nav__link">
164
+ <span class="pf-v6-c-nav__link-text">Network services</span>
165
+ </a>
150
166
  </li>
151
167
  <li class="pf-v6-c-nav__item">
152
- <a href="#" class="pf-v6-c-nav__link">Server</a>
168
+ <a href="#" class="pf-v6-c-nav__link">
169
+ <span class="pf-v6-c-nav__link-text">Server</span>
170
+ </a>
153
171
  </li>
154
172
  </ul>
155
173
  </nav>
156
174
  </div>
157
175
  </div>
158
- <main
159
- class="pf-v6-c-page__main"
160
- tabindex="-1"
161
- id="main-content-masthead-basic-example"
162
- >
163
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
164
- <div class="pf-v6-c-page__main-body">
165
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
166
- <ol class="pf-v6-c-breadcrumb__list" role="list">
167
- <li class="pf-v6-c-breadcrumb__item">
168
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
169
- </li>
170
- <li class="pf-v6-c-breadcrumb__item">
171
- <span class="pf-v6-c-breadcrumb__item-divider">
172
- <i class="fas fa-angle-right" aria-hidden="true"></i>
173
- </span>
174
-
175
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
176
- </li>
177
- <li class="pf-v6-c-breadcrumb__item">
178
- <span class="pf-v6-c-breadcrumb__item-divider">
179
- <i class="fas fa-angle-right" aria-hidden="true"></i>
180
- </span>
181
-
182
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
183
- </li>
184
- <li class="pf-v6-c-breadcrumb__item">
185
- <span class="pf-v6-c-breadcrumb__item-divider">
186
- <i class="fas fa-angle-right" aria-hidden="true"></i>
187
- </span>
188
-
189
- <a
190
- href="#"
191
- class="pf-v6-c-breadcrumb__link pf-m-current"
192
- aria-current="page"
193
- >Section landing</a>
194
- </li>
195
- </ol>
196
- </nav>
197
- </div>
198
- </section>
199
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
200
- <div class="pf-v6-c-page__main-body">
201
- <div class="pf-v6-c-content">
202
- <h1>Main title</h1>
203
- <p>This is a full page demo.</p>
176
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
177
+ <main
178
+ class="pf-v6-c-page__main"
179
+ tabindex="-1"
180
+ id="main-content-masthead-basic-example"
181
+ >
182
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
183
+ <div class="pf-v6-c-page__main-body">
184
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
185
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
186
+ <li class="pf-v6-c-breadcrumb__item">
187
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
188
+ </li>
189
+ <li class="pf-v6-c-breadcrumb__item">
190
+ <span class="pf-v6-c-breadcrumb__item-divider">
191
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
192
+ </span>
193
+
194
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
195
+ </li>
196
+ <li class="pf-v6-c-breadcrumb__item">
197
+ <span class="pf-v6-c-breadcrumb__item-divider">
198
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
199
+ </span>
200
+
201
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
202
+ </li>
203
+ <li class="pf-v6-c-breadcrumb__item">
204
+ <span class="pf-v6-c-breadcrumb__item-divider">
205
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
206
+ </span>
207
+
208
+ <a
209
+ href="#"
210
+ class="pf-v6-c-breadcrumb__link pf-m-current"
211
+ aria-current="page"
212
+ >Section landing</a>
213
+ </li>
214
+ </ol>
215
+ </nav>
204
216
  </div>
205
- </div>
206
- </section>
207
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
208
- <div class="pf-v6-c-page__main-body">
209
- <div class="pf-v6-l-gallery pf-m-gutter">
210
- <div class="pf-v6-c-card">
211
- <div class="pf-v6-c-card__body">This is a card</div>
212
- </div>
213
- <div class="pf-v6-c-card">
214
- <div class="pf-v6-c-card__body">This is a card</div>
215
- </div>
216
- <div class="pf-v6-c-card">
217
- <div class="pf-v6-c-card__body">This is a card</div>
218
- </div>
219
- <div class="pf-v6-c-card">
220
- <div class="pf-v6-c-card__body">This is a card</div>
217
+ </section>
218
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
219
+ <div class="pf-v6-c-page__main-body">
220
+ <div class="pf-v6-c-content">
221
+ <h1>Main title</h1>
222
+ <p>This is a full page demo.</p>
221
223
  </div>
222
- <div class="pf-v6-c-card">
223
- <div class="pf-v6-c-card__body">This is a card</div>
224
- </div>
225
- <div class="pf-v6-c-card">
226
- <div class="pf-v6-c-card__body">This is a card</div>
227
- </div>
228
- <div class="pf-v6-c-card">
229
- <div class="pf-v6-c-card__body">This is a card</div>
230
- </div>
231
- <div class="pf-v6-c-card">
232
- <div class="pf-v6-c-card__body">This is a card</div>
233
- </div>
234
- <div class="pf-v6-c-card">
235
- <div class="pf-v6-c-card__body">This is a card</div>
236
- </div>
237
- <div class="pf-v6-c-card">
238
- <div class="pf-v6-c-card__body">This is a card</div>
224
+ </div>
225
+ </section>
226
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
227
+ <div class="pf-v6-c-page__main-body">
228
+ <div class="pf-v6-l-gallery pf-m-gutter">
229
+ <div class="pf-v6-c-card">
230
+ <div class="pf-v6-c-card__body">This is a card</div>
231
+ </div>
232
+ <div class="pf-v6-c-card">
233
+ <div class="pf-v6-c-card__body">This is a card</div>
234
+ </div>
235
+ <div class="pf-v6-c-card">
236
+ <div class="pf-v6-c-card__body">This is a card</div>
237
+ </div>
238
+ <div class="pf-v6-c-card">
239
+ <div class="pf-v6-c-card__body">This is a card</div>
240
+ </div>
241
+ <div class="pf-v6-c-card">
242
+ <div class="pf-v6-c-card__body">This is a card</div>
243
+ </div>
244
+ <div class="pf-v6-c-card">
245
+ <div class="pf-v6-c-card__body">This is a card</div>
246
+ </div>
247
+ <div class="pf-v6-c-card">
248
+ <div class="pf-v6-c-card__body">This is a card</div>
249
+ </div>
250
+ <div class="pf-v6-c-card">
251
+ <div class="pf-v6-c-card__body">This is a card</div>
252
+ </div>
253
+ <div class="pf-v6-c-card">
254
+ <div class="pf-v6-c-card__body">This is a card</div>
255
+ </div>
256
+ <div class="pf-v6-c-card">
257
+ <div class="pf-v6-c-card__body">This is a card</div>
258
+ </div>
239
259
  </div>
240
260
  </div>
241
- </div>
242
- </section>
243
- </main>
261
+ </section>
262
+ </main>
263
+ </div>
244
264
  </div>
245
265
 
246
266
  ```
@@ -253,94 +273,102 @@ wrapperTag: div
253
273
  <a
254
274
  class="pf-v6-c-button pf-m-primary"
255
275
  href="#main-content-masthead-context-selecton-drilldown-example"
256
- >Skip to content</a>
276
+ >
277
+ <span class="pf-v6-c-button__text">Skip to content</span>
278
+ </a>
257
279
  </div>
258
280
  <header
259
281
  class="pf-v6-c-masthead"
260
282
  id="masthead-context-selecton-drilldown-example-masthead"
261
283
  >
262
- <span class="pf-v6-c-masthead__toggle">
263
- <button
264
- class="pf-v6-c-button pf-m-plain"
265
- type="button"
266
- aria-label="Global navigation"
267
- >
268
- <i class="fas fa-bars" aria-hidden="true"></i>
269
- </button>
270
- </span>
271
284
  <div class="pf-v6-c-masthead__main">
272
- <a class="pf-v6-c-masthead__brand" href="#">
273
- <svg height="40px" viewBox="0 0 679 158">
274
- <title>PF-HorizontalLogo-Color</title>
275
- <defs>
276
- <linearGradient
277
- x1="68%"
278
- y1="2.25860997e-13%"
279
- x2="32%"
280
- y2="100%"
281
- id="linearGradient-masthead-context-selecton-drilldown-example-masthead"
282
- >
283
- <stop stop-color="#2B9AF3" offset="0%" />
284
- <stop
285
- stop-color="#73BCF7"
286
- stop-opacity="0.502212631"
287
- offset="100%"
288
- />
289
- </linearGradient>
290
- </defs>
291
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
292
- <g
293
- transform="translate(206.000000, 45.750000)"
294
- fill="var(--pf-t--global--text--color--regular)"
295
- fill-rule="nonzero"
296
- >
297
- <path
298
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
299
- />
300
- <path
301
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
302
- />
303
- <path
304
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
305
- />
306
- <path
307
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
308
- />
309
- <path
310
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
311
- />
312
- <path
313
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
314
- />
315
- <path
316
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
317
- />
318
- <polygon
319
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
320
- />
321
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
322
- <path
323
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
324
- />
325
- </g>
326
- <g transform="translate(0.000000, 0.000000)">
327
- <path
328
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
329
- fill="#0066CC"
330
- />
331
- <path
332
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
333
- fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
334
- />
335
- <path
336
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
337
- fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
338
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
339
- />
285
+ <span class="pf-v6-c-masthead__toggle">
286
+ <button
287
+ class="pf-v6-c-button pf-m-plain"
288
+ type="button"
289
+ aria-label="Global navigation"
290
+ >
291
+ <span class="pf-v6-c-button__icon">
292
+ <i class="fas fa-bars" aria-hidden="true"></i>
293
+ </span>
294
+ </button>
295
+ </span>
296
+ <div class="pf-v6-c-masthead__brand">
297
+ <a class="pf-v6-c-masthead__logo" href="#">
298
+ <svg height="37px" viewBox="0 0 679 158">
299
+ <title>PF-HorizontalLogo-Color</title>
300
+ <defs>
301
+ <linearGradient
302
+ x1="68%"
303
+ y1="2.25860997e-13%"
304
+ x2="32%"
305
+ y2="100%"
306
+ id="linearGradient-masthead-context-selecton-drilldown-example-masthead"
307
+ >
308
+ <stop stop-color="#2B9AF3" offset="0%" />
309
+ <stop
310
+ stop-color="#73BCF7"
311
+ stop-opacity="0.502212631"
312
+ offset="100%"
313
+ />
314
+ </linearGradient>
315
+ </defs>
316
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
317
+ <g
318
+ transform="translate(206.000000, 45.750000)"
319
+ fill="var(--pf-t--global--text--color--regular)"
320
+ fill-rule="nonzero"
321
+ >
322
+ <path
323
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
324
+ />
325
+ <path
326
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
327
+ />
328
+ <path
329
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
330
+ />
331
+ <path
332
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
333
+ />
334
+ <path
335
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
336
+ />
337
+ <path
338
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
339
+ />
340
+ <path
341
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
342
+ />
343
+ <polygon
344
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
345
+ />
346
+ <polygon
347
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
348
+ />
349
+ <path
350
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
351
+ />
352
+ </g>
353
+ <g transform="translate(0.000000, 0.000000)">
354
+ <path
355
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
356
+ fill="#0066CC"
357
+ />
358
+ <path
359
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
360
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
361
+ />
362
+ <path
363
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
364
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
365
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
366
+ />
367
+ </g>
340
368
  </g>
341
- </g>
342
- </svg>
343
- </a>
369
+ </svg>
370
+ </a>
371
+ </div>
344
372
  </div>
345
373
  <div class="pf-v6-c-masthead__content">
346
374
  <div
@@ -379,6 +407,7 @@ wrapperTag: div
379
407
  </button>
380
408
  </div>
381
409
  </div>
410
+
382
411
  <div class="pf-v6-c-toolbar__item pf-m-align-end">
383
412
  <button
384
413
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -405,114 +434,126 @@ wrapperTag: div
405
434
  >
406
435
  <ul class="pf-v6-c-nav__list" role="list">
407
436
  <li class="pf-v6-c-nav__item">
408
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
437
+ <a href="#" class="pf-v6-c-nav__link">
438
+ <span class="pf-v6-c-nav__link-text">System panel</span>
439
+ </a>
409
440
  </li>
410
441
  <li class="pf-v6-c-nav__item">
411
442
  <a
412
443
  href="#"
413
444
  class="pf-v6-c-nav__link pf-m-current"
414
445
  aria-current="page"
415
- >Policy</a>
446
+ >
447
+ <span class="pf-v6-c-nav__link-text">Policy</span>
448
+ </a>
416
449
  </li>
417
450
  <li class="pf-v6-c-nav__item">
418
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
451
+ <a href="#" class="pf-v6-c-nav__link">
452
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
453
+ </a>
419
454
  </li>
420
455
  <li class="pf-v6-c-nav__item">
421
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
456
+ <a href="#" class="pf-v6-c-nav__link">
457
+ <span class="pf-v6-c-nav__link-text">Network services</span>
458
+ </a>
422
459
  </li>
423
460
  <li class="pf-v6-c-nav__item">
424
- <a href="#" class="pf-v6-c-nav__link">Server</a>
461
+ <a href="#" class="pf-v6-c-nav__link">
462
+ <span class="pf-v6-c-nav__link-text">Server</span>
463
+ </a>
425
464
  </li>
426
465
  </ul>
427
466
  </nav>
428
467
  </div>
429
468
  </div>
430
- <main
431
- class="pf-v6-c-page__main"
432
- tabindex="-1"
433
- id="main-content-masthead-context-selecton-drilldown-example"
434
- >
435
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
436
- <div class="pf-v6-c-page__main-body">
437
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
438
- <ol class="pf-v6-c-breadcrumb__list" role="list">
439
- <li class="pf-v6-c-breadcrumb__item">
440
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
441
- </li>
442
- <li class="pf-v6-c-breadcrumb__item">
443
- <span class="pf-v6-c-breadcrumb__item-divider">
444
- <i class="fas fa-angle-right" aria-hidden="true"></i>
445
- </span>
446
-
447
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
448
- </li>
449
- <li class="pf-v6-c-breadcrumb__item">
450
- <span class="pf-v6-c-breadcrumb__item-divider">
451
- <i class="fas fa-angle-right" aria-hidden="true"></i>
452
- </span>
453
-
454
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
455
- </li>
456
- <li class="pf-v6-c-breadcrumb__item">
457
- <span class="pf-v6-c-breadcrumb__item-divider">
458
- <i class="fas fa-angle-right" aria-hidden="true"></i>
459
- </span>
460
-
461
- <a
462
- href="#"
463
- class="pf-v6-c-breadcrumb__link pf-m-current"
464
- aria-current="page"
465
- >Section landing</a>
466
- </li>
467
- </ol>
468
- </nav>
469
- </div>
470
- </section>
471
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
472
- <div class="pf-v6-c-page__main-body">
473
- <div class="pf-v6-c-content">
474
- <h1>Main title</h1>
475
- <p>This is a full page demo.</p>
469
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
470
+ <main
471
+ class="pf-v6-c-page__main"
472
+ tabindex="-1"
473
+ id="main-content-masthead-context-selecton-drilldown-example"
474
+ >
475
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
476
+ <div class="pf-v6-c-page__main-body">
477
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
478
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
479
+ <li class="pf-v6-c-breadcrumb__item">
480
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
481
+ </li>
482
+ <li class="pf-v6-c-breadcrumb__item">
483
+ <span class="pf-v6-c-breadcrumb__item-divider">
484
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
485
+ </span>
486
+
487
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
488
+ </li>
489
+ <li class="pf-v6-c-breadcrumb__item">
490
+ <span class="pf-v6-c-breadcrumb__item-divider">
491
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
492
+ </span>
493
+
494
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
495
+ </li>
496
+ <li class="pf-v6-c-breadcrumb__item">
497
+ <span class="pf-v6-c-breadcrumb__item-divider">
498
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
499
+ </span>
500
+
501
+ <a
502
+ href="#"
503
+ class="pf-v6-c-breadcrumb__link pf-m-current"
504
+ aria-current="page"
505
+ >Section landing</a>
506
+ </li>
507
+ </ol>
508
+ </nav>
476
509
  </div>
477
- </div>
478
- </section>
479
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
480
- <div class="pf-v6-c-page__main-body">
481
- <div class="pf-v6-l-gallery pf-m-gutter">
482
- <div class="pf-v6-c-card">
483
- <div class="pf-v6-c-card__body">This is a card</div>
484
- </div>
485
- <div class="pf-v6-c-card">
486
- <div class="pf-v6-c-card__body">This is a card</div>
487
- </div>
488
- <div class="pf-v6-c-card">
489
- <div class="pf-v6-c-card__body">This is a card</div>
490
- </div>
491
- <div class="pf-v6-c-card">
492
- <div class="pf-v6-c-card__body">This is a card</div>
493
- </div>
494
- <div class="pf-v6-c-card">
495
- <div class="pf-v6-c-card__body">This is a card</div>
496
- </div>
497
- <div class="pf-v6-c-card">
498
- <div class="pf-v6-c-card__body">This is a card</div>
499
- </div>
500
- <div class="pf-v6-c-card">
501
- <div class="pf-v6-c-card__body">This is a card</div>
502
- </div>
503
- <div class="pf-v6-c-card">
504
- <div class="pf-v6-c-card__body">This is a card</div>
505
- </div>
506
- <div class="pf-v6-c-card">
507
- <div class="pf-v6-c-card__body">This is a card</div>
510
+ </section>
511
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
512
+ <div class="pf-v6-c-page__main-body">
513
+ <div class="pf-v6-c-content">
514
+ <h1>Main title</h1>
515
+ <p>This is a full page demo.</p>
508
516
  </div>
509
- <div class="pf-v6-c-card">
510
- <div class="pf-v6-c-card__body">This is a card</div>
517
+ </div>
518
+ </section>
519
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
520
+ <div class="pf-v6-c-page__main-body">
521
+ <div class="pf-v6-l-gallery pf-m-gutter">
522
+ <div class="pf-v6-c-card">
523
+ <div class="pf-v6-c-card__body">This is a card</div>
524
+ </div>
525
+ <div class="pf-v6-c-card">
526
+ <div class="pf-v6-c-card__body">This is a card</div>
527
+ </div>
528
+ <div class="pf-v6-c-card">
529
+ <div class="pf-v6-c-card__body">This is a card</div>
530
+ </div>
531
+ <div class="pf-v6-c-card">
532
+ <div class="pf-v6-c-card__body">This is a card</div>
533
+ </div>
534
+ <div class="pf-v6-c-card">
535
+ <div class="pf-v6-c-card__body">This is a card</div>
536
+ </div>
537
+ <div class="pf-v6-c-card">
538
+ <div class="pf-v6-c-card__body">This is a card</div>
539
+ </div>
540
+ <div class="pf-v6-c-card">
541
+ <div class="pf-v6-c-card__body">This is a card</div>
542
+ </div>
543
+ <div class="pf-v6-c-card">
544
+ <div class="pf-v6-c-card__body">This is a card</div>
545
+ </div>
546
+ <div class="pf-v6-c-card">
547
+ <div class="pf-v6-c-card__body">This is a card</div>
548
+ </div>
549
+ <div class="pf-v6-c-card">
550
+ <div class="pf-v6-c-card__body">This is a card</div>
551
+ </div>
511
552
  </div>
512
553
  </div>
513
- </div>
514
- </section>
515
- </main>
554
+ </section>
555
+ </main>
556
+ </div>
516
557
  </div>
517
558
 
518
559
  ```
@@ -525,94 +566,102 @@ wrapperTag: div
525
566
  <a
526
567
  class="pf-v6-c-button pf-m-primary"
527
568
  href="#main-content-masthead-toolbar-filters-example"
528
- >Skip to content</a>
569
+ >
570
+ <span class="pf-v6-c-button__text">Skip to content</span>
571
+ </a>
529
572
  </div>
530
573
  <header
531
574
  class="pf-v6-c-masthead"
532
575
  id="masthead-toolbar-filters-example-masthead"
533
576
  >
534
- <span class="pf-v6-c-masthead__toggle">
535
- <button
536
- class="pf-v6-c-button pf-m-plain"
537
- type="button"
538
- aria-label="Global navigation"
539
- >
540
- <i class="fas fa-bars" aria-hidden="true"></i>
541
- </button>
542
- </span>
543
577
  <div class="pf-v6-c-masthead__main">
544
- <a class="pf-v6-c-masthead__brand" href="#">
545
- <svg height="40px" viewBox="0 0 679 158">
546
- <title>PF-HorizontalLogo-Color</title>
547
- <defs>
548
- <linearGradient
549
- x1="68%"
550
- y1="2.25860997e-13%"
551
- x2="32%"
552
- y2="100%"
553
- id="linearGradient-masthead-toolbar-filters-example-masthead"
554
- >
555
- <stop stop-color="#2B9AF3" offset="0%" />
556
- <stop
557
- stop-color="#73BCF7"
558
- stop-opacity="0.502212631"
559
- offset="100%"
560
- />
561
- </linearGradient>
562
- </defs>
563
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
564
- <g
565
- transform="translate(206.000000, 45.750000)"
566
- fill="var(--pf-t--global--text--color--regular)"
567
- fill-rule="nonzero"
568
- >
569
- <path
570
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
571
- />
572
- <path
573
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
574
- />
575
- <path
576
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
577
- />
578
- <path
579
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
580
- />
581
- <path
582
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
583
- />
584
- <path
585
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
586
- />
587
- <path
588
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
589
- />
590
- <polygon
591
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
592
- />
593
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
594
- <path
595
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
596
- />
597
- </g>
598
- <g transform="translate(0.000000, 0.000000)">
599
- <path
600
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
601
- fill="#0066CC"
602
- />
603
- <path
604
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
605
- fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
606
- />
607
- <path
608
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
609
- fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
610
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
611
- />
578
+ <span class="pf-v6-c-masthead__toggle">
579
+ <button
580
+ class="pf-v6-c-button pf-m-plain"
581
+ type="button"
582
+ aria-label="Global navigation"
583
+ >
584
+ <span class="pf-v6-c-button__icon">
585
+ <i class="fas fa-bars" aria-hidden="true"></i>
586
+ </span>
587
+ </button>
588
+ </span>
589
+ <div class="pf-v6-c-masthead__brand">
590
+ <a class="pf-v6-c-masthead__logo" href="#">
591
+ <svg height="37px" viewBox="0 0 679 158">
592
+ <title>PF-HorizontalLogo-Color</title>
593
+ <defs>
594
+ <linearGradient
595
+ x1="68%"
596
+ y1="2.25860997e-13%"
597
+ x2="32%"
598
+ y2="100%"
599
+ id="linearGradient-masthead-toolbar-filters-example-masthead"
600
+ >
601
+ <stop stop-color="#2B9AF3" offset="0%" />
602
+ <stop
603
+ stop-color="#73BCF7"
604
+ stop-opacity="0.502212631"
605
+ offset="100%"
606
+ />
607
+ </linearGradient>
608
+ </defs>
609
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
610
+ <g
611
+ transform="translate(206.000000, 45.750000)"
612
+ fill="var(--pf-t--global--text--color--regular)"
613
+ fill-rule="nonzero"
614
+ >
615
+ <path
616
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
617
+ />
618
+ <path
619
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
620
+ />
621
+ <path
622
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
623
+ />
624
+ <path
625
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
626
+ />
627
+ <path
628
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
629
+ />
630
+ <path
631
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
632
+ />
633
+ <path
634
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
635
+ />
636
+ <polygon
637
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
638
+ />
639
+ <polygon
640
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
641
+ />
642
+ <path
643
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
644
+ />
645
+ </g>
646
+ <g transform="translate(0.000000, 0.000000)">
647
+ <path
648
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
649
+ fill="#0066CC"
650
+ />
651
+ <path
652
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
653
+ fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
654
+ />
655
+ <path
656
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
657
+ fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
658
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
659
+ />
660
+ </g>
612
661
  </g>
613
- </g>
614
- </svg>
615
- </a>
662
+ </svg>
663
+ </a>
664
+ </div>
616
665
  </div>
617
666
  <div class="pf-v6-c-masthead__content">
618
667
  <div
@@ -622,13 +671,13 @@ wrapperTag: div
622
671
  <div class="pf-v6-c-toolbar__content">
623
672
  <div class="pf-v6-c-toolbar__content-section">
624
673
  <div
625
- class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-end"
674
+ class="pf-v6-c-toolbar__group pf-m-show pf-m-align-end pf-m-toggle-group"
626
675
  >
627
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
676
+ <div class="pf-v6-c-toolbar__toggle">
628
677
  <button
629
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
678
+ class="pf-v6-c-menu-toggle pf-m-plain"
630
679
  type="button"
631
- aria-expanded="true"
680
+ aria-expanded="false"
632
681
  aria-label="Show filters"
633
682
  aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
634
683
  >
@@ -682,6 +731,7 @@ wrapperTag: div
682
731
  </div>
683
732
  </div>
684
733
  </div>
734
+
685
735
  <div class="pf-v6-c-toolbar__item">
686
736
  <button
687
737
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -695,6 +745,7 @@ wrapperTag: div
695
745
  </button>
696
746
  </div>
697
747
  </div>
748
+
698
749
  <div
699
750
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
700
751
  id="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
@@ -713,114 +764,126 @@ wrapperTag: div
713
764
  >
714
765
  <ul class="pf-v6-c-nav__list" role="list">
715
766
  <li class="pf-v6-c-nav__item">
716
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
767
+ <a href="#" class="pf-v6-c-nav__link">
768
+ <span class="pf-v6-c-nav__link-text">System panel</span>
769
+ </a>
717
770
  </li>
718
771
  <li class="pf-v6-c-nav__item">
719
772
  <a
720
773
  href="#"
721
774
  class="pf-v6-c-nav__link pf-m-current"
722
775
  aria-current="page"
723
- >Policy</a>
776
+ >
777
+ <span class="pf-v6-c-nav__link-text">Policy</span>
778
+ </a>
724
779
  </li>
725
780
  <li class="pf-v6-c-nav__item">
726
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
781
+ <a href="#" class="pf-v6-c-nav__link">
782
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
783
+ </a>
727
784
  </li>
728
785
  <li class="pf-v6-c-nav__item">
729
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
786
+ <a href="#" class="pf-v6-c-nav__link">
787
+ <span class="pf-v6-c-nav__link-text">Network services</span>
788
+ </a>
730
789
  </li>
731
790
  <li class="pf-v6-c-nav__item">
732
- <a href="#" class="pf-v6-c-nav__link">Server</a>
791
+ <a href="#" class="pf-v6-c-nav__link">
792
+ <span class="pf-v6-c-nav__link-text">Server</span>
793
+ </a>
733
794
  </li>
734
795
  </ul>
735
796
  </nav>
736
797
  </div>
737
798
  </div>
738
- <main
739
- class="pf-v6-c-page__main"
740
- tabindex="-1"
741
- id="main-content-masthead-toolbar-filters-example"
742
- >
743
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
744
- <div class="pf-v6-c-page__main-body">
745
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
746
- <ol class="pf-v6-c-breadcrumb__list" role="list">
747
- <li class="pf-v6-c-breadcrumb__item">
748
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
749
- </li>
750
- <li class="pf-v6-c-breadcrumb__item">
751
- <span class="pf-v6-c-breadcrumb__item-divider">
752
- <i class="fas fa-angle-right" aria-hidden="true"></i>
753
- </span>
754
-
755
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
756
- </li>
757
- <li class="pf-v6-c-breadcrumb__item">
758
- <span class="pf-v6-c-breadcrumb__item-divider">
759
- <i class="fas fa-angle-right" aria-hidden="true"></i>
760
- </span>
761
-
762
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
763
- </li>
764
- <li class="pf-v6-c-breadcrumb__item">
765
- <span class="pf-v6-c-breadcrumb__item-divider">
766
- <i class="fas fa-angle-right" aria-hidden="true"></i>
767
- </span>
768
-
769
- <a
770
- href="#"
771
- class="pf-v6-c-breadcrumb__link pf-m-current"
772
- aria-current="page"
773
- >Section landing</a>
774
- </li>
775
- </ol>
776
- </nav>
777
- </div>
778
- </section>
779
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
780
- <div class="pf-v6-c-page__main-body">
781
- <div class="pf-v6-c-content">
782
- <h1>Main title</h1>
783
- <p>This is a full page demo.</p>
799
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
800
+ <main
801
+ class="pf-v6-c-page__main"
802
+ tabindex="-1"
803
+ id="main-content-masthead-toolbar-filters-example"
804
+ >
805
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
806
+ <div class="pf-v6-c-page__main-body">
807
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
808
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
809
+ <li class="pf-v6-c-breadcrumb__item">
810
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
811
+ </li>
812
+ <li class="pf-v6-c-breadcrumb__item">
813
+ <span class="pf-v6-c-breadcrumb__item-divider">
814
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
815
+ </span>
816
+
817
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
818
+ </li>
819
+ <li class="pf-v6-c-breadcrumb__item">
820
+ <span class="pf-v6-c-breadcrumb__item-divider">
821
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
822
+ </span>
823
+
824
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
825
+ </li>
826
+ <li class="pf-v6-c-breadcrumb__item">
827
+ <span class="pf-v6-c-breadcrumb__item-divider">
828
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
829
+ </span>
830
+
831
+ <a
832
+ href="#"
833
+ class="pf-v6-c-breadcrumb__link pf-m-current"
834
+ aria-current="page"
835
+ >Section landing</a>
836
+ </li>
837
+ </ol>
838
+ </nav>
784
839
  </div>
785
- </div>
786
- </section>
787
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
788
- <div class="pf-v6-c-page__main-body">
789
- <div class="pf-v6-l-gallery pf-m-gutter">
790
- <div class="pf-v6-c-card">
791
- <div class="pf-v6-c-card__body">This is a card</div>
792
- </div>
793
- <div class="pf-v6-c-card">
794
- <div class="pf-v6-c-card__body">This is a card</div>
795
- </div>
796
- <div class="pf-v6-c-card">
797
- <div class="pf-v6-c-card__body">This is a card</div>
840
+ </section>
841
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
842
+ <div class="pf-v6-c-page__main-body">
843
+ <div class="pf-v6-c-content">
844
+ <h1>Main title</h1>
845
+ <p>This is a full page demo.</p>
798
846
  </div>
799
- <div class="pf-v6-c-card">
800
- <div class="pf-v6-c-card__body">This is a card</div>
801
- </div>
802
- <div class="pf-v6-c-card">
803
- <div class="pf-v6-c-card__body">This is a card</div>
804
- </div>
805
- <div class="pf-v6-c-card">
806
- <div class="pf-v6-c-card__body">This is a card</div>
807
- </div>
808
- <div class="pf-v6-c-card">
809
- <div class="pf-v6-c-card__body">This is a card</div>
810
- </div>
811
- <div class="pf-v6-c-card">
812
- <div class="pf-v6-c-card__body">This is a card</div>
813
- </div>
814
- <div class="pf-v6-c-card">
815
- <div class="pf-v6-c-card__body">This is a card</div>
816
- </div>
817
- <div class="pf-v6-c-card">
818
- <div class="pf-v6-c-card__body">This is a card</div>
847
+ </div>
848
+ </section>
849
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
850
+ <div class="pf-v6-c-page__main-body">
851
+ <div class="pf-v6-l-gallery pf-m-gutter">
852
+ <div class="pf-v6-c-card">
853
+ <div class="pf-v6-c-card__body">This is a card</div>
854
+ </div>
855
+ <div class="pf-v6-c-card">
856
+ <div class="pf-v6-c-card__body">This is a card</div>
857
+ </div>
858
+ <div class="pf-v6-c-card">
859
+ <div class="pf-v6-c-card__body">This is a card</div>
860
+ </div>
861
+ <div class="pf-v6-c-card">
862
+ <div class="pf-v6-c-card__body">This is a card</div>
863
+ </div>
864
+ <div class="pf-v6-c-card">
865
+ <div class="pf-v6-c-card__body">This is a card</div>
866
+ </div>
867
+ <div class="pf-v6-c-card">
868
+ <div class="pf-v6-c-card__body">This is a card</div>
869
+ </div>
870
+ <div class="pf-v6-c-card">
871
+ <div class="pf-v6-c-card__body">This is a card</div>
872
+ </div>
873
+ <div class="pf-v6-c-card">
874
+ <div class="pf-v6-c-card__body">This is a card</div>
875
+ </div>
876
+ <div class="pf-v6-c-card">
877
+ <div class="pf-v6-c-card__body">This is a card</div>
878
+ </div>
879
+ <div class="pf-v6-c-card">
880
+ <div class="pf-v6-c-card__body">This is a card</div>
881
+ </div>
819
882
  </div>
820
883
  </div>
821
- </div>
822
- </section>
823
- </main>
884
+ </section>
885
+ </main>
886
+ </div>
824
887
  </div>
825
888
 
826
889
  ```
@@ -833,94 +896,102 @@ wrapperTag: div
833
896
  <a
834
897
  class="pf-v6-c-button pf-m-primary"
835
898
  href="#main-content-masthead-toggle-group-filters-example"
836
- >Skip to content</a>
899
+ >
900
+ <span class="pf-v6-c-button__text">Skip to content</span>
901
+ </a>
837
902
  </div>
838
903
  <header
839
904
  class="pf-v6-c-masthead"
840
905
  id="masthead-toggle-group-filters-example-masthead"
841
906
  >
842
- <span class="pf-v6-c-masthead__toggle">
843
- <button
844
- class="pf-v6-c-button pf-m-plain"
845
- type="button"
846
- aria-label="Global navigation"
847
- >
848
- <i class="fas fa-bars" aria-hidden="true"></i>
849
- </button>
850
- </span>
851
907
  <div class="pf-v6-c-masthead__main">
852
- <a class="pf-v6-c-masthead__brand" href="#">
853
- <svg height="40px" viewBox="0 0 679 158">
854
- <title>PF-HorizontalLogo-Color</title>
855
- <defs>
856
- <linearGradient
857
- x1="68%"
858
- y1="2.25860997e-13%"
859
- x2="32%"
860
- y2="100%"
861
- id="linearGradient-masthead-toggle-group-filters-example-masthead"
862
- >
863
- <stop stop-color="#2B9AF3" offset="0%" />
864
- <stop
865
- stop-color="#73BCF7"
866
- stop-opacity="0.502212631"
867
- offset="100%"
868
- />
869
- </linearGradient>
870
- </defs>
871
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
872
- <g
873
- transform="translate(206.000000, 45.750000)"
874
- fill="var(--pf-t--global--text--color--regular)"
875
- fill-rule="nonzero"
876
- >
877
- <path
878
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
879
- />
880
- <path
881
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
882
- />
883
- <path
884
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
885
- />
886
- <path
887
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
888
- />
889
- <path
890
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
891
- />
892
- <path
893
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
894
- />
895
- <path
896
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
897
- />
898
- <polygon
899
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
900
- />
901
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
902
- <path
903
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
904
- />
905
- </g>
906
- <g transform="translate(0.000000, 0.000000)">
907
- <path
908
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
909
- fill="#0066CC"
910
- />
911
- <path
912
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
913
- fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
914
- />
915
- <path
916
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
917
- fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
918
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
919
- />
908
+ <span class="pf-v6-c-masthead__toggle">
909
+ <button
910
+ class="pf-v6-c-button pf-m-plain"
911
+ type="button"
912
+ aria-label="Global navigation"
913
+ >
914
+ <span class="pf-v6-c-button__icon">
915
+ <i class="fas fa-bars" aria-hidden="true"></i>
916
+ </span>
917
+ </button>
918
+ </span>
919
+ <div class="pf-v6-c-masthead__brand">
920
+ <a class="pf-v6-c-masthead__logo" href="#">
921
+ <svg height="37px" viewBox="0 0 679 158">
922
+ <title>PF-HorizontalLogo-Color</title>
923
+ <defs>
924
+ <linearGradient
925
+ x1="68%"
926
+ y1="2.25860997e-13%"
927
+ x2="32%"
928
+ y2="100%"
929
+ id="linearGradient-masthead-toggle-group-filters-example-masthead"
930
+ >
931
+ <stop stop-color="#2B9AF3" offset="0%" />
932
+ <stop
933
+ stop-color="#73BCF7"
934
+ stop-opacity="0.502212631"
935
+ offset="100%"
936
+ />
937
+ </linearGradient>
938
+ </defs>
939
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
940
+ <g
941
+ transform="translate(206.000000, 45.750000)"
942
+ fill="var(--pf-t--global--text--color--regular)"
943
+ fill-rule="nonzero"
944
+ >
945
+ <path
946
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
947
+ />
948
+ <path
949
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
950
+ />
951
+ <path
952
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
953
+ />
954
+ <path
955
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
956
+ />
957
+ <path
958
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
959
+ />
960
+ <path
961
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
962
+ />
963
+ <path
964
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
965
+ />
966
+ <polygon
967
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
968
+ />
969
+ <polygon
970
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
971
+ />
972
+ <path
973
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
974
+ />
975
+ </g>
976
+ <g transform="translate(0.000000, 0.000000)">
977
+ <path
978
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
979
+ fill="#0066CC"
980
+ />
981
+ <path
982
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
983
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
984
+ />
985
+ <path
986
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
987
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
988
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
989
+ />
990
+ </g>
920
991
  </g>
921
- </g>
922
- </svg>
923
- </a>
992
+ </svg>
993
+ </a>
994
+ </div>
924
995
  </div>
925
996
  <div class="pf-v6-c-masthead__content">
926
997
  <div
@@ -930,13 +1001,13 @@ wrapperTag: div
930
1001
  <div class="pf-v6-c-toolbar__content">
931
1002
  <div class="pf-v6-c-toolbar__content-section">
932
1003
  <div
933
- class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg pf-m-align-end"
1004
+ class="pf-v6-c-toolbar__group pf-m-show-on-lg pf-m-align-end pf-m-toggle-group"
934
1005
  >
935
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
1006
+ <div class="pf-v6-c-toolbar__toggle">
936
1007
  <button
937
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
1008
+ class="pf-v6-c-menu-toggle pf-m-plain"
938
1009
  type="button"
939
- aria-expanded="true"
1010
+ aria-expanded="false"
940
1011
  aria-label="Show filters"
941
1012
  aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
942
1013
  >
@@ -990,6 +1061,7 @@ wrapperTag: div
990
1061
  </div>
991
1062
  </div>
992
1063
  </div>
1064
+
993
1065
  <div class="pf-v6-c-toolbar__item">
994
1066
  <button
995
1067
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1003,6 +1075,7 @@ wrapperTag: div
1003
1075
  </button>
1004
1076
  </div>
1005
1077
  </div>
1078
+
1006
1079
  <div
1007
1080
  class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
1008
1081
  id="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
@@ -1021,114 +1094,126 @@ wrapperTag: div
1021
1094
  >
1022
1095
  <ul class="pf-v6-c-nav__list" role="list">
1023
1096
  <li class="pf-v6-c-nav__item">
1024
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1097
+ <a href="#" class="pf-v6-c-nav__link">
1098
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1099
+ </a>
1025
1100
  </li>
1026
1101
  <li class="pf-v6-c-nav__item">
1027
1102
  <a
1028
1103
  href="#"
1029
1104
  class="pf-v6-c-nav__link pf-m-current"
1030
1105
  aria-current="page"
1031
- >Policy</a>
1106
+ >
1107
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1108
+ </a>
1032
1109
  </li>
1033
1110
  <li class="pf-v6-c-nav__item">
1034
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1111
+ <a href="#" class="pf-v6-c-nav__link">
1112
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1113
+ </a>
1035
1114
  </li>
1036
1115
  <li class="pf-v6-c-nav__item">
1037
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1116
+ <a href="#" class="pf-v6-c-nav__link">
1117
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1118
+ </a>
1038
1119
  </li>
1039
1120
  <li class="pf-v6-c-nav__item">
1040
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1121
+ <a href="#" class="pf-v6-c-nav__link">
1122
+ <span class="pf-v6-c-nav__link-text">Server</span>
1123
+ </a>
1041
1124
  </li>
1042
1125
  </ul>
1043
1126
  </nav>
1044
1127
  </div>
1045
1128
  </div>
1046
- <main
1047
- class="pf-v6-c-page__main"
1048
- tabindex="-1"
1049
- id="main-content-masthead-toggle-group-filters-example"
1050
- >
1051
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1052
- <div class="pf-v6-c-page__main-body">
1053
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1054
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1055
- <li class="pf-v6-c-breadcrumb__item">
1056
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1057
- </li>
1058
- <li class="pf-v6-c-breadcrumb__item">
1059
- <span class="pf-v6-c-breadcrumb__item-divider">
1060
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1061
- </span>
1062
-
1063
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1064
- </li>
1065
- <li class="pf-v6-c-breadcrumb__item">
1066
- <span class="pf-v6-c-breadcrumb__item-divider">
1067
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1068
- </span>
1069
-
1070
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1071
- </li>
1072
- <li class="pf-v6-c-breadcrumb__item">
1073
- <span class="pf-v6-c-breadcrumb__item-divider">
1074
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1075
- </span>
1076
-
1077
- <a
1078
- href="#"
1079
- class="pf-v6-c-breadcrumb__link pf-m-current"
1080
- aria-current="page"
1081
- >Section landing</a>
1082
- </li>
1083
- </ol>
1084
- </nav>
1085
- </div>
1086
- </section>
1087
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1088
- <div class="pf-v6-c-page__main-body">
1089
- <div class="pf-v6-c-content">
1090
- <h1>Main title</h1>
1091
- <p>This is a full page demo.</p>
1129
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1130
+ <main
1131
+ class="pf-v6-c-page__main"
1132
+ tabindex="-1"
1133
+ id="main-content-masthead-toggle-group-filters-example"
1134
+ >
1135
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1136
+ <div class="pf-v6-c-page__main-body">
1137
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1138
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1139
+ <li class="pf-v6-c-breadcrumb__item">
1140
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1141
+ </li>
1142
+ <li class="pf-v6-c-breadcrumb__item">
1143
+ <span class="pf-v6-c-breadcrumb__item-divider">
1144
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1145
+ </span>
1146
+
1147
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1148
+ </li>
1149
+ <li class="pf-v6-c-breadcrumb__item">
1150
+ <span class="pf-v6-c-breadcrumb__item-divider">
1151
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1152
+ </span>
1153
+
1154
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1155
+ </li>
1156
+ <li class="pf-v6-c-breadcrumb__item">
1157
+ <span class="pf-v6-c-breadcrumb__item-divider">
1158
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1159
+ </span>
1160
+
1161
+ <a
1162
+ href="#"
1163
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1164
+ aria-current="page"
1165
+ >Section landing</a>
1166
+ </li>
1167
+ </ol>
1168
+ </nav>
1092
1169
  </div>
1093
- </div>
1094
- </section>
1095
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1096
- <div class="pf-v6-c-page__main-body">
1097
- <div class="pf-v6-l-gallery pf-m-gutter">
1098
- <div class="pf-v6-c-card">
1099
- <div class="pf-v6-c-card__body">This is a card</div>
1100
- </div>
1101
- <div class="pf-v6-c-card">
1102
- <div class="pf-v6-c-card__body">This is a card</div>
1103
- </div>
1104
- <div class="pf-v6-c-card">
1105
- <div class="pf-v6-c-card__body">This is a card</div>
1106
- </div>
1107
- <div class="pf-v6-c-card">
1108
- <div class="pf-v6-c-card__body">This is a card</div>
1109
- </div>
1110
- <div class="pf-v6-c-card">
1111
- <div class="pf-v6-c-card__body">This is a card</div>
1170
+ </section>
1171
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1172
+ <div class="pf-v6-c-page__main-body">
1173
+ <div class="pf-v6-c-content">
1174
+ <h1>Main title</h1>
1175
+ <p>This is a full page demo.</p>
1112
1176
  </div>
1113
- <div class="pf-v6-c-card">
1114
- <div class="pf-v6-c-card__body">This is a card</div>
1115
- </div>
1116
- <div class="pf-v6-c-card">
1117
- <div class="pf-v6-c-card__body">This is a card</div>
1118
- </div>
1119
- <div class="pf-v6-c-card">
1120
- <div class="pf-v6-c-card__body">This is a card</div>
1121
- </div>
1122
- <div class="pf-v6-c-card">
1123
- <div class="pf-v6-c-card__body">This is a card</div>
1124
- </div>
1125
- <div class="pf-v6-c-card">
1126
- <div class="pf-v6-c-card__body">This is a card</div>
1177
+ </div>
1178
+ </section>
1179
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1180
+ <div class="pf-v6-c-page__main-body">
1181
+ <div class="pf-v6-l-gallery pf-m-gutter">
1182
+ <div class="pf-v6-c-card">
1183
+ <div class="pf-v6-c-card__body">This is a card</div>
1184
+ </div>
1185
+ <div class="pf-v6-c-card">
1186
+ <div class="pf-v6-c-card__body">This is a card</div>
1187
+ </div>
1188
+ <div class="pf-v6-c-card">
1189
+ <div class="pf-v6-c-card__body">This is a card</div>
1190
+ </div>
1191
+ <div class="pf-v6-c-card">
1192
+ <div class="pf-v6-c-card__body">This is a card</div>
1193
+ </div>
1194
+ <div class="pf-v6-c-card">
1195
+ <div class="pf-v6-c-card__body">This is a card</div>
1196
+ </div>
1197
+ <div class="pf-v6-c-card">
1198
+ <div class="pf-v6-c-card__body">This is a card</div>
1199
+ </div>
1200
+ <div class="pf-v6-c-card">
1201
+ <div class="pf-v6-c-card__body">This is a card</div>
1202
+ </div>
1203
+ <div class="pf-v6-c-card">
1204
+ <div class="pf-v6-c-card__body">This is a card</div>
1205
+ </div>
1206
+ <div class="pf-v6-c-card">
1207
+ <div class="pf-v6-c-card__body">This is a card</div>
1208
+ </div>
1209
+ <div class="pf-v6-c-card">
1210
+ <div class="pf-v6-c-card__body">This is a card</div>
1211
+ </div>
1127
1212
  </div>
1128
1213
  </div>
1129
- </div>
1130
- </section>
1131
- </main>
1214
+ </section>
1215
+ </main>
1216
+ </div>
1132
1217
  </div>
1133
1218
 
1134
1219
  ```
@@ -1141,94 +1226,102 @@ wrapperTag: div
1141
1226
  <a
1142
1227
  class="pf-v6-c-button pf-m-primary"
1143
1228
  href="#main-content-masthead-expandable-search-example"
1144
- >Skip to content</a>
1229
+ >
1230
+ <span class="pf-v6-c-button__text">Skip to content</span>
1231
+ </a>
1145
1232
  </div>
1146
1233
  <header
1147
1234
  class="pf-v6-c-masthead"
1148
1235
  id="masthead-expandable-search-example-masthead"
1149
1236
  >
1150
- <span class="pf-v6-c-masthead__toggle">
1151
- <button
1152
- class="pf-v6-c-button pf-m-plain"
1153
- type="button"
1154
- aria-label="Global navigation"
1155
- >
1156
- <i class="fas fa-bars" aria-hidden="true"></i>
1157
- </button>
1158
- </span>
1159
1237
  <div class="pf-v6-c-masthead__main">
1160
- <a class="pf-v6-c-masthead__brand" href="#">
1161
- <svg height="40px" viewBox="0 0 679 158">
1162
- <title>PF-HorizontalLogo-Color</title>
1163
- <defs>
1164
- <linearGradient
1165
- x1="68%"
1166
- y1="2.25860997e-13%"
1167
- x2="32%"
1168
- y2="100%"
1169
- id="linearGradient-masthead-expandable-search-example-masthead"
1170
- >
1171
- <stop stop-color="#2B9AF3" offset="0%" />
1172
- <stop
1173
- stop-color="#73BCF7"
1174
- stop-opacity="0.502212631"
1175
- offset="100%"
1176
- />
1177
- </linearGradient>
1178
- </defs>
1179
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1180
- <g
1181
- transform="translate(206.000000, 45.750000)"
1182
- fill="var(--pf-t--global--text--color--regular)"
1183
- fill-rule="nonzero"
1184
- >
1185
- <path
1186
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1187
- />
1188
- <path
1189
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1190
- />
1191
- <path
1192
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1193
- />
1194
- <path
1195
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1196
- />
1197
- <path
1198
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1199
- />
1200
- <path
1201
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1202
- />
1203
- <path
1204
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1205
- />
1206
- <polygon
1207
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1208
- />
1209
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1210
- <path
1211
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1212
- />
1213
- </g>
1214
- <g transform="translate(0.000000, 0.000000)">
1215
- <path
1216
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1217
- fill="#0066CC"
1218
- />
1219
- <path
1220
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1221
- fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1222
- />
1223
- <path
1224
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1225
- fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1226
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1227
- />
1238
+ <span class="pf-v6-c-masthead__toggle">
1239
+ <button
1240
+ class="pf-v6-c-button pf-m-plain"
1241
+ type="button"
1242
+ aria-label="Global navigation"
1243
+ >
1244
+ <span class="pf-v6-c-button__icon">
1245
+ <i class="fas fa-bars" aria-hidden="true"></i>
1246
+ </span>
1247
+ </button>
1248
+ </span>
1249
+ <div class="pf-v6-c-masthead__brand">
1250
+ <a class="pf-v6-c-masthead__logo" href="#">
1251
+ <svg height="37px" viewBox="0 0 679 158">
1252
+ <title>PF-HorizontalLogo-Color</title>
1253
+ <defs>
1254
+ <linearGradient
1255
+ x1="68%"
1256
+ y1="2.25860997e-13%"
1257
+ x2="32%"
1258
+ y2="100%"
1259
+ id="linearGradient-masthead-expandable-search-example-masthead"
1260
+ >
1261
+ <stop stop-color="#2B9AF3" offset="0%" />
1262
+ <stop
1263
+ stop-color="#73BCF7"
1264
+ stop-opacity="0.502212631"
1265
+ offset="100%"
1266
+ />
1267
+ </linearGradient>
1268
+ </defs>
1269
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1270
+ <g
1271
+ transform="translate(206.000000, 45.750000)"
1272
+ fill="var(--pf-t--global--text--color--regular)"
1273
+ fill-rule="nonzero"
1274
+ >
1275
+ <path
1276
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1277
+ />
1278
+ <path
1279
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1280
+ />
1281
+ <path
1282
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1283
+ />
1284
+ <path
1285
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1286
+ />
1287
+ <path
1288
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1289
+ />
1290
+ <path
1291
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1292
+ />
1293
+ <path
1294
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1295
+ />
1296
+ <polygon
1297
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1298
+ />
1299
+ <polygon
1300
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1301
+ />
1302
+ <path
1303
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1304
+ />
1305
+ </g>
1306
+ <g transform="translate(0.000000, 0.000000)">
1307
+ <path
1308
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1309
+ fill="#0066CC"
1310
+ />
1311
+ <path
1312
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1313
+ fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1314
+ />
1315
+ <path
1316
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1317
+ fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1318
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1319
+ />
1320
+ </g>
1228
1321
  </g>
1229
- </g>
1230
- </svg>
1231
- </a>
1322
+ </svg>
1323
+ </a>
1324
+ </div>
1232
1325
  </div>
1233
1326
  <div class="pf-v6-c-masthead__content">
1234
1327
  <div
@@ -1246,7 +1339,9 @@ wrapperTag: div
1246
1339
  type="button"
1247
1340
  aria-label="Open search"
1248
1341
  >
1249
- <i class="fas fa-fw fa-search" aria-hidden="true"></i>
1342
+ <span class="pf-v6-c-button__icon">
1343
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1344
+ </span>
1250
1345
  </button>
1251
1346
  </div>
1252
1347
  </div>
@@ -1266,114 +1361,126 @@ wrapperTag: div
1266
1361
  >
1267
1362
  <ul class="pf-v6-c-nav__list" role="list">
1268
1363
  <li class="pf-v6-c-nav__item">
1269
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1364
+ <a href="#" class="pf-v6-c-nav__link">
1365
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1366
+ </a>
1270
1367
  </li>
1271
1368
  <li class="pf-v6-c-nav__item">
1272
1369
  <a
1273
1370
  href="#"
1274
1371
  class="pf-v6-c-nav__link pf-m-current"
1275
1372
  aria-current="page"
1276
- >Policy</a>
1373
+ >
1374
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1375
+ </a>
1277
1376
  </li>
1278
1377
  <li class="pf-v6-c-nav__item">
1279
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1378
+ <a href="#" class="pf-v6-c-nav__link">
1379
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1380
+ </a>
1280
1381
  </li>
1281
1382
  <li class="pf-v6-c-nav__item">
1282
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1383
+ <a href="#" class="pf-v6-c-nav__link">
1384
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1385
+ </a>
1283
1386
  </li>
1284
1387
  <li class="pf-v6-c-nav__item">
1285
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1388
+ <a href="#" class="pf-v6-c-nav__link">
1389
+ <span class="pf-v6-c-nav__link-text">Server</span>
1390
+ </a>
1286
1391
  </li>
1287
1392
  </ul>
1288
1393
  </nav>
1289
1394
  </div>
1290
1395
  </div>
1291
- <main
1292
- class="pf-v6-c-page__main"
1293
- tabindex="-1"
1294
- id="main-content-masthead-expandable-search-example"
1295
- >
1296
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1297
- <div class="pf-v6-c-page__main-body">
1298
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1299
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1300
- <li class="pf-v6-c-breadcrumb__item">
1301
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1302
- </li>
1303
- <li class="pf-v6-c-breadcrumb__item">
1304
- <span class="pf-v6-c-breadcrumb__item-divider">
1305
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1306
- </span>
1307
-
1308
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1309
- </li>
1310
- <li class="pf-v6-c-breadcrumb__item">
1311
- <span class="pf-v6-c-breadcrumb__item-divider">
1312
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1313
- </span>
1314
-
1315
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1316
- </li>
1317
- <li class="pf-v6-c-breadcrumb__item">
1318
- <span class="pf-v6-c-breadcrumb__item-divider">
1319
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1320
- </span>
1321
-
1322
- <a
1323
- href="#"
1324
- class="pf-v6-c-breadcrumb__link pf-m-current"
1325
- aria-current="page"
1326
- >Section landing</a>
1327
- </li>
1328
- </ol>
1329
- </nav>
1330
- </div>
1331
- </section>
1332
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1333
- <div class="pf-v6-c-page__main-body">
1334
- <div class="pf-v6-c-content">
1335
- <h1>Main title</h1>
1336
- <p>This is a full page demo.</p>
1396
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1397
+ <main
1398
+ class="pf-v6-c-page__main"
1399
+ tabindex="-1"
1400
+ id="main-content-masthead-expandable-search-example"
1401
+ >
1402
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1403
+ <div class="pf-v6-c-page__main-body">
1404
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1405
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1406
+ <li class="pf-v6-c-breadcrumb__item">
1407
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1408
+ </li>
1409
+ <li class="pf-v6-c-breadcrumb__item">
1410
+ <span class="pf-v6-c-breadcrumb__item-divider">
1411
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1412
+ </span>
1413
+
1414
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1415
+ </li>
1416
+ <li class="pf-v6-c-breadcrumb__item">
1417
+ <span class="pf-v6-c-breadcrumb__item-divider">
1418
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1419
+ </span>
1420
+
1421
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1422
+ </li>
1423
+ <li class="pf-v6-c-breadcrumb__item">
1424
+ <span class="pf-v6-c-breadcrumb__item-divider">
1425
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1426
+ </span>
1427
+
1428
+ <a
1429
+ href="#"
1430
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1431
+ aria-current="page"
1432
+ >Section landing</a>
1433
+ </li>
1434
+ </ol>
1435
+ </nav>
1337
1436
  </div>
1338
- </div>
1339
- </section>
1340
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1341
- <div class="pf-v6-c-page__main-body">
1342
- <div class="pf-v6-l-gallery pf-m-gutter">
1343
- <div class="pf-v6-c-card">
1344
- <div class="pf-v6-c-card__body">This is a card</div>
1345
- </div>
1346
- <div class="pf-v6-c-card">
1347
- <div class="pf-v6-c-card__body">This is a card</div>
1348
- </div>
1349
- <div class="pf-v6-c-card">
1350
- <div class="pf-v6-c-card__body">This is a card</div>
1351
- </div>
1352
- <div class="pf-v6-c-card">
1353
- <div class="pf-v6-c-card__body">This is a card</div>
1437
+ </section>
1438
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1439
+ <div class="pf-v6-c-page__main-body">
1440
+ <div class="pf-v6-c-content">
1441
+ <h1>Main title</h1>
1442
+ <p>This is a full page demo.</p>
1354
1443
  </div>
1355
- <div class="pf-v6-c-card">
1356
- <div class="pf-v6-c-card__body">This is a card</div>
1357
- </div>
1358
- <div class="pf-v6-c-card">
1359
- <div class="pf-v6-c-card__body">This is a card</div>
1360
- </div>
1361
- <div class="pf-v6-c-card">
1362
- <div class="pf-v6-c-card__body">This is a card</div>
1363
- </div>
1364
- <div class="pf-v6-c-card">
1365
- <div class="pf-v6-c-card__body">This is a card</div>
1366
- </div>
1367
- <div class="pf-v6-c-card">
1368
- <div class="pf-v6-c-card__body">This is a card</div>
1369
- </div>
1370
- <div class="pf-v6-c-card">
1371
- <div class="pf-v6-c-card__body">This is a card</div>
1444
+ </div>
1445
+ </section>
1446
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1447
+ <div class="pf-v6-c-page__main-body">
1448
+ <div class="pf-v6-l-gallery pf-m-gutter">
1449
+ <div class="pf-v6-c-card">
1450
+ <div class="pf-v6-c-card__body">This is a card</div>
1451
+ </div>
1452
+ <div class="pf-v6-c-card">
1453
+ <div class="pf-v6-c-card__body">This is a card</div>
1454
+ </div>
1455
+ <div class="pf-v6-c-card">
1456
+ <div class="pf-v6-c-card__body">This is a card</div>
1457
+ </div>
1458
+ <div class="pf-v6-c-card">
1459
+ <div class="pf-v6-c-card__body">This is a card</div>
1460
+ </div>
1461
+ <div class="pf-v6-c-card">
1462
+ <div class="pf-v6-c-card__body">This is a card</div>
1463
+ </div>
1464
+ <div class="pf-v6-c-card">
1465
+ <div class="pf-v6-c-card__body">This is a card</div>
1466
+ </div>
1467
+ <div class="pf-v6-c-card">
1468
+ <div class="pf-v6-c-card__body">This is a card</div>
1469
+ </div>
1470
+ <div class="pf-v6-c-card">
1471
+ <div class="pf-v6-c-card__body">This is a card</div>
1472
+ </div>
1473
+ <div class="pf-v6-c-card">
1474
+ <div class="pf-v6-c-card__body">This is a card</div>
1475
+ </div>
1476
+ <div class="pf-v6-c-card">
1477
+ <div class="pf-v6-c-card__body">This is a card</div>
1478
+ </div>
1372
1479
  </div>
1373
1480
  </div>
1374
- </div>
1375
- </section>
1376
- </main>
1481
+ </section>
1482
+ </main>
1483
+ </div>
1377
1484
  </div>
1378
1485
 
1379
1486
  ```
@@ -1386,94 +1493,102 @@ wrapperTag: div
1386
1493
  <a
1387
1494
  class="pf-v6-c-button pf-m-primary"
1388
1495
  href="#main-content-masthead-expandable-search-expanded-example"
1389
- >Skip to content</a>
1496
+ >
1497
+ <span class="pf-v6-c-button__text">Skip to content</span>
1498
+ </a>
1390
1499
  </div>
1391
1500
  <header
1392
1501
  class="pf-v6-c-masthead"
1393
1502
  id="masthead-expandable-search-expanded-example-masthead"
1394
1503
  >
1395
- <span class="pf-v6-c-masthead__toggle">
1396
- <button
1397
- class="pf-v6-c-button pf-m-plain"
1398
- type="button"
1399
- aria-label="Global navigation"
1400
- >
1401
- <i class="fas fa-bars" aria-hidden="true"></i>
1402
- </button>
1403
- </span>
1404
1504
  <div class="pf-v6-c-masthead__main">
1405
- <a class="pf-v6-c-masthead__brand" href="#">
1406
- <svg height="40px" viewBox="0 0 679 158">
1407
- <title>PF-HorizontalLogo-Color</title>
1408
- <defs>
1409
- <linearGradient
1410
- x1="68%"
1411
- y1="2.25860997e-13%"
1412
- x2="32%"
1413
- y2="100%"
1414
- id="linearGradient-masthead-expandable-search-expanded-example-masthead"
1415
- >
1416
- <stop stop-color="#2B9AF3" offset="0%" />
1417
- <stop
1418
- stop-color="#73BCF7"
1419
- stop-opacity="0.502212631"
1420
- offset="100%"
1421
- />
1422
- </linearGradient>
1423
- </defs>
1424
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1425
- <g
1426
- transform="translate(206.000000, 45.750000)"
1427
- fill="var(--pf-t--global--text--color--regular)"
1428
- fill-rule="nonzero"
1429
- >
1430
- <path
1431
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1432
- />
1433
- <path
1434
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1435
- />
1436
- <path
1437
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1438
- />
1439
- <path
1440
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1441
- />
1442
- <path
1443
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1444
- />
1445
- <path
1446
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1447
- />
1448
- <path
1449
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1450
- />
1451
- <polygon
1452
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1453
- />
1454
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1455
- <path
1456
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1457
- />
1458
- </g>
1459
- <g transform="translate(0.000000, 0.000000)">
1460
- <path
1461
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1462
- fill="#0066CC"
1463
- />
1464
- <path
1465
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1466
- fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1467
- />
1468
- <path
1469
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1470
- fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1471
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1472
- />
1505
+ <span class="pf-v6-c-masthead__toggle">
1506
+ <button
1507
+ class="pf-v6-c-button pf-m-plain"
1508
+ type="button"
1509
+ aria-label="Global navigation"
1510
+ >
1511
+ <span class="pf-v6-c-button__icon">
1512
+ <i class="fas fa-bars" aria-hidden="true"></i>
1513
+ </span>
1514
+ </button>
1515
+ </span>
1516
+ <div class="pf-v6-c-masthead__brand">
1517
+ <a class="pf-v6-c-masthead__logo" href="#">
1518
+ <svg height="37px" viewBox="0 0 679 158">
1519
+ <title>PF-HorizontalLogo-Color</title>
1520
+ <defs>
1521
+ <linearGradient
1522
+ x1="68%"
1523
+ y1="2.25860997e-13%"
1524
+ x2="32%"
1525
+ y2="100%"
1526
+ id="linearGradient-masthead-expandable-search-expanded-example-masthead"
1527
+ >
1528
+ <stop stop-color="#2B9AF3" offset="0%" />
1529
+ <stop
1530
+ stop-color="#73BCF7"
1531
+ stop-opacity="0.502212631"
1532
+ offset="100%"
1533
+ />
1534
+ </linearGradient>
1535
+ </defs>
1536
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1537
+ <g
1538
+ transform="translate(206.000000, 45.750000)"
1539
+ fill="var(--pf-t--global--text--color--regular)"
1540
+ fill-rule="nonzero"
1541
+ >
1542
+ <path
1543
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1544
+ />
1545
+ <path
1546
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1547
+ />
1548
+ <path
1549
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1550
+ />
1551
+ <path
1552
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1553
+ />
1554
+ <path
1555
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1556
+ />
1557
+ <path
1558
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1559
+ />
1560
+ <path
1561
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1562
+ />
1563
+ <polygon
1564
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1565
+ />
1566
+ <polygon
1567
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1568
+ />
1569
+ <path
1570
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1571
+ />
1572
+ </g>
1573
+ <g transform="translate(0.000000, 0.000000)">
1574
+ <path
1575
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1576
+ fill="#0066CC"
1577
+ />
1578
+ <path
1579
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1580
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1581
+ />
1582
+ <path
1583
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1584
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1585
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1586
+ />
1587
+ </g>
1473
1588
  </g>
1474
- </g>
1475
- </svg>
1476
- </a>
1589
+ </svg>
1590
+ </a>
1591
+ </div>
1477
1592
  </div>
1478
1593
  <div class="pf-v6-c-masthead__content">
1479
1594
  <div
@@ -1509,7 +1624,9 @@ wrapperTag: div
1509
1624
  type="button"
1510
1625
  aria-label="Close"
1511
1626
  >
1512
- <i class="fas fa-times" aria-hidden="true"></i>
1627
+ <span class="pf-v6-c-button__icon">
1628
+ <i class="fas fa-times" aria-hidden="true"></i>
1629
+ </span>
1513
1630
  </button>
1514
1631
  </div>
1515
1632
  </div>
@@ -1529,114 +1646,126 @@ wrapperTag: div
1529
1646
  >
1530
1647
  <ul class="pf-v6-c-nav__list" role="list">
1531
1648
  <li class="pf-v6-c-nav__item">
1532
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1649
+ <a href="#" class="pf-v6-c-nav__link">
1650
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1651
+ </a>
1533
1652
  </li>
1534
1653
  <li class="pf-v6-c-nav__item">
1535
1654
  <a
1536
1655
  href="#"
1537
1656
  class="pf-v6-c-nav__link pf-m-current"
1538
1657
  aria-current="page"
1539
- >Policy</a>
1658
+ >
1659
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1660
+ </a>
1540
1661
  </li>
1541
1662
  <li class="pf-v6-c-nav__item">
1542
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1663
+ <a href="#" class="pf-v6-c-nav__link">
1664
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1665
+ </a>
1543
1666
  </li>
1544
1667
  <li class="pf-v6-c-nav__item">
1545
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1668
+ <a href="#" class="pf-v6-c-nav__link">
1669
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1670
+ </a>
1546
1671
  </li>
1547
1672
  <li class="pf-v6-c-nav__item">
1548
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1673
+ <a href="#" class="pf-v6-c-nav__link">
1674
+ <span class="pf-v6-c-nav__link-text">Server</span>
1675
+ </a>
1549
1676
  </li>
1550
1677
  </ul>
1551
1678
  </nav>
1552
1679
  </div>
1553
1680
  </div>
1554
- <main
1555
- class="pf-v6-c-page__main"
1556
- tabindex="-1"
1557
- id="main-content-masthead-expandable-search-expanded-example"
1558
- >
1559
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1560
- <div class="pf-v6-c-page__main-body">
1561
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1562
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1563
- <li class="pf-v6-c-breadcrumb__item">
1564
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1565
- </li>
1566
- <li class="pf-v6-c-breadcrumb__item">
1567
- <span class="pf-v6-c-breadcrumb__item-divider">
1568
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1569
- </span>
1570
-
1571
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1572
- </li>
1573
- <li class="pf-v6-c-breadcrumb__item">
1574
- <span class="pf-v6-c-breadcrumb__item-divider">
1575
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1576
- </span>
1577
-
1578
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1579
- </li>
1580
- <li class="pf-v6-c-breadcrumb__item">
1581
- <span class="pf-v6-c-breadcrumb__item-divider">
1582
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1583
- </span>
1584
-
1585
- <a
1586
- href="#"
1587
- class="pf-v6-c-breadcrumb__link pf-m-current"
1588
- aria-current="page"
1589
- >Section landing</a>
1590
- </li>
1591
- </ol>
1592
- </nav>
1593
- </div>
1594
- </section>
1595
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1596
- <div class="pf-v6-c-page__main-body">
1597
- <div class="pf-v6-c-content">
1598
- <h1>Main title</h1>
1599
- <p>This is a full page demo.</p>
1681
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1682
+ <main
1683
+ class="pf-v6-c-page__main"
1684
+ tabindex="-1"
1685
+ id="main-content-masthead-expandable-search-expanded-example"
1686
+ >
1687
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1688
+ <div class="pf-v6-c-page__main-body">
1689
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1690
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1691
+ <li class="pf-v6-c-breadcrumb__item">
1692
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1693
+ </li>
1694
+ <li class="pf-v6-c-breadcrumb__item">
1695
+ <span class="pf-v6-c-breadcrumb__item-divider">
1696
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1697
+ </span>
1698
+
1699
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1700
+ </li>
1701
+ <li class="pf-v6-c-breadcrumb__item">
1702
+ <span class="pf-v6-c-breadcrumb__item-divider">
1703
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1704
+ </span>
1705
+
1706
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1707
+ </li>
1708
+ <li class="pf-v6-c-breadcrumb__item">
1709
+ <span class="pf-v6-c-breadcrumb__item-divider">
1710
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1711
+ </span>
1712
+
1713
+ <a
1714
+ href="#"
1715
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1716
+ aria-current="page"
1717
+ >Section landing</a>
1718
+ </li>
1719
+ </ol>
1720
+ </nav>
1600
1721
  </div>
1601
- </div>
1602
- </section>
1603
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1604
- <div class="pf-v6-c-page__main-body">
1605
- <div class="pf-v6-l-gallery pf-m-gutter">
1606
- <div class="pf-v6-c-card">
1607
- <div class="pf-v6-c-card__body">This is a card</div>
1608
- </div>
1609
- <div class="pf-v6-c-card">
1610
- <div class="pf-v6-c-card__body">This is a card</div>
1611
- </div>
1612
- <div class="pf-v6-c-card">
1613
- <div class="pf-v6-c-card__body">This is a card</div>
1614
- </div>
1615
- <div class="pf-v6-c-card">
1616
- <div class="pf-v6-c-card__body">This is a card</div>
1617
- </div>
1618
- <div class="pf-v6-c-card">
1619
- <div class="pf-v6-c-card__body">This is a card</div>
1620
- </div>
1621
- <div class="pf-v6-c-card">
1622
- <div class="pf-v6-c-card__body">This is a card</div>
1623
- </div>
1624
- <div class="pf-v6-c-card">
1625
- <div class="pf-v6-c-card__body">This is a card</div>
1626
- </div>
1627
- <div class="pf-v6-c-card">
1628
- <div class="pf-v6-c-card__body">This is a card</div>
1629
- </div>
1630
- <div class="pf-v6-c-card">
1631
- <div class="pf-v6-c-card__body">This is a card</div>
1722
+ </section>
1723
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1724
+ <div class="pf-v6-c-page__main-body">
1725
+ <div class="pf-v6-c-content">
1726
+ <h1>Main title</h1>
1727
+ <p>This is a full page demo.</p>
1632
1728
  </div>
1633
- <div class="pf-v6-c-card">
1634
- <div class="pf-v6-c-card__body">This is a card</div>
1729
+ </div>
1730
+ </section>
1731
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1732
+ <div class="pf-v6-c-page__main-body">
1733
+ <div class="pf-v6-l-gallery pf-m-gutter">
1734
+ <div class="pf-v6-c-card">
1735
+ <div class="pf-v6-c-card__body">This is a card</div>
1736
+ </div>
1737
+ <div class="pf-v6-c-card">
1738
+ <div class="pf-v6-c-card__body">This is a card</div>
1739
+ </div>
1740
+ <div class="pf-v6-c-card">
1741
+ <div class="pf-v6-c-card__body">This is a card</div>
1742
+ </div>
1743
+ <div class="pf-v6-c-card">
1744
+ <div class="pf-v6-c-card__body">This is a card</div>
1745
+ </div>
1746
+ <div class="pf-v6-c-card">
1747
+ <div class="pf-v6-c-card__body">This is a card</div>
1748
+ </div>
1749
+ <div class="pf-v6-c-card">
1750
+ <div class="pf-v6-c-card__body">This is a card</div>
1751
+ </div>
1752
+ <div class="pf-v6-c-card">
1753
+ <div class="pf-v6-c-card__body">This is a card</div>
1754
+ </div>
1755
+ <div class="pf-v6-c-card">
1756
+ <div class="pf-v6-c-card__body">This is a card</div>
1757
+ </div>
1758
+ <div class="pf-v6-c-card">
1759
+ <div class="pf-v6-c-card__body">This is a card</div>
1760
+ </div>
1761
+ <div class="pf-v6-c-card">
1762
+ <div class="pf-v6-c-card__body">This is a card</div>
1763
+ </div>
1635
1764
  </div>
1636
1765
  </div>
1637
- </div>
1638
- </section>
1639
- </main>
1766
+ </section>
1767
+ </main>
1768
+ </div>
1640
1769
  </div>
1641
1770
 
1642
1771
  ```
@@ -1649,94 +1778,102 @@ wrapperTag: div
1649
1778
  <a
1650
1779
  class="pf-v6-c-button pf-m-primary"
1651
1780
  href="#main-content-masthead-advanced-with-menu-example"
1652
- >Skip to content</a>
1781
+ >
1782
+ <span class="pf-v6-c-button__text">Skip to content</span>
1783
+ </a>
1653
1784
  </div>
1654
1785
  <header
1655
1786
  class="pf-v6-c-masthead"
1656
1787
  id="masthead-advanced-with-menu-example-masthead"
1657
1788
  >
1658
- <span class="pf-v6-c-masthead__toggle">
1659
- <button
1660
- class="pf-v6-c-button pf-m-plain"
1661
- type="button"
1662
- aria-label="Global navigation"
1663
- >
1664
- <i class="fas fa-bars" aria-hidden="true"></i>
1665
- </button>
1666
- </span>
1667
1789
  <div class="pf-v6-c-masthead__main">
1668
- <a class="pf-v6-c-masthead__brand" href="#">
1669
- <svg height="40px" viewBox="0 0 679 158">
1670
- <title>PF-HorizontalLogo-Color</title>
1671
- <defs>
1672
- <linearGradient
1673
- x1="68%"
1674
- y1="2.25860997e-13%"
1675
- x2="32%"
1676
- y2="100%"
1677
- id="linearGradient-masthead-advanced-with-menu-example-masthead"
1678
- >
1679
- <stop stop-color="#2B9AF3" offset="0%" />
1680
- <stop
1681
- stop-color="#73BCF7"
1682
- stop-opacity="0.502212631"
1683
- offset="100%"
1684
- />
1685
- </linearGradient>
1686
- </defs>
1687
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1688
- <g
1689
- transform="translate(206.000000, 45.750000)"
1690
- fill="var(--pf-t--global--text--color--regular)"
1691
- fill-rule="nonzero"
1692
- >
1693
- <path
1694
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1695
- />
1696
- <path
1697
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1698
- />
1699
- <path
1700
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1701
- />
1702
- <path
1703
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1704
- />
1705
- <path
1706
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1707
- />
1708
- <path
1709
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1710
- />
1711
- <path
1712
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1713
- />
1714
- <polygon
1715
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1716
- />
1717
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1718
- <path
1719
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1720
- />
1721
- </g>
1722
- <g transform="translate(0.000000, 0.000000)">
1723
- <path
1724
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1725
- fill="#0066CC"
1726
- />
1727
- <path
1728
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1729
- fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
1730
- />
1731
- <path
1732
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1733
- fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
1734
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1735
- />
1790
+ <span class="pf-v6-c-masthead__toggle">
1791
+ <button
1792
+ class="pf-v6-c-button pf-m-plain"
1793
+ type="button"
1794
+ aria-label="Global navigation"
1795
+ >
1796
+ <span class="pf-v6-c-button__icon">
1797
+ <i class="fas fa-bars" aria-hidden="true"></i>
1798
+ </span>
1799
+ </button>
1800
+ </span>
1801
+ <div class="pf-v6-c-masthead__brand">
1802
+ <a class="pf-v6-c-masthead__logo" href="#">
1803
+ <svg height="37px" viewBox="0 0 679 158">
1804
+ <title>PF-HorizontalLogo-Color</title>
1805
+ <defs>
1806
+ <linearGradient
1807
+ x1="68%"
1808
+ y1="2.25860997e-13%"
1809
+ x2="32%"
1810
+ y2="100%"
1811
+ id="linearGradient-masthead-advanced-with-menu-example-masthead"
1812
+ >
1813
+ <stop stop-color="#2B9AF3" offset="0%" />
1814
+ <stop
1815
+ stop-color="#73BCF7"
1816
+ stop-opacity="0.502212631"
1817
+ offset="100%"
1818
+ />
1819
+ </linearGradient>
1820
+ </defs>
1821
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1822
+ <g
1823
+ transform="translate(206.000000, 45.750000)"
1824
+ fill="var(--pf-t--global--text--color--regular)"
1825
+ fill-rule="nonzero"
1826
+ >
1827
+ <path
1828
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1829
+ />
1830
+ <path
1831
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1832
+ />
1833
+ <path
1834
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1835
+ />
1836
+ <path
1837
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1838
+ />
1839
+ <path
1840
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1841
+ />
1842
+ <path
1843
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1844
+ />
1845
+ <path
1846
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1847
+ />
1848
+ <polygon
1849
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1850
+ />
1851
+ <polygon
1852
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1853
+ />
1854
+ <path
1855
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1856
+ />
1857
+ </g>
1858
+ <g transform="translate(0.000000, 0.000000)">
1859
+ <path
1860
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1861
+ fill="#0066CC"
1862
+ />
1863
+ <path
1864
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1865
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
1866
+ />
1867
+ <path
1868
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1869
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
1870
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1871
+ />
1872
+ </g>
1736
1873
  </g>
1737
- </g>
1738
- </svg>
1739
- </a>
1874
+ </svg>
1875
+ </a>
1876
+ </div>
1740
1877
  </div>
1741
1878
  <div class="pf-v6-c-masthead__content">
1742
1879
  <div
@@ -1745,41 +1882,11 @@ wrapperTag: div
1745
1882
  >
1746
1883
  <div class="pf-v6-c-toolbar__content">
1747
1884
  <div class="pf-v6-c-toolbar__content-section">
1748
- <div class="pf-v6-c-toolbar__item">
1749
- <button
1750
- class="pf-v6-c-menu-toggle"
1751
- type="button"
1752
- aria-expanded="false"
1753
- >
1754
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1755
- <span class="pf-v6-c-menu-toggle__controls">
1756
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1757
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1758
- </span>
1759
- </span>
1760
- </button>
1761
- </div>
1762
-
1763
- <div class="pf-v6-c-toolbar__item">
1764
- <button
1765
- class="pf-v6-c-menu-toggle"
1766
- type="button"
1767
- aria-expanded="false"
1768
- >
1769
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1770
- <span class="pf-v6-c-menu-toggle__controls">
1771
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1772
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1773
- </span>
1774
- </span>
1775
- </button>
1776
- </div>
1777
-
1778
1885
  <div
1779
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1886
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
1780
1887
  >
1781
1888
  <div
1782
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1889
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1783
1890
  >
1784
1891
  <div class="pf-v6-c-toolbar__item">
1785
1892
  <button
@@ -1818,6 +1925,7 @@ wrapperTag: div
1818
1925
  </button>
1819
1926
  </div>
1820
1927
  </div>
1928
+
1821
1929
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1822
1930
  <button
1823
1931
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1845,114 +1953,126 @@ wrapperTag: div
1845
1953
  >
1846
1954
  <ul class="pf-v6-c-nav__list" role="list">
1847
1955
  <li class="pf-v6-c-nav__item">
1848
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1956
+ <a href="#" class="pf-v6-c-nav__link">
1957
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1958
+ </a>
1849
1959
  </li>
1850
1960
  <li class="pf-v6-c-nav__item">
1851
1961
  <a
1852
1962
  href="#"
1853
1963
  class="pf-v6-c-nav__link pf-m-current"
1854
1964
  aria-current="page"
1855
- >Policy</a>
1965
+ >
1966
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1967
+ </a>
1856
1968
  </li>
1857
1969
  <li class="pf-v6-c-nav__item">
1858
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1970
+ <a href="#" class="pf-v6-c-nav__link">
1971
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1972
+ </a>
1859
1973
  </li>
1860
1974
  <li class="pf-v6-c-nav__item">
1861
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1975
+ <a href="#" class="pf-v6-c-nav__link">
1976
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1977
+ </a>
1862
1978
  </li>
1863
1979
  <li class="pf-v6-c-nav__item">
1864
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1980
+ <a href="#" class="pf-v6-c-nav__link">
1981
+ <span class="pf-v6-c-nav__link-text">Server</span>
1982
+ </a>
1865
1983
  </li>
1866
1984
  </ul>
1867
1985
  </nav>
1868
1986
  </div>
1869
1987
  </div>
1870
- <main
1871
- class="pf-v6-c-page__main"
1872
- tabindex="-1"
1873
- id="main-content-masthead-advanced-with-menu-example"
1874
- >
1875
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1876
- <div class="pf-v6-c-page__main-body">
1877
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1878
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1879
- <li class="pf-v6-c-breadcrumb__item">
1880
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1881
- </li>
1882
- <li class="pf-v6-c-breadcrumb__item">
1883
- <span class="pf-v6-c-breadcrumb__item-divider">
1884
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1885
- </span>
1886
-
1887
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1888
- </li>
1889
- <li class="pf-v6-c-breadcrumb__item">
1890
- <span class="pf-v6-c-breadcrumb__item-divider">
1891
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1892
- </span>
1893
-
1894
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1895
- </li>
1896
- <li class="pf-v6-c-breadcrumb__item">
1897
- <span class="pf-v6-c-breadcrumb__item-divider">
1898
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1899
- </span>
1900
-
1901
- <a
1902
- href="#"
1903
- class="pf-v6-c-breadcrumb__link pf-m-current"
1904
- aria-current="page"
1905
- >Section landing</a>
1906
- </li>
1907
- </ol>
1908
- </nav>
1909
- </div>
1910
- </section>
1911
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1912
- <div class="pf-v6-c-page__main-body">
1913
- <div class="pf-v6-c-content">
1914
- <h1>Main title</h1>
1915
- <p>This is a full page demo.</p>
1988
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1989
+ <main
1990
+ class="pf-v6-c-page__main"
1991
+ tabindex="-1"
1992
+ id="main-content-masthead-advanced-with-menu-example"
1993
+ >
1994
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1995
+ <div class="pf-v6-c-page__main-body">
1996
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1997
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1998
+ <li class="pf-v6-c-breadcrumb__item">
1999
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2000
+ </li>
2001
+ <li class="pf-v6-c-breadcrumb__item">
2002
+ <span class="pf-v6-c-breadcrumb__item-divider">
2003
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2004
+ </span>
2005
+
2006
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2007
+ </li>
2008
+ <li class="pf-v6-c-breadcrumb__item">
2009
+ <span class="pf-v6-c-breadcrumb__item-divider">
2010
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2011
+ </span>
2012
+
2013
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2014
+ </li>
2015
+ <li class="pf-v6-c-breadcrumb__item">
2016
+ <span class="pf-v6-c-breadcrumb__item-divider">
2017
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2018
+ </span>
2019
+
2020
+ <a
2021
+ href="#"
2022
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2023
+ aria-current="page"
2024
+ >Section landing</a>
2025
+ </li>
2026
+ </ol>
2027
+ </nav>
1916
2028
  </div>
1917
- </div>
1918
- </section>
1919
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1920
- <div class="pf-v6-c-page__main-body">
1921
- <div class="pf-v6-l-gallery pf-m-gutter">
1922
- <div class="pf-v6-c-card">
1923
- <div class="pf-v6-c-card__body">This is a card</div>
1924
- </div>
1925
- <div class="pf-v6-c-card">
1926
- <div class="pf-v6-c-card__body">This is a card</div>
1927
- </div>
1928
- <div class="pf-v6-c-card">
1929
- <div class="pf-v6-c-card__body">This is a card</div>
1930
- </div>
1931
- <div class="pf-v6-c-card">
1932
- <div class="pf-v6-c-card__body">This is a card</div>
1933
- </div>
1934
- <div class="pf-v6-c-card">
1935
- <div class="pf-v6-c-card__body">This is a card</div>
1936
- </div>
1937
- <div class="pf-v6-c-card">
1938
- <div class="pf-v6-c-card__body">This is a card</div>
1939
- </div>
1940
- <div class="pf-v6-c-card">
1941
- <div class="pf-v6-c-card__body">This is a card</div>
2029
+ </section>
2030
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2031
+ <div class="pf-v6-c-page__main-body">
2032
+ <div class="pf-v6-c-content">
2033
+ <h1>Main title</h1>
2034
+ <p>This is a full page demo.</p>
1942
2035
  </div>
1943
- <div class="pf-v6-c-card">
1944
- <div class="pf-v6-c-card__body">This is a card</div>
1945
- </div>
1946
- <div class="pf-v6-c-card">
1947
- <div class="pf-v6-c-card__body">This is a card</div>
1948
- </div>
1949
- <div class="pf-v6-c-card">
1950
- <div class="pf-v6-c-card__body">This is a card</div>
2036
+ </div>
2037
+ </section>
2038
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2039
+ <div class="pf-v6-c-page__main-body">
2040
+ <div class="pf-v6-l-gallery pf-m-gutter">
2041
+ <div class="pf-v6-c-card">
2042
+ <div class="pf-v6-c-card__body">This is a card</div>
2043
+ </div>
2044
+ <div class="pf-v6-c-card">
2045
+ <div class="pf-v6-c-card__body">This is a card</div>
2046
+ </div>
2047
+ <div class="pf-v6-c-card">
2048
+ <div class="pf-v6-c-card__body">This is a card</div>
2049
+ </div>
2050
+ <div class="pf-v6-c-card">
2051
+ <div class="pf-v6-c-card__body">This is a card</div>
2052
+ </div>
2053
+ <div class="pf-v6-c-card">
2054
+ <div class="pf-v6-c-card__body">This is a card</div>
2055
+ </div>
2056
+ <div class="pf-v6-c-card">
2057
+ <div class="pf-v6-c-card__body">This is a card</div>
2058
+ </div>
2059
+ <div class="pf-v6-c-card">
2060
+ <div class="pf-v6-c-card__body">This is a card</div>
2061
+ </div>
2062
+ <div class="pf-v6-c-card">
2063
+ <div class="pf-v6-c-card__body">This is a card</div>
2064
+ </div>
2065
+ <div class="pf-v6-c-card">
2066
+ <div class="pf-v6-c-card__body">This is a card</div>
2067
+ </div>
2068
+ <div class="pf-v6-c-card">
2069
+ <div class="pf-v6-c-card__body">This is a card</div>
2070
+ </div>
1951
2071
  </div>
1952
2072
  </div>
1953
- </div>
1954
- </section>
1955
- </main>
2073
+ </section>
2074
+ </main>
2075
+ </div>
1956
2076
  </div>
1957
2077
 
1958
2078
  ```
@@ -1965,82 +2085,88 @@ wrapperTag: div
1965
2085
  <a
1966
2086
  class="pf-v6-c-button pf-m-primary"
1967
2087
  href="#main-content-masthead-horizontal-nav"
1968
- >Skip to content</a>
2088
+ >
2089
+ <span class="pf-v6-c-button__text">Skip to content</span>
2090
+ </a>
1969
2091
  </div>
1970
2092
  <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-masthead">
1971
2093
  <div class="pf-v6-c-masthead__main">
1972
- <a class="pf-v6-c-masthead__brand" href="#">
1973
- <svg height="40px" viewBox="0 0 679 158">
1974
- <title>PF-HorizontalLogo-Color</title>
1975
- <defs>
1976
- <linearGradient
1977
- x1="68%"
1978
- y1="2.25860997e-13%"
1979
- x2="32%"
1980
- y2="100%"
1981
- id="linearGradient-masthead-horizontal-nav-masthead"
1982
- >
1983
- <stop stop-color="#2B9AF3" offset="0%" />
1984
- <stop
1985
- stop-color="#73BCF7"
1986
- stop-opacity="0.502212631"
1987
- offset="100%"
1988
- />
1989
- </linearGradient>
1990
- </defs>
1991
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1992
- <g
1993
- transform="translate(206.000000, 45.750000)"
1994
- fill="var(--pf-t--global--text--color--regular)"
1995
- fill-rule="nonzero"
1996
- >
1997
- <path
1998
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1999
- />
2000
- <path
2001
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2002
- />
2003
- <path
2004
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2005
- />
2006
- <path
2007
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2008
- />
2009
- <path
2010
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2011
- />
2012
- <path
2013
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2014
- />
2015
- <path
2016
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2017
- />
2018
- <polygon
2019
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2020
- />
2021
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2022
- <path
2023
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2024
- />
2025
- </g>
2026
- <g transform="translate(0.000000, 0.000000)">
2027
- <path
2028
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2029
- fill="#0066CC"
2030
- />
2031
- <path
2032
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2033
- fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2034
- />
2035
- <path
2036
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2037
- fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2038
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2039
- />
2094
+ <div class="pf-v6-c-masthead__brand">
2095
+ <a class="pf-v6-c-masthead__logo" href="#">
2096
+ <svg height="37px" viewBox="0 0 679 158">
2097
+ <title>PF-HorizontalLogo-Color</title>
2098
+ <defs>
2099
+ <linearGradient
2100
+ x1="68%"
2101
+ y1="2.25860997e-13%"
2102
+ x2="32%"
2103
+ y2="100%"
2104
+ id="linearGradient-masthead-horizontal-nav-masthead"
2105
+ >
2106
+ <stop stop-color="#2B9AF3" offset="0%" />
2107
+ <stop
2108
+ stop-color="#73BCF7"
2109
+ stop-opacity="0.502212631"
2110
+ offset="100%"
2111
+ />
2112
+ </linearGradient>
2113
+ </defs>
2114
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2115
+ <g
2116
+ transform="translate(206.000000, 45.750000)"
2117
+ fill="var(--pf-t--global--text--color--regular)"
2118
+ fill-rule="nonzero"
2119
+ >
2120
+ <path
2121
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2122
+ />
2123
+ <path
2124
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2125
+ />
2126
+ <path
2127
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2128
+ />
2129
+ <path
2130
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2131
+ />
2132
+ <path
2133
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2134
+ />
2135
+ <path
2136
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2137
+ />
2138
+ <path
2139
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2140
+ />
2141
+ <polygon
2142
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2143
+ />
2144
+ <polygon
2145
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2146
+ />
2147
+ <path
2148
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2149
+ />
2150
+ </g>
2151
+ <g transform="translate(0.000000, 0.000000)">
2152
+ <path
2153
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2154
+ fill="#0066CC"
2155
+ />
2156
+ <path
2157
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2158
+ fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2159
+ />
2160
+ <path
2161
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2162
+ fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2163
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2164
+ />
2165
+ </g>
2040
2166
  </g>
2041
- </g>
2042
- </svg>
2043
- </a>
2167
+ </svg>
2168
+ </a>
2169
+ </div>
2044
2170
  </div>
2045
2171
  <div class="pf-v6-c-masthead__content">
2046
2172
  <div
@@ -2049,39 +2175,9 @@ wrapperTag: div
2049
2175
  >
2050
2176
  <div class="pf-v6-c-toolbar__content">
2051
2177
  <div class="pf-v6-c-toolbar__content-section">
2052
- <div class="pf-v6-c-toolbar__item">
2053
- <button
2054
- class="pf-v6-c-menu-toggle"
2055
- type="button"
2056
- aria-expanded="false"
2057
- >
2058
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
2059
- <span class="pf-v6-c-menu-toggle__controls">
2060
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2061
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2062
- </span>
2063
- </span>
2064
- </button>
2065
- </div>
2066
-
2067
- <div class="pf-v6-c-toolbar__item">
2068
- <button
2069
- class="pf-v6-c-menu-toggle"
2070
- type="button"
2071
- aria-expanded="false"
2072
- >
2073
- <span class="pf-v6-c-menu-toggle__text">Services</span>
2074
- <span class="pf-v6-c-menu-toggle__controls">
2075
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2076
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2077
- </span>
2078
- </span>
2079
- </button>
2080
- </div>
2081
-
2082
2178
  <div
2083
2179
  class="pf-v6-c-toolbar__item pf-m-overflow-container"
2084
- style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
2180
+ style="--pf-v6-c-toolbar__item--MinWidth: 18ch;"
2085
2181
  >
2086
2182
  <nav
2087
2183
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
@@ -2094,28 +2190,40 @@ wrapperTag: div
2094
2190
  type="button"
2095
2191
  aria-label="Scroll start"
2096
2192
  >
2097
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2193
+ <span class="pf-v6-c-button__icon">
2194
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2195
+ </span>
2098
2196
  </button>
2099
2197
  </div>
2100
2198
  <ul class="pf-v6-c-nav__list" role="list">
2101
2199
  <li class="pf-v6-c-nav__item">
2102
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
2200
+ <a href="#" class="pf-v6-c-nav__link">
2201
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
2202
+ </a>
2103
2203
  </li>
2104
2204
  <li class="pf-v6-c-nav__item">
2105
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
2205
+ <a href="#" class="pf-v6-c-nav__link">
2206
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
2207
+ </a>
2106
2208
  </li>
2107
2209
  <li class="pf-v6-c-nav__item">
2108
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
2210
+ <a href="#" class="pf-v6-c-nav__link">
2211
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
2212
+ </a>
2109
2213
  </li>
2110
2214
  <li class="pf-v6-c-nav__item">
2111
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
2215
+ <a href="#" class="pf-v6-c-nav__link">
2216
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
2217
+ </a>
2112
2218
  </li>
2113
2219
  <li class="pf-v6-c-nav__item">
2114
2220
  <a
2115
2221
  href="#"
2116
2222
  class="pf-v6-c-nav__link pf-m-current"
2117
2223
  aria-current="page"
2118
- >Horizontal nav item 5</a>
2224
+ >
2225
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
2226
+ </a>
2119
2227
  </li>
2120
2228
  </ul>
2121
2229
  <div class="pf-v6-c-nav__scroll-button">
@@ -2124,16 +2232,19 @@ wrapperTag: div
2124
2232
  type="button"
2125
2233
  aria-label="Scroll end"
2126
2234
  >
2127
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2235
+ <span class="pf-v6-c-button__icon">
2236
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2237
+ </span>
2128
2238
  </button>
2129
2239
  </div>
2130
2240
  </nav>
2131
2241
  </div>
2242
+
2132
2243
  <div
2133
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2244
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
2134
2245
  >
2135
2246
  <div
2136
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2247
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
2137
2248
  >
2138
2249
  <div class="pf-v6-c-toolbar__item">
2139
2250
  <button
@@ -2172,6 +2283,7 @@ wrapperTag: div
2172
2283
  </button>
2173
2284
  </div>
2174
2285
  </div>
2286
+
2175
2287
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2176
2288
  <button
2177
2289
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -2190,92 +2302,94 @@ wrapperTag: div
2190
2302
  </div>
2191
2303
  </div>
2192
2304
  </header>
2193
- <main
2194
- class="pf-v6-c-page__main"
2195
- tabindex="-1"
2196
- id="main-content-masthead-horizontal-nav"
2197
- >
2198
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2199
- <div class="pf-v6-c-page__main-body">
2200
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2201
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2202
- <li class="pf-v6-c-breadcrumb__item">
2203
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2204
- </li>
2205
- <li class="pf-v6-c-breadcrumb__item">
2206
- <span class="pf-v6-c-breadcrumb__item-divider">
2207
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2208
- </span>
2209
-
2210
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2211
- </li>
2212
- <li class="pf-v6-c-breadcrumb__item">
2213
- <span class="pf-v6-c-breadcrumb__item-divider">
2214
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2215
- </span>
2216
-
2217
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2218
- </li>
2219
- <li class="pf-v6-c-breadcrumb__item">
2220
- <span class="pf-v6-c-breadcrumb__item-divider">
2221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2222
- </span>
2223
-
2224
- <a
2225
- href="#"
2226
- class="pf-v6-c-breadcrumb__link pf-m-current"
2227
- aria-current="page"
2228
- >Section landing</a>
2229
- </li>
2230
- </ol>
2231
- </nav>
2232
- </div>
2233
- </section>
2234
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2235
- <div class="pf-v6-c-page__main-body">
2236
- <div class="pf-v6-c-content">
2237
- <h1>Main title</h1>
2238
- <p>This is a full page demo.</p>
2305
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2306
+ <main
2307
+ class="pf-v6-c-page__main"
2308
+ tabindex="-1"
2309
+ id="main-content-masthead-horizontal-nav"
2310
+ >
2311
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2312
+ <div class="pf-v6-c-page__main-body">
2313
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2314
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2315
+ <li class="pf-v6-c-breadcrumb__item">
2316
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2317
+ </li>
2318
+ <li class="pf-v6-c-breadcrumb__item">
2319
+ <span class="pf-v6-c-breadcrumb__item-divider">
2320
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2321
+ </span>
2322
+
2323
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2324
+ </li>
2325
+ <li class="pf-v6-c-breadcrumb__item">
2326
+ <span class="pf-v6-c-breadcrumb__item-divider">
2327
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2328
+ </span>
2329
+
2330
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2331
+ </li>
2332
+ <li class="pf-v6-c-breadcrumb__item">
2333
+ <span class="pf-v6-c-breadcrumb__item-divider">
2334
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2335
+ </span>
2336
+
2337
+ <a
2338
+ href="#"
2339
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2340
+ aria-current="page"
2341
+ >Section landing</a>
2342
+ </li>
2343
+ </ol>
2344
+ </nav>
2239
2345
  </div>
2240
- </div>
2241
- </section>
2242
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2243
- <div class="pf-v6-c-page__main-body">
2244
- <div class="pf-v6-l-gallery pf-m-gutter">
2245
- <div class="pf-v6-c-card">
2246
- <div class="pf-v6-c-card__body">This is a card</div>
2247
- </div>
2248
- <div class="pf-v6-c-card">
2249
- <div class="pf-v6-c-card__body">This is a card</div>
2346
+ </section>
2347
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2348
+ <div class="pf-v6-c-page__main-body">
2349
+ <div class="pf-v6-c-content">
2350
+ <h1>Main title</h1>
2351
+ <p>This is a full page demo.</p>
2250
2352
  </div>
2251
- <div class="pf-v6-c-card">
2252
- <div class="pf-v6-c-card__body">This is a card</div>
2253
- </div>
2254
- <div class="pf-v6-c-card">
2255
- <div class="pf-v6-c-card__body">This is a card</div>
2256
- </div>
2257
- <div class="pf-v6-c-card">
2258
- <div class="pf-v6-c-card__body">This is a card</div>
2259
- </div>
2260
- <div class="pf-v6-c-card">
2261
- <div class="pf-v6-c-card__body">This is a card</div>
2262
- </div>
2263
- <div class="pf-v6-c-card">
2264
- <div class="pf-v6-c-card__body">This is a card</div>
2265
- </div>
2266
- <div class="pf-v6-c-card">
2267
- <div class="pf-v6-c-card__body">This is a card</div>
2268
- </div>
2269
- <div class="pf-v6-c-card">
2270
- <div class="pf-v6-c-card__body">This is a card</div>
2271
- </div>
2272
- <div class="pf-v6-c-card">
2273
- <div class="pf-v6-c-card__body">This is a card</div>
2353
+ </div>
2354
+ </section>
2355
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2356
+ <div class="pf-v6-c-page__main-body">
2357
+ <div class="pf-v6-l-gallery pf-m-gutter">
2358
+ <div class="pf-v6-c-card">
2359
+ <div class="pf-v6-c-card__body">This is a card</div>
2360
+ </div>
2361
+ <div class="pf-v6-c-card">
2362
+ <div class="pf-v6-c-card__body">This is a card</div>
2363
+ </div>
2364
+ <div class="pf-v6-c-card">
2365
+ <div class="pf-v6-c-card__body">This is a card</div>
2366
+ </div>
2367
+ <div class="pf-v6-c-card">
2368
+ <div class="pf-v6-c-card__body">This is a card</div>
2369
+ </div>
2370
+ <div class="pf-v6-c-card">
2371
+ <div class="pf-v6-c-card__body">This is a card</div>
2372
+ </div>
2373
+ <div class="pf-v6-c-card">
2374
+ <div class="pf-v6-c-card__body">This is a card</div>
2375
+ </div>
2376
+ <div class="pf-v6-c-card">
2377
+ <div class="pf-v6-c-card__body">This is a card</div>
2378
+ </div>
2379
+ <div class="pf-v6-c-card">
2380
+ <div class="pf-v6-c-card__body">This is a card</div>
2381
+ </div>
2382
+ <div class="pf-v6-c-card">
2383
+ <div class="pf-v6-c-card__body">This is a card</div>
2384
+ </div>
2385
+ <div class="pf-v6-c-card">
2386
+ <div class="pf-v6-c-card__body">This is a card</div>
2387
+ </div>
2274
2388
  </div>
2275
2389
  </div>
2276
- </div>
2277
- </section>
2278
- </main>
2390
+ </section>
2391
+ </main>
2392
+ </div>
2279
2393
  </div>
2280
2394
 
2281
2395
  ```
@@ -2293,94 +2407,102 @@ wrapperTag: div
2293
2407
  <a
2294
2408
  class="pf-v6-c-button pf-m-primary"
2295
2409
  href="#main-content-masthead-toggle-group-filters-expanded-mobile-example"
2296
- >Skip to content</a>
2410
+ >
2411
+ <span class="pf-v6-c-button__text">Skip to content</span>
2412
+ </a>
2297
2413
  </div>
2298
2414
  <header
2299
2415
  class="pf-v6-c-masthead"
2300
2416
  id="masthead-toggle-group-filters-expanded-mobile-example-masthead"
2301
2417
  >
2302
- <span class="pf-v6-c-masthead__toggle">
2303
- <button
2304
- class="pf-v6-c-button pf-m-plain"
2305
- type="button"
2306
- aria-label="Global navigation"
2307
- >
2308
- <i class="fas fa-bars" aria-hidden="true"></i>
2309
- </button>
2310
- </span>
2311
2418
  <div class="pf-v6-c-masthead__main">
2312
- <a class="pf-v6-c-masthead__brand" href="#">
2313
- <svg height="40px" viewBox="0 0 679 158">
2314
- <title>PF-HorizontalLogo-Color</title>
2315
- <defs>
2316
- <linearGradient
2317
- x1="68%"
2318
- y1="2.25860997e-13%"
2319
- x2="32%"
2320
- y2="100%"
2321
- id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead"
2322
- >
2323
- <stop stop-color="#2B9AF3" offset="0%" />
2324
- <stop
2325
- stop-color="#73BCF7"
2326
- stop-opacity="0.502212631"
2327
- offset="100%"
2328
- />
2329
- </linearGradient>
2330
- </defs>
2331
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2332
- <g
2333
- transform="translate(206.000000, 45.750000)"
2334
- fill="var(--pf-t--global--text--color--regular)"
2335
- fill-rule="nonzero"
2336
- >
2337
- <path
2338
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2339
- />
2340
- <path
2341
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2342
- />
2343
- <path
2344
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2345
- />
2346
- <path
2347
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2348
- />
2349
- <path
2350
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2351
- />
2352
- <path
2353
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2354
- />
2355
- <path
2356
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2357
- />
2358
- <polygon
2359
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2360
- />
2361
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2362
- <path
2363
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2364
- />
2365
- </g>
2366
- <g transform="translate(0.000000, 0.000000)">
2367
- <path
2368
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2369
- fill="#0066CC"
2370
- />
2371
- <path
2372
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2373
- fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2374
- />
2375
- <path
2376
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2377
- fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2378
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2379
- />
2419
+ <span class="pf-v6-c-masthead__toggle">
2420
+ <button
2421
+ class="pf-v6-c-button pf-m-plain"
2422
+ type="button"
2423
+ aria-label="Global navigation"
2424
+ >
2425
+ <span class="pf-v6-c-button__icon">
2426
+ <i class="fas fa-bars" aria-hidden="true"></i>
2427
+ </span>
2428
+ </button>
2429
+ </span>
2430
+ <div class="pf-v6-c-masthead__brand">
2431
+ <a class="pf-v6-c-masthead__logo" href="#">
2432
+ <svg height="37px" viewBox="0 0 679 158">
2433
+ <title>PF-HorizontalLogo-Color</title>
2434
+ <defs>
2435
+ <linearGradient
2436
+ x1="68%"
2437
+ y1="2.25860997e-13%"
2438
+ x2="32%"
2439
+ y2="100%"
2440
+ id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead"
2441
+ >
2442
+ <stop stop-color="#2B9AF3" offset="0%" />
2443
+ <stop
2444
+ stop-color="#73BCF7"
2445
+ stop-opacity="0.502212631"
2446
+ offset="100%"
2447
+ />
2448
+ </linearGradient>
2449
+ </defs>
2450
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2451
+ <g
2452
+ transform="translate(206.000000, 45.750000)"
2453
+ fill="var(--pf-t--global--text--color--regular)"
2454
+ fill-rule="nonzero"
2455
+ >
2456
+ <path
2457
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
2458
+ />
2459
+ <path
2460
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
2461
+ />
2462
+ <path
2463
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
2464
+ />
2465
+ <path
2466
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
2467
+ />
2468
+ <path
2469
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
2470
+ />
2471
+ <path
2472
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
2473
+ />
2474
+ <path
2475
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
2476
+ />
2477
+ <polygon
2478
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
2479
+ />
2480
+ <polygon
2481
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2482
+ />
2483
+ <path
2484
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2485
+ />
2486
+ </g>
2487
+ <g transform="translate(0.000000, 0.000000)">
2488
+ <path
2489
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2490
+ fill="#0066CC"
2491
+ />
2492
+ <path
2493
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2494
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2495
+ />
2496
+ <path
2497
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2498
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2499
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2500
+ />
2501
+ </g>
2380
2502
  </g>
2381
- </g>
2382
- </svg>
2383
- </a>
2503
+ </svg>
2504
+ </a>
2505
+ </div>
2384
2506
  </div>
2385
2507
  <div class="pf-v6-c-masthead__content">
2386
2508
  <div
@@ -2392,11 +2514,11 @@ wrapperTag: div
2392
2514
  <div
2393
2515
  class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-end"
2394
2516
  >
2395
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
2517
+ <div class="pf-v6-c-toolbar__toggle">
2396
2518
  <button
2397
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
2519
+ class="pf-v6-c-menu-toggle pf-m-plain"
2398
2520
  type="button"
2399
- aria-expanded="true"
2521
+ aria-expanded="false"
2400
2522
  aria-label="Show filters"
2401
2523
  aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
2402
2524
  >
@@ -2406,6 +2528,7 @@ wrapperTag: div
2406
2528
  </button>
2407
2529
  </div>
2408
2530
  </div>
2531
+
2409
2532
  <div class="pf-v6-c-toolbar__item">
2410
2533
  <button
2411
2534
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -2419,6 +2542,7 @@ wrapperTag: div
2419
2542
  </button>
2420
2543
  </div>
2421
2544
  </div>
2545
+
2422
2546
  <div
2423
2547
  class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
2424
2548
  id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
@@ -2481,114 +2605,126 @@ wrapperTag: div
2481
2605
  >
2482
2606
  <ul class="pf-v6-c-nav__list" role="list">
2483
2607
  <li class="pf-v6-c-nav__item">
2484
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
2608
+ <a href="#" class="pf-v6-c-nav__link">
2609
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2610
+ </a>
2485
2611
  </li>
2486
2612
  <li class="pf-v6-c-nav__item">
2487
2613
  <a
2488
2614
  href="#"
2489
2615
  class="pf-v6-c-nav__link pf-m-current"
2490
2616
  aria-current="page"
2491
- >Policy</a>
2617
+ >
2618
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2619
+ </a>
2492
2620
  </li>
2493
2621
  <li class="pf-v6-c-nav__item">
2494
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
2622
+ <a href="#" class="pf-v6-c-nav__link">
2623
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2624
+ </a>
2495
2625
  </li>
2496
2626
  <li class="pf-v6-c-nav__item">
2497
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
2627
+ <a href="#" class="pf-v6-c-nav__link">
2628
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2629
+ </a>
2498
2630
  </li>
2499
2631
  <li class="pf-v6-c-nav__item">
2500
- <a href="#" class="pf-v6-c-nav__link">Server</a>
2632
+ <a href="#" class="pf-v6-c-nav__link">
2633
+ <span class="pf-v6-c-nav__link-text">Server</span>
2634
+ </a>
2501
2635
  </li>
2502
2636
  </ul>
2503
2637
  </nav>
2504
2638
  </div>
2505
2639
  </div>
2506
- <main
2507
- class="pf-v6-c-page__main"
2508
- tabindex="-1"
2509
- id="main-content-masthead-toggle-group-filters-expanded-mobile-example"
2510
- >
2511
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2512
- <div class="pf-v6-c-page__main-body">
2513
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2514
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2515
- <li class="pf-v6-c-breadcrumb__item">
2516
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2517
- </li>
2518
- <li class="pf-v6-c-breadcrumb__item">
2519
- <span class="pf-v6-c-breadcrumb__item-divider">
2520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2521
- </span>
2522
-
2523
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2524
- </li>
2525
- <li class="pf-v6-c-breadcrumb__item">
2526
- <span class="pf-v6-c-breadcrumb__item-divider">
2527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2528
- </span>
2529
-
2530
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2531
- </li>
2532
- <li class="pf-v6-c-breadcrumb__item">
2533
- <span class="pf-v6-c-breadcrumb__item-divider">
2534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2535
- </span>
2536
-
2537
- <a
2538
- href="#"
2539
- class="pf-v6-c-breadcrumb__link pf-m-current"
2540
- aria-current="page"
2541
- >Section landing</a>
2542
- </li>
2543
- </ol>
2544
- </nav>
2545
- </div>
2546
- </section>
2547
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2548
- <div class="pf-v6-c-page__main-body">
2549
- <div class="pf-v6-c-content">
2550
- <h1>Main title</h1>
2551
- <p>This is a full page demo.</p>
2640
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2641
+ <main
2642
+ class="pf-v6-c-page__main"
2643
+ tabindex="-1"
2644
+ id="main-content-masthead-toggle-group-filters-expanded-mobile-example"
2645
+ >
2646
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2647
+ <div class="pf-v6-c-page__main-body">
2648
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2649
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2650
+ <li class="pf-v6-c-breadcrumb__item">
2651
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2652
+ </li>
2653
+ <li class="pf-v6-c-breadcrumb__item">
2654
+ <span class="pf-v6-c-breadcrumb__item-divider">
2655
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2656
+ </span>
2657
+
2658
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2659
+ </li>
2660
+ <li class="pf-v6-c-breadcrumb__item">
2661
+ <span class="pf-v6-c-breadcrumb__item-divider">
2662
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2663
+ </span>
2664
+
2665
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2666
+ </li>
2667
+ <li class="pf-v6-c-breadcrumb__item">
2668
+ <span class="pf-v6-c-breadcrumb__item-divider">
2669
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2670
+ </span>
2671
+
2672
+ <a
2673
+ href="#"
2674
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2675
+ aria-current="page"
2676
+ >Section landing</a>
2677
+ </li>
2678
+ </ol>
2679
+ </nav>
2552
2680
  </div>
2553
- </div>
2554
- </section>
2555
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2556
- <div class="pf-v6-c-page__main-body">
2557
- <div class="pf-v6-l-gallery pf-m-gutter">
2558
- <div class="pf-v6-c-card">
2559
- <div class="pf-v6-c-card__body">This is a card</div>
2560
- </div>
2561
- <div class="pf-v6-c-card">
2562
- <div class="pf-v6-c-card__body">This is a card</div>
2563
- </div>
2564
- <div class="pf-v6-c-card">
2565
- <div class="pf-v6-c-card__body">This is a card</div>
2566
- </div>
2567
- <div class="pf-v6-c-card">
2568
- <div class="pf-v6-c-card__body">This is a card</div>
2681
+ </section>
2682
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2683
+ <div class="pf-v6-c-page__main-body">
2684
+ <div class="pf-v6-c-content">
2685
+ <h1>Main title</h1>
2686
+ <p>This is a full page demo.</p>
2569
2687
  </div>
2570
- <div class="pf-v6-c-card">
2571
- <div class="pf-v6-c-card__body">This is a card</div>
2572
- </div>
2573
- <div class="pf-v6-c-card">
2574
- <div class="pf-v6-c-card__body">This is a card</div>
2575
- </div>
2576
- <div class="pf-v6-c-card">
2577
- <div class="pf-v6-c-card__body">This is a card</div>
2578
- </div>
2579
- <div class="pf-v6-c-card">
2580
- <div class="pf-v6-c-card__body">This is a card</div>
2581
- </div>
2582
- <div class="pf-v6-c-card">
2583
- <div class="pf-v6-c-card__body">This is a card</div>
2584
- </div>
2585
- <div class="pf-v6-c-card">
2586
- <div class="pf-v6-c-card__body">This is a card</div>
2688
+ </div>
2689
+ </section>
2690
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2691
+ <div class="pf-v6-c-page__main-body">
2692
+ <div class="pf-v6-l-gallery pf-m-gutter">
2693
+ <div class="pf-v6-c-card">
2694
+ <div class="pf-v6-c-card__body">This is a card</div>
2695
+ </div>
2696
+ <div class="pf-v6-c-card">
2697
+ <div class="pf-v6-c-card__body">This is a card</div>
2698
+ </div>
2699
+ <div class="pf-v6-c-card">
2700
+ <div class="pf-v6-c-card__body">This is a card</div>
2701
+ </div>
2702
+ <div class="pf-v6-c-card">
2703
+ <div class="pf-v6-c-card__body">This is a card</div>
2704
+ </div>
2705
+ <div class="pf-v6-c-card">
2706
+ <div class="pf-v6-c-card__body">This is a card</div>
2707
+ </div>
2708
+ <div class="pf-v6-c-card">
2709
+ <div class="pf-v6-c-card__body">This is a card</div>
2710
+ </div>
2711
+ <div class="pf-v6-c-card">
2712
+ <div class="pf-v6-c-card__body">This is a card</div>
2713
+ </div>
2714
+ <div class="pf-v6-c-card">
2715
+ <div class="pf-v6-c-card__body">This is a card</div>
2716
+ </div>
2717
+ <div class="pf-v6-c-card">
2718
+ <div class="pf-v6-c-card__body">This is a card</div>
2719
+ </div>
2720
+ <div class="pf-v6-c-card">
2721
+ <div class="pf-v6-c-card__body">This is a card</div>
2722
+ </div>
2587
2723
  </div>
2588
2724
  </div>
2589
- </div>
2590
- </section>
2591
- </main>
2725
+ </section>
2726
+ </main>
2727
+ </div>
2592
2728
  </div>
2593
2729
 
2594
2730
  ```