@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/Nav/examples/Nav.md CHANGED
@@ -11,91 +11,99 @@ section: components
11
11
  <a
12
12
  class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-nav-basic-example"
14
- >Skip to content</a>
14
+ >
15
+ <span class="pf-v6-c-button__text">Skip to content</span>
16
+ </a>
15
17
  </div>
16
18
  <header class="pf-v6-c-masthead" id="nav-basic-example-masthead">
17
- <span class="pf-v6-c-masthead__toggle">
18
- <button
19
- class="pf-v6-c-button pf-m-plain"
20
- type="button"
21
- aria-label="Global navigation"
22
- >
23
- <i class="fas fa-bars" aria-hidden="true"></i>
24
- </button>
25
- </span>
26
19
  <div class="pf-v6-c-masthead__main">
27
- <a class="pf-v6-c-masthead__brand" href="#">
28
- <svg height="40px" viewBox="0 0 679 158">
29
- <title>PF-HorizontalLogo-Color</title>
30
- <defs>
31
- <linearGradient
32
- x1="68%"
33
- y1="2.25860997e-13%"
34
- x2="32%"
35
- y2="100%"
36
- id="linearGradient-nav-basic-example-masthead"
37
- >
38
- <stop stop-color="#2B9AF3" offset="0%" />
39
- <stop
40
- stop-color="#73BCF7"
41
- stop-opacity="0.502212631"
42
- offset="100%"
43
- />
44
- </linearGradient>
45
- </defs>
46
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
- <g
48
- transform="translate(206.000000, 45.750000)"
49
- fill="var(--pf-t--global--text--color--regular)"
50
- fill-rule="nonzero"
51
- >
52
- <path
53
- 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"
54
- />
55
- <path
56
- 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"
57
- />
58
- <path
59
- 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"
60
- />
61
- <path
62
- 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"
63
- />
64
- <path
65
- 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"
66
- />
67
- <path
68
- 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"
69
- />
70
- <path
71
- 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"
72
- />
73
- <polygon
74
- 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"
75
- />
76
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
- <path
78
- 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"
79
- />
80
- </g>
81
- <g transform="translate(0.000000, 0.000000)">
82
- <path
83
- 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"
84
- fill="#0066CC"
85
- />
86
- <path
87
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
- fill="url(#linearGradient-nav-basic-example-masthead)"
89
- />
90
- <path
91
- 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"
92
- fill="url(#linearGradient-nav-basic-example-masthead)"
93
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
- />
20
+ <span class="pf-v6-c-masthead__toggle">
21
+ <button
22
+ class="pf-v6-c-button pf-m-plain"
23
+ type="button"
24
+ aria-label="Global navigation"
25
+ >
26
+ <span class="pf-v6-c-button__icon">
27
+ <i class="fas fa-bars" aria-hidden="true"></i>
28
+ </span>
29
+ </button>
30
+ </span>
31
+ <div class="pf-v6-c-masthead__brand">
32
+ <a class="pf-v6-c-masthead__logo" href="#">
33
+ <svg height="37px" viewBox="0 0 679 158">
34
+ <title>PF-HorizontalLogo-Color</title>
35
+ <defs>
36
+ <linearGradient
37
+ x1="68%"
38
+ y1="2.25860997e-13%"
39
+ x2="32%"
40
+ y2="100%"
41
+ id="linearGradient-nav-basic-example-masthead"
42
+ >
43
+ <stop stop-color="#2B9AF3" offset="0%" />
44
+ <stop
45
+ stop-color="#73BCF7"
46
+ stop-opacity="0.502212631"
47
+ offset="100%"
48
+ />
49
+ </linearGradient>
50
+ </defs>
51
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
52
+ <g
53
+ transform="translate(206.000000, 45.750000)"
54
+ fill="var(--pf-t--global--text--color--regular)"
55
+ fill-rule="nonzero"
56
+ >
57
+ <path
58
+ 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"
59
+ />
60
+ <path
61
+ 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"
62
+ />
63
+ <path
64
+ 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"
65
+ />
66
+ <path
67
+ 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"
68
+ />
69
+ <path
70
+ 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"
71
+ />
72
+ <path
73
+ 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"
74
+ />
75
+ <path
76
+ 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"
77
+ />
78
+ <polygon
79
+ 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"
80
+ />
81
+ <polygon
82
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
83
+ />
84
+ <path
85
+ 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"
86
+ />
87
+ </g>
88
+ <g transform="translate(0.000000, 0.000000)">
89
+ <path
90
+ 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"
91
+ fill="#0066CC"
92
+ />
93
+ <path
94
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
95
+ fill="url(#linearGradient-nav-basic-example-masthead)"
96
+ />
97
+ <path
98
+ 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"
99
+ fill="url(#linearGradient-nav-basic-example-masthead)"
100
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
101
+ />
102
+ </g>
95
103
  </g>
96
- </g>
97
- </svg>
98
- </a>
104
+ </svg>
105
+ </a>
106
+ </div>
99
107
  </div>
100
108
  <div class="pf-v6-c-masthead__content">
101
109
  <div
@@ -104,41 +112,11 @@ section: components
104
112
  >
105
113
  <div class="pf-v6-c-toolbar__content">
106
114
  <div class="pf-v6-c-toolbar__content-section">
107
- <div class="pf-v6-c-toolbar__item">
108
- <button
109
- class="pf-v6-c-menu-toggle"
110
- type="button"
111
- aria-expanded="false"
112
- >
113
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
114
- <span class="pf-v6-c-menu-toggle__controls">
115
- <span class="pf-v6-c-menu-toggle__toggle-icon">
116
- <i class="fas fa-caret-down" aria-hidden="true"></i>
117
- </span>
118
- </span>
119
- </button>
120
- </div>
121
-
122
- <div class="pf-v6-c-toolbar__item">
123
- <button
124
- class="pf-v6-c-menu-toggle"
125
- type="button"
126
- aria-expanded="false"
127
- >
128
- <span class="pf-v6-c-menu-toggle__text">Services</span>
129
- <span class="pf-v6-c-menu-toggle__controls">
130
- <span class="pf-v6-c-menu-toggle__toggle-icon">
131
- <i class="fas fa-caret-down" aria-hidden="true"></i>
132
- </span>
133
- </span>
134
- </button>
135
- </div>
136
-
137
115
  <div
138
- 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"
116
+ 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"
139
117
  >
140
118
  <div
141
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
119
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
142
120
  >
143
121
  <div class="pf-v6-c-toolbar__item">
144
122
  <button
@@ -177,6 +155,7 @@ section: components
177
155
  </button>
178
156
  </div>
179
157
  </div>
158
+
180
159
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
181
160
  <button
182
161
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -204,114 +183,126 @@ section: components
204
183
  >
205
184
  <ul class="pf-v6-c-nav__list" role="list">
206
185
  <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
186
+ <a href="#" class="pf-v6-c-nav__link">
187
+ <span class="pf-v6-c-nav__link-text">System panel</span>
188
+ </a>
208
189
  </li>
209
190
  <li class="pf-v6-c-nav__item">
210
191
  <a
211
192
  href="#"
212
193
  class="pf-v6-c-nav__link pf-m-current"
213
194
  aria-current="page"
214
- >Policy</a>
195
+ >
196
+ <span class="pf-v6-c-nav__link-text">Policy</span>
197
+ </a>
215
198
  </li>
216
199
  <li class="pf-v6-c-nav__item">
217
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
200
+ <a href="#" class="pf-v6-c-nav__link">
201
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
202
+ </a>
218
203
  </li>
219
204
  <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
205
+ <a href="#" class="pf-v6-c-nav__link">
206
+ <span class="pf-v6-c-nav__link-text">Network services</span>
207
+ </a>
221
208
  </li>
222
209
  <li class="pf-v6-c-nav__item">
223
- <a href="#" class="pf-v6-c-nav__link">Server</a>
210
+ <a href="#" class="pf-v6-c-nav__link">
211
+ <span class="pf-v6-c-nav__link-text">Server</span>
212
+ </a>
224
213
  </li>
225
214
  </ul>
226
215
  </nav>
227
216
  </div>
228
217
  </div>
229
- <main
230
- class="pf-v6-c-page__main"
231
- tabindex="-1"
232
- id="main-content-nav-basic-example"
233
- >
234
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v6-c-page__main-body">
236
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v6-c-breadcrumb__list" role="list">
238
- <li class="pf-v6-c-breadcrumb__item">
239
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
- </li>
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <span class="pf-v6-c-breadcrumb__item-divider">
243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
- </span>
218
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
219
+ <main
220
+ class="pf-v6-c-page__main"
221
+ tabindex="-1"
222
+ id="main-content-nav-basic-example"
223
+ >
224
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
225
+ <div class="pf-v6-c-page__main-body">
226
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
227
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
228
+ <li class="pf-v6-c-breadcrumb__item">
229
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
230
+ </li>
231
+ <li class="pf-v6-c-breadcrumb__item">
232
+ <span class="pf-v6-c-breadcrumb__item-divider">
233
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
234
+ </span>
245
235
 
246
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
- </li>
248
- <li class="pf-v6-c-breadcrumb__item">
249
- <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
- </span>
236
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
237
+ </li>
238
+ <li class="pf-v6-c-breadcrumb__item">
239
+ <span class="pf-v6-c-breadcrumb__item-divider">
240
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
241
+ </span>
252
242
 
253
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
- </li>
255
- <li class="pf-v6-c-breadcrumb__item">
256
- <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
- </span>
243
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
244
+ </li>
245
+ <li class="pf-v6-c-breadcrumb__item">
246
+ <span class="pf-v6-c-breadcrumb__item-divider">
247
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
248
+ </span>
259
249
 
260
- <a
261
- href="#"
262
- class="pf-v6-c-breadcrumb__link pf-m-current"
263
- aria-current="page"
264
- >Section landing</a>
265
- </li>
266
- </ol>
267
- </nav>
268
- </div>
269
- </section>
270
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v6-c-page__main-body">
272
- <div class="pf-v6-c-content">
273
- <h1>Main title</h1>
274
- <p>This is a full page demo.</p>
250
+ <a
251
+ href="#"
252
+ class="pf-v6-c-breadcrumb__link pf-m-current"
253
+ aria-current="page"
254
+ >Section landing</a>
255
+ </li>
256
+ </ol>
257
+ </nav>
275
258
  </div>
276
- </div>
277
- </section>
278
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
279
- <div class="pf-v6-c-page__main-body">
280
- <div class="pf-v6-l-gallery pf-m-gutter">
281
- <div class="pf-v6-c-card">
282
- <div class="pf-v6-c-card__body">This is a card</div>
283
- </div>
284
- <div class="pf-v6-c-card">
285
- <div class="pf-v6-c-card__body">This is a card</div>
286
- </div>
287
- <div class="pf-v6-c-card">
288
- <div class="pf-v6-c-card__body">This is a card</div>
289
- </div>
290
- <div class="pf-v6-c-card">
291
- <div class="pf-v6-c-card__body">This is a card</div>
292
- </div>
293
- <div class="pf-v6-c-card">
294
- <div class="pf-v6-c-card__body">This is a card</div>
295
- </div>
296
- <div class="pf-v6-c-card">
297
- <div class="pf-v6-c-card__body">This is a card</div>
259
+ </section>
260
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
261
+ <div class="pf-v6-c-page__main-body">
262
+ <div class="pf-v6-c-content">
263
+ <h1>Main title</h1>
264
+ <p>This is a full page demo.</p>
298
265
  </div>
299
- <div class="pf-v6-c-card">
300
- <div class="pf-v6-c-card__body">This is a card</div>
301
- </div>
302
- <div class="pf-v6-c-card">
303
- <div class="pf-v6-c-card__body">This is a card</div>
304
- </div>
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
266
+ </div>
267
+ </section>
268
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
269
+ <div class="pf-v6-c-page__main-body">
270
+ <div class="pf-v6-l-gallery pf-m-gutter">
271
+ <div class="pf-v6-c-card">
272
+ <div class="pf-v6-c-card__body">This is a card</div>
273
+ </div>
274
+ <div class="pf-v6-c-card">
275
+ <div class="pf-v6-c-card__body">This is a card</div>
276
+ </div>
277
+ <div class="pf-v6-c-card">
278
+ <div class="pf-v6-c-card__body">This is a card</div>
279
+ </div>
280
+ <div class="pf-v6-c-card">
281
+ <div class="pf-v6-c-card__body">This is a card</div>
282
+ </div>
283
+ <div class="pf-v6-c-card">
284
+ <div class="pf-v6-c-card__body">This is a card</div>
285
+ </div>
286
+ <div class="pf-v6-c-card">
287
+ <div class="pf-v6-c-card__body">This is a card</div>
288
+ </div>
289
+ <div class="pf-v6-c-card">
290
+ <div class="pf-v6-c-card__body">This is a card</div>
291
+ </div>
292
+ <div class="pf-v6-c-card">
293
+ <div class="pf-v6-c-card__body">This is a card</div>
294
+ </div>
295
+ <div class="pf-v6-c-card">
296
+ <div class="pf-v6-c-card__body">This is a card</div>
297
+ </div>
298
+ <div class="pf-v6-c-card">
299
+ <div class="pf-v6-c-card__body">This is a card</div>
300
+ </div>
310
301
  </div>
311
302
  </div>
312
- </div>
313
- </section>
314
- </main>
303
+ </section>
304
+ </main>
305
+ </div>
315
306
  </div>
316
307
 
317
308
  ```
@@ -324,91 +315,99 @@ section: components
324
315
  <a
325
316
  class="pf-v6-c-button pf-m-primary"
326
317
  href="#main-content-nav-grouped-nav-example"
327
- >Skip to content</a>
318
+ >
319
+ <span class="pf-v6-c-button__text">Skip to content</span>
320
+ </a>
328
321
  </div>
329
322
  <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-masthead">
330
- <span class="pf-v6-c-masthead__toggle">
331
- <button
332
- class="pf-v6-c-button pf-m-plain"
333
- type="button"
334
- aria-label="Global navigation"
335
- >
336
- <i class="fas fa-bars" aria-hidden="true"></i>
337
- </button>
338
- </span>
339
323
  <div class="pf-v6-c-masthead__main">
340
- <a class="pf-v6-c-masthead__brand" href="#">
341
- <svg height="40px" viewBox="0 0 679 158">
342
- <title>PF-HorizontalLogo-Color</title>
343
- <defs>
344
- <linearGradient
345
- x1="68%"
346
- y1="2.25860997e-13%"
347
- x2="32%"
348
- y2="100%"
349
- id="linearGradient-nav-grouped-nav-example-masthead"
350
- >
351
- <stop stop-color="#2B9AF3" offset="0%" />
352
- <stop
353
- stop-color="#73BCF7"
354
- stop-opacity="0.502212631"
355
- offset="100%"
356
- />
357
- </linearGradient>
358
- </defs>
359
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
360
- <g
361
- transform="translate(206.000000, 45.750000)"
362
- fill="var(--pf-t--global--text--color--regular)"
363
- fill-rule="nonzero"
364
- >
365
- <path
366
- 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"
367
- />
368
- <path
369
- 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"
370
- />
371
- <path
372
- 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"
373
- />
374
- <path
375
- 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"
376
- />
377
- <path
378
- 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"
379
- />
380
- <path
381
- 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"
382
- />
383
- <path
384
- 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"
385
- />
386
- <polygon
387
- 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"
388
- />
389
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
390
- <path
391
- 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"
392
- />
393
- </g>
394
- <g transform="translate(0.000000, 0.000000)">
395
- <path
396
- 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"
397
- fill="#0066CC"
398
- />
399
- <path
400
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
401
- fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
402
- />
403
- <path
404
- 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"
405
- fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
406
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
407
- />
324
+ <span class="pf-v6-c-masthead__toggle">
325
+ <button
326
+ class="pf-v6-c-button pf-m-plain"
327
+ type="button"
328
+ aria-label="Global navigation"
329
+ >
330
+ <span class="pf-v6-c-button__icon">
331
+ <i class="fas fa-bars" aria-hidden="true"></i>
332
+ </span>
333
+ </button>
334
+ </span>
335
+ <div class="pf-v6-c-masthead__brand">
336
+ <a class="pf-v6-c-masthead__logo" href="#">
337
+ <svg height="37px" viewBox="0 0 679 158">
338
+ <title>PF-HorizontalLogo-Color</title>
339
+ <defs>
340
+ <linearGradient
341
+ x1="68%"
342
+ y1="2.25860997e-13%"
343
+ x2="32%"
344
+ y2="100%"
345
+ id="linearGradient-nav-grouped-nav-example-masthead"
346
+ >
347
+ <stop stop-color="#2B9AF3" offset="0%" />
348
+ <stop
349
+ stop-color="#73BCF7"
350
+ stop-opacity="0.502212631"
351
+ offset="100%"
352
+ />
353
+ </linearGradient>
354
+ </defs>
355
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
356
+ <g
357
+ transform="translate(206.000000, 45.750000)"
358
+ fill="var(--pf-t--global--text--color--regular)"
359
+ fill-rule="nonzero"
360
+ >
361
+ <path
362
+ 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"
363
+ />
364
+ <path
365
+ 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"
366
+ />
367
+ <path
368
+ 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"
369
+ />
370
+ <path
371
+ 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"
372
+ />
373
+ <path
374
+ 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"
375
+ />
376
+ <path
377
+ 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"
378
+ />
379
+ <path
380
+ 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"
381
+ />
382
+ <polygon
383
+ 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"
384
+ />
385
+ <polygon
386
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
387
+ />
388
+ <path
389
+ 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"
390
+ />
391
+ </g>
392
+ <g transform="translate(0.000000, 0.000000)">
393
+ <path
394
+ 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"
395
+ fill="#0066CC"
396
+ />
397
+ <path
398
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
399
+ fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
400
+ />
401
+ <path
402
+ 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"
403
+ fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
404
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
405
+ />
406
+ </g>
408
407
  </g>
409
- </g>
410
- </svg>
411
- </a>
408
+ </svg>
409
+ </a>
410
+ </div>
412
411
  </div>
413
412
  <div class="pf-v6-c-masthead__content">
414
413
  <div
@@ -417,41 +416,11 @@ section: components
417
416
  >
418
417
  <div class="pf-v6-c-toolbar__content">
419
418
  <div class="pf-v6-c-toolbar__content-section">
420
- <div class="pf-v6-c-toolbar__item">
421
- <button
422
- class="pf-v6-c-menu-toggle"
423
- type="button"
424
- aria-expanded="false"
425
- >
426
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
427
- <span class="pf-v6-c-menu-toggle__controls">
428
- <span class="pf-v6-c-menu-toggle__toggle-icon">
429
- <i class="fas fa-caret-down" aria-hidden="true"></i>
430
- </span>
431
- </span>
432
- </button>
433
- </div>
434
-
435
- <div class="pf-v6-c-toolbar__item">
436
- <button
437
- class="pf-v6-c-menu-toggle"
438
- type="button"
439
- aria-expanded="false"
440
- >
441
- <span class="pf-v6-c-menu-toggle__text">Services</span>
442
- <span class="pf-v6-c-menu-toggle__controls">
443
- <span class="pf-v6-c-menu-toggle__toggle-icon">
444
- <i class="fas fa-caret-down" aria-hidden="true"></i>
445
- </span>
446
- </span>
447
- </button>
448
- </div>
449
-
450
419
  <div
451
- 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"
420
+ 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"
452
421
  >
453
422
  <div
454
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
423
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
455
424
  >
456
425
  <div class="pf-v6-c-toolbar__item">
457
426
  <button
@@ -490,6 +459,7 @@ section: components
490
459
  </button>
491
460
  </div>
492
461
  </div>
462
+
493
463
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
494
464
  <button
495
465
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -522,26 +492,38 @@ section: components
522
492
  >System panel</h2>
523
493
  <ul class="pf-v6-c-nav__list" role="list">
524
494
  <li class="pf-v6-c-nav__item">
525
- <a href="#" class="pf-v6-c-nav__link">Overview</a>
495
+ <a href="#" class="pf-v6-c-nav__link">
496
+ <span class="pf-v6-c-nav__link-text">Overview</span>
497
+ </a>
526
498
  </li>
527
499
  <li class="pf-v6-c-nav__item">
528
- <a href="#" class="pf-v6-c-nav__link">Resource usage</a>
500
+ <a href="#" class="pf-v6-c-nav__link">
501
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
502
+ </a>
529
503
  </li>
530
504
  <li class="pf-v6-c-nav__item">
531
505
  <a
532
506
  href="#"
533
507
  class="pf-v6-c-nav__link pf-m-current"
534
508
  aria-current="page"
535
- >Hypervisors</a>
509
+ >
510
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
511
+ </a>
536
512
  </li>
537
513
  <li class="pf-v6-c-nav__item">
538
- <a href="#" class="pf-v6-c-nav__link">Instances</a>
514
+ <a href="#" class="pf-v6-c-nav__link">
515
+ <span class="pf-v6-c-nav__link-text">Instances</span>
516
+ </a>
539
517
  </li>
540
518
  <li class="pf-v6-c-nav__item">
541
- <a href="#" class="pf-v6-c-nav__link">Volumes</a>
519
+ <a href="#" class="pf-v6-c-nav__link">
520
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
521
+ </a>
542
522
  </li>
543
523
  <li class="pf-v6-c-nav__item">
544
- <a href="#" class="pf-v6-c-nav__link">Networks</a>
524
+ <a href="#" class="pf-v6-c-nav__link">
525
+ <span class="pf-v6-c-nav__link-text">Networks</span>
526
+ </a>
545
527
  </li>
546
528
  </ul>
547
529
  </section>
@@ -550,105 +532,113 @@ section: components
550
532
  <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Policy</h2>
551
533
  <ul class="pf-v6-c-nav__list" role="list">
552
534
  <li class="pf-v6-c-nav__item">
553
- <a href="#" class="pf-v6-c-nav__link">Hosts</a>
535
+ <a href="#" class="pf-v6-c-nav__link">
536
+ <span class="pf-v6-c-nav__link-text">Hosts</span>
537
+ </a>
554
538
  </li>
555
539
  <li class="pf-v6-c-nav__item">
556
- <a href="#" class="pf-v6-c-nav__link">Virtual machines</a>
540
+ <a href="#" class="pf-v6-c-nav__link">
541
+ <span class="pf-v6-c-nav__link-text">Virtual machines</span>
542
+ </a>
557
543
  </li>
558
544
  <li class="pf-v6-c-nav__item">
559
- <a href="#" class="pf-v6-c-nav__link">Storage</a>
545
+ <a href="#" class="pf-v6-c-nav__link">
546
+ <span class="pf-v6-c-nav__link-text">Storage</span>
547
+ </a>
560
548
  </li>
561
549
  </ul>
562
550
  </section>
563
551
  </nav>
564
552
  </div>
565
553
  </div>
566
- <main
567
- class="pf-v6-c-page__main"
568
- tabindex="-1"
569
- id="main-content-nav-grouped-nav-example"
570
- >
571
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
572
- <div class="pf-v6-c-page__main-body">
573
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
574
- <ol class="pf-v6-c-breadcrumb__list" role="list">
575
- <li class="pf-v6-c-breadcrumb__item">
576
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
577
- </li>
578
- <li class="pf-v6-c-breadcrumb__item">
579
- <span class="pf-v6-c-breadcrumb__item-divider">
580
- <i class="fas fa-angle-right" aria-hidden="true"></i>
581
- </span>
554
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
555
+ <main
556
+ class="pf-v6-c-page__main"
557
+ tabindex="-1"
558
+ id="main-content-nav-grouped-nav-example"
559
+ >
560
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
561
+ <div class="pf-v6-c-page__main-body">
562
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
563
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
564
+ <li class="pf-v6-c-breadcrumb__item">
565
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
566
+ </li>
567
+ <li class="pf-v6-c-breadcrumb__item">
568
+ <span class="pf-v6-c-breadcrumb__item-divider">
569
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
570
+ </span>
582
571
 
583
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
584
- </li>
585
- <li class="pf-v6-c-breadcrumb__item">
586
- <span class="pf-v6-c-breadcrumb__item-divider">
587
- <i class="fas fa-angle-right" aria-hidden="true"></i>
588
- </span>
572
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
573
+ </li>
574
+ <li class="pf-v6-c-breadcrumb__item">
575
+ <span class="pf-v6-c-breadcrumb__item-divider">
576
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
577
+ </span>
589
578
 
590
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
591
- </li>
592
- <li class="pf-v6-c-breadcrumb__item">
593
- <span class="pf-v6-c-breadcrumb__item-divider">
594
- <i class="fas fa-angle-right" aria-hidden="true"></i>
595
- </span>
579
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
580
+ </li>
581
+ <li class="pf-v6-c-breadcrumb__item">
582
+ <span class="pf-v6-c-breadcrumb__item-divider">
583
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
584
+ </span>
596
585
 
597
- <a
598
- href="#"
599
- class="pf-v6-c-breadcrumb__link pf-m-current"
600
- aria-current="page"
601
- >Section landing</a>
602
- </li>
603
- </ol>
604
- </nav>
605
- </div>
606
- </section>
607
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
608
- <div class="pf-v6-c-page__main-body">
609
- <div class="pf-v6-c-content">
610
- <h1>Main title</h1>
611
- <p>This is a full page demo.</p>
586
+ <a
587
+ href="#"
588
+ class="pf-v6-c-breadcrumb__link pf-m-current"
589
+ aria-current="page"
590
+ >Section landing</a>
591
+ </li>
592
+ </ol>
593
+ </nav>
612
594
  </div>
613
- </div>
614
- </section>
615
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
616
- <div class="pf-v6-c-page__main-body">
617
- <div class="pf-v6-l-gallery pf-m-gutter">
618
- <div class="pf-v6-c-card">
619
- <div class="pf-v6-c-card__body">This is a card</div>
595
+ </section>
596
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
597
+ <div class="pf-v6-c-page__main-body">
598
+ <div class="pf-v6-c-content">
599
+ <h1>Main title</h1>
600
+ <p>This is a full page demo.</p>
620
601
  </div>
621
- <div class="pf-v6-c-card">
622
- <div class="pf-v6-c-card__body">This is a card</div>
623
- </div>
624
- <div class="pf-v6-c-card">
625
- <div class="pf-v6-c-card__body">This is a card</div>
626
- </div>
627
- <div class="pf-v6-c-card">
628
- <div class="pf-v6-c-card__body">This is a card</div>
629
- </div>
630
- <div class="pf-v6-c-card">
631
- <div class="pf-v6-c-card__body">This is a card</div>
632
- </div>
633
- <div class="pf-v6-c-card">
634
- <div class="pf-v6-c-card__body">This is a card</div>
635
- </div>
636
- <div class="pf-v6-c-card">
637
- <div class="pf-v6-c-card__body">This is a card</div>
638
- </div>
639
- <div class="pf-v6-c-card">
640
- <div class="pf-v6-c-card__body">This is a card</div>
641
- </div>
642
- <div class="pf-v6-c-card">
643
- <div class="pf-v6-c-card__body">This is a card</div>
644
- </div>
645
- <div class="pf-v6-c-card">
646
- <div class="pf-v6-c-card__body">This is a card</div>
602
+ </div>
603
+ </section>
604
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
605
+ <div class="pf-v6-c-page__main-body">
606
+ <div class="pf-v6-l-gallery pf-m-gutter">
607
+ <div class="pf-v6-c-card">
608
+ <div class="pf-v6-c-card__body">This is a card</div>
609
+ </div>
610
+ <div class="pf-v6-c-card">
611
+ <div class="pf-v6-c-card__body">This is a card</div>
612
+ </div>
613
+ <div class="pf-v6-c-card">
614
+ <div class="pf-v6-c-card__body">This is a card</div>
615
+ </div>
616
+ <div class="pf-v6-c-card">
617
+ <div class="pf-v6-c-card__body">This is a card</div>
618
+ </div>
619
+ <div class="pf-v6-c-card">
620
+ <div class="pf-v6-c-card__body">This is a card</div>
621
+ </div>
622
+ <div class="pf-v6-c-card">
623
+ <div class="pf-v6-c-card__body">This is a card</div>
624
+ </div>
625
+ <div class="pf-v6-c-card">
626
+ <div class="pf-v6-c-card__body">This is a card</div>
627
+ </div>
628
+ <div class="pf-v6-c-card">
629
+ <div class="pf-v6-c-card__body">This is a card</div>
630
+ </div>
631
+ <div class="pf-v6-c-card">
632
+ <div class="pf-v6-c-card__body">This is a card</div>
633
+ </div>
634
+ <div class="pf-v6-c-card">
635
+ <div class="pf-v6-c-card__body">This is a card</div>
636
+ </div>
647
637
  </div>
648
638
  </div>
649
- </div>
650
- </section>
651
- </main>
639
+ </section>
640
+ </main>
641
+ </div>
652
642
  </div>
653
643
 
654
644
  ```
@@ -661,91 +651,99 @@ section: components
661
651
  <a
662
652
  class="pf-v6-c-button pf-m-primary"
663
653
  href="#main-content-nav-expandable-example"
664
- >Skip to content</a>
654
+ >
655
+ <span class="pf-v6-c-button__text">Skip to content</span>
656
+ </a>
665
657
  </div>
666
658
  <header class="pf-v6-c-masthead" id="nav-expandable-example-masthead">
667
- <span class="pf-v6-c-masthead__toggle">
668
- <button
669
- class="pf-v6-c-button pf-m-plain"
670
- type="button"
671
- aria-label="Global navigation"
672
- >
673
- <i class="fas fa-bars" aria-hidden="true"></i>
674
- </button>
675
- </span>
676
659
  <div class="pf-v6-c-masthead__main">
677
- <a class="pf-v6-c-masthead__brand" href="#">
678
- <svg height="40px" viewBox="0 0 679 158">
679
- <title>PF-HorizontalLogo-Color</title>
680
- <defs>
681
- <linearGradient
682
- x1="68%"
683
- y1="2.25860997e-13%"
684
- x2="32%"
685
- y2="100%"
686
- id="linearGradient-nav-expandable-example-masthead"
687
- >
688
- <stop stop-color="#2B9AF3" offset="0%" />
689
- <stop
690
- stop-color="#73BCF7"
691
- stop-opacity="0.502212631"
692
- offset="100%"
693
- />
694
- </linearGradient>
695
- </defs>
696
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
697
- <g
698
- transform="translate(206.000000, 45.750000)"
699
- fill="var(--pf-t--global--text--color--regular)"
700
- fill-rule="nonzero"
701
- >
702
- <path
703
- 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"
704
- />
705
- <path
706
- 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"
707
- />
708
- <path
709
- 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"
710
- />
711
- <path
712
- 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"
713
- />
714
- <path
715
- 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"
716
- />
717
- <path
718
- 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"
719
- />
720
- <path
721
- 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"
722
- />
723
- <polygon
724
- 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"
725
- />
726
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
727
- <path
728
- 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"
729
- />
730
- </g>
731
- <g transform="translate(0.000000, 0.000000)">
732
- <path
733
- 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"
734
- fill="#0066CC"
735
- />
736
- <path
737
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
738
- fill="url(#linearGradient-nav-expandable-example-masthead)"
739
- />
740
- <path
741
- 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"
742
- fill="url(#linearGradient-nav-expandable-example-masthead)"
743
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
744
- />
660
+ <span class="pf-v6-c-masthead__toggle">
661
+ <button
662
+ class="pf-v6-c-button pf-m-plain"
663
+ type="button"
664
+ aria-label="Global navigation"
665
+ >
666
+ <span class="pf-v6-c-button__icon">
667
+ <i class="fas fa-bars" aria-hidden="true"></i>
668
+ </span>
669
+ </button>
670
+ </span>
671
+ <div class="pf-v6-c-masthead__brand">
672
+ <a class="pf-v6-c-masthead__logo" href="#">
673
+ <svg height="37px" viewBox="0 0 679 158">
674
+ <title>PF-HorizontalLogo-Color</title>
675
+ <defs>
676
+ <linearGradient
677
+ x1="68%"
678
+ y1="2.25860997e-13%"
679
+ x2="32%"
680
+ y2="100%"
681
+ id="linearGradient-nav-expandable-example-masthead"
682
+ >
683
+ <stop stop-color="#2B9AF3" offset="0%" />
684
+ <stop
685
+ stop-color="#73BCF7"
686
+ stop-opacity="0.502212631"
687
+ offset="100%"
688
+ />
689
+ </linearGradient>
690
+ </defs>
691
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
692
+ <g
693
+ transform="translate(206.000000, 45.750000)"
694
+ fill="var(--pf-t--global--text--color--regular)"
695
+ fill-rule="nonzero"
696
+ >
697
+ <path
698
+ 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"
699
+ />
700
+ <path
701
+ 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"
702
+ />
703
+ <path
704
+ 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"
705
+ />
706
+ <path
707
+ 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"
708
+ />
709
+ <path
710
+ 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"
711
+ />
712
+ <path
713
+ 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"
714
+ />
715
+ <path
716
+ 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"
717
+ />
718
+ <polygon
719
+ 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"
720
+ />
721
+ <polygon
722
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
723
+ />
724
+ <path
725
+ 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"
726
+ />
727
+ </g>
728
+ <g transform="translate(0.000000, 0.000000)">
729
+ <path
730
+ 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"
731
+ fill="#0066CC"
732
+ />
733
+ <path
734
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
735
+ fill="url(#linearGradient-nav-expandable-example-masthead)"
736
+ />
737
+ <path
738
+ 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"
739
+ fill="url(#linearGradient-nav-expandable-example-masthead)"
740
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
741
+ />
742
+ </g>
745
743
  </g>
746
- </g>
747
- </svg>
748
- </a>
744
+ </svg>
745
+ </a>
746
+ </div>
749
747
  </div>
750
748
  <div class="pf-v6-c-masthead__content">
751
749
  <div
@@ -754,41 +752,11 @@ section: components
754
752
  >
755
753
  <div class="pf-v6-c-toolbar__content">
756
754
  <div class="pf-v6-c-toolbar__content-section">
757
- <div class="pf-v6-c-toolbar__item">
758
- <button
759
- class="pf-v6-c-menu-toggle"
760
- type="button"
761
- aria-expanded="false"
762
- >
763
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
764
- <span class="pf-v6-c-menu-toggle__controls">
765
- <span class="pf-v6-c-menu-toggle__toggle-icon">
766
- <i class="fas fa-caret-down" aria-hidden="true"></i>
767
- </span>
768
- </span>
769
- </button>
770
- </div>
771
-
772
- <div class="pf-v6-c-toolbar__item">
773
- <button
774
- class="pf-v6-c-menu-toggle"
775
- type="button"
776
- aria-expanded="false"
777
- >
778
- <span class="pf-v6-c-menu-toggle__text">Services</span>
779
- <span class="pf-v6-c-menu-toggle__controls">
780
- <span class="pf-v6-c-menu-toggle__toggle-icon">
781
- <i class="fas fa-caret-down" aria-hidden="true"></i>
782
- </span>
783
- </span>
784
- </button>
785
- </div>
786
-
787
755
  <div
788
- 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"
756
+ 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"
789
757
  >
790
758
  <div
791
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
759
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
792
760
  >
793
761
  <div class="pf-v6-c-toolbar__item">
794
762
  <button
@@ -827,6 +795,7 @@ section: components
827
795
  </button>
828
796
  </div>
829
797
  </div>
798
+
830
799
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
831
800
  <button
832
801
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -853,13 +822,13 @@ section: components
853
822
  aria-label="Global"
854
823
  >
855
824
  <ul class="pf-v6-c-nav__list" role="list">
856
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
825
+ <li class="pf-v6-c-nav__item pf-m-expanded">
857
826
  <button
858
827
  class="pf-v6-c-nav__link"
859
828
  aria-expanded="true"
860
829
  id="nav-expandable-example-expandable-nav-link1"
861
830
  >
862
- System panel
831
+ <span class="pf-v6-c-nav__link-text">System panel</span>
863
832
  <span class="pf-v6-c-nav__toggle">
864
833
  <span class="pf-v6-c-nav__toggle-icon">
865
834
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -872,37 +841,49 @@ section: components
872
841
  >
873
842
  <ul class="pf-v6-c-nav__list" role="list">
874
843
  <li class="pf-v6-c-nav__item">
875
- <a href="#" class="pf-v6-c-nav__link">Overview</a>
844
+ <a href="#" class="pf-v6-c-nav__link">
845
+ <span class="pf-v6-c-nav__link-text">Overview</span>
846
+ </a>
876
847
  </li>
877
848
  <li class="pf-v6-c-nav__item">
878
849
  <a
879
850
  href="#"
880
851
  class="pf-v6-c-nav__link pf-m-current"
881
852
  aria-current="page"
882
- >Resource usage</a>
853
+ >
854
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
855
+ </a>
883
856
  </li>
884
857
  <li class="pf-v6-c-nav__item">
885
- <a href="#" class="pf-v6-c-nav__link">Hypervisors</a>
858
+ <a href="#" class="pf-v6-c-nav__link">
859
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
860
+ </a>
886
861
  </li>
887
862
  <li class="pf-v6-c-nav__item">
888
- <a href="#" class="pf-v6-c-nav__link">Instances</a>
863
+ <a href="#" class="pf-v6-c-nav__link">
864
+ <span class="pf-v6-c-nav__link-text">Instances</span>
865
+ </a>
889
866
  </li>
890
867
  <li class="pf-v6-c-nav__item">
891
- <a href="#" class="pf-v6-c-nav__link">Volumes</a>
868
+ <a href="#" class="pf-v6-c-nav__link">
869
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
870
+ </a>
892
871
  </li>
893
872
  <li class="pf-v6-c-nav__item">
894
- <a href="#" class="pf-v6-c-nav__link">Networks</a>
873
+ <a href="#" class="pf-v6-c-nav__link">
874
+ <span class="pf-v6-c-nav__link-text">Networks</span>
875
+ </a>
895
876
  </li>
896
877
  </ul>
897
878
  </section>
898
879
  </li>
899
- <li class="pf-v6-c-nav__item pf-m-expandable">
880
+ <li class="pf-v6-c-nav__item">
900
881
  <button
901
882
  class="pf-v6-c-nav__link"
902
883
  aria-expanded="false"
903
884
  id="nav-expandable-example-expandable-nav-link2"
904
885
  >
905
- Policy
886
+ <span class="pf-v6-c-nav__link-text">Policy</span>
906
887
  <span class="pf-v6-c-nav__toggle">
907
888
  <span class="pf-v6-c-nav__toggle-icon">
908
889
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -916,21 +897,25 @@ section: components
916
897
  >
917
898
  <ul class="pf-v6-c-nav__list" role="list">
918
899
  <li class="pf-v6-c-nav__item">
919
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
900
+ <a href="#" class="pf-v6-c-nav__link">
901
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
902
+ </a>
920
903
  </li>
921
904
  <li class="pf-v6-c-nav__item">
922
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
905
+ <a href="#" class="pf-v6-c-nav__link">
906
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
907
+ </a>
923
908
  </li>
924
909
  </ul>
925
910
  </section>
926
911
  </li>
927
- <li class="pf-v6-c-nav__item pf-m-expandable">
912
+ <li class="pf-v6-c-nav__item">
928
913
  <button
929
914
  class="pf-v6-c-nav__link"
930
915
  aria-expanded="false"
931
916
  id="nav-expandable-example-expandable-nav-link3"
932
917
  >
933
- Authentication
918
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
934
919
  <span class="pf-v6-c-nav__toggle">
935
920
  <span class="pf-v6-c-nav__toggle-icon">
936
921
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -944,10 +929,14 @@ section: components
944
929
  >
945
930
  <ul class="pf-v6-c-nav__list" role="list">
946
931
  <li class="pf-v6-c-nav__item">
947
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
932
+ <a href="#" class="pf-v6-c-nav__link">
933
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
934
+ </a>
948
935
  </li>
949
936
  <li class="pf-v6-c-nav__item">
950
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
937
+ <a href="#" class="pf-v6-c-nav__link">
938
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
939
+ </a>
951
940
  </li>
952
941
  </ul>
953
942
  </section>
@@ -956,92 +945,94 @@ section: components
956
945
  </nav>
957
946
  </div>
958
947
  </div>
959
- <main
960
- class="pf-v6-c-page__main"
961
- tabindex="-1"
962
- id="main-content-nav-expandable-example"
963
- >
964
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
965
- <div class="pf-v6-c-page__main-body">
966
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
967
- <ol class="pf-v6-c-breadcrumb__list" role="list">
968
- <li class="pf-v6-c-breadcrumb__item">
969
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
970
- </li>
971
- <li class="pf-v6-c-breadcrumb__item">
972
- <span class="pf-v6-c-breadcrumb__item-divider">
973
- <i class="fas fa-angle-right" aria-hidden="true"></i>
974
- </span>
948
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
949
+ <main
950
+ class="pf-v6-c-page__main"
951
+ tabindex="-1"
952
+ id="main-content-nav-expandable-example"
953
+ >
954
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
955
+ <div class="pf-v6-c-page__main-body">
956
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
957
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
958
+ <li class="pf-v6-c-breadcrumb__item">
959
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
960
+ </li>
961
+ <li class="pf-v6-c-breadcrumb__item">
962
+ <span class="pf-v6-c-breadcrumb__item-divider">
963
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
964
+ </span>
975
965
 
976
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
977
- </li>
978
- <li class="pf-v6-c-breadcrumb__item">
979
- <span class="pf-v6-c-breadcrumb__item-divider">
980
- <i class="fas fa-angle-right" aria-hidden="true"></i>
981
- </span>
966
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
967
+ </li>
968
+ <li class="pf-v6-c-breadcrumb__item">
969
+ <span class="pf-v6-c-breadcrumb__item-divider">
970
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
971
+ </span>
982
972
 
983
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
984
- </li>
985
- <li class="pf-v6-c-breadcrumb__item">
986
- <span class="pf-v6-c-breadcrumb__item-divider">
987
- <i class="fas fa-angle-right" aria-hidden="true"></i>
988
- </span>
973
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
974
+ </li>
975
+ <li class="pf-v6-c-breadcrumb__item">
976
+ <span class="pf-v6-c-breadcrumb__item-divider">
977
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
978
+ </span>
989
979
 
990
- <a
991
- href="#"
992
- class="pf-v6-c-breadcrumb__link pf-m-current"
993
- aria-current="page"
994
- >Section landing</a>
995
- </li>
996
- </ol>
997
- </nav>
998
- </div>
999
- </section>
1000
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1001
- <div class="pf-v6-c-page__main-body">
1002
- <div class="pf-v6-c-content">
1003
- <h1>Main title</h1>
1004
- <p>This is a full page demo.</p>
980
+ <a
981
+ href="#"
982
+ class="pf-v6-c-breadcrumb__link pf-m-current"
983
+ aria-current="page"
984
+ >Section landing</a>
985
+ </li>
986
+ </ol>
987
+ </nav>
1005
988
  </div>
1006
- </div>
1007
- </section>
1008
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1009
- <div class="pf-v6-c-page__main-body">
1010
- <div class="pf-v6-l-gallery pf-m-gutter">
1011
- <div class="pf-v6-c-card">
1012
- <div class="pf-v6-c-card__body">This is a card</div>
1013
- </div>
1014
- <div class="pf-v6-c-card">
1015
- <div class="pf-v6-c-card__body">This is a card</div>
1016
- </div>
1017
- <div class="pf-v6-c-card">
1018
- <div class="pf-v6-c-card__body">This is a card</div>
1019
- </div>
1020
- <div class="pf-v6-c-card">
1021
- <div class="pf-v6-c-card__body">This is a card</div>
1022
- </div>
1023
- <div class="pf-v6-c-card">
1024
- <div class="pf-v6-c-card__body">This is a card</div>
1025
- </div>
1026
- <div class="pf-v6-c-card">
1027
- <div class="pf-v6-c-card__body">This is a card</div>
989
+ </section>
990
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
991
+ <div class="pf-v6-c-page__main-body">
992
+ <div class="pf-v6-c-content">
993
+ <h1>Main title</h1>
994
+ <p>This is a full page demo.</p>
1028
995
  </div>
1029
- <div class="pf-v6-c-card">
1030
- <div class="pf-v6-c-card__body">This is a card</div>
1031
- </div>
1032
- <div class="pf-v6-c-card">
1033
- <div class="pf-v6-c-card__body">This is a card</div>
1034
- </div>
1035
- <div class="pf-v6-c-card">
1036
- <div class="pf-v6-c-card__body">This is a card</div>
1037
- </div>
1038
- <div class="pf-v6-c-card">
1039
- <div class="pf-v6-c-card__body">This is a card</div>
996
+ </div>
997
+ </section>
998
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
999
+ <div class="pf-v6-c-page__main-body">
1000
+ <div class="pf-v6-l-gallery pf-m-gutter">
1001
+ <div class="pf-v6-c-card">
1002
+ <div class="pf-v6-c-card__body">This is a card</div>
1003
+ </div>
1004
+ <div class="pf-v6-c-card">
1005
+ <div class="pf-v6-c-card__body">This is a card</div>
1006
+ </div>
1007
+ <div class="pf-v6-c-card">
1008
+ <div class="pf-v6-c-card__body">This is a card</div>
1009
+ </div>
1010
+ <div class="pf-v6-c-card">
1011
+ <div class="pf-v6-c-card__body">This is a card</div>
1012
+ </div>
1013
+ <div class="pf-v6-c-card">
1014
+ <div class="pf-v6-c-card__body">This is a card</div>
1015
+ </div>
1016
+ <div class="pf-v6-c-card">
1017
+ <div class="pf-v6-c-card__body">This is a card</div>
1018
+ </div>
1019
+ <div class="pf-v6-c-card">
1020
+ <div class="pf-v6-c-card__body">This is a card</div>
1021
+ </div>
1022
+ <div class="pf-v6-c-card">
1023
+ <div class="pf-v6-c-card__body">This is a card</div>
1024
+ </div>
1025
+ <div class="pf-v6-c-card">
1026
+ <div class="pf-v6-c-card__body">This is a card</div>
1027
+ </div>
1028
+ <div class="pf-v6-c-card">
1029
+ <div class="pf-v6-c-card__body">This is a card</div>
1030
+ </div>
1040
1031
  </div>
1041
1032
  </div>
1042
- </div>
1043
- </section>
1044
- </main>
1033
+ </section>
1034
+ </main>
1035
+ </div>
1045
1036
  </div>
1046
1037
 
1047
1038
  ```
@@ -1054,82 +1045,88 @@ section: components
1054
1045
  <a
1055
1046
  class="pf-v6-c-button pf-m-primary"
1056
1047
  href="#main-content-nav-horizontal-example"
1057
- >Skip to content</a>
1048
+ >
1049
+ <span class="pf-v6-c-button__text">Skip to content</span>
1050
+ </a>
1058
1051
  </div>
1059
1052
  <header class="pf-v6-c-masthead" id="nav-horizontal-example-masthead">
1060
1053
  <div class="pf-v6-c-masthead__main">
1061
- <a class="pf-v6-c-masthead__brand" href="#">
1062
- <svg height="40px" viewBox="0 0 679 158">
1063
- <title>PF-HorizontalLogo-Color</title>
1064
- <defs>
1065
- <linearGradient
1066
- x1="68%"
1067
- y1="2.25860997e-13%"
1068
- x2="32%"
1069
- y2="100%"
1070
- id="linearGradient-nav-horizontal-example-masthead"
1071
- >
1072
- <stop stop-color="#2B9AF3" offset="0%" />
1073
- <stop
1074
- stop-color="#73BCF7"
1075
- stop-opacity="0.502212631"
1076
- offset="100%"
1077
- />
1078
- </linearGradient>
1079
- </defs>
1080
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1081
- <g
1082
- transform="translate(206.000000, 45.750000)"
1083
- fill="var(--pf-t--global--text--color--regular)"
1084
- fill-rule="nonzero"
1085
- >
1086
- <path
1087
- 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"
1088
- />
1089
- <path
1090
- 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"
1091
- />
1092
- <path
1093
- 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"
1094
- />
1095
- <path
1096
- 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"
1097
- />
1098
- <path
1099
- 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"
1100
- />
1101
- <path
1102
- 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"
1103
- />
1104
- <path
1105
- 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"
1106
- />
1107
- <polygon
1108
- 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"
1109
- />
1110
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1111
- <path
1112
- 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"
1113
- />
1114
- </g>
1115
- <g transform="translate(0.000000, 0.000000)">
1116
- <path
1117
- 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"
1118
- fill="#0066CC"
1119
- />
1120
- <path
1121
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1122
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
1123
- />
1124
- <path
1125
- 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"
1126
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
1127
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1128
- />
1054
+ <div class="pf-v6-c-masthead__brand">
1055
+ <a class="pf-v6-c-masthead__logo" href="#">
1056
+ <svg height="37px" viewBox="0 0 679 158">
1057
+ <title>PF-HorizontalLogo-Color</title>
1058
+ <defs>
1059
+ <linearGradient
1060
+ x1="68%"
1061
+ y1="2.25860997e-13%"
1062
+ x2="32%"
1063
+ y2="100%"
1064
+ id="linearGradient-nav-horizontal-example-masthead"
1065
+ >
1066
+ <stop stop-color="#2B9AF3" offset="0%" />
1067
+ <stop
1068
+ stop-color="#73BCF7"
1069
+ stop-opacity="0.502212631"
1070
+ offset="100%"
1071
+ />
1072
+ </linearGradient>
1073
+ </defs>
1074
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1075
+ <g
1076
+ transform="translate(206.000000, 45.750000)"
1077
+ fill="var(--pf-t--global--text--color--regular)"
1078
+ fill-rule="nonzero"
1079
+ >
1080
+ <path
1081
+ 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"
1082
+ />
1083
+ <path
1084
+ 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"
1085
+ />
1086
+ <path
1087
+ 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"
1088
+ />
1089
+ <path
1090
+ 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"
1091
+ />
1092
+ <path
1093
+ 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"
1094
+ />
1095
+ <path
1096
+ 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"
1097
+ />
1098
+ <path
1099
+ 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"
1100
+ />
1101
+ <polygon
1102
+ 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"
1103
+ />
1104
+ <polygon
1105
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1106
+ />
1107
+ <path
1108
+ 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"
1109
+ />
1110
+ </g>
1111
+ <g transform="translate(0.000000, 0.000000)">
1112
+ <path
1113
+ 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"
1114
+ fill="#0066CC"
1115
+ />
1116
+ <path
1117
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1118
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1119
+ />
1120
+ <path
1121
+ 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"
1122
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1123
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1124
+ />
1125
+ </g>
1129
1126
  </g>
1130
- </g>
1131
- </svg>
1132
- </a>
1127
+ </svg>
1128
+ </a>
1129
+ </div>
1133
1130
  </div>
1134
1131
  <div class="pf-v6-c-masthead__content">
1135
1132
  <div
@@ -1138,39 +1135,9 @@ section: components
1138
1135
  >
1139
1136
  <div class="pf-v6-c-toolbar__content">
1140
1137
  <div class="pf-v6-c-toolbar__content-section">
1141
- <div class="pf-v6-c-toolbar__item">
1142
- <button
1143
- class="pf-v6-c-menu-toggle"
1144
- type="button"
1145
- aria-expanded="false"
1146
- >
1147
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1148
- <span class="pf-v6-c-menu-toggle__controls">
1149
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1150
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1151
- </span>
1152
- </span>
1153
- </button>
1154
- </div>
1155
-
1156
- <div class="pf-v6-c-toolbar__item">
1157
- <button
1158
- class="pf-v6-c-menu-toggle"
1159
- type="button"
1160
- aria-expanded="false"
1161
- >
1162
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1163
- <span class="pf-v6-c-menu-toggle__controls">
1164
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1165
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1166
- </span>
1167
- </span>
1168
- </button>
1169
- </div>
1170
-
1171
1138
  <div
1172
1139
  class="pf-v6-c-toolbar__item pf-m-overflow-container"
1173
- style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
1140
+ style="--pf-v6-c-toolbar__item--MinWidth: 18ch;"
1174
1141
  >
1175
1142
  <nav
1176
1143
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
@@ -1183,28 +1150,40 @@ section: components
1183
1150
  type="button"
1184
1151
  aria-label="Scroll start"
1185
1152
  >
1186
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1153
+ <span class="pf-v6-c-button__icon">
1154
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1155
+ </span>
1187
1156
  </button>
1188
1157
  </div>
1189
1158
  <ul class="pf-v6-c-nav__list" role="list">
1190
1159
  <li class="pf-v6-c-nav__item">
1191
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
1160
+ <a href="#" class="pf-v6-c-nav__link">
1161
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
1162
+ </a>
1192
1163
  </li>
1193
1164
  <li class="pf-v6-c-nav__item">
1194
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
1165
+ <a href="#" class="pf-v6-c-nav__link">
1166
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
1167
+ </a>
1195
1168
  </li>
1196
1169
  <li class="pf-v6-c-nav__item">
1197
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
1170
+ <a href="#" class="pf-v6-c-nav__link">
1171
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
1172
+ </a>
1198
1173
  </li>
1199
1174
  <li class="pf-v6-c-nav__item">
1200
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
1175
+ <a href="#" class="pf-v6-c-nav__link">
1176
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
1177
+ </a>
1201
1178
  </li>
1202
1179
  <li class="pf-v6-c-nav__item">
1203
1180
  <a
1204
1181
  href="#"
1205
1182
  class="pf-v6-c-nav__link pf-m-current"
1206
1183
  aria-current="page"
1207
- >Horizontal nav item 5</a>
1184
+ >
1185
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
1186
+ </a>
1208
1187
  </li>
1209
1188
  </ul>
1210
1189
  <div class="pf-v6-c-nav__scroll-button">
@@ -1213,16 +1192,19 @@ section: components
1213
1192
  type="button"
1214
1193
  aria-label="Scroll end"
1215
1194
  >
1216
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1195
+ <span class="pf-v6-c-button__icon">
1196
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1197
+ </span>
1217
1198
  </button>
1218
1199
  </div>
1219
1200
  </nav>
1220
1201
  </div>
1202
+
1221
1203
  <div
1222
- 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"
1204
+ 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"
1223
1205
  >
1224
1206
  <div
1225
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1207
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1226
1208
  >
1227
1209
  <div class="pf-v6-c-toolbar__item">
1228
1210
  <button
@@ -1261,6 +1243,7 @@ section: components
1261
1243
  </button>
1262
1244
  </div>
1263
1245
  </div>
1246
+
1264
1247
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1265
1248
  <button
1266
1249
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1279,92 +1262,94 @@ section: components
1279
1262
  </div>
1280
1263
  </div>
1281
1264
  </header>
1282
- <main
1283
- class="pf-v6-c-page__main"
1284
- tabindex="-1"
1285
- id="main-content-nav-horizontal-example"
1286
- >
1287
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1288
- <div class="pf-v6-c-page__main-body">
1289
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1290
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1291
- <li class="pf-v6-c-breadcrumb__item">
1292
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1293
- </li>
1294
- <li class="pf-v6-c-breadcrumb__item">
1295
- <span class="pf-v6-c-breadcrumb__item-divider">
1296
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1297
- </span>
1265
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1266
+ <main
1267
+ class="pf-v6-c-page__main"
1268
+ tabindex="-1"
1269
+ id="main-content-nav-horizontal-example"
1270
+ >
1271
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1272
+ <div class="pf-v6-c-page__main-body">
1273
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1274
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1275
+ <li class="pf-v6-c-breadcrumb__item">
1276
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1277
+ </li>
1278
+ <li class="pf-v6-c-breadcrumb__item">
1279
+ <span class="pf-v6-c-breadcrumb__item-divider">
1280
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1281
+ </span>
1298
1282
 
1299
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1300
- </li>
1301
- <li class="pf-v6-c-breadcrumb__item">
1302
- <span class="pf-v6-c-breadcrumb__item-divider">
1303
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1304
- </span>
1283
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1284
+ </li>
1285
+ <li class="pf-v6-c-breadcrumb__item">
1286
+ <span class="pf-v6-c-breadcrumb__item-divider">
1287
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1288
+ </span>
1305
1289
 
1306
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1307
- </li>
1308
- <li class="pf-v6-c-breadcrumb__item">
1309
- <span class="pf-v6-c-breadcrumb__item-divider">
1310
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1311
- </span>
1290
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1291
+ </li>
1292
+ <li class="pf-v6-c-breadcrumb__item">
1293
+ <span class="pf-v6-c-breadcrumb__item-divider">
1294
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1295
+ </span>
1312
1296
 
1313
- <a
1314
- href="#"
1315
- class="pf-v6-c-breadcrumb__link pf-m-current"
1316
- aria-current="page"
1317
- >Section landing</a>
1318
- </li>
1319
- </ol>
1320
- </nav>
1321
- </div>
1322
- </section>
1323
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1324
- <div class="pf-v6-c-page__main-body">
1325
- <div class="pf-v6-c-content">
1326
- <h1>Main title</h1>
1327
- <p>This is a full page demo.</p>
1297
+ <a
1298
+ href="#"
1299
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1300
+ aria-current="page"
1301
+ >Section landing</a>
1302
+ </li>
1303
+ </ol>
1304
+ </nav>
1328
1305
  </div>
1329
- </div>
1330
- </section>
1331
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1332
- <div class="pf-v6-c-page__main-body">
1333
- <div class="pf-v6-l-gallery pf-m-gutter">
1334
- <div class="pf-v6-c-card">
1335
- <div class="pf-v6-c-card__body">This is a card</div>
1336
- </div>
1337
- <div class="pf-v6-c-card">
1338
- <div class="pf-v6-c-card__body">This is a card</div>
1339
- </div>
1340
- <div class="pf-v6-c-card">
1341
- <div class="pf-v6-c-card__body">This is a card</div>
1342
- </div>
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>
1306
+ </section>
1307
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1308
+ <div class="pf-v6-c-page__main-body">
1309
+ <div class="pf-v6-c-content">
1310
+ <h1>Main title</h1>
1311
+ <p>This is a full page demo.</p>
1351
1312
  </div>
1352
- <div class="pf-v6-c-card">
1353
- <div class="pf-v6-c-card__body">This is a card</div>
1354
- </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>
1313
+ </div>
1314
+ </section>
1315
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1316
+ <div class="pf-v6-c-page__main-body">
1317
+ <div class="pf-v6-l-gallery pf-m-gutter">
1318
+ <div class="pf-v6-c-card">
1319
+ <div class="pf-v6-c-card__body">This is a card</div>
1320
+ </div>
1321
+ <div class="pf-v6-c-card">
1322
+ <div class="pf-v6-c-card__body">This is a card</div>
1323
+ </div>
1324
+ <div class="pf-v6-c-card">
1325
+ <div class="pf-v6-c-card__body">This is a card</div>
1326
+ </div>
1327
+ <div class="pf-v6-c-card">
1328
+ <div class="pf-v6-c-card__body">This is a card</div>
1329
+ </div>
1330
+ <div class="pf-v6-c-card">
1331
+ <div class="pf-v6-c-card__body">This is a card</div>
1332
+ </div>
1333
+ <div class="pf-v6-c-card">
1334
+ <div class="pf-v6-c-card__body">This is a card</div>
1335
+ </div>
1336
+ <div class="pf-v6-c-card">
1337
+ <div class="pf-v6-c-card__body">This is a card</div>
1338
+ </div>
1339
+ <div class="pf-v6-c-card">
1340
+ <div class="pf-v6-c-card__body">This is a card</div>
1341
+ </div>
1342
+ <div class="pf-v6-c-card">
1343
+ <div class="pf-v6-c-card__body">This is a card</div>
1344
+ </div>
1345
+ <div class="pf-v6-c-card">
1346
+ <div class="pf-v6-c-card__body">This is a card</div>
1347
+ </div>
1363
1348
  </div>
1364
1349
  </div>
1365
- </div>
1366
- </section>
1367
- </main>
1350
+ </section>
1351
+ </main>
1352
+ </div>
1368
1353
  </div>
1369
1354
 
1370
1355
  ```
@@ -1377,91 +1362,99 @@ section: components
1377
1362
  <a
1378
1363
  class="pf-v6-c-button pf-m-primary"
1379
1364
  href="#main-content-nav-horizontal-subnav-example"
1380
- >Skip to content</a>
1365
+ >
1366
+ <span class="pf-v6-c-button__text">Skip to content</span>
1367
+ </a>
1381
1368
  </div>
1382
1369
  <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-masthead">
1383
- <span class="pf-v6-c-masthead__toggle">
1384
- <button
1385
- class="pf-v6-c-button pf-m-plain"
1386
- type="button"
1387
- aria-label="Global navigation"
1388
- >
1389
- <i class="fas fa-bars" aria-hidden="true"></i>
1390
- </button>
1391
- </span>
1392
1370
  <div class="pf-v6-c-masthead__main">
1393
- <a class="pf-v6-c-masthead__brand" href="#">
1394
- <svg height="40px" viewBox="0 0 679 158">
1395
- <title>PF-HorizontalLogo-Color</title>
1396
- <defs>
1397
- <linearGradient
1398
- x1="68%"
1399
- y1="2.25860997e-13%"
1400
- x2="32%"
1401
- y2="100%"
1402
- id="linearGradient-nav-horizontal-subnav-example-masthead"
1403
- >
1404
- <stop stop-color="#2B9AF3" offset="0%" />
1405
- <stop
1406
- stop-color="#73BCF7"
1407
- stop-opacity="0.502212631"
1408
- offset="100%"
1409
- />
1410
- </linearGradient>
1411
- </defs>
1412
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1413
- <g
1414
- transform="translate(206.000000, 45.750000)"
1415
- fill="var(--pf-t--global--text--color--regular)"
1416
- fill-rule="nonzero"
1417
- >
1418
- <path
1419
- 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"
1420
- />
1421
- <path
1422
- 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"
1423
- />
1424
- <path
1425
- 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"
1426
- />
1427
- <path
1428
- 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"
1429
- />
1430
- <path
1431
- 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"
1432
- />
1433
- <path
1434
- 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"
1435
- />
1436
- <path
1437
- 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"
1438
- />
1439
- <polygon
1440
- 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"
1441
- />
1442
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1443
- <path
1444
- 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"
1445
- />
1446
- </g>
1447
- <g transform="translate(0.000000, 0.000000)">
1448
- <path
1449
- 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"
1450
- fill="#0066CC"
1451
- />
1452
- <path
1453
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1454
- fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1455
- />
1456
- <path
1457
- 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"
1458
- fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1459
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1460
- />
1371
+ <span class="pf-v6-c-masthead__toggle">
1372
+ <button
1373
+ class="pf-v6-c-button pf-m-plain"
1374
+ type="button"
1375
+ aria-label="Global navigation"
1376
+ >
1377
+ <span class="pf-v6-c-button__icon">
1378
+ <i class="fas fa-bars" aria-hidden="true"></i>
1379
+ </span>
1380
+ </button>
1381
+ </span>
1382
+ <div class="pf-v6-c-masthead__brand">
1383
+ <a class="pf-v6-c-masthead__logo" href="#">
1384
+ <svg height="37px" viewBox="0 0 679 158">
1385
+ <title>PF-HorizontalLogo-Color</title>
1386
+ <defs>
1387
+ <linearGradient
1388
+ x1="68%"
1389
+ y1="2.25860997e-13%"
1390
+ x2="32%"
1391
+ y2="100%"
1392
+ id="linearGradient-nav-horizontal-subnav-example-masthead"
1393
+ >
1394
+ <stop stop-color="#2B9AF3" offset="0%" />
1395
+ <stop
1396
+ stop-color="#73BCF7"
1397
+ stop-opacity="0.502212631"
1398
+ offset="100%"
1399
+ />
1400
+ </linearGradient>
1401
+ </defs>
1402
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1403
+ <g
1404
+ transform="translate(206.000000, 45.750000)"
1405
+ fill="var(--pf-t--global--text--color--regular)"
1406
+ fill-rule="nonzero"
1407
+ >
1408
+ <path
1409
+ 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"
1410
+ />
1411
+ <path
1412
+ 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"
1413
+ />
1414
+ <path
1415
+ 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"
1416
+ />
1417
+ <path
1418
+ 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"
1419
+ />
1420
+ <path
1421
+ 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"
1422
+ />
1423
+ <path
1424
+ 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"
1425
+ />
1426
+ <path
1427
+ 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"
1428
+ />
1429
+ <polygon
1430
+ 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"
1431
+ />
1432
+ <polygon
1433
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1434
+ />
1435
+ <path
1436
+ 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"
1437
+ />
1438
+ </g>
1439
+ <g transform="translate(0.000000, 0.000000)">
1440
+ <path
1441
+ 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"
1442
+ fill="#0066CC"
1443
+ />
1444
+ <path
1445
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1446
+ fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1447
+ />
1448
+ <path
1449
+ 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"
1450
+ fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1451
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1452
+ />
1453
+ </g>
1461
1454
  </g>
1462
- </g>
1463
- </svg>
1464
- </a>
1455
+ </svg>
1456
+ </a>
1457
+ </div>
1465
1458
  </div>
1466
1459
  <div class="pf-v6-c-masthead__content">
1467
1460
  <div
@@ -1470,41 +1463,11 @@ section: components
1470
1463
  >
1471
1464
  <div class="pf-v6-c-toolbar__content">
1472
1465
  <div class="pf-v6-c-toolbar__content-section">
1473
- <div class="pf-v6-c-toolbar__item">
1474
- <button
1475
- class="pf-v6-c-menu-toggle"
1476
- type="button"
1477
- aria-expanded="false"
1478
- >
1479
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1480
- <span class="pf-v6-c-menu-toggle__controls">
1481
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1482
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1483
- </span>
1484
- </span>
1485
- </button>
1486
- </div>
1487
-
1488
- <div class="pf-v6-c-toolbar__item">
1489
- <button
1490
- class="pf-v6-c-menu-toggle"
1491
- type="button"
1492
- aria-expanded="false"
1493
- >
1494
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1495
- <span class="pf-v6-c-menu-toggle__controls">
1496
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1497
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1498
- </span>
1499
- </span>
1500
- </button>
1501
- </div>
1502
-
1503
1466
  <div
1504
- 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"
1467
+ 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"
1505
1468
  >
1506
1469
  <div
1507
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1470
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1508
1471
  >
1509
1472
  <div class="pf-v6-c-toolbar__item">
1510
1473
  <button
@@ -1543,6 +1506,7 @@ section: components
1543
1506
  </button>
1544
1507
  </div>
1545
1508
  </div>
1509
+
1546
1510
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1547
1511
  <button
1548
1512
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1570,132 +1534,151 @@ section: components
1570
1534
  >
1571
1535
  <ul class="pf-v6-c-nav__list" role="list">
1572
1536
  <li class="pf-v6-c-nav__item">
1573
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1537
+ <a href="#" class="pf-v6-c-nav__link">
1538
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1539
+ </a>
1574
1540
  </li>
1575
1541
  <li class="pf-v6-c-nav__item">
1576
1542
  <a
1577
1543
  href="#"
1578
1544
  class="pf-v6-c-nav__link pf-m-current"
1579
1545
  aria-current="page"
1580
- >Policy</a>
1546
+ >
1547
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1548
+ </a>
1581
1549
  </li>
1582
1550
  <li class="pf-v6-c-nav__item">
1583
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1551
+ <a href="#" class="pf-v6-c-nav__link">
1552
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1553
+ </a>
1584
1554
  </li>
1585
1555
  <li class="pf-v6-c-nav__item">
1586
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1556
+ <a href="#" class="pf-v6-c-nav__link">
1557
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1558
+ </a>
1587
1559
  </li>
1588
1560
  <li class="pf-v6-c-nav__item">
1589
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1561
+ <a href="#" class="pf-v6-c-nav__link">
1562
+ <span class="pf-v6-c-nav__link-text">Server</span>
1563
+ </a>
1590
1564
  </li>
1591
1565
  </ul>
1592
1566
  </nav>
1593
1567
  </div>
1594
1568
  </div>
1595
- <main
1596
- class="pf-v6-c-page__main"
1597
- tabindex="-1"
1598
- id="main-content-nav-horizontal-subnav-example"
1599
- >
1600
- <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
1601
- <div class="pf-v6-c-page__main-body">
1602
- <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
1603
- <ul class="pf-v6-c-nav__list" role="list">
1604
- <li class="pf-v6-c-nav__item">
1605
- <a
1606
- href="#"
1607
- class="pf-v6-c-nav__link pf-m-current"
1608
- aria-current="page"
1609
- >Horizontal subnav item 1</a>
1610
- </li>
1611
- <li class="pf-v6-c-nav__item">
1612
- <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
1613
- </li>
1614
- </ul>
1615
- </nav>
1616
- </div>
1617
- </section>
1618
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1619
- <div class="pf-v6-c-page__main-body">
1620
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1621
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1622
- <li class="pf-v6-c-breadcrumb__item">
1623
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1624
- </li>
1625
- <li class="pf-v6-c-breadcrumb__item">
1626
- <span class="pf-v6-c-breadcrumb__item-divider">
1627
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1628
- </span>
1569
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1570
+ <main
1571
+ class="pf-v6-c-page__main"
1572
+ tabindex="-1"
1573
+ id="main-content-nav-horizontal-subnav-example"
1574
+ >
1575
+ <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
1576
+ <div class="pf-v6-c-page__main-body">
1577
+ <nav
1578
+ class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
1579
+ aria-label="Local"
1580
+ >
1581
+ <ul class="pf-v6-c-nav__list" role="list">
1582
+ <li class="pf-v6-c-nav__item">
1583
+ <a
1584
+ href="#"
1585
+ class="pf-v6-c-nav__link pf-m-current"
1586
+ aria-current="page"
1587
+ >
1588
+ <span class="pf-v6-c-nav__link-text">Horizontal subnav item 1</span>
1589
+ </a>
1590
+ </li>
1591
+ <li class="pf-v6-c-nav__item">
1592
+ <a href="#" class="pf-v6-c-nav__link">
1593
+ <span class="pf-v6-c-nav__link-text">Horizontal subnav item 2</span>
1594
+ </a>
1595
+ </li>
1596
+ </ul>
1597
+ </nav>
1598
+ </div>
1599
+ </section>
1600
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1601
+ <div class="pf-v6-c-page__main-body">
1602
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1603
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1604
+ <li class="pf-v6-c-breadcrumb__item">
1605
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1606
+ </li>
1607
+ <li class="pf-v6-c-breadcrumb__item">
1608
+ <span class="pf-v6-c-breadcrumb__item-divider">
1609
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1610
+ </span>
1629
1611
 
1630
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1631
- </li>
1632
- <li class="pf-v6-c-breadcrumb__item">
1633
- <span class="pf-v6-c-breadcrumb__item-divider">
1634
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1635
- </span>
1612
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1613
+ </li>
1614
+ <li class="pf-v6-c-breadcrumb__item">
1615
+ <span class="pf-v6-c-breadcrumb__item-divider">
1616
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1617
+ </span>
1636
1618
 
1637
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1638
- </li>
1639
- <li class="pf-v6-c-breadcrumb__item">
1640
- <span class="pf-v6-c-breadcrumb__item-divider">
1641
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1642
- </span>
1619
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1620
+ </li>
1621
+ <li class="pf-v6-c-breadcrumb__item">
1622
+ <span class="pf-v6-c-breadcrumb__item-divider">
1623
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1624
+ </span>
1643
1625
 
1644
- <a
1645
- href="#"
1646
- class="pf-v6-c-breadcrumb__link pf-m-current"
1647
- aria-current="page"
1648
- >Section landing</a>
1649
- </li>
1650
- </ol>
1651
- </nav>
1652
- </div>
1653
- </section>
1654
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1655
- <div class="pf-v6-c-page__main-body">
1656
- <div class="pf-v6-c-content">
1657
- <h1>Main title</h1>
1658
- <p>This is a full page demo.</p>
1626
+ <a
1627
+ href="#"
1628
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1629
+ aria-current="page"
1630
+ >Section landing</a>
1631
+ </li>
1632
+ </ol>
1633
+ </nav>
1659
1634
  </div>
1660
- </div>
1661
- </section>
1662
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1663
- <div class="pf-v6-c-page__main-body">
1664
- <div class="pf-v6-l-gallery pf-m-gutter">
1665
- <div class="pf-v6-c-card">
1666
- <div class="pf-v6-c-card__body">This is a card</div>
1667
- </div>
1668
- <div class="pf-v6-c-card">
1669
- <div class="pf-v6-c-card__body">This is a card</div>
1670
- </div>
1671
- <div class="pf-v6-c-card">
1672
- <div class="pf-v6-c-card__body">This is a card</div>
1673
- </div>
1674
- <div class="pf-v6-c-card">
1675
- <div class="pf-v6-c-card__body">This is a card</div>
1676
- </div>
1677
- <div class="pf-v6-c-card">
1678
- <div class="pf-v6-c-card__body">This is a card</div>
1679
- </div>
1680
- <div class="pf-v6-c-card">
1681
- <div class="pf-v6-c-card__body">This is a card</div>
1635
+ </section>
1636
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1637
+ <div class="pf-v6-c-page__main-body">
1638
+ <div class="pf-v6-c-content">
1639
+ <h1>Main title</h1>
1640
+ <p>This is a full page demo.</p>
1682
1641
  </div>
1683
- <div class="pf-v6-c-card">
1684
- <div class="pf-v6-c-card__body">This is a card</div>
1685
- </div>
1686
- <div class="pf-v6-c-card">
1687
- <div class="pf-v6-c-card__body">This is a card</div>
1688
- </div>
1689
- <div class="pf-v6-c-card">
1690
- <div class="pf-v6-c-card__body">This is a card</div>
1691
- </div>
1692
- <div class="pf-v6-c-card">
1693
- <div class="pf-v6-c-card__body">This is a card</div>
1642
+ </div>
1643
+ </section>
1644
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1645
+ <div class="pf-v6-c-page__main-body">
1646
+ <div class="pf-v6-l-gallery pf-m-gutter">
1647
+ <div class="pf-v6-c-card">
1648
+ <div class="pf-v6-c-card__body">This is a card</div>
1649
+ </div>
1650
+ <div class="pf-v6-c-card">
1651
+ <div class="pf-v6-c-card__body">This is a card</div>
1652
+ </div>
1653
+ <div class="pf-v6-c-card">
1654
+ <div class="pf-v6-c-card__body">This is a card</div>
1655
+ </div>
1656
+ <div class="pf-v6-c-card">
1657
+ <div class="pf-v6-c-card__body">This is a card</div>
1658
+ </div>
1659
+ <div class="pf-v6-c-card">
1660
+ <div class="pf-v6-c-card__body">This is a card</div>
1661
+ </div>
1662
+ <div class="pf-v6-c-card">
1663
+ <div class="pf-v6-c-card__body">This is a card</div>
1664
+ </div>
1665
+ <div class="pf-v6-c-card">
1666
+ <div class="pf-v6-c-card__body">This is a card</div>
1667
+ </div>
1668
+ <div class="pf-v6-c-card">
1669
+ <div class="pf-v6-c-card__body">This is a card</div>
1670
+ </div>
1671
+ <div class="pf-v6-c-card">
1672
+ <div class="pf-v6-c-card__body">This is a card</div>
1673
+ </div>
1674
+ <div class="pf-v6-c-card">
1675
+ <div class="pf-v6-c-card__body">This is a card</div>
1676
+ </div>
1694
1677
  </div>
1695
1678
  </div>
1696
- </div>
1697
- </section>
1698
- </main>
1679
+ </section>
1680
+ </main>
1681
+ </div>
1699
1682
  </div>
1700
1683
 
1701
1684
  ```
@@ -1708,94 +1691,102 @@ section: components
1708
1691
  <a
1709
1692
  class="pf-v6-c-button pf-m-primary"
1710
1693
  href="#main-content-nav-horizontal-example"
1711
- >Skip to content</a>
1694
+ >
1695
+ <span class="pf-v6-c-button__text">Skip to content</span>
1696
+ </a>
1712
1697
  </div>
1713
1698
  <header
1714
1699
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
1715
1700
  id="nav-horizontal-example-masthead"
1716
1701
  >
1717
- <span class="pf-v6-c-masthead__toggle">
1718
- <button
1719
- class="pf-v6-c-button pf-m-plain"
1720
- type="button"
1721
- aria-label="Global navigation"
1722
- >
1723
- <i class="fas fa-bars" aria-hidden="true"></i>
1724
- </button>
1725
- </span>
1726
1702
  <div class="pf-v6-c-masthead__main">
1727
- <a class="pf-v6-c-masthead__brand" href="#">
1728
- <svg height="40px" viewBox="0 0 679 158">
1729
- <title>PF-HorizontalLogo-Color</title>
1730
- <defs>
1731
- <linearGradient
1732
- x1="68%"
1733
- y1="2.25860997e-13%"
1734
- x2="32%"
1735
- y2="100%"
1736
- id="linearGradient-nav-horizontal-example-masthead"
1737
- >
1738
- <stop stop-color="#2B9AF3" offset="0%" />
1739
- <stop
1740
- stop-color="#73BCF7"
1741
- stop-opacity="0.502212631"
1742
- offset="100%"
1743
- />
1744
- </linearGradient>
1745
- </defs>
1746
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1747
- <g
1748
- transform="translate(206.000000, 45.750000)"
1749
- fill="var(--pf-t--global--text--color--regular)"
1750
- fill-rule="nonzero"
1751
- >
1752
- <path
1753
- 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"
1754
- />
1755
- <path
1756
- 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"
1757
- />
1758
- <path
1759
- 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"
1760
- />
1761
- <path
1762
- 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"
1763
- />
1764
- <path
1765
- 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"
1766
- />
1767
- <path
1768
- 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"
1769
- />
1770
- <path
1771
- 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"
1772
- />
1773
- <polygon
1774
- 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"
1775
- />
1776
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1777
- <path
1778
- 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"
1779
- />
1780
- </g>
1781
- <g transform="translate(0.000000, 0.000000)">
1782
- <path
1783
- 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"
1784
- fill="#0066CC"
1785
- />
1786
- <path
1787
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1788
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
1789
- />
1790
- <path
1791
- 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"
1792
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
1793
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1794
- />
1703
+ <span class="pf-v6-c-masthead__toggle">
1704
+ <button
1705
+ class="pf-v6-c-button pf-m-plain"
1706
+ type="button"
1707
+ aria-label="Global navigation"
1708
+ >
1709
+ <span class="pf-v6-c-button__icon">
1710
+ <i class="fas fa-bars" aria-hidden="true"></i>
1711
+ </span>
1712
+ </button>
1713
+ </span>
1714
+ <div class="pf-v6-c-masthead__brand">
1715
+ <a class="pf-v6-c-masthead__logo" href="#">
1716
+ <svg height="37px" viewBox="0 0 679 158">
1717
+ <title>PF-HorizontalLogo-Color</title>
1718
+ <defs>
1719
+ <linearGradient
1720
+ x1="68%"
1721
+ y1="2.25860997e-13%"
1722
+ x2="32%"
1723
+ y2="100%"
1724
+ id="linearGradient-nav-horizontal-example-masthead"
1725
+ >
1726
+ <stop stop-color="#2B9AF3" offset="0%" />
1727
+ <stop
1728
+ stop-color="#73BCF7"
1729
+ stop-opacity="0.502212631"
1730
+ offset="100%"
1731
+ />
1732
+ </linearGradient>
1733
+ </defs>
1734
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1735
+ <g
1736
+ transform="translate(206.000000, 45.750000)"
1737
+ fill="var(--pf-t--global--text--color--regular)"
1738
+ fill-rule="nonzero"
1739
+ >
1740
+ <path
1741
+ 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"
1742
+ />
1743
+ <path
1744
+ 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"
1745
+ />
1746
+ <path
1747
+ 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"
1748
+ />
1749
+ <path
1750
+ 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"
1751
+ />
1752
+ <path
1753
+ 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"
1754
+ />
1755
+ <path
1756
+ 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"
1757
+ />
1758
+ <path
1759
+ 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"
1760
+ />
1761
+ <polygon
1762
+ 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"
1763
+ />
1764
+ <polygon
1765
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1766
+ />
1767
+ <path
1768
+ 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"
1769
+ />
1770
+ </g>
1771
+ <g transform="translate(0.000000, 0.000000)">
1772
+ <path
1773
+ 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"
1774
+ fill="#0066CC"
1775
+ />
1776
+ <path
1777
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1778
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1779
+ />
1780
+ <path
1781
+ 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"
1782
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1783
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1784
+ />
1785
+ </g>
1795
1786
  </g>
1796
- </g>
1797
- </svg>
1798
- </a>
1787
+ </svg>
1788
+ </a>
1789
+ </div>
1799
1790
  </div>
1800
1791
  <div class="pf-v6-c-masthead__content">
1801
1792
  <div
@@ -1804,39 +1795,9 @@ section: components
1804
1795
  >
1805
1796
  <div class="pf-v6-c-toolbar__content">
1806
1797
  <div class="pf-v6-c-toolbar__content-section">
1807
- <div class="pf-v6-c-toolbar__item">
1808
- <button
1809
- class="pf-v6-c-menu-toggle"
1810
- type="button"
1811
- aria-expanded="false"
1812
- >
1813
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1814
- <span class="pf-v6-c-menu-toggle__controls">
1815
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1816
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1817
- </span>
1818
- </span>
1819
- </button>
1820
- </div>
1821
-
1822
- <div class="pf-v6-c-toolbar__item">
1823
- <button
1824
- class="pf-v6-c-menu-toggle"
1825
- type="button"
1826
- aria-expanded="false"
1827
- >
1828
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1829
- <span class="pf-v6-c-menu-toggle__controls">
1830
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1831
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1832
- </span>
1833
- </span>
1834
- </button>
1835
- </div>
1836
-
1837
1798
  <div
1838
1799
  class="pf-v6-c-toolbar__item pf-m-overflow-container"
1839
- style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
1800
+ style="--pf-v6-c-toolbar__item--MinWidth: 18ch;"
1840
1801
  >
1841
1802
  <nav
1842
1803
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
@@ -1849,28 +1810,40 @@ section: components
1849
1810
  type="button"
1850
1811
  aria-label="Scroll start"
1851
1812
  >
1852
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1813
+ <span class="pf-v6-c-button__icon">
1814
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1815
+ </span>
1853
1816
  </button>
1854
1817
  </div>
1855
1818
  <ul class="pf-v6-c-nav__list" role="list">
1856
1819
  <li class="pf-v6-c-nav__item">
1857
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
1820
+ <a href="#" class="pf-v6-c-nav__link">
1821
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
1822
+ </a>
1858
1823
  </li>
1859
1824
  <li class="pf-v6-c-nav__item">
1860
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
1825
+ <a href="#" class="pf-v6-c-nav__link">
1826
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
1827
+ </a>
1861
1828
  </li>
1862
1829
  <li class="pf-v6-c-nav__item">
1863
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
1830
+ <a href="#" class="pf-v6-c-nav__link">
1831
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
1832
+ </a>
1864
1833
  </li>
1865
1834
  <li class="pf-v6-c-nav__item">
1866
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
1835
+ <a href="#" class="pf-v6-c-nav__link">
1836
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
1837
+ </a>
1867
1838
  </li>
1868
1839
  <li class="pf-v6-c-nav__item">
1869
1840
  <a
1870
1841
  href="#"
1871
1842
  class="pf-v6-c-nav__link pf-m-current"
1872
1843
  aria-current="page"
1873
- >Horizontal nav item 5</a>
1844
+ >
1845
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
1846
+ </a>
1874
1847
  </li>
1875
1848
  </ul>
1876
1849
  <div class="pf-v6-c-nav__scroll-button">
@@ -1879,16 +1852,19 @@ section: components
1879
1852
  type="button"
1880
1853
  aria-label="Scroll end"
1881
1854
  >
1882
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1855
+ <span class="pf-v6-c-button__icon">
1856
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1857
+ </span>
1883
1858
  </button>
1884
1859
  </div>
1885
1860
  </nav>
1886
1861
  </div>
1862
+
1887
1863
  <div
1888
- 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"
1864
+ 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"
1889
1865
  >
1890
1866
  <div
1891
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1867
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1892
1868
  >
1893
1869
  <div class="pf-v6-c-toolbar__item">
1894
1870
  <button
@@ -1927,6 +1903,7 @@ section: components
1927
1903
  </button>
1928
1904
  </div>
1929
1905
  </div>
1906
+
1930
1907
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1931
1908
  <button
1932
1909
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1945,110 +1922,119 @@ section: components
1945
1922
  </div>
1946
1923
  </div>
1947
1924
  </header>
1948
- <main
1949
- class="pf-v6-c-page__main"
1950
- tabindex="-1"
1951
- id="main-content-nav-horizontal-example"
1952
- >
1953
- <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
1954
- <div class="pf-v6-c-page__main-body">
1955
- <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
1956
- <ul class="pf-v6-c-nav__list" role="list">
1957
- <li class="pf-v6-c-nav__item">
1958
- <a
1959
- href="#"
1960
- class="pf-v6-c-nav__link pf-m-current"
1961
- aria-current="page"
1962
- >Horizontal subnav item 1</a>
1963
- </li>
1964
- <li class="pf-v6-c-nav__item">
1965
- <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
1966
- </li>
1967
- </ul>
1968
- </nav>
1969
- </div>
1970
- </section>
1971
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1972
- <div class="pf-v6-c-page__main-body">
1973
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1974
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1975
- <li class="pf-v6-c-breadcrumb__item">
1976
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1977
- </li>
1978
- <li class="pf-v6-c-breadcrumb__item">
1979
- <span class="pf-v6-c-breadcrumb__item-divider">
1980
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1981
- </span>
1925
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1926
+ <main
1927
+ class="pf-v6-c-page__main"
1928
+ tabindex="-1"
1929
+ id="main-content-nav-horizontal-example"
1930
+ >
1931
+ <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
1932
+ <div class="pf-v6-c-page__main-body">
1933
+ <nav
1934
+ class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
1935
+ aria-label="Local"
1936
+ >
1937
+ <ul class="pf-v6-c-nav__list" role="list">
1938
+ <li class="pf-v6-c-nav__item">
1939
+ <a
1940
+ href="#"
1941
+ class="pf-v6-c-nav__link pf-m-current"
1942
+ aria-current="page"
1943
+ >
1944
+ <span class="pf-v6-c-nav__link-text">Horizontal subnav item 1</span>
1945
+ </a>
1946
+ </li>
1947
+ <li class="pf-v6-c-nav__item">
1948
+ <a href="#" class="pf-v6-c-nav__link">
1949
+ <span class="pf-v6-c-nav__link-text">Horizontal subnav item 2</span>
1950
+ </a>
1951
+ </li>
1952
+ </ul>
1953
+ </nav>
1954
+ </div>
1955
+ </section>
1956
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1957
+ <div class="pf-v6-c-page__main-body">
1958
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1959
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1960
+ <li class="pf-v6-c-breadcrumb__item">
1961
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1962
+ </li>
1963
+ <li class="pf-v6-c-breadcrumb__item">
1964
+ <span class="pf-v6-c-breadcrumb__item-divider">
1965
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1966
+ </span>
1982
1967
 
1983
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1984
- </li>
1985
- <li class="pf-v6-c-breadcrumb__item">
1986
- <span class="pf-v6-c-breadcrumb__item-divider">
1987
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1988
- </span>
1968
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1969
+ </li>
1970
+ <li class="pf-v6-c-breadcrumb__item">
1971
+ <span class="pf-v6-c-breadcrumb__item-divider">
1972
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1973
+ </span>
1989
1974
 
1990
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1991
- </li>
1992
- <li class="pf-v6-c-breadcrumb__item">
1993
- <span class="pf-v6-c-breadcrumb__item-divider">
1994
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1995
- </span>
1975
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1976
+ </li>
1977
+ <li class="pf-v6-c-breadcrumb__item">
1978
+ <span class="pf-v6-c-breadcrumb__item-divider">
1979
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1980
+ </span>
1996
1981
 
1997
- <a
1998
- href="#"
1999
- class="pf-v6-c-breadcrumb__link pf-m-current"
2000
- aria-current="page"
2001
- >Section landing</a>
2002
- </li>
2003
- </ol>
2004
- </nav>
2005
- </div>
2006
- </section>
2007
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2008
- <div class="pf-v6-c-page__main-body">
2009
- <div class="pf-v6-c-content">
2010
- <h1>Main title</h1>
2011
- <p>This is a full page demo.</p>
1982
+ <a
1983
+ href="#"
1984
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1985
+ aria-current="page"
1986
+ >Section landing</a>
1987
+ </li>
1988
+ </ol>
1989
+ </nav>
2012
1990
  </div>
2013
- </div>
2014
- </section>
2015
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2016
- <div class="pf-v6-c-page__main-body">
2017
- <div class="pf-v6-l-gallery pf-m-gutter">
2018
- <div class="pf-v6-c-card">
2019
- <div class="pf-v6-c-card__body">This is a card</div>
2020
- </div>
2021
- <div class="pf-v6-c-card">
2022
- <div class="pf-v6-c-card__body">This is a card</div>
2023
- </div>
2024
- <div class="pf-v6-c-card">
2025
- <div class="pf-v6-c-card__body">This is a card</div>
2026
- </div>
2027
- <div class="pf-v6-c-card">
2028
- <div class="pf-v6-c-card__body">This is a card</div>
1991
+ </section>
1992
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1993
+ <div class="pf-v6-c-page__main-body">
1994
+ <div class="pf-v6-c-content">
1995
+ <h1>Main title</h1>
1996
+ <p>This is a full page demo.</p>
2029
1997
  </div>
2030
- <div class="pf-v6-c-card">
2031
- <div class="pf-v6-c-card__body">This is a card</div>
2032
- </div>
2033
- <div class="pf-v6-c-card">
2034
- <div class="pf-v6-c-card__body">This is a card</div>
2035
- </div>
2036
- <div class="pf-v6-c-card">
2037
- <div class="pf-v6-c-card__body">This is a card</div>
2038
- </div>
2039
- <div class="pf-v6-c-card">
2040
- <div class="pf-v6-c-card__body">This is a card</div>
2041
- </div>
2042
- <div class="pf-v6-c-card">
2043
- <div class="pf-v6-c-card__body">This is a card</div>
2044
- </div>
2045
- <div class="pf-v6-c-card">
2046
- <div class="pf-v6-c-card__body">This is a card</div>
1998
+ </div>
1999
+ </section>
2000
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2001
+ <div class="pf-v6-c-page__main-body">
2002
+ <div class="pf-v6-l-gallery pf-m-gutter">
2003
+ <div class="pf-v6-c-card">
2004
+ <div class="pf-v6-c-card__body">This is a card</div>
2005
+ </div>
2006
+ <div class="pf-v6-c-card">
2007
+ <div class="pf-v6-c-card__body">This is a card</div>
2008
+ </div>
2009
+ <div class="pf-v6-c-card">
2010
+ <div class="pf-v6-c-card__body">This is a card</div>
2011
+ </div>
2012
+ <div class="pf-v6-c-card">
2013
+ <div class="pf-v6-c-card__body">This is a card</div>
2014
+ </div>
2015
+ <div class="pf-v6-c-card">
2016
+ <div class="pf-v6-c-card__body">This is a card</div>
2017
+ </div>
2018
+ <div class="pf-v6-c-card">
2019
+ <div class="pf-v6-c-card__body">This is a card</div>
2020
+ </div>
2021
+ <div class="pf-v6-c-card">
2022
+ <div class="pf-v6-c-card__body">This is a card</div>
2023
+ </div>
2024
+ <div class="pf-v6-c-card">
2025
+ <div class="pf-v6-c-card__body">This is a card</div>
2026
+ </div>
2027
+ <div class="pf-v6-c-card">
2028
+ <div class="pf-v6-c-card__body">This is a card</div>
2029
+ </div>
2030
+ <div class="pf-v6-c-card">
2031
+ <div class="pf-v6-c-card__body">This is a card</div>
2032
+ </div>
2047
2033
  </div>
2048
2034
  </div>
2049
- </div>
2050
- </section>
2051
- </main>
2035
+ </section>
2036
+ </main>
2037
+ </div>
2052
2038
  </div>
2053
2039
 
2054
2040
  ```