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

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/_fixed-width.scss +3 -1
  5. package/assets/fontawesome/_icons.scss +1333 -1330
  6. package/assets/fontawesome/_index.scss +11 -0
  7. package/assets/fontawesome/_larger.scss +4 -2
  8. package/assets/fontawesome/_list.scss +4 -2
  9. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  10. package/assets/fontawesome/_screen-reader.scss +1 -0
  11. package/assets/fontawesome/_stacked.scss +3 -1
  12. package/assets/fontawesome/_variables.scss +4 -4
  13. package/assets/fontawesome/fontawesome.scss +12 -12
  14. package/assets/icons/iconUnicodes.json +6 -0
  15. package/assets/images/img_avatar-dark.svg +22 -16
  16. package/assets/images/img_avatar-light.svg +25 -18
  17. package/assets/images/pf-background.svg +21 -21
  18. package/assets/images/pf_logo.svg +11 -11
  19. package/assets/images/pf_logo_white.svg +16 -17
  20. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  21. package/assets/pficon/pficon.scss +310 -271
  22. package/base/_index.scss +10 -0
  23. package/base/{_globals.scss → normalize.scss} +15 -48
  24. package/base/patternfly-common.css +14 -0
  25. package/base/patternfly-common.scss +69 -2
  26. package/base/patternfly-fa-icons.css +2787 -1420
  27. package/base/patternfly-fa-icons.scss +53 -2
  28. package/base/patternfly-fonts.css +10 -80
  29. package/base/patternfly-fonts.scss +49 -2
  30. package/base/patternfly-pf-icons.css +158 -134
  31. package/base/patternfly-pf-icons.scss +1 -2
  32. package/base/patternfly-svg-icons.css +5 -0
  33. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  34. package/base/patternfly-variables.css +1094 -1206
  35. package/base/patternfly-variables.scss +20 -2
  36. package/base/reset.scss +33 -0
  37. package/base/tokens/_index.scss +6 -0
  38. package/base/tokens/tokens-charts-dark.scss +173 -0
  39. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  40. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +310 -294
  41. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +580 -447
  42. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +16 -34
  43. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  44. package/components/AboutModalBox/about-modal-box.css +86 -81
  45. package/components/AboutModalBox/about-modal-box.scss +80 -82
  46. package/components/Accordion/accordion.css +46 -45
  47. package/components/Accordion/accordion.scss +56 -55
  48. package/components/ActionList/action-list.css +6 -5
  49. package/components/ActionList/action-list.scss +7 -5
  50. package/components/Alert/alert-group.css +72 -19
  51. package/components/Alert/alert-group.scss +105 -18
  52. package/components/Alert/alert.css +52 -59
  53. package/components/Alert/alert.scss +56 -65
  54. package/components/Avatar/avatar.css +42 -41
  55. package/components/Avatar/avatar.scss +8 -7
  56. package/components/BackToTop/back-to-top.css +19 -17
  57. package/components/BackToTop/back-to-top.scss +17 -17
  58. package/components/Backdrop/backdrop.css +1 -1
  59. package/components/Backdrop/backdrop.scss +3 -4
  60. package/components/BackgroundImage/background-image.scss +3 -4
  61. package/components/Badge/badge.css +29 -7
  62. package/components/Badge/badge.scss +33 -9
  63. package/components/Banner/banner.css +30 -37
  64. package/components/Banner/banner.scss +30 -43
  65. package/components/Brand/brand.css +14 -10
  66. package/components/Brand/brand.scss +8 -5
  67. package/components/Breadcrumb/breadcrumb.css +23 -24
  68. package/components/Breadcrumb/breadcrumb.scss +25 -28
  69. package/components/Button/button.css +152 -130
  70. package/components/Button/button.scss +157 -133
  71. package/components/CalendarMonth/calendar-month.css +47 -47
  72. package/components/CalendarMonth/calendar-month.scss +50 -51
  73. package/components/Card/card.css +111 -94
  74. package/components/Card/card.scss +119 -93
  75. package/components/Check/check.css +6 -6
  76. package/components/Check/check.scss +8 -9
  77. package/components/ClipboardCopy/clipboard-copy.css +34 -45
  78. package/components/ClipboardCopy/clipboard-copy.scss +36 -49
  79. package/components/CodeBlock/code-block.css +21 -20
  80. package/components/CodeBlock/code-block.scss +21 -21
  81. package/components/CodeEditor/code-editor.css +36 -35
  82. package/components/CodeEditor/code-editor.scss +36 -36
  83. package/components/Content/content.css +167 -153
  84. package/components/Content/content.scss +204 -145
  85. package/components/DataList/data-list-grid.css +117 -117
  86. package/components/DataList/data-list-grid.scss +22 -20
  87. package/components/DataList/data-list.css +308 -312
  88. package/components/DataList/data-list.scss +145 -152
  89. package/components/DatePicker/date-picker.css +17 -17
  90. package/components/DatePicker/date-picker.scss +17 -18
  91. package/components/DescriptionList/description-list-order.css +5 -5
  92. package/components/DescriptionList/description-list-order.scss +3 -1
  93. package/components/DescriptionList/description-list.css +52 -50
  94. package/components/DescriptionList/description-list.scss +32 -37
  95. package/components/Divider/divider.css +104 -107
  96. package/components/Divider/divider.scss +19 -19
  97. package/components/DragDrop/drag-drop.css +4 -2
  98. package/components/DragDrop/drag-drop.scss +3 -3
  99. package/components/Drawer/drawer.css +119 -114
  100. package/components/Drawer/drawer.scss +139 -134
  101. package/components/DualListSelector/dual-list-selector.css +65 -62
  102. package/components/DualListSelector/dual-list-selector.scss +55 -52
  103. package/components/EmptyState/empty-state.css +38 -37
  104. package/components/EmptyState/empty-state.scss +39 -39
  105. package/components/ExpandableSection/expandable-section.css +27 -86
  106. package/components/ExpandableSection/expandable-section.scss +32 -101
  107. package/components/FileUpload/file-upload.css +3 -3
  108. package/components/FileUpload/file-upload.scss +3 -4
  109. package/components/Form/form.css +177 -125
  110. package/components/Form/form.scss +121 -115
  111. package/components/FormControl/form-control.css +68 -64
  112. package/components/FormControl/form-control.scss +80 -74
  113. package/components/HelperText/helper-text.css +5 -4
  114. package/components/HelperText/helper-text.scss +8 -6
  115. package/components/Hint/hint.css +25 -25
  116. package/components/Hint/hint.scss +25 -27
  117. package/components/Icon/icon.css +10 -10
  118. package/components/Icon/icon.scss +11 -12
  119. package/components/InlineEdit/inline-edit.css +12 -12
  120. package/components/InlineEdit/inline-edit.scss +12 -13
  121. package/components/InputGroup/input-group.css +17 -17
  122. package/components/InputGroup/input-group.scss +19 -20
  123. package/components/JumpLinks/jump-links.css +80 -96
  124. package/components/JumpLinks/jump-links.scss +80 -100
  125. package/components/Label/label-group.css +28 -28
  126. package/components/Label/label-group.scss +29 -30
  127. package/components/Label/label.css +103 -88
  128. package/components/Label/label.scss +114 -95
  129. package/components/List/list.css +44 -47
  130. package/components/List/list.scss +51 -58
  131. package/components/Login/login.css +122 -118
  132. package/components/Login/login.scss +105 -112
  133. package/components/Masthead/masthead.css +273 -175
  134. package/components/Masthead/masthead.scss +102 -68
  135. package/components/Menu/menu.css +151 -95
  136. package/components/Menu/menu.scss +59 -40
  137. package/components/MenuToggle/menu-toggle.css +131 -110
  138. package/components/MenuToggle/menu-toggle.scss +152 -130
  139. package/components/ModalBox/modal-box.css +53 -45
  140. package/components/ModalBox/modal-box.scss +52 -46
  141. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  143. package/components/Nav/nav.css +33 -9
  144. package/components/Nav/nav.scss +46 -13
  145. package/components/NotificationDrawer/notification-drawer.css +50 -51
  146. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  147. package/components/NumberInput/number-input.css +7 -11
  148. package/components/NumberInput/number-input.scss +5 -7
  149. package/components/OverflowMenu/overflow-menu.css +2 -1
  150. package/components/OverflowMenu/overflow-menu.scss +3 -1
  151. package/components/Page/page.css +177 -517
  152. package/components/Page/page.scss +157 -384
  153. package/components/Pagination/pagination.css +82 -79
  154. package/components/Pagination/pagination.scss +43 -40
  155. package/components/Panel/panel.css +33 -30
  156. package/components/Panel/panel.scss +35 -33
  157. package/components/Popover/popover.css +54 -52
  158. package/components/Popover/popover.scss +55 -54
  159. package/components/Progress/progress.css +8 -4
  160. package/components/Progress/progress.scss +14 -11
  161. package/components/ProgressStepper/progress-stepper.css +246 -245
  162. package/components/ProgressStepper/progress-stepper.scss +118 -118
  163. package/components/Radio/radio.css +9 -9
  164. package/components/Radio/radio.scss +11 -12
  165. package/components/Sidebar/sidebar.css +139 -139
  166. package/components/Sidebar/sidebar.scss +61 -61
  167. package/components/SimpleList/simple-list.css +21 -20
  168. package/components/SimpleList/simple-list.scss +22 -23
  169. package/components/Skeleton/skeleton.css +4 -4
  170. package/components/Skeleton/skeleton.scss +7 -8
  171. package/components/SkipToContent/skip-to-content.css +7 -6
  172. package/components/SkipToContent/skip-to-content.scss +7 -7
  173. package/components/Slider/slider.css +31 -31
  174. package/components/Slider/slider.scss +54 -55
  175. package/components/Spinner/spinner.scss +4 -5
  176. package/components/Switch/switch.css +4 -10
  177. package/components/Switch/switch.scss +8 -17
  178. package/components/TabContent/tab-content.css +25 -25
  179. package/components/TabContent/tab-content.scss +28 -28
  180. package/components/Table/table-grid.css +434 -508
  181. package/components/Table/table-grid.scss +131 -150
  182. package/components/Table/table-scrollable.css +31 -34
  183. package/components/Table/table-scrollable.scss +44 -41
  184. package/components/Table/table-tree-view.css +287 -279
  185. package/components/Table/table-tree-view.scss +84 -84
  186. package/components/Table/table.css +316 -279
  187. package/components/Table/table.scss +346 -301
  188. package/components/Tabs/tabs.css +215 -240
  189. package/components/Tabs/tabs.scss +130 -162
  190. package/components/TextInputGroup/text-input-group.css +122 -64
  191. package/components/TextInputGroup/text-input-group.scss +144 -87
  192. package/components/Tile/tile.css +15 -15
  193. package/components/Tile/tile.scss +16 -17
  194. package/components/Timestamp/timestamp.css +13 -19
  195. package/components/Timestamp/timestamp.scss +16 -22
  196. package/components/Title/title.css +14 -13
  197. package/components/Title/title.scss +15 -15
  198. package/components/ToggleGroup/toggle-group.css +37 -37
  199. package/components/ToggleGroup/toggle-group.scss +38 -41
  200. package/components/Toolbar/toolbar.css +547 -1431
  201. package/components/Toolbar/toolbar.scss +159 -123
  202. package/components/Tooltip/tooltip.css +28 -27
  203. package/components/Tooltip/tooltip.scss +31 -30
  204. package/components/TreeView/tree-view.css +184 -184
  205. package/components/TreeView/tree-view.scss +133 -133
  206. package/components/Truncate/truncate.css +2 -2
  207. package/components/Truncate/truncate.scss +7 -8
  208. package/components/Wizard/wizard.css +190 -154
  209. package/components/Wizard/wizard.scss +211 -165
  210. package/components/_index.css +22381 -0
  211. package/components/_index.scss +82 -0
  212. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  213. package/docs/components/Accordion/examples/Accordion.md +1 -1
  214. package/docs/components/ActionList/examples/ActionList.md +64 -24
  215. package/docs/components/Alert/examples/Alert.md +116 -74
  216. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  217. package/docs/components/Badge/examples/Badge.md +6 -16
  218. package/docs/components/Banner/examples/Banner.md +16 -10
  219. package/docs/components/Brand/examples/Brand.md +2 -2
  220. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  221. package/docs/components/Button/examples/Button.md +537 -368
  222. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  223. package/docs/components/Card/examples/Card.md +372 -658
  224. package/docs/components/Check/examples/Check.md +10 -15
  225. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  226. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  227. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  228. package/docs/components/Content/examples/Content.md +600 -60
  229. package/docs/components/DataList/examples/DataList.md +291 -1028
  230. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  231. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  232. package/docs/components/Drawer/examples/Drawer.md +60 -21
  233. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  234. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  235. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  236. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  237. package/docs/components/Form/examples/Form.md +100 -26
  238. package/docs/components/Hint/examples/Hint.md +54 -164
  239. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  240. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  241. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  242. package/docs/components/Label/examples/Label.md +2577 -406
  243. package/docs/components/Login/examples/Login.md +372 -334
  244. package/docs/components/Masthead/examples/masthead.md +515 -484
  245. package/docs/components/Menu/examples/Menu.md +77 -138
  246. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  247. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  248. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  249. package/docs/components/Nav/examples/Navigation.css +2 -7
  250. package/docs/components/Nav/examples/Navigation.md +337 -270
  251. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  252. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  253. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  254. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  255. package/docs/components/Page/examples/Page.css +5 -9
  256. package/docs/components/Page/examples/Page.md +254 -181
  257. package/docs/components/Pagination/examples/Pagination.md +336 -756
  258. package/docs/components/Panel/examples/Panel.md +3 -2
  259. package/docs/components/Popover/examples/Popover.md +60 -15
  260. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  261. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  262. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  263. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  264. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  265. package/docs/components/Slider/examples/Slider.md +53 -45
  266. package/docs/components/Spinner/examples/Spinner.md +1 -1
  267. package/docs/components/Switch/examples/Switch.md +33 -148
  268. package/docs/components/Table/examples/Table.css +11 -6
  269. package/docs/components/Table/examples/Table.md +5302 -2464
  270. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  271. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  273. package/docs/components/Tile/examples/Tile.css +5 -5
  274. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  275. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  276. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  277. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  278. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  279. package/docs/components/TreeView/examples/TreeView.md +627 -49
  280. package/docs/components/Truncate/examples/Truncate.css +1 -2
  281. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  282. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  283. package/docs/demos/Alert/examples/Alert.md +924 -909
  284. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  285. package/docs/demos/Banner/examples/Banner.md +641 -659
  286. package/docs/demos/Button/examples/Button.md +8 -8
  287. package/docs/demos/Card/examples/Card.css +6 -6
  288. package/docs/demos/Card/examples/Card.md +419 -606
  289. package/docs/demos/CardView/examples/CardView.md +822 -1435
  290. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  291. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  292. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  293. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  294. package/docs/demos/Form/examples/BasicForms.md +153 -88
  295. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  296. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  297. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  298. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  299. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  300. package/docs/demos/Page/examples/Page.css +11 -0
  301. package/docs/demos/Page/examples/Page.md +3753 -2540
  302. package/docs/demos/Panel/Panel.md +88 -0
  303. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  304. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  305. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  306. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  307. package/docs/demos/Table/examples/Table.md +14272 -15154
  308. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  309. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  310. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  311. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  312. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  313. package/docs/layouts/Flex/examples/Flex.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.md +50 -50
  315. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  316. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  317. package/docs/layouts/Grid/examples/Grid.css +3 -3
  318. package/docs/layouts/Grid/examples/Grid.md +33 -33
  319. package/docs/layouts/Level/examples/Level.css +5 -5
  320. package/docs/layouts/Split/examples/Split.css +4 -4
  321. package/docs/layouts/Stack/examples/Stack.css +5 -5
  322. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  323. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  324. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  325. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  326. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  327. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  328. package/docs/utilities/Display/examples/Display.css +3 -10
  329. package/docs/utilities/Display/examples/Display.md +21 -12
  330. package/docs/utilities/Flex/examples/Flex.css +7 -7
  331. package/docs/utilities/Flex/examples/Flex.md +82 -40
  332. package/docs/utilities/Float/examples/Float.css +5 -5
  333. package/docs/utilities/Float/examples/Float.md +6 -6
  334. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  336. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  337. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  338. package/docs/utilities/Text/examples/Text.md +78 -77
  339. package/icons/pficons.mjs +6 -0
  340. package/layouts/Bullseye/bullseye.css +4 -0
  341. package/layouts/Bullseye/bullseye.scss +5 -1
  342. package/layouts/Flex/flex.css +241 -237
  343. package/layouts/Flex/flex.scss +48 -44
  344. package/layouts/Gallery/gallery.css +15 -11
  345. package/layouts/Gallery/gallery.scss +9 -5
  346. package/layouts/Grid/grid.css +20 -16
  347. package/layouts/Grid/grid.scss +12 -8
  348. package/layouts/Level/level.css +5 -1
  349. package/layouts/Level/level.scss +6 -2
  350. package/layouts/Split/split.css +5 -1
  351. package/layouts/Split/split.scss +6 -2
  352. package/layouts/Stack/stack.css +5 -1
  353. package/layouts/Stack/stack.scss +6 -2
  354. package/layouts/_index.css +3461 -0
  355. package/layouts/_index.scss +8 -0
  356. package/package.json +39 -39
  357. package/patternfly-addons.css +2071 -2648
  358. package/patternfly-addons.scss +2 -12
  359. package/patternfly-base-no-globals.css +4227 -3064
  360. package/patternfly-base-no-globals.scss +5 -3
  361. package/patternfly-base.css +4307 -3140
  362. package/patternfly-base.scss +2 -6
  363. package/patternfly-charts.css +579 -240
  364. package/patternfly-charts.scss +352 -337
  365. package/patternfly-no-globals.css +21105 -23238
  366. package/patternfly-no-globals.scss +5 -4
  367. package/patternfly.css +21209 -23338
  368. package/patternfly.min.css +1 -1
  369. package/patternfly.min.css.map +1 -1
  370. package/patternfly.scss +6 -4
  371. package/sass-utilities/_index.scss +6 -0
  372. package/sass-utilities/functions.scss +25 -25
  373. package/sass-utilities/{_init.scss → init.scss} +6 -6
  374. package/sass-utilities/mixins.scss +108 -72
  375. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  376. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  377. package/sass-utilities/scss-variables.scss +48 -261
  378. package/utilities/Accessibility/accessibility.css +15 -15
  379. package/utilities/Accessibility/accessibility.scss +8 -6
  380. package/utilities/Alignment/alignment.css +29 -29
  381. package/utilities/Alignment/alignment.scss +6 -4
  382. package/utilities/BackgroundColor/background-color.css +67 -0
  383. package/utilities/BackgroundColor/background-color.scss +16 -0
  384. package/utilities/BoxShadow/box-shadow.css +15 -39
  385. package/utilities/BoxShadow/box-shadow.scss +19 -28
  386. package/utilities/Display/display.css +43 -5
  387. package/utilities/Display/display.scss +7 -4
  388. package/utilities/Flex/flex.css +50 -50
  389. package/utilities/Flex/flex.scss +21 -20
  390. package/utilities/Float/float.css +29 -29
  391. package/utilities/Float/float.scss +6 -6
  392. package/utilities/Sizing/sizing.css +58 -58
  393. package/utilities/Sizing/sizing.scss +23 -21
  394. package/utilities/Spacing/spacing.css +1372 -1372
  395. package/utilities/Spacing/spacing.scss +6 -6
  396. package/utilities/Text/text.css +419 -662
  397. package/utilities/Text/text.scss +81 -107
  398. package/utilities/_index.css +7815 -0
  399. package/utilities/_index.scss +10 -0
  400. package/assets/fontawesome/_core.scss +0 -20
  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/JumpLinks/examples/JumpLinks.md CHANGED
@@ -11,94 +11,102 @@ section: components
11
11
  <a
12
12
  class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-jump-links-collapsed-mobile-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
17
19
  class="pf-v6-c-masthead"
18
20
  id="jump-links-collapsed-mobile-example-masthead"
19
21
  >
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
- <i class="fas fa-bars" aria-hidden="true"></i>
27
- </button>
28
- </span>
29
22
  <div class="pf-v6-c-masthead__main">
30
- <a class="pf-v6-c-masthead__brand" href="#">
31
- <svg height="40px" viewBox="0 0 679 158">
32
- <title>PF-HorizontalLogo-Color</title>
33
- <defs>
34
- <linearGradient
35
- x1="68%"
36
- y1="2.25860997e-13%"
37
- x2="32%"
38
- y2="100%"
39
- id="linearGradient-jump-links-collapsed-mobile-example-masthead"
40
- >
41
- <stop stop-color="#2B9AF3" offset="0%" />
42
- <stop
43
- stop-color="#73BCF7"
44
- stop-opacity="0.502212631"
45
- offset="100%"
46
- />
47
- </linearGradient>
48
- </defs>
49
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
50
- <g
51
- transform="translate(206.000000, 45.750000)"
52
- fill="var(--pf-t--global--text--color--regular)"
53
- fill-rule="nonzero"
54
- >
55
- <path
56
- 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"
57
- />
58
- <path
59
- 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"
60
- />
61
- <path
62
- 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"
63
- />
64
- <path
65
- 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"
66
- />
67
- <path
68
- 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"
69
- />
70
- <path
71
- 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"
72
- />
73
- <path
74
- 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"
75
- />
76
- <polygon
77
- 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"
78
- />
79
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
80
- <path
81
- 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"
82
- />
83
- </g>
84
- <g transform="translate(0.000000, 0.000000)">
85
- <path
86
- 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"
87
- fill="#0066CC"
88
- />
89
- <path
90
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
91
- fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
92
- />
93
- <path
94
- 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"
95
- fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
96
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
97
- />
23
+ <span class="pf-v6-c-masthead__toggle">
24
+ <button
25
+ class="pf-v6-c-button pf-m-plain"
26
+ type="button"
27
+ aria-label="Global navigation"
28
+ >
29
+ <span class="pf-v6-c-button__icon">
30
+ <i class="fas fa-bars" aria-hidden="true"></i>
31
+ </span>
32
+ </button>
33
+ </span>
34
+ <div class="pf-v6-c-masthead__brand">
35
+ <a class="pf-v6-c-masthead__logo" href="#">
36
+ <svg height="37px" viewBox="0 0 679 158">
37
+ <title>PF-HorizontalLogo-Color</title>
38
+ <defs>
39
+ <linearGradient
40
+ x1="68%"
41
+ y1="2.25860997e-13%"
42
+ x2="32%"
43
+ y2="100%"
44
+ id="linearGradient-jump-links-collapsed-mobile-example-masthead"
45
+ >
46
+ <stop stop-color="#2B9AF3" offset="0%" />
47
+ <stop
48
+ stop-color="#73BCF7"
49
+ stop-opacity="0.502212631"
50
+ offset="100%"
51
+ />
52
+ </linearGradient>
53
+ </defs>
54
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
55
+ <g
56
+ transform="translate(206.000000, 45.750000)"
57
+ fill="var(--pf-t--global--text--color--regular)"
58
+ fill-rule="nonzero"
59
+ >
60
+ <path
61
+ 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"
62
+ />
63
+ <path
64
+ 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"
65
+ />
66
+ <path
67
+ 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"
68
+ />
69
+ <path
70
+ 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"
71
+ />
72
+ <path
73
+ 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"
74
+ />
75
+ <path
76
+ 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"
77
+ />
78
+ <path
79
+ 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"
80
+ />
81
+ <polygon
82
+ 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"
83
+ />
84
+ <polygon
85
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
86
+ />
87
+ <path
88
+ 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"
89
+ />
90
+ </g>
91
+ <g transform="translate(0.000000, 0.000000)">
92
+ <path
93
+ 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"
94
+ fill="#0066CC"
95
+ />
96
+ <path
97
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
98
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
99
+ />
100
+ <path
101
+ 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"
102
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
103
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
104
+ />
105
+ </g>
98
106
  </g>
99
- </g>
100
- </svg>
101
- </a>
107
+ </svg>
108
+ </a>
109
+ </div>
102
110
  </div>
103
111
  <div class="pf-v6-c-masthead__content">
104
112
  <div
@@ -107,41 +115,11 @@ section: components
107
115
  >
108
116
  <div class="pf-v6-c-toolbar__content">
109
117
  <div class="pf-v6-c-toolbar__content-section">
110
- <div class="pf-v6-c-toolbar__item">
111
- <button
112
- class="pf-v6-c-menu-toggle"
113
- type="button"
114
- aria-expanded="false"
115
- >
116
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
117
- <span class="pf-v6-c-menu-toggle__controls">
118
- <span class="pf-v6-c-menu-toggle__toggle-icon">
119
- <i class="fas fa-caret-down" aria-hidden="true"></i>
120
- </span>
121
- </span>
122
- </button>
123
- </div>
124
-
125
- <div class="pf-v6-c-toolbar__item">
126
- <button
127
- class="pf-v6-c-menu-toggle"
128
- type="button"
129
- aria-expanded="false"
130
- >
131
- <span class="pf-v6-c-menu-toggle__text">Services</span>
132
- <span class="pf-v6-c-menu-toggle__controls">
133
- <span class="pf-v6-c-menu-toggle__toggle-icon">
134
- <i class="fas fa-caret-down" aria-hidden="true"></i>
135
- </span>
136
- </span>
137
- </button>
138
- </div>
139
-
140
118
  <div
141
- 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"
119
+ 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"
142
120
  >
143
121
  <div
144
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
122
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
145
123
  >
146
124
  <div class="pf-v6-c-toolbar__item">
147
125
  <button
@@ -180,6 +158,7 @@ section: components
180
158
  </button>
181
159
  </div>
182
160
  </div>
161
+
183
162
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
184
163
  <button
185
164
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -207,206 +186,236 @@ section: components
207
186
  >
208
187
  <ul class="pf-v6-c-nav__list" role="list">
209
188
  <li class="pf-v6-c-nav__item">
210
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
189
+ <a href="#" class="pf-v6-c-nav__link">
190
+ <span class="pf-v6-c-nav__link-text">System panel</span>
191
+ </a>
211
192
  </li>
212
193
  <li class="pf-v6-c-nav__item">
213
194
  <a
214
195
  href="#"
215
196
  class="pf-v6-c-nav__link pf-m-current"
216
197
  aria-current="page"
217
- >Policy</a>
198
+ >
199
+ <span class="pf-v6-c-nav__link-text">Policy</span>
200
+ </a>
218
201
  </li>
219
202
  <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
203
+ <a href="#" class="pf-v6-c-nav__link">
204
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
205
+ </a>
221
206
  </li>
222
207
  <li class="pf-v6-c-nav__item">
223
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
208
+ <a href="#" class="pf-v6-c-nav__link">
209
+ <span class="pf-v6-c-nav__link-text">Network services</span>
210
+ </a>
224
211
  </li>
225
212
  <li class="pf-v6-c-nav__item">
226
- <a href="#" class="pf-v6-c-nav__link">Server</a>
213
+ <a href="#" class="pf-v6-c-nav__link">
214
+ <span class="pf-v6-c-nav__link-text">Server</span>
215
+ </a>
227
216
  </li>
228
217
  </ul>
229
218
  </nav>
230
219
  </div>
231
220
  </div>
232
- <main
233
- class="pf-v6-c-page__main"
234
- tabindex="-1"
235
- id="main-content-jump-links-collapsed-mobile-example"
236
- >
237
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
238
- <div class="pf-v6-c-page__main-body">
239
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
240
- <ol class="pf-v6-c-breadcrumb__list" role="list">
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
243
- </li>
244
- <li class="pf-v6-c-breadcrumb__item">
245
- <span class="pf-v6-c-breadcrumb__item-divider">
246
- <i class="fas fa-angle-right" aria-hidden="true"></i>
247
- </span>
248
-
249
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
250
- </li>
251
- <li class="pf-v6-c-breadcrumb__item">
252
- <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
254
- </span>
255
-
256
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
- </li>
258
- <li class="pf-v6-c-breadcrumb__item">
259
- <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
261
- </span>
262
-
263
- <a
264
- href="#"
265
- class="pf-v6-c-breadcrumb__link pf-m-current"
266
- aria-current="page"
267
- >Section landing</a>
268
- </li>
269
- </ol>
270
- </nav>
271
- </div>
272
- </section>
273
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
274
- <div class="pf-v6-c-page__main-body">
275
- <div class="pf-v6-c-content">
276
- <h1>Main title</h1>
277
- <p>This is a full page demo.</p>
221
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
222
+ <main
223
+ class="pf-v6-c-page__main"
224
+ tabindex="-1"
225
+ id="main-content-jump-links-collapsed-mobile-example"
226
+ >
227
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
228
+ <div class="pf-v6-c-page__main-body">
229
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
230
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
231
+ <li class="pf-v6-c-breadcrumb__item">
232
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
233
+ </li>
234
+ <li class="pf-v6-c-breadcrumb__item">
235
+ <span class="pf-v6-c-breadcrumb__item-divider">
236
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
237
+ </span>
238
+
239
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</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>
245
+
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>
252
+
253
+ <a
254
+ href="#"
255
+ class="pf-v6-c-breadcrumb__link pf-m-current"
256
+ aria-current="page"
257
+ >Section landing</a>
258
+ </li>
259
+ </ol>
260
+ </nav>
278
261
  </div>
279
- </div>
280
- </section>
281
- <section class="pf-v6-c-page__main-section pf-m-no-padding">
282
- <div class="pf-v6-c-sidebar">
283
- <div class="pf-v6-c-sidebar__main">
284
- <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
285
- <section class="pf-v6-c-page__main-section">
286
- <nav
287
- class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
288
- >
289
- <div class="pf-v6-c-jump-links__header">
290
- <div class="pf-v6-c-jump-links__toggle">
291
- <button
292
- class="pf-v6-c-button pf-m-plain"
293
- type="button"
294
- aria-label="Toggle jump links"
295
- aria-expanded="false"
262
+ </section>
263
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
264
+ <div class="pf-v6-c-page__main-body">
265
+ <div class="pf-v6-c-content">
266
+ <h1>Main title</h1>
267
+ <p>This is a full page demo.</p>
268
+ </div>
269
+ </div>
270
+ </section>
271
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
272
+ <div class="pf-v6-c-page__main-body">
273
+ <div class="pf-v6-c-sidebar">
274
+ <div class="pf-v6-c-sidebar__main">
275
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
276
+ <section class="pf-v6-c-page__main-section">
277
+ <div class="pf-v6-c-page__main-body">
278
+ <nav
279
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
296
280
  >
297
- <span class="pf-v6-c-jump-links__toggle-icon">
298
- <i class="fas fa-angle-right" aria-hidden="true"></i>
299
- </span>
300
- <span
301
- class="pf-v6-c-jump-links__toggle-text"
302
- >Jump to section</span>
303
- </button>
281
+ <div class="pf-v6-c-jump-links__header">
282
+ <div class="pf-v6-c-jump-links__toggle">
283
+ <button
284
+ class="pf-v6-c-button pf-m-plain"
285
+ type="button"
286
+ aria-label="Toggle jump links"
287
+ >
288
+ <span class="pf-v6-c-button__icon pf-m-start">
289
+ <span class="pf-v6-c-jump-links__toggle-icon">
290
+ <i
291
+ class="fas fa-angle-right"
292
+ aria-hidden="true"
293
+ ></i>
294
+ </span>
295
+ </span>
296
+ <span class="pf-v6-c-button__text">Jump to section</span>
297
+ </button>
298
+ </div>
299
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
300
+ </div>
301
+ <ul class="pf-v6-c-jump-links__list" role="list">
302
+ <li class="pf-v6-c-jump-links__item pf-m-current">
303
+ <span class="pf-v6-c-jump-links__link">
304
+ <a
305
+ class="pf-v6-c-button pf-m-link"
306
+ href="#jump-links-collapsed-mobile-example-jump-links-first"
307
+ >
308
+ <span class="pf-v6-c-button__text">
309
+ <span
310
+ class="pf-v6-c-jump-links__link-text"
311
+ >First section</span>
312
+ </span>
313
+ </a>
314
+ </span>
315
+ </li>
316
+ <li class="pf-v6-c-jump-links__item">
317
+ <span class="pf-v6-c-jump-links__link">
318
+ <a
319
+ class="pf-v6-c-button pf-m-link"
320
+ href="#jump-links-collapsed-mobile-example-jump-links-second"
321
+ >
322
+ <span class="pf-v6-c-button__text">
323
+ <span
324
+ class="pf-v6-c-jump-links__link-text"
325
+ >Second section</span>
326
+ </span>
327
+ </a>
328
+ </span>
329
+ </li>
330
+ <li class="pf-v6-c-jump-links__item">
331
+ <span class="pf-v6-c-jump-links__link">
332
+ <a
333
+ class="pf-v6-c-button pf-m-link"
334
+ href="#jump-links-collapsed-mobile-example-jump-links-third"
335
+ >
336
+ <span class="pf-v6-c-button__text">
337
+ <span
338
+ class="pf-v6-c-jump-links__link-text"
339
+ >Third section</span>
340
+ </span>
341
+ </a>
342
+ </span>
343
+ </li>
344
+ <li class="pf-v6-c-jump-links__item">
345
+ <span class="pf-v6-c-jump-links__link">
346
+ <a
347
+ class="pf-v6-c-button pf-m-link"
348
+ href="#jump-links-collapsed-mobile-example-jump-links-fourth"
349
+ >
350
+ <span class="pf-v6-c-button__text">
351
+ <span
352
+ class="pf-v6-c-jump-links__link-text"
353
+ >Fourth section</span>
354
+ </span>
355
+ </a>
356
+ </span>
357
+ </li>
358
+ <li class="pf-v6-c-jump-links__item">
359
+ <span class="pf-v6-c-jump-links__link">
360
+ <a
361
+ class="pf-v6-c-button pf-m-link"
362
+ href="#jump-links-collapsed-mobile-example-jump-links-fifth"
363
+ >
364
+ <span class="pf-v6-c-button__text">
365
+ <span
366
+ class="pf-v6-c-jump-links__link-text"
367
+ >Fifth section</span>
368
+ </span>
369
+ </a>
370
+ </span>
371
+ </li>
372
+ </ul>
373
+ </nav>
304
374
  </div>
305
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
306
- </div>
307
- <ul class="pf-v6-c-jump-links__list" role="list">
308
- <li class="pf-v6-c-jump-links__item pf-m-current">
309
- <span class="pf-v6-c-jump-links__link">
310
- <a
311
- class="pf-v6-c-button pf-m-link"
312
- href="#jump-links-collapsed-mobile-example-jump-links-first"
313
- >
314
- <span
315
- class="pf-v6-c-jump-links__link-text"
316
- >First section</span>
317
- </a>
318
- </span>
319
- </li>
320
- <li class="pf-v6-c-jump-links__item">
321
- <span class="pf-v6-c-jump-links__link">
322
- <a
323
- class="pf-v6-c-button pf-m-link"
324
- href="#jump-links-collapsed-mobile-example-jump-links-second"
325
- >
326
- <span
327
- class="pf-v6-c-jump-links__link-text"
328
- >Second section</span>
329
- </a>
330
- </span>
331
- </li>
332
- <li class="pf-v6-c-jump-links__item">
333
- <span class="pf-v6-c-jump-links__link">
334
- <a
335
- class="pf-v6-c-button pf-m-link"
336
- href="#jump-links-collapsed-mobile-example-jump-links-third"
337
- >
338
- <span
339
- class="pf-v6-c-jump-links__link-text"
340
- >Third section</span>
341
- </a>
342
- </span>
343
- </li>
344
- <li class="pf-v6-c-jump-links__item">
345
- <span class="pf-v6-c-jump-links__link">
346
- <a
347
- class="pf-v6-c-button pf-m-link"
348
- href="#jump-links-collapsed-mobile-example-jump-links-fourth"
349
- >
350
- <span
351
- class="pf-v6-c-jump-links__link-text"
352
- >Fourth section</span>
353
- </a>
354
- </span>
355
- </li>
356
- <li class="pf-v6-c-jump-links__item">
357
- <span class="pf-v6-c-jump-links__link">
358
- <a
359
- class="pf-v6-c-button pf-m-link"
360
- href="#jump-links-collapsed-mobile-example-jump-links-fifth"
361
- >
362
- <span
363
- class="pf-v6-c-jump-links__link-text"
364
- >Fifth section</span>
365
- </a>
366
- </span>
367
- </li>
368
- </ul>
369
- </nav>
370
- </section>
371
- </div>
372
- <div class="pf-v6-c-sidebar__content">
373
- <section class="pf-v6-c-page__main-section">
374
- <div class="pf-v6-c-content">
375
- <p>
376
- <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
377
- </p>
378
-
379
- <h2
380
- id="jump-links-collapsed-mobile-example-jump-links-first"
381
- >First section</h2>
382
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
383
-
384
- <h2
385
- id="jump-links-collapsed-mobile-example-jump-links-second"
386
- >Second section</h2>
387
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
388
-
389
- <h2
390
- id="jump-links-collapsed-mobile-example-jump-links-third"
391
- >Third section</h2>
392
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
393
-
394
- <h2
395
- id="jump-links-collapsed-mobile-example-jump-links-fourth"
396
- >Fourth section</h2>
397
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
398
-
399
- <h2
400
- id="jump-links-collapsed-mobile-example-jump-links-fifth"
401
- >Fifth section</h2>
402
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
375
+ </section>
403
376
  </div>
404
- </section>
377
+ <div class="pf-v6-c-sidebar__content">
378
+ <section class="pf-v6-c-page__main-section">
379
+ <div class="pf-v6-c-page__main-body">
380
+ <div class="pf-v6-c-content">
381
+ <p>
382
+ <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
383
+ </p>
384
+
385
+ <h2
386
+ id="jump-links-collapsed-mobile-example-jump-links-first"
387
+ >First section</h2>
388
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
389
+
390
+ <h2
391
+ id="jump-links-collapsed-mobile-example-jump-links-second"
392
+ >Second section</h2>
393
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
394
+
395
+ <h2
396
+ id="jump-links-collapsed-mobile-example-jump-links-third"
397
+ >Third section</h2>
398
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
399
+
400
+ <h2
401
+ id="jump-links-collapsed-mobile-example-jump-links-fourth"
402
+ >Fourth section</h2>
403
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
404
+
405
+ <h2
406
+ id="jump-links-collapsed-mobile-example-jump-links-fifth"
407
+ >Fifth section</h2>
408
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
409
+ </div>
410
+ </div>
411
+ </section>
412
+ </div>
413
+ </div>
405
414
  </div>
406
415
  </div>
407
- </div>
408
- </section>
409
- </main>
416
+ </section>
417
+ </main>
418
+ </div>
410
419
  </div>
411
420
 
412
421
  ```
@@ -419,94 +428,102 @@ section: components
419
428
  <a
420
429
  class="pf-v6-c-button pf-m-primary"
421
430
  href="#main-content-jump-links-vertical-expanded-mobile-example"
422
- >Skip to content</a>
431
+ >
432
+ <span class="pf-v6-c-button__text">Skip to content</span>
433
+ </a>
423
434
  </div>
424
435
  <header
425
436
  class="pf-v6-c-masthead"
426
437
  id="jump-links-vertical-expanded-mobile-example-masthead"
427
438
  >
428
- <span class="pf-v6-c-masthead__toggle">
429
- <button
430
- class="pf-v6-c-button pf-m-plain"
431
- type="button"
432
- aria-label="Global navigation"
433
- >
434
- <i class="fas fa-bars" aria-hidden="true"></i>
435
- </button>
436
- </span>
437
439
  <div class="pf-v6-c-masthead__main">
438
- <a class="pf-v6-c-masthead__brand" href="#">
439
- <svg height="40px" viewBox="0 0 679 158">
440
- <title>PF-HorizontalLogo-Color</title>
441
- <defs>
442
- <linearGradient
443
- x1="68%"
444
- y1="2.25860997e-13%"
445
- x2="32%"
446
- y2="100%"
447
- id="linearGradient-jump-links-vertical-expanded-mobile-example-masthead"
448
- >
449
- <stop stop-color="#2B9AF3" offset="0%" />
450
- <stop
451
- stop-color="#73BCF7"
452
- stop-opacity="0.502212631"
453
- offset="100%"
454
- />
455
- </linearGradient>
456
- </defs>
457
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
458
- <g
459
- transform="translate(206.000000, 45.750000)"
460
- fill="var(--pf-t--global--text--color--regular)"
461
- fill-rule="nonzero"
462
- >
463
- <path
464
- 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"
465
- />
466
- <path
467
- 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"
468
- />
469
- <path
470
- 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"
471
- />
472
- <path
473
- 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"
474
- />
475
- <path
476
- 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"
477
- />
478
- <path
479
- 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"
480
- />
481
- <path
482
- 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"
483
- />
484
- <polygon
485
- 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"
486
- />
487
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
488
- <path
489
- 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"
490
- />
491
- </g>
492
- <g transform="translate(0.000000, 0.000000)">
493
- <path
494
- 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"
495
- fill="#0066CC"
496
- />
497
- <path
498
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
499
- fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
500
- />
501
- <path
502
- 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"
503
- fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
504
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
505
- />
440
+ <span class="pf-v6-c-masthead__toggle">
441
+ <button
442
+ class="pf-v6-c-button pf-m-plain"
443
+ type="button"
444
+ aria-label="Global navigation"
445
+ >
446
+ <span class="pf-v6-c-button__icon">
447
+ <i class="fas fa-bars" aria-hidden="true"></i>
448
+ </span>
449
+ </button>
450
+ </span>
451
+ <div class="pf-v6-c-masthead__brand">
452
+ <a class="pf-v6-c-masthead__logo" href="#">
453
+ <svg height="37px" viewBox="0 0 679 158">
454
+ <title>PF-HorizontalLogo-Color</title>
455
+ <defs>
456
+ <linearGradient
457
+ x1="68%"
458
+ y1="2.25860997e-13%"
459
+ x2="32%"
460
+ y2="100%"
461
+ id="linearGradient-jump-links-vertical-expanded-mobile-example-masthead"
462
+ >
463
+ <stop stop-color="#2B9AF3" offset="0%" />
464
+ <stop
465
+ stop-color="#73BCF7"
466
+ stop-opacity="0.502212631"
467
+ offset="100%"
468
+ />
469
+ </linearGradient>
470
+ </defs>
471
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
472
+ <g
473
+ transform="translate(206.000000, 45.750000)"
474
+ fill="var(--pf-t--global--text--color--regular)"
475
+ fill-rule="nonzero"
476
+ >
477
+ <path
478
+ 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"
479
+ />
480
+ <path
481
+ 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"
482
+ />
483
+ <path
484
+ 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"
485
+ />
486
+ <path
487
+ 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"
488
+ />
489
+ <path
490
+ 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"
491
+ />
492
+ <path
493
+ 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"
494
+ />
495
+ <path
496
+ 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"
497
+ />
498
+ <polygon
499
+ 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"
500
+ />
501
+ <polygon
502
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
503
+ />
504
+ <path
505
+ 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"
506
+ />
507
+ </g>
508
+ <g transform="translate(0.000000, 0.000000)">
509
+ <path
510
+ 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"
511
+ fill="#0066CC"
512
+ />
513
+ <path
514
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
515
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
516
+ />
517
+ <path
518
+ 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"
519
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
520
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
521
+ />
522
+ </g>
506
523
  </g>
507
- </g>
508
- </svg>
509
- </a>
524
+ </svg>
525
+ </a>
526
+ </div>
510
527
  </div>
511
528
  <div class="pf-v6-c-masthead__content">
512
529
  <div
@@ -515,41 +532,11 @@ section: components
515
532
  >
516
533
  <div class="pf-v6-c-toolbar__content">
517
534
  <div class="pf-v6-c-toolbar__content-section">
518
- <div class="pf-v6-c-toolbar__item">
519
- <button
520
- class="pf-v6-c-menu-toggle"
521
- type="button"
522
- aria-expanded="false"
523
- >
524
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
525
- <span class="pf-v6-c-menu-toggle__controls">
526
- <span class="pf-v6-c-menu-toggle__toggle-icon">
527
- <i class="fas fa-caret-down" aria-hidden="true"></i>
528
- </span>
529
- </span>
530
- </button>
531
- </div>
532
-
533
- <div class="pf-v6-c-toolbar__item">
534
- <button
535
- class="pf-v6-c-menu-toggle"
536
- type="button"
537
- aria-expanded="false"
538
- >
539
- <span class="pf-v6-c-menu-toggle__text">Services</span>
540
- <span class="pf-v6-c-menu-toggle__controls">
541
- <span class="pf-v6-c-menu-toggle__toggle-icon">
542
- <i class="fas fa-caret-down" aria-hidden="true"></i>
543
- </span>
544
- </span>
545
- </button>
546
- </div>
547
-
548
535
  <div
549
- 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"
536
+ 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"
550
537
  >
551
538
  <div
552
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
539
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
553
540
  >
554
541
  <div class="pf-v6-c-toolbar__item">
555
542
  <button
@@ -588,6 +575,7 @@ section: components
588
575
  </button>
589
576
  </div>
590
577
  </div>
578
+
591
579
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
592
580
  <button
593
581
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -615,206 +603,236 @@ section: components
615
603
  >
616
604
  <ul class="pf-v6-c-nav__list" role="list">
617
605
  <li class="pf-v6-c-nav__item">
618
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
606
+ <a href="#" class="pf-v6-c-nav__link">
607
+ <span class="pf-v6-c-nav__link-text">System panel</span>
608
+ </a>
619
609
  </li>
620
610
  <li class="pf-v6-c-nav__item">
621
611
  <a
622
612
  href="#"
623
613
  class="pf-v6-c-nav__link pf-m-current"
624
614
  aria-current="page"
625
- >Policy</a>
615
+ >
616
+ <span class="pf-v6-c-nav__link-text">Policy</span>
617
+ </a>
626
618
  </li>
627
619
  <li class="pf-v6-c-nav__item">
628
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
620
+ <a href="#" class="pf-v6-c-nav__link">
621
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
622
+ </a>
629
623
  </li>
630
624
  <li class="pf-v6-c-nav__item">
631
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
625
+ <a href="#" class="pf-v6-c-nav__link">
626
+ <span class="pf-v6-c-nav__link-text">Network services</span>
627
+ </a>
632
628
  </li>
633
629
  <li class="pf-v6-c-nav__item">
634
- <a href="#" class="pf-v6-c-nav__link">Server</a>
630
+ <a href="#" class="pf-v6-c-nav__link">
631
+ <span class="pf-v6-c-nav__link-text">Server</span>
632
+ </a>
635
633
  </li>
636
634
  </ul>
637
635
  </nav>
638
636
  </div>
639
637
  </div>
640
- <main
641
- class="pf-v6-c-page__main"
642
- tabindex="-1"
643
- id="main-content-jump-links-vertical-expanded-mobile-example"
644
- >
645
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
646
- <div class="pf-v6-c-page__main-body">
647
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
648
- <ol class="pf-v6-c-breadcrumb__list" role="list">
649
- <li class="pf-v6-c-breadcrumb__item">
650
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
651
- </li>
652
- <li class="pf-v6-c-breadcrumb__item">
653
- <span class="pf-v6-c-breadcrumb__item-divider">
654
- <i class="fas fa-angle-right" aria-hidden="true"></i>
655
- </span>
656
-
657
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
658
- </li>
659
- <li class="pf-v6-c-breadcrumb__item">
660
- <span class="pf-v6-c-breadcrumb__item-divider">
661
- <i class="fas fa-angle-right" aria-hidden="true"></i>
662
- </span>
663
-
664
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
665
- </li>
666
- <li class="pf-v6-c-breadcrumb__item">
667
- <span class="pf-v6-c-breadcrumb__item-divider">
668
- <i class="fas fa-angle-right" aria-hidden="true"></i>
669
- </span>
670
-
671
- <a
672
- href="#"
673
- class="pf-v6-c-breadcrumb__link pf-m-current"
674
- aria-current="page"
675
- >Section landing</a>
676
- </li>
677
- </ol>
678
- </nav>
679
- </div>
680
- </section>
681
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
682
- <div class="pf-v6-c-page__main-body">
683
- <div class="pf-v6-c-content">
684
- <h1>Main title</h1>
685
- <p>This is a full page demo.</p>
638
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
639
+ <main
640
+ class="pf-v6-c-page__main"
641
+ tabindex="-1"
642
+ id="main-content-jump-links-vertical-expanded-mobile-example"
643
+ >
644
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
645
+ <div class="pf-v6-c-page__main-body">
646
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
647
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
648
+ <li class="pf-v6-c-breadcrumb__item">
649
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
650
+ </li>
651
+ <li class="pf-v6-c-breadcrumb__item">
652
+ <span class="pf-v6-c-breadcrumb__item-divider">
653
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
654
+ </span>
655
+
656
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
657
+ </li>
658
+ <li class="pf-v6-c-breadcrumb__item">
659
+ <span class="pf-v6-c-breadcrumb__item-divider">
660
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
661
+ </span>
662
+
663
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
664
+ </li>
665
+ <li class="pf-v6-c-breadcrumb__item">
666
+ <span class="pf-v6-c-breadcrumb__item-divider">
667
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
668
+ </span>
669
+
670
+ <a
671
+ href="#"
672
+ class="pf-v6-c-breadcrumb__link pf-m-current"
673
+ aria-current="page"
674
+ >Section landing</a>
675
+ </li>
676
+ </ol>
677
+ </nav>
686
678
  </div>
687
- </div>
688
- </section>
689
- <section class="pf-v6-c-page__main-section pf-m-no-padding">
690
- <div class="pf-v6-c-sidebar">
691
- <div class="pf-v6-c-sidebar__main">
692
- <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
693
- <section class="pf-v6-c-page__main-section">
694
- <nav
695
- class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expanded pf-m-expandable"
696
- >
697
- <div class="pf-v6-c-jump-links__header">
698
- <div class="pf-v6-c-jump-links__toggle">
699
- <button
700
- class="pf-v6-c-button pf-m-plain"
701
- type="button"
702
- aria-label="Toggle jump links"
703
- aria-expanded="false"
679
+ </section>
680
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
681
+ <div class="pf-v6-c-page__main-body">
682
+ <div class="pf-v6-c-content">
683
+ <h1>Main title</h1>
684
+ <p>This is a full page demo.</p>
685
+ </div>
686
+ </div>
687
+ </section>
688
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
689
+ <div class="pf-v6-c-page__main-body">
690
+ <div class="pf-v6-c-sidebar">
691
+ <div class="pf-v6-c-sidebar__main">
692
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
693
+ <section class="pf-v6-c-page__main-section">
694
+ <div class="pf-v6-c-page__main-body">
695
+ <nav
696
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expanded pf-m-expandable"
704
697
  >
705
- <span class="pf-v6-c-jump-links__toggle-icon">
706
- <i class="fas fa-angle-right" aria-hidden="true"></i>
707
- </span>
708
- <span
709
- class="pf-v6-c-jump-links__toggle-text"
710
- >Jump to section</span>
711
- </button>
698
+ <div class="pf-v6-c-jump-links__header">
699
+ <div class="pf-v6-c-jump-links__toggle">
700
+ <button
701
+ class="pf-v6-c-button pf-m-plain"
702
+ type="button"
703
+ aria-label="Toggle jump links"
704
+ >
705
+ <span class="pf-v6-c-button__icon pf-m-start">
706
+ <span class="pf-v6-c-jump-links__toggle-icon">
707
+ <i
708
+ class="fas fa-angle-right"
709
+ aria-hidden="true"
710
+ ></i>
711
+ </span>
712
+ </span>
713
+ <span class="pf-v6-c-button__text">Jump to section</span>
714
+ </button>
715
+ </div>
716
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
717
+ </div>
718
+ <ul class="pf-v6-c-jump-links__list" role="list">
719
+ <li class="pf-v6-c-jump-links__item pf-m-current">
720
+ <span class="pf-v6-c-jump-links__link">
721
+ <a
722
+ class="pf-v6-c-button pf-m-link"
723
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-first"
724
+ >
725
+ <span class="pf-v6-c-button__text">
726
+ <span
727
+ class="pf-v6-c-jump-links__link-text"
728
+ >First section</span>
729
+ </span>
730
+ </a>
731
+ </span>
732
+ </li>
733
+ <li class="pf-v6-c-jump-links__item">
734
+ <span class="pf-v6-c-jump-links__link">
735
+ <a
736
+ class="pf-v6-c-button pf-m-link"
737
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-second"
738
+ >
739
+ <span class="pf-v6-c-button__text">
740
+ <span
741
+ class="pf-v6-c-jump-links__link-text"
742
+ >Second section</span>
743
+ </span>
744
+ </a>
745
+ </span>
746
+ </li>
747
+ <li class="pf-v6-c-jump-links__item">
748
+ <span class="pf-v6-c-jump-links__link">
749
+ <a
750
+ class="pf-v6-c-button pf-m-link"
751
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-third"
752
+ >
753
+ <span class="pf-v6-c-button__text">
754
+ <span
755
+ class="pf-v6-c-jump-links__link-text"
756
+ >Third section</span>
757
+ </span>
758
+ </a>
759
+ </span>
760
+ </li>
761
+ <li class="pf-v6-c-jump-links__item">
762
+ <span class="pf-v6-c-jump-links__link">
763
+ <a
764
+ class="pf-v6-c-button pf-m-link"
765
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-fourth"
766
+ >
767
+ <span class="pf-v6-c-button__text">
768
+ <span
769
+ class="pf-v6-c-jump-links__link-text"
770
+ >Fourth section</span>
771
+ </span>
772
+ </a>
773
+ </span>
774
+ </li>
775
+ <li class="pf-v6-c-jump-links__item">
776
+ <span class="pf-v6-c-jump-links__link">
777
+ <a
778
+ class="pf-v6-c-button pf-m-link"
779
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-fifth"
780
+ >
781
+ <span class="pf-v6-c-button__text">
782
+ <span
783
+ class="pf-v6-c-jump-links__link-text"
784
+ >Fifth section</span>
785
+ </span>
786
+ </a>
787
+ </span>
788
+ </li>
789
+ </ul>
790
+ </nav>
712
791
  </div>
713
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
714
- </div>
715
- <ul class="pf-v6-c-jump-links__list" role="list">
716
- <li class="pf-v6-c-jump-links__item pf-m-current">
717
- <span class="pf-v6-c-jump-links__link">
718
- <a
719
- class="pf-v6-c-button pf-m-link"
720
- href="#jump-links-vertical-expanded-mobile-example-jump-links-first"
721
- >
722
- <span
723
- class="pf-v6-c-jump-links__link-text"
724
- >First section</span>
725
- </a>
726
- </span>
727
- </li>
728
- <li class="pf-v6-c-jump-links__item">
729
- <span class="pf-v6-c-jump-links__link">
730
- <a
731
- class="pf-v6-c-button pf-m-link"
732
- href="#jump-links-vertical-expanded-mobile-example-jump-links-second"
733
- >
734
- <span
735
- class="pf-v6-c-jump-links__link-text"
736
- >Second section</span>
737
- </a>
738
- </span>
739
- </li>
740
- <li class="pf-v6-c-jump-links__item">
741
- <span class="pf-v6-c-jump-links__link">
742
- <a
743
- class="pf-v6-c-button pf-m-link"
744
- href="#jump-links-vertical-expanded-mobile-example-jump-links-third"
745
- >
746
- <span
747
- class="pf-v6-c-jump-links__link-text"
748
- >Third section</span>
749
- </a>
750
- </span>
751
- </li>
752
- <li class="pf-v6-c-jump-links__item">
753
- <span class="pf-v6-c-jump-links__link">
754
- <a
755
- class="pf-v6-c-button pf-m-link"
756
- href="#jump-links-vertical-expanded-mobile-example-jump-links-fourth"
757
- >
758
- <span
759
- class="pf-v6-c-jump-links__link-text"
760
- >Fourth section</span>
761
- </a>
762
- </span>
763
- </li>
764
- <li class="pf-v6-c-jump-links__item">
765
- <span class="pf-v6-c-jump-links__link">
766
- <a
767
- class="pf-v6-c-button pf-m-link"
768
- href="#jump-links-vertical-expanded-mobile-example-jump-links-fifth"
769
- >
770
- <span
771
- class="pf-v6-c-jump-links__link-text"
772
- >Fifth section</span>
773
- </a>
774
- </span>
775
- </li>
776
- </ul>
777
- </nav>
778
- </section>
779
- </div>
780
- <div class="pf-v6-c-sidebar__content">
781
- <section class="pf-v6-c-page__main-section">
782
- <div class="pf-v6-c-content">
783
- <p>
784
- <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
785
- </p>
786
-
787
- <h2
788
- id="jump-links-vertical-expanded-mobile-example-jump-links-first"
789
- >First section</h2>
790
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
791
-
792
- <h2
793
- id="jump-links-vertical-expanded-mobile-example-jump-links-second"
794
- >Second section</h2>
795
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
796
-
797
- <h2
798
- id="jump-links-vertical-expanded-mobile-example-jump-links-third"
799
- >Third section</h2>
800
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
801
-
802
- <h2
803
- id="jump-links-vertical-expanded-mobile-example-jump-links-fourth"
804
- >Fourth section</h2>
805
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
806
-
807
- <h2
808
- id="jump-links-vertical-expanded-mobile-example-jump-links-fifth"
809
- >Fifth section</h2>
810
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
792
+ </section>
793
+ </div>
794
+ <div class="pf-v6-c-sidebar__content">
795
+ <section class="pf-v6-c-page__main-section">
796
+ <div class="pf-v6-c-page__main-body">
797
+ <div class="pf-v6-c-content">
798
+ <p>
799
+ <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
800
+ </p>
801
+
802
+ <h2
803
+ id="jump-links-vertical-expanded-mobile-example-jump-links-first"
804
+ >First section</h2>
805
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
806
+
807
+ <h2
808
+ id="jump-links-vertical-expanded-mobile-example-jump-links-second"
809
+ >Second section</h2>
810
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
811
+
812
+ <h2
813
+ id="jump-links-vertical-expanded-mobile-example-jump-links-third"
814
+ >Third section</h2>
815
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
816
+
817
+ <h2
818
+ id="jump-links-vertical-expanded-mobile-example-jump-links-fourth"
819
+ >Fourth section</h2>
820
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
821
+
822
+ <h2
823
+ id="jump-links-vertical-expanded-mobile-example-jump-links-fifth"
824
+ >Fifth section</h2>
825
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
826
+ </div>
827
+ </div>
828
+ </section>
811
829
  </div>
812
- </section>
830
+ </div>
813
831
  </div>
814
832
  </div>
815
- </div>
816
- </section>
817
- </main>
833
+ </section>
834
+ </main>
835
+ </div>
818
836
  </div>
819
837
 
820
838
  ```
@@ -827,94 +845,102 @@ section: components
827
845
  <a
828
846
  class="pf-v6-c-button pf-m-primary"
829
847
  href="#main-content-jump-links-vertical-toggle-text-mobile-example"
830
- >Skip to content</a>
848
+ >
849
+ <span class="pf-v6-c-button__text">Skip to content</span>
850
+ </a>
831
851
  </div>
832
852
  <header
833
853
  class="pf-v6-c-masthead"
834
854
  id="jump-links-vertical-toggle-text-mobile-example-masthead"
835
855
  >
836
- <span class="pf-v6-c-masthead__toggle">
837
- <button
838
- class="pf-v6-c-button pf-m-plain"
839
- type="button"
840
- aria-label="Global navigation"
841
- >
842
- <i class="fas fa-bars" aria-hidden="true"></i>
843
- </button>
844
- </span>
845
856
  <div class="pf-v6-c-masthead__main">
846
- <a class="pf-v6-c-masthead__brand" href="#">
847
- <svg height="40px" viewBox="0 0 679 158">
848
- <title>PF-HorizontalLogo-Color</title>
849
- <defs>
850
- <linearGradient
851
- x1="68%"
852
- y1="2.25860997e-13%"
853
- x2="32%"
854
- y2="100%"
855
- id="linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead"
856
- >
857
- <stop stop-color="#2B9AF3" offset="0%" />
858
- <stop
859
- stop-color="#73BCF7"
860
- stop-opacity="0.502212631"
861
- offset="100%"
862
- />
863
- </linearGradient>
864
- </defs>
865
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
866
- <g
867
- transform="translate(206.000000, 45.750000)"
868
- fill="var(--pf-t--global--text--color--regular)"
869
- fill-rule="nonzero"
870
- >
871
- <path
872
- 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"
873
- />
874
- <path
875
- 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"
876
- />
877
- <path
878
- 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"
879
- />
880
- <path
881
- 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"
882
- />
883
- <path
884
- 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"
885
- />
886
- <path
887
- 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"
888
- />
889
- <path
890
- 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"
891
- />
892
- <polygon
893
- 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"
894
- />
895
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
896
- <path
897
- 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"
898
- />
899
- </g>
900
- <g transform="translate(0.000000, 0.000000)">
901
- <path
902
- 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"
903
- fill="#0066CC"
904
- />
905
- <path
906
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
907
- fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
908
- />
909
- <path
910
- 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"
911
- fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
912
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
913
- />
857
+ <span class="pf-v6-c-masthead__toggle">
858
+ <button
859
+ class="pf-v6-c-button pf-m-plain"
860
+ type="button"
861
+ aria-label="Global navigation"
862
+ >
863
+ <span class="pf-v6-c-button__icon">
864
+ <i class="fas fa-bars" aria-hidden="true"></i>
865
+ </span>
866
+ </button>
867
+ </span>
868
+ <div class="pf-v6-c-masthead__brand">
869
+ <a class="pf-v6-c-masthead__logo" href="#">
870
+ <svg height="37px" viewBox="0 0 679 158">
871
+ <title>PF-HorizontalLogo-Color</title>
872
+ <defs>
873
+ <linearGradient
874
+ x1="68%"
875
+ y1="2.25860997e-13%"
876
+ x2="32%"
877
+ y2="100%"
878
+ id="linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead"
879
+ >
880
+ <stop stop-color="#2B9AF3" offset="0%" />
881
+ <stop
882
+ stop-color="#73BCF7"
883
+ stop-opacity="0.502212631"
884
+ offset="100%"
885
+ />
886
+ </linearGradient>
887
+ </defs>
888
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
889
+ <g
890
+ transform="translate(206.000000, 45.750000)"
891
+ fill="var(--pf-t--global--text--color--regular)"
892
+ fill-rule="nonzero"
893
+ >
894
+ <path
895
+ 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"
896
+ />
897
+ <path
898
+ 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"
899
+ />
900
+ <path
901
+ 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"
902
+ />
903
+ <path
904
+ 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"
905
+ />
906
+ <path
907
+ 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"
908
+ />
909
+ <path
910
+ 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"
911
+ />
912
+ <path
913
+ 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"
914
+ />
915
+ <polygon
916
+ 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"
917
+ />
918
+ <polygon
919
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
920
+ />
921
+ <path
922
+ 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"
923
+ />
924
+ </g>
925
+ <g transform="translate(0.000000, 0.000000)">
926
+ <path
927
+ 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"
928
+ fill="#0066CC"
929
+ />
930
+ <path
931
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
932
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
933
+ />
934
+ <path
935
+ 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"
936
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
937
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
938
+ />
939
+ </g>
914
940
  </g>
915
- </g>
916
- </svg>
917
- </a>
941
+ </svg>
942
+ </a>
943
+ </div>
918
944
  </div>
919
945
  <div class="pf-v6-c-masthead__content">
920
946
  <div
@@ -923,41 +949,11 @@ section: components
923
949
  >
924
950
  <div class="pf-v6-c-toolbar__content">
925
951
  <div class="pf-v6-c-toolbar__content-section">
926
- <div class="pf-v6-c-toolbar__item">
927
- <button
928
- class="pf-v6-c-menu-toggle"
929
- type="button"
930
- aria-expanded="false"
931
- >
932
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
933
- <span class="pf-v6-c-menu-toggle__controls">
934
- <span class="pf-v6-c-menu-toggle__toggle-icon">
935
- <i class="fas fa-caret-down" aria-hidden="true"></i>
936
- </span>
937
- </span>
938
- </button>
939
- </div>
940
-
941
- <div class="pf-v6-c-toolbar__item">
942
- <button
943
- class="pf-v6-c-menu-toggle"
944
- type="button"
945
- aria-expanded="false"
946
- >
947
- <span class="pf-v6-c-menu-toggle__text">Services</span>
948
- <span class="pf-v6-c-menu-toggle__controls">
949
- <span class="pf-v6-c-menu-toggle__toggle-icon">
950
- <i class="fas fa-caret-down" aria-hidden="true"></i>
951
- </span>
952
- </span>
953
- </button>
954
- </div>
955
-
956
952
  <div
957
- 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"
953
+ 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"
958
954
  >
959
955
  <div
960
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
956
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
961
957
  >
962
958
  <div class="pf-v6-c-toolbar__item">
963
959
  <button
@@ -996,6 +992,7 @@ section: components
996
992
  </button>
997
993
  </div>
998
994
  </div>
995
+
999
996
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1000
997
  <button
1001
998
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1023,206 +1020,236 @@ section: components
1023
1020
  >
1024
1021
  <ul class="pf-v6-c-nav__list" role="list">
1025
1022
  <li class="pf-v6-c-nav__item">
1026
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1023
+ <a href="#" class="pf-v6-c-nav__link">
1024
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1025
+ </a>
1027
1026
  </li>
1028
1027
  <li class="pf-v6-c-nav__item">
1029
1028
  <a
1030
1029
  href="#"
1031
1030
  class="pf-v6-c-nav__link pf-m-current"
1032
1031
  aria-current="page"
1033
- >Policy</a>
1032
+ >
1033
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1034
+ </a>
1034
1035
  </li>
1035
1036
  <li class="pf-v6-c-nav__item">
1036
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1037
+ <a href="#" class="pf-v6-c-nav__link">
1038
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1039
+ </a>
1037
1040
  </li>
1038
1041
  <li class="pf-v6-c-nav__item">
1039
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1042
+ <a href="#" class="pf-v6-c-nav__link">
1043
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1044
+ </a>
1040
1045
  </li>
1041
1046
  <li class="pf-v6-c-nav__item">
1042
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1047
+ <a href="#" class="pf-v6-c-nav__link">
1048
+ <span class="pf-v6-c-nav__link-text">Server</span>
1049
+ </a>
1043
1050
  </li>
1044
1051
  </ul>
1045
1052
  </nav>
1046
1053
  </div>
1047
1054
  </div>
1048
- <main
1049
- class="pf-v6-c-page__main"
1050
- tabindex="-1"
1051
- id="main-content-jump-links-vertical-toggle-text-mobile-example"
1052
- >
1053
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1054
- <div class="pf-v6-c-page__main-body">
1055
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1056
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1057
- <li class="pf-v6-c-breadcrumb__item">
1058
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1059
- </li>
1060
- <li class="pf-v6-c-breadcrumb__item">
1061
- <span class="pf-v6-c-breadcrumb__item-divider">
1062
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1063
- </span>
1064
-
1065
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1066
- </li>
1067
- <li class="pf-v6-c-breadcrumb__item">
1068
- <span class="pf-v6-c-breadcrumb__item-divider">
1069
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1070
- </span>
1071
-
1072
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1073
- </li>
1074
- <li class="pf-v6-c-breadcrumb__item">
1075
- <span class="pf-v6-c-breadcrumb__item-divider">
1076
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1077
- </span>
1078
-
1079
- <a
1080
- href="#"
1081
- class="pf-v6-c-breadcrumb__link pf-m-current"
1082
- aria-current="page"
1083
- >Section landing</a>
1084
- </li>
1085
- </ol>
1086
- </nav>
1087
- </div>
1088
- </section>
1089
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1090
- <div class="pf-v6-c-page__main-body">
1091
- <div class="pf-v6-c-content">
1092
- <h1>Main title</h1>
1093
- <p>This is a full page demo.</p>
1055
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1056
+ <main
1057
+ class="pf-v6-c-page__main"
1058
+ tabindex="-1"
1059
+ id="main-content-jump-links-vertical-toggle-text-mobile-example"
1060
+ >
1061
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1062
+ <div class="pf-v6-c-page__main-body">
1063
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1064
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1065
+ <li class="pf-v6-c-breadcrumb__item">
1066
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1067
+ </li>
1068
+ <li class="pf-v6-c-breadcrumb__item">
1069
+ <span class="pf-v6-c-breadcrumb__item-divider">
1070
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1071
+ </span>
1072
+
1073
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1074
+ </li>
1075
+ <li class="pf-v6-c-breadcrumb__item">
1076
+ <span class="pf-v6-c-breadcrumb__item-divider">
1077
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1078
+ </span>
1079
+
1080
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1081
+ </li>
1082
+ <li class="pf-v6-c-breadcrumb__item">
1083
+ <span class="pf-v6-c-breadcrumb__item-divider">
1084
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1085
+ </span>
1086
+
1087
+ <a
1088
+ href="#"
1089
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1090
+ aria-current="page"
1091
+ >Section landing</a>
1092
+ </li>
1093
+ </ol>
1094
+ </nav>
1094
1095
  </div>
1095
- </div>
1096
- </section>
1097
- <section class="pf-v6-c-page__main-section pf-m-no-padding">
1098
- <div class="pf-v6-c-sidebar">
1099
- <div class="pf-v6-c-sidebar__main">
1100
- <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1101
- <section class="pf-v6-c-page__main-section">
1102
- <nav
1103
- class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1104
- >
1105
- <div class="pf-v6-c-jump-links__header">
1106
- <div class="pf-v6-c-jump-links__toggle">
1107
- <button
1108
- class="pf-v6-c-button pf-m-plain"
1109
- type="button"
1110
- aria-label="Toggle jump links"
1111
- aria-expanded="false"
1096
+ </section>
1097
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1098
+ <div class="pf-v6-c-page__main-body">
1099
+ <div class="pf-v6-c-content">
1100
+ <h1>Main title</h1>
1101
+ <p>This is a full page demo.</p>
1102
+ </div>
1103
+ </div>
1104
+ </section>
1105
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
1106
+ <div class="pf-v6-c-page__main-body">
1107
+ <div class="pf-v6-c-sidebar">
1108
+ <div class="pf-v6-c-sidebar__main">
1109
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1110
+ <section class="pf-v6-c-page__main-section">
1111
+ <div class="pf-v6-c-page__main-body">
1112
+ <nav
1113
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1112
1114
  >
1113
- <span class="pf-v6-c-jump-links__toggle-icon">
1114
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1115
- </span>
1116
- <span
1117
- class="pf-v6-c-jump-links__toggle-text"
1118
- >Jump to section</span>
1119
- </button>
1115
+ <div class="pf-v6-c-jump-links__header">
1116
+ <div class="pf-v6-c-jump-links__toggle">
1117
+ <button
1118
+ class="pf-v6-c-button pf-m-plain"
1119
+ type="button"
1120
+ aria-label="Toggle jump links"
1121
+ >
1122
+ <span class="pf-v6-c-button__icon pf-m-start">
1123
+ <span class="pf-v6-c-jump-links__toggle-icon">
1124
+ <i
1125
+ class="fas fa-angle-right"
1126
+ aria-hidden="true"
1127
+ ></i>
1128
+ </span>
1129
+ </span>
1130
+ <span class="pf-v6-c-button__text">Jump to section</span>
1131
+ </button>
1132
+ </div>
1133
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
1134
+ </div>
1135
+ <ul class="pf-v6-c-jump-links__list" role="list">
1136
+ <li class="pf-v6-c-jump-links__item pf-m-current">
1137
+ <span class="pf-v6-c-jump-links__link">
1138
+ <a
1139
+ class="pf-v6-c-button pf-m-link"
1140
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-first"
1141
+ >
1142
+ <span class="pf-v6-c-button__text">
1143
+ <span
1144
+ class="pf-v6-c-jump-links__link-text"
1145
+ >First section</span>
1146
+ </span>
1147
+ </a>
1148
+ </span>
1149
+ </li>
1150
+ <li class="pf-v6-c-jump-links__item">
1151
+ <span class="pf-v6-c-jump-links__link">
1152
+ <a
1153
+ class="pf-v6-c-button pf-m-link"
1154
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-second"
1155
+ >
1156
+ <span class="pf-v6-c-button__text">
1157
+ <span
1158
+ class="pf-v6-c-jump-links__link-text"
1159
+ >Second section</span>
1160
+ </span>
1161
+ </a>
1162
+ </span>
1163
+ </li>
1164
+ <li class="pf-v6-c-jump-links__item">
1165
+ <span class="pf-v6-c-jump-links__link">
1166
+ <a
1167
+ class="pf-v6-c-button pf-m-link"
1168
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-third"
1169
+ >
1170
+ <span class="pf-v6-c-button__text">
1171
+ <span
1172
+ class="pf-v6-c-jump-links__link-text"
1173
+ >Third section</span>
1174
+ </span>
1175
+ </a>
1176
+ </span>
1177
+ </li>
1178
+ <li class="pf-v6-c-jump-links__item">
1179
+ <span class="pf-v6-c-jump-links__link">
1180
+ <a
1181
+ class="pf-v6-c-button pf-m-link"
1182
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
1183
+ >
1184
+ <span class="pf-v6-c-button__text">
1185
+ <span
1186
+ class="pf-v6-c-jump-links__link-text"
1187
+ >Fourth section</span>
1188
+ </span>
1189
+ </a>
1190
+ </span>
1191
+ </li>
1192
+ <li class="pf-v6-c-jump-links__item">
1193
+ <span class="pf-v6-c-jump-links__link">
1194
+ <a
1195
+ class="pf-v6-c-button pf-m-link"
1196
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
1197
+ >
1198
+ <span class="pf-v6-c-button__text">
1199
+ <span
1200
+ class="pf-v6-c-jump-links__link-text"
1201
+ >Fifth section</span>
1202
+ </span>
1203
+ </a>
1204
+ </span>
1205
+ </li>
1206
+ </ul>
1207
+ </nav>
1120
1208
  </div>
1121
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
1122
- </div>
1123
- <ul class="pf-v6-c-jump-links__list" role="list">
1124
- <li class="pf-v6-c-jump-links__item pf-m-current">
1125
- <span class="pf-v6-c-jump-links__link">
1126
- <a
1127
- class="pf-v6-c-button pf-m-link"
1128
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-first"
1129
- >
1130
- <span
1131
- class="pf-v6-c-jump-links__link-text"
1132
- >First section</span>
1133
- </a>
1134
- </span>
1135
- </li>
1136
- <li class="pf-v6-c-jump-links__item">
1137
- <span class="pf-v6-c-jump-links__link">
1138
- <a
1139
- class="pf-v6-c-button pf-m-link"
1140
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-second"
1141
- >
1142
- <span
1143
- class="pf-v6-c-jump-links__link-text"
1144
- >Second section</span>
1145
- </a>
1146
- </span>
1147
- </li>
1148
- <li class="pf-v6-c-jump-links__item">
1149
- <span class="pf-v6-c-jump-links__link">
1150
- <a
1151
- class="pf-v6-c-button pf-m-link"
1152
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-third"
1153
- >
1154
- <span
1155
- class="pf-v6-c-jump-links__link-text"
1156
- >Third section</span>
1157
- </a>
1158
- </span>
1159
- </li>
1160
- <li class="pf-v6-c-jump-links__item">
1161
- <span class="pf-v6-c-jump-links__link">
1162
- <a
1163
- class="pf-v6-c-button pf-m-link"
1164
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
1165
- >
1166
- <span
1167
- class="pf-v6-c-jump-links__link-text"
1168
- >Fourth section</span>
1169
- </a>
1170
- </span>
1171
- </li>
1172
- <li class="pf-v6-c-jump-links__item">
1173
- <span class="pf-v6-c-jump-links__link">
1174
- <a
1175
- class="pf-v6-c-button pf-m-link"
1176
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
1177
- >
1178
- <span
1179
- class="pf-v6-c-jump-links__link-text"
1180
- >Fifth section</span>
1181
- </a>
1182
- </span>
1183
- </li>
1184
- </ul>
1185
- </nav>
1186
- </section>
1187
- </div>
1188
- <div class="pf-v6-c-sidebar__content">
1189
- <section class="pf-v6-c-page__main-section">
1190
- <div class="pf-v6-c-content">
1191
- <p>
1192
- <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1193
- </p>
1194
-
1195
- <h2
1196
- id="jump-links-vertical-toggle-text-mobile-example-jump-links-first"
1197
- >First section</h2>
1198
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1199
-
1200
- <h2
1201
- id="jump-links-vertical-toggle-text-mobile-example-jump-links-second"
1202
- >Second section</h2>
1203
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1204
-
1205
- <h2
1206
- id="jump-links-vertical-toggle-text-mobile-example-jump-links-third"
1207
- >Third section</h2>
1208
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1209
-
1210
- <h2
1211
- id="jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
1212
- >Fourth section</h2>
1213
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1214
-
1215
- <h2
1216
- id="jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
1217
- >Fifth section</h2>
1218
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1209
+ </section>
1219
1210
  </div>
1220
- </section>
1211
+ <div class="pf-v6-c-sidebar__content">
1212
+ <section class="pf-v6-c-page__main-section">
1213
+ <div class="pf-v6-c-page__main-body">
1214
+ <div class="pf-v6-c-content">
1215
+ <p>
1216
+ <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1217
+ </p>
1218
+
1219
+ <h2
1220
+ id="jump-links-vertical-toggle-text-mobile-example-jump-links-first"
1221
+ >First section</h2>
1222
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1223
+
1224
+ <h2
1225
+ id="jump-links-vertical-toggle-text-mobile-example-jump-links-second"
1226
+ >Second section</h2>
1227
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1228
+
1229
+ <h2
1230
+ id="jump-links-vertical-toggle-text-mobile-example-jump-links-third"
1231
+ >Third section</h2>
1232
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1233
+
1234
+ <h2
1235
+ id="jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
1236
+ >Fourth section</h2>
1237
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1238
+
1239
+ <h2
1240
+ id="jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
1241
+ >Fifth section</h2>
1242
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1243
+ </div>
1244
+ </div>
1245
+ </section>
1246
+ </div>
1247
+ </div>
1221
1248
  </div>
1222
1249
  </div>
1223
- </div>
1224
- </section>
1225
- </main>
1250
+ </section>
1251
+ </main>
1252
+ </div>
1226
1253
  </div>
1227
1254
 
1228
1255
  ```
@@ -1235,91 +1262,99 @@ section: components
1235
1262
  <a
1236
1263
  class="pf-v6-c-button pf-m-primary"
1237
1264
  href="#main-content-jump-links-horizontal-example"
1238
- >Skip to content</a>
1265
+ >
1266
+ <span class="pf-v6-c-button__text">Skip to content</span>
1267
+ </a>
1239
1268
  </div>
1240
1269
  <header class="pf-v6-c-masthead" id="jump-links-horizontal-example-masthead">
1241
- <span class="pf-v6-c-masthead__toggle">
1242
- <button
1243
- class="pf-v6-c-button pf-m-plain"
1244
- type="button"
1245
- aria-label="Global navigation"
1246
- >
1247
- <i class="fas fa-bars" aria-hidden="true"></i>
1248
- </button>
1249
- </span>
1250
1270
  <div class="pf-v6-c-masthead__main">
1251
- <a class="pf-v6-c-masthead__brand" href="#">
1252
- <svg height="40px" viewBox="0 0 679 158">
1253
- <title>PF-HorizontalLogo-Color</title>
1254
- <defs>
1255
- <linearGradient
1256
- x1="68%"
1257
- y1="2.25860997e-13%"
1258
- x2="32%"
1259
- y2="100%"
1260
- id="linearGradient-jump-links-horizontal-example-masthead"
1261
- >
1262
- <stop stop-color="#2B9AF3" offset="0%" />
1263
- <stop
1264
- stop-color="#73BCF7"
1265
- stop-opacity="0.502212631"
1266
- offset="100%"
1267
- />
1268
- </linearGradient>
1269
- </defs>
1270
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1271
- <g
1272
- transform="translate(206.000000, 45.750000)"
1273
- fill="var(--pf-t--global--text--color--regular)"
1274
- fill-rule="nonzero"
1275
- >
1276
- <path
1277
- 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"
1278
- />
1279
- <path
1280
- 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"
1281
- />
1282
- <path
1283
- 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"
1284
- />
1285
- <path
1286
- 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"
1287
- />
1288
- <path
1289
- 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"
1290
- />
1291
- <path
1292
- 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"
1293
- />
1294
- <path
1295
- 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"
1296
- />
1297
- <polygon
1298
- 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"
1299
- />
1300
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1301
- <path
1302
- 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"
1303
- />
1304
- </g>
1305
- <g transform="translate(0.000000, 0.000000)">
1306
- <path
1307
- 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"
1308
- fill="#0066CC"
1309
- />
1310
- <path
1311
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1312
- fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1313
- />
1314
- <path
1315
- 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"
1316
- fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1317
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1318
- />
1271
+ <span class="pf-v6-c-masthead__toggle">
1272
+ <button
1273
+ class="pf-v6-c-button pf-m-plain"
1274
+ type="button"
1275
+ aria-label="Global navigation"
1276
+ >
1277
+ <span class="pf-v6-c-button__icon">
1278
+ <i class="fas fa-bars" aria-hidden="true"></i>
1279
+ </span>
1280
+ </button>
1281
+ </span>
1282
+ <div class="pf-v6-c-masthead__brand">
1283
+ <a class="pf-v6-c-masthead__logo" href="#">
1284
+ <svg height="37px" viewBox="0 0 679 158">
1285
+ <title>PF-HorizontalLogo-Color</title>
1286
+ <defs>
1287
+ <linearGradient
1288
+ x1="68%"
1289
+ y1="2.25860997e-13%"
1290
+ x2="32%"
1291
+ y2="100%"
1292
+ id="linearGradient-jump-links-horizontal-example-masthead"
1293
+ >
1294
+ <stop stop-color="#2B9AF3" offset="0%" />
1295
+ <stop
1296
+ stop-color="#73BCF7"
1297
+ stop-opacity="0.502212631"
1298
+ offset="100%"
1299
+ />
1300
+ </linearGradient>
1301
+ </defs>
1302
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1303
+ <g
1304
+ transform="translate(206.000000, 45.750000)"
1305
+ fill="var(--pf-t--global--text--color--regular)"
1306
+ fill-rule="nonzero"
1307
+ >
1308
+ <path
1309
+ 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"
1310
+ />
1311
+ <path
1312
+ 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"
1313
+ />
1314
+ <path
1315
+ 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"
1316
+ />
1317
+ <path
1318
+ 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"
1319
+ />
1320
+ <path
1321
+ 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"
1322
+ />
1323
+ <path
1324
+ 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"
1325
+ />
1326
+ <path
1327
+ 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"
1328
+ />
1329
+ <polygon
1330
+ 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"
1331
+ />
1332
+ <polygon
1333
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1334
+ />
1335
+ <path
1336
+ 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"
1337
+ />
1338
+ </g>
1339
+ <g transform="translate(0.000000, 0.000000)">
1340
+ <path
1341
+ 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"
1342
+ fill="#0066CC"
1343
+ />
1344
+ <path
1345
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1346
+ fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1347
+ />
1348
+ <path
1349
+ 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"
1350
+ fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1351
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1352
+ />
1353
+ </g>
1319
1354
  </g>
1320
- </g>
1321
- </svg>
1322
- </a>
1355
+ </svg>
1356
+ </a>
1357
+ </div>
1323
1358
  </div>
1324
1359
  <div class="pf-v6-c-masthead__content">
1325
1360
  <div
@@ -1328,41 +1363,11 @@ section: components
1328
1363
  >
1329
1364
  <div class="pf-v6-c-toolbar__content">
1330
1365
  <div class="pf-v6-c-toolbar__content-section">
1331
- <div class="pf-v6-c-toolbar__item">
1332
- <button
1333
- class="pf-v6-c-menu-toggle"
1334
- type="button"
1335
- aria-expanded="false"
1336
- >
1337
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1338
- <span class="pf-v6-c-menu-toggle__controls">
1339
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1340
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1341
- </span>
1342
- </span>
1343
- </button>
1344
- </div>
1345
-
1346
- <div class="pf-v6-c-toolbar__item">
1347
- <button
1348
- class="pf-v6-c-menu-toggle"
1349
- type="button"
1350
- aria-expanded="false"
1351
- >
1352
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1353
- <span class="pf-v6-c-menu-toggle__controls">
1354
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1355
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1356
- </span>
1357
- </span>
1358
- </button>
1359
- </div>
1360
-
1361
1366
  <div
1362
- 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"
1367
+ 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"
1363
1368
  >
1364
1369
  <div
1365
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1370
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1366
1371
  >
1367
1372
  <div class="pf-v6-c-toolbar__item">
1368
1373
  <button
@@ -1401,6 +1406,7 @@ section: components
1401
1406
  </button>
1402
1407
  </div>
1403
1408
  </div>
1409
+
1404
1410
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1405
1411
  <button
1406
1412
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1428,146 +1434,182 @@ section: components
1428
1434
  >
1429
1435
  <ul class="pf-v6-c-nav__list" role="list">
1430
1436
  <li class="pf-v6-c-nav__item">
1431
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1437
+ <a href="#" class="pf-v6-c-nav__link">
1438
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1439
+ </a>
1432
1440
  </li>
1433
1441
  <li class="pf-v6-c-nav__item">
1434
1442
  <a
1435
1443
  href="#"
1436
1444
  class="pf-v6-c-nav__link pf-m-current"
1437
1445
  aria-current="page"
1438
- >Policy</a>
1446
+ >
1447
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1448
+ </a>
1439
1449
  </li>
1440
1450
  <li class="pf-v6-c-nav__item">
1441
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1451
+ <a href="#" class="pf-v6-c-nav__link">
1452
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1453
+ </a>
1442
1454
  </li>
1443
1455
  <li class="pf-v6-c-nav__item">
1444
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1456
+ <a href="#" class="pf-v6-c-nav__link">
1457
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1458
+ </a>
1445
1459
  </li>
1446
1460
  <li class="pf-v6-c-nav__item">
1447
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1461
+ <a href="#" class="pf-v6-c-nav__link">
1462
+ <span class="pf-v6-c-nav__link-text">Server</span>
1463
+ </a>
1448
1464
  </li>
1449
1465
  </ul>
1450
1466
  </nav>
1451
1467
  </div>
1452
1468
  </div>
1453
- <main
1454
- class="pf-v6-c-page__main"
1455
- tabindex="-1"
1456
- id="main-content-jump-links-horizontal-example"
1457
- >
1458
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1459
- <div class="pf-v6-c-page__main-body">
1460
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1461
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1462
- <li class="pf-v6-c-breadcrumb__item">
1463
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1464
- </li>
1465
- <li class="pf-v6-c-breadcrumb__item">
1466
- <span class="pf-v6-c-breadcrumb__item-divider">
1467
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1468
- </span>
1469
-
1470
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1471
- </li>
1472
- <li class="pf-v6-c-breadcrumb__item">
1473
- <span class="pf-v6-c-breadcrumb__item-divider">
1474
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1475
- </span>
1476
-
1477
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1478
- </li>
1479
- <li class="pf-v6-c-breadcrumb__item">
1480
- <span class="pf-v6-c-breadcrumb__item-divider">
1481
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1482
- </span>
1483
-
1484
- <a
1485
- href="#"
1486
- class="pf-v6-c-breadcrumb__link pf-m-current"
1487
- aria-current="page"
1488
- >Section landing</a>
1489
- </li>
1490
- </ol>
1491
- </nav>
1492
- </div>
1493
- </section>
1494
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1495
- <div class="pf-v6-c-page__main-body">
1496
- <div class="pf-v6-c-content">
1497
- <h1>Main title</h1>
1498
- <p>This is a full page demo.</p>
1469
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1470
+ <main
1471
+ class="pf-v6-c-page__main"
1472
+ tabindex="-1"
1473
+ id="main-content-jump-links-horizontal-example"
1474
+ >
1475
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1476
+ <div class="pf-v6-c-page__main-body">
1477
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1478
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1479
+ <li class="pf-v6-c-breadcrumb__item">
1480
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1481
+ </li>
1482
+ <li class="pf-v6-c-breadcrumb__item">
1483
+ <span class="pf-v6-c-breadcrumb__item-divider">
1484
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1485
+ </span>
1486
+
1487
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1488
+ </li>
1489
+ <li class="pf-v6-c-breadcrumb__item">
1490
+ <span class="pf-v6-c-breadcrumb__item-divider">
1491
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1492
+ </span>
1493
+
1494
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1495
+ </li>
1496
+ <li class="pf-v6-c-breadcrumb__item">
1497
+ <span class="pf-v6-c-breadcrumb__item-divider">
1498
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1499
+ </span>
1500
+
1501
+ <a
1502
+ href="#"
1503
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1504
+ aria-current="page"
1505
+ >Section landing</a>
1506
+ </li>
1507
+ </ol>
1508
+ </nav>
1499
1509
  </div>
1500
- </div>
1501
- </section>
1502
- <section class="pf-v6-c-page__main-section pf-m-sticky-top">
1503
- <nav class="pf-v6-c-jump-links pf-m-center">
1504
- <div class="pf-v6-c-jump-links__main">
1505
- <div class="pf-v6-c-jump-links__header">
1506
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
1510
+ </section>
1511
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1512
+ <div class="pf-v6-c-page__main-body">
1513
+ <div class="pf-v6-c-content">
1514
+ <h1>Main title</h1>
1515
+ <p>This is a full page demo.</p>
1507
1516
  </div>
1508
- <ul class="pf-v6-c-jump-links__list" role="list">
1509
- <li class="pf-v6-c-jump-links__item pf-m-current">
1510
- <span class="pf-v6-c-jump-links__link">
1511
- <a class="pf-v6-c-button pf-m-link" href="#-first">
1512
- <span class="pf-v6-c-jump-links__link-text">First section</span>
1513
- </a>
1514
- </span>
1515
- </li>
1516
- <li class="pf-v6-c-jump-links__item">
1517
- <span class="pf-v6-c-jump-links__link">
1518
- <a class="pf-v6-c-button pf-m-link" href="#-second">
1519
- <span class="pf-v6-c-jump-links__link-text">Second section</span>
1520
- </a>
1521
- </span>
1522
- </li>
1523
- <li class="pf-v6-c-jump-links__item">
1524
- <span class="pf-v6-c-jump-links__link">
1525
- <a class="pf-v6-c-button pf-m-link" href="#-third">
1526
- <span class="pf-v6-c-jump-links__link-text">Third section</span>
1527
- </a>
1528
- </span>
1529
- </li>
1530
- <li class="pf-v6-c-jump-links__item">
1531
- <span class="pf-v6-c-jump-links__link">
1532
- <a class="pf-v6-c-button pf-m-link" href="#-fourth">
1533
- <span class="pf-v6-c-jump-links__link-text">Fourth section</span>
1534
- </a>
1535
- </span>
1536
- </li>
1537
- <li class="pf-v6-c-jump-links__item">
1538
- <span class="pf-v6-c-jump-links__link">
1539
- <a class="pf-v6-c-button pf-m-link" href="#-fifth">
1540
- <span class="pf-v6-c-jump-links__link-text">Fifth section</span>
1541
- </a>
1542
- </span>
1543
- </li>
1544
- </ul>
1545
1517
  </div>
1546
- </nav>
1547
- </section>
1548
- <section class="pf-v6-c-page__main-section">
1549
- <div class="pf-v6-c-content">
1550
- <p>
1551
- <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1552
- </p>
1518
+ </section>
1519
+ <section class="pf-v6-c-page__main-section pf-m-sticky-top">
1520
+ <div class="pf-v6-c-page__main-body">
1521
+ <nav class="pf-v6-c-jump-links pf-m-center">
1522
+ <div class="pf-v6-c-jump-links__main">
1523
+ <div class="pf-v6-c-jump-links__header">
1524
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
1525
+ </div>
1526
+ <ul class="pf-v6-c-jump-links__list" role="list">
1527
+ <li class="pf-v6-c-jump-links__item pf-m-current">
1528
+ <span class="pf-v6-c-jump-links__link">
1529
+ <a class="pf-v6-c-button pf-m-link" href="#-first">
1530
+ <span class="pf-v6-c-button__text">
1531
+ <span
1532
+ class="pf-v6-c-jump-links__link-text"
1533
+ >First section</span>
1534
+ </span>
1535
+ </a>
1536
+ </span>
1537
+ </li>
1538
+ <li class="pf-v6-c-jump-links__item">
1539
+ <span class="pf-v6-c-jump-links__link">
1540
+ <a class="pf-v6-c-button pf-m-link" href="#-second">
1541
+ <span class="pf-v6-c-button__text">
1542
+ <span
1543
+ class="pf-v6-c-jump-links__link-text"
1544
+ >Second section</span>
1545
+ </span>
1546
+ </a>
1547
+ </span>
1548
+ </li>
1549
+ <li class="pf-v6-c-jump-links__item">
1550
+ <span class="pf-v6-c-jump-links__link">
1551
+ <a class="pf-v6-c-button pf-m-link" href="#-third">
1552
+ <span class="pf-v6-c-button__text">
1553
+ <span
1554
+ class="pf-v6-c-jump-links__link-text"
1555
+ >Third section</span>
1556
+ </span>
1557
+ </a>
1558
+ </span>
1559
+ </li>
1560
+ <li class="pf-v6-c-jump-links__item">
1561
+ <span class="pf-v6-c-jump-links__link">
1562
+ <a class="pf-v6-c-button pf-m-link" href="#-fourth">
1563
+ <span class="pf-v6-c-button__text">
1564
+ <span
1565
+ class="pf-v6-c-jump-links__link-text"
1566
+ >Fourth section</span>
1567
+ </span>
1568
+ </a>
1569
+ </span>
1570
+ </li>
1571
+ <li class="pf-v6-c-jump-links__item">
1572
+ <span class="pf-v6-c-jump-links__link">
1573
+ <a class="pf-v6-c-button pf-m-link" href="#-fifth">
1574
+ <span class="pf-v6-c-button__text">
1575
+ <span
1576
+ class="pf-v6-c-jump-links__link-text"
1577
+ >Fifth section</span>
1578
+ </span>
1579
+ </a>
1580
+ </span>
1581
+ </li>
1582
+ </ul>
1583
+ </div>
1584
+ </nav>
1585
+ </div>
1586
+ </section>
1587
+ <section class="pf-v6-c-page__main-section">
1588
+ <div class="pf-v6-c-page__main-body">
1589
+ <div class="pf-v6-c-content">
1590
+ <p>
1591
+ <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1592
+ </p>
1553
1593
 
1554
- <h2 id="-first">First section</h2>
1555
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1594
+ <h2 id="-first">First section</h2>
1595
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1556
1596
 
1557
- <h2 id="-second">Second section</h2>
1558
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1597
+ <h2 id="-second">Second section</h2>
1598
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1559
1599
 
1560
- <h2 id="-third">Third section</h2>
1561
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1600
+ <h2 id="-third">Third section</h2>
1601
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1562
1602
 
1563
- <h2 id="-fourth">Fourth section</h2>
1564
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1603
+ <h2 id="-fourth">Fourth section</h2>
1604
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1565
1605
 
1566
- <h2 id="-fifth">Fifth section</h2>
1567
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1568
- </div>
1569
- </section>
1570
- </main>
1606
+ <h2 id="-fifth">Fifth section</h2>
1607
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1608
+ </div>
1609
+ </div>
1610
+ </section>
1611
+ </main>
1612
+ </div>
1571
1613
  </div>
1572
1614
 
1573
1615
  ```
@@ -1580,91 +1622,99 @@ section: components
1580
1622
  <a
1581
1623
  class="pf-v6-c-button pf-m-primary"
1582
1624
  href="#main-content-jump-links-drawer"
1583
- >Skip to content</a>
1625
+ >
1626
+ <span class="pf-v6-c-button__text">Skip to content</span>
1627
+ </a>
1584
1628
  </div>
1585
1629
  <header class="pf-v6-c-masthead" id="jump-links-drawer-masthead">
1586
- <span class="pf-v6-c-masthead__toggle">
1587
- <button
1588
- class="pf-v6-c-button pf-m-plain"
1589
- type="button"
1590
- aria-label="Global navigation"
1591
- >
1592
- <i class="fas fa-bars" aria-hidden="true"></i>
1593
- </button>
1594
- </span>
1595
1630
  <div class="pf-v6-c-masthead__main">
1596
- <a class="pf-v6-c-masthead__brand" href="#">
1597
- <svg height="40px" viewBox="0 0 679 158">
1598
- <title>PF-HorizontalLogo-Color</title>
1599
- <defs>
1600
- <linearGradient
1601
- x1="68%"
1602
- y1="2.25860997e-13%"
1603
- x2="32%"
1604
- y2="100%"
1605
- id="linearGradient-jump-links-drawer-masthead"
1606
- >
1607
- <stop stop-color="#2B9AF3" offset="0%" />
1608
- <stop
1609
- stop-color="#73BCF7"
1610
- stop-opacity="0.502212631"
1611
- offset="100%"
1612
- />
1613
- </linearGradient>
1614
- </defs>
1615
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1616
- <g
1617
- transform="translate(206.000000, 45.750000)"
1618
- fill="var(--pf-t--global--text--color--regular)"
1619
- fill-rule="nonzero"
1620
- >
1621
- <path
1622
- 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"
1623
- />
1624
- <path
1625
- 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"
1626
- />
1627
- <path
1628
- 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"
1629
- />
1630
- <path
1631
- 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"
1632
- />
1633
- <path
1634
- 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"
1635
- />
1636
- <path
1637
- 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"
1638
- />
1639
- <path
1640
- 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"
1641
- />
1642
- <polygon
1643
- 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"
1644
- />
1645
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1646
- <path
1647
- 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"
1648
- />
1649
- </g>
1650
- <g transform="translate(0.000000, 0.000000)">
1651
- <path
1652
- 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"
1653
- fill="#0066CC"
1654
- />
1655
- <path
1656
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1657
- fill="url(#linearGradient-jump-links-drawer-masthead)"
1658
- />
1659
- <path
1660
- 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"
1661
- fill="url(#linearGradient-jump-links-drawer-masthead)"
1662
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1663
- />
1631
+ <span class="pf-v6-c-masthead__toggle">
1632
+ <button
1633
+ class="pf-v6-c-button pf-m-plain"
1634
+ type="button"
1635
+ aria-label="Global navigation"
1636
+ >
1637
+ <span class="pf-v6-c-button__icon">
1638
+ <i class="fas fa-bars" aria-hidden="true"></i>
1639
+ </span>
1640
+ </button>
1641
+ </span>
1642
+ <div class="pf-v6-c-masthead__brand">
1643
+ <a class="pf-v6-c-masthead__logo" href="#">
1644
+ <svg height="37px" viewBox="0 0 679 158">
1645
+ <title>PF-HorizontalLogo-Color</title>
1646
+ <defs>
1647
+ <linearGradient
1648
+ x1="68%"
1649
+ y1="2.25860997e-13%"
1650
+ x2="32%"
1651
+ y2="100%"
1652
+ id="linearGradient-jump-links-drawer-masthead"
1653
+ >
1654
+ <stop stop-color="#2B9AF3" offset="0%" />
1655
+ <stop
1656
+ stop-color="#73BCF7"
1657
+ stop-opacity="0.502212631"
1658
+ offset="100%"
1659
+ />
1660
+ </linearGradient>
1661
+ </defs>
1662
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1663
+ <g
1664
+ transform="translate(206.000000, 45.750000)"
1665
+ fill="var(--pf-t--global--text--color--regular)"
1666
+ fill-rule="nonzero"
1667
+ >
1668
+ <path
1669
+ 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"
1670
+ />
1671
+ <path
1672
+ 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"
1673
+ />
1674
+ <path
1675
+ 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"
1676
+ />
1677
+ <path
1678
+ 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"
1679
+ />
1680
+ <path
1681
+ 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"
1682
+ />
1683
+ <path
1684
+ 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"
1685
+ />
1686
+ <path
1687
+ 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"
1688
+ />
1689
+ <polygon
1690
+ 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"
1691
+ />
1692
+ <polygon
1693
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1694
+ />
1695
+ <path
1696
+ 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"
1697
+ />
1698
+ </g>
1699
+ <g transform="translate(0.000000, 0.000000)">
1700
+ <path
1701
+ 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"
1702
+ fill="#0066CC"
1703
+ />
1704
+ <path
1705
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1706
+ fill="url(#linearGradient-jump-links-drawer-masthead)"
1707
+ />
1708
+ <path
1709
+ 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"
1710
+ fill="url(#linearGradient-jump-links-drawer-masthead)"
1711
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1712
+ />
1713
+ </g>
1664
1714
  </g>
1665
- </g>
1666
- </svg>
1667
- </a>
1715
+ </svg>
1716
+ </a>
1717
+ </div>
1668
1718
  </div>
1669
1719
  <div class="pf-v6-c-masthead__content">
1670
1720
  <div
@@ -1673,41 +1723,11 @@ section: components
1673
1723
  >
1674
1724
  <div class="pf-v6-c-toolbar__content">
1675
1725
  <div class="pf-v6-c-toolbar__content-section">
1676
- <div class="pf-v6-c-toolbar__item">
1677
- <button
1678
- class="pf-v6-c-menu-toggle"
1679
- type="button"
1680
- aria-expanded="false"
1681
- >
1682
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1683
- <span class="pf-v6-c-menu-toggle__controls">
1684
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1685
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1686
- </span>
1687
- </span>
1688
- </button>
1689
- </div>
1690
-
1691
- <div class="pf-v6-c-toolbar__item">
1692
- <button
1693
- class="pf-v6-c-menu-toggle"
1694
- type="button"
1695
- aria-expanded="false"
1696
- >
1697
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1698
- <span class="pf-v6-c-menu-toggle__controls">
1699
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1700
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1701
- </span>
1702
- </span>
1703
- </button>
1704
- </div>
1705
-
1706
1726
  <div
1707
- 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"
1727
+ 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"
1708
1728
  >
1709
1729
  <div
1710
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1730
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1711
1731
  >
1712
1732
  <div class="pf-v6-c-toolbar__item">
1713
1733
  <button
@@ -1746,6 +1766,7 @@ section: components
1746
1766
  </button>
1747
1767
  </div>
1748
1768
  </div>
1769
+
1749
1770
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1750
1771
  <button
1751
1772
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1773,168 +1794,225 @@ section: components
1773
1794
  >
1774
1795
  <ul class="pf-v6-c-nav__list" role="list">
1775
1796
  <li class="pf-v6-c-nav__item">
1776
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1797
+ <a href="#" class="pf-v6-c-nav__link">
1798
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1799
+ </a>
1777
1800
  </li>
1778
1801
  <li class="pf-v6-c-nav__item">
1779
1802
  <a
1780
1803
  href="#"
1781
1804
  class="pf-v6-c-nav__link pf-m-current"
1782
1805
  aria-current="page"
1783
- >Policy</a>
1806
+ >
1807
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1808
+ </a>
1784
1809
  </li>
1785
1810
  <li class="pf-v6-c-nav__item">
1786
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1811
+ <a href="#" class="pf-v6-c-nav__link">
1812
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1813
+ </a>
1787
1814
  </li>
1788
1815
  <li class="pf-v6-c-nav__item">
1789
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1816
+ <a href="#" class="pf-v6-c-nav__link">
1817
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1818
+ </a>
1790
1819
  </li>
1791
1820
  <li class="pf-v6-c-nav__item">
1792
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1821
+ <a href="#" class="pf-v6-c-nav__link">
1822
+ <span class="pf-v6-c-nav__link-text">Server</span>
1823
+ </a>
1793
1824
  </li>
1794
1825
  </ul>
1795
1826
  </nav>
1796
1827
  </div>
1797
1828
  </div>
1798
- <main
1799
- class="pf-v6-c-page__main"
1800
- tabindex="-1"
1801
- id="main-content-jump-links-drawer"
1802
- >
1803
- <div class="pf-v6-c-drawer">
1804
- <div class="pf-v6-c-drawer__main">
1805
- <div
1806
- class="pf-v6-c-drawer__content"
1807
- id="jump-links-drawer-drawer-scrollable-container"
1808
- >
1809
- <div class="pf-v6-c-drawer__body">
1810
- <div class="pf-v6-c-sidebar">
1811
- <div class="pf-v6-c-sidebar__main">
1812
- <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1813
- <section class="pf-v6-c-page__main-section pf-m-light">
1814
- <nav
1815
- class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1816
- >
1817
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
1818
- <ul class="pf-v6-c-jump-links__list" role="list">
1819
- <li class="pf-v6-c-jump-links__item pf-m-current">
1820
- <span class="pf-v6-c-jump-links__link">
1821
- <a
1822
- class="pf-v6-c-button pf-m-link"
1823
- href="#jump-links-drawer-jump-links-first"
1824
- >
1825
- <span
1826
- class="pf-v6-c-jump-links__link-text"
1827
- >First section</span>
1828
- </a>
1829
- </span>
1830
- </li>
1831
- <li class="pf-v6-c-jump-links__item">
1832
- <span class="pf-v6-c-jump-links__link">
1833
- <a
1834
- class="pf-v6-c-button pf-m-link"
1835
- href="#jump-links-drawer-jump-links-second"
1836
- >
1837
- <span
1838
- class="pf-v6-c-jump-links__link-text"
1839
- >Second section</span>
1840
- </a>
1841
- </span>
1842
- </li>
1843
- <li class="pf-v6-c-jump-links__item">
1844
- <span class="pf-v6-c-jump-links__link">
1845
- <a
1846
- class="pf-v6-c-button pf-m-link"
1847
- href="#jump-links-drawer-jump-links-third"
1848
- >
1849
- <span
1850
- class="pf-v6-c-jump-links__link-text"
1851
- >Third section</span>
1852
- </a>
1853
- </span>
1854
- </li>
1855
- <li class="pf-v6-c-jump-links__item">
1856
- <span class="pf-v6-c-jump-links__link">
1857
- <a
1858
- class="pf-v6-c-button pf-m-link"
1859
- href="#jump-links-drawer-jump-links-fourth"
1860
- >
1861
- <span
1862
- class="pf-v6-c-jump-links__link-text"
1863
- >Fourth section</span>
1864
- </a>
1865
- </span>
1866
- </li>
1867
- <li class="pf-v6-c-jump-links__item">
1868
- <span class="pf-v6-c-jump-links__link">
1869
- <a
1870
- class="pf-v6-c-button pf-m-link"
1871
- href="#jump-links-drawer-jump-links-fifth"
1872
- >
1873
- <span
1874
- class="pf-v6-c-jump-links__link-text"
1875
- >Fifth section</span>
1876
- </a>
1877
- </span>
1878
- </li>
1879
- </ul>
1880
- </nav>
1881
- </section>
1882
- </div>
1883
- <div class="pf-v6-c-sidebar__content">
1884
- <section class="pf-v6-c-page__main-section pf-m-light">
1885
- <div class="pf-v6-c-content">
1886
- <p>
1887
- <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1888
- </p>
1889
-
1890
- <h2 id="jump-links-drawer-jump-links-first">First section</h2>
1891
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1892
-
1893
- <h2
1894
- id="jump-links-drawer-jump-links-second"
1895
- >Second section</h2>
1896
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1897
-
1898
- <h2 id="jump-links-drawer-jump-links-third">Third section</h2>
1899
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1900
-
1901
- <h2
1902
- id="jump-links-drawer-jump-links-fourth"
1903
- >Fourth section</h2>
1904
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1905
-
1906
- <h2 id="jump-links-drawer-jump-links-fifth">Fifth section</h2>
1907
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1908
- </div>
1909
- </section>
1829
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1830
+ <main
1831
+ class="pf-v6-c-page__main"
1832
+ tabindex="-1"
1833
+ id="main-content-jump-links-drawer"
1834
+ >
1835
+ <div class="pf-v6-c-drawer">
1836
+ <div class="pf-v6-c-drawer__main">
1837
+ <div
1838
+ class="pf-v6-c-drawer__content"
1839
+ id="jump-links-drawer-drawer-scrollable-container"
1840
+ >
1841
+ <div class="pf-v6-c-drawer__body">
1842
+ <div class="pf-v6-c-sidebar">
1843
+ <div class="pf-v6-c-sidebar__main">
1844
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1845
+ <section class="pf-v6-c-page__main-section">
1846
+ <div class="pf-v6-c-page__main-body">
1847
+ <nav
1848
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1849
+ >
1850
+ <div class="pf-v6-c-jump-links__header">
1851
+ <div class="pf-v6-c-jump-links__toggle">
1852
+ <button
1853
+ class="pf-v6-c-button pf-m-plain"
1854
+ type="button"
1855
+ aria-label="Toggle jump links"
1856
+ >
1857
+ <span class="pf-v6-c-button__icon pf-m-start">
1858
+ <span class="pf-v6-c-jump-links__toggle-icon">
1859
+ <i
1860
+ class="fas fa-angle-right"
1861
+ aria-hidden="true"
1862
+ ></i>
1863
+ </span>
1864
+ </span>
1865
+ <span
1866
+ class="pf-v6-c-button__text"
1867
+ >Jump to section</span>
1868
+ </button>
1869
+ </div>
1870
+ <div
1871
+ class="pf-v6-c-jump-links__label"
1872
+ >Jump to section</div>
1873
+ </div>
1874
+ <ul class="pf-v6-c-jump-links__list" role="list">
1875
+ <li class="pf-v6-c-jump-links__item pf-m-current">
1876
+ <span class="pf-v6-c-jump-links__link">
1877
+ <a
1878
+ class="pf-v6-c-button pf-m-link"
1879
+ href="#jump-links-drawer-jump-links-first"
1880
+ >
1881
+ <span class="pf-v6-c-button__text">
1882
+ <span
1883
+ class="pf-v6-c-jump-links__link-text"
1884
+ >First section</span>
1885
+ </span>
1886
+ </a>
1887
+ </span>
1888
+ </li>
1889
+ <li class="pf-v6-c-jump-links__item">
1890
+ <span class="pf-v6-c-jump-links__link">
1891
+ <a
1892
+ class="pf-v6-c-button pf-m-link"
1893
+ href="#jump-links-drawer-jump-links-second"
1894
+ >
1895
+ <span class="pf-v6-c-button__text">
1896
+ <span
1897
+ class="pf-v6-c-jump-links__link-text"
1898
+ >Second section</span>
1899
+ </span>
1900
+ </a>
1901
+ </span>
1902
+ </li>
1903
+ <li class="pf-v6-c-jump-links__item">
1904
+ <span class="pf-v6-c-jump-links__link">
1905
+ <a
1906
+ class="pf-v6-c-button pf-m-link"
1907
+ href="#jump-links-drawer-jump-links-third"
1908
+ >
1909
+ <span class="pf-v6-c-button__text">
1910
+ <span
1911
+ class="pf-v6-c-jump-links__link-text"
1912
+ >Third section</span>
1913
+ </span>
1914
+ </a>
1915
+ </span>
1916
+ </li>
1917
+ <li class="pf-v6-c-jump-links__item">
1918
+ <span class="pf-v6-c-jump-links__link">
1919
+ <a
1920
+ class="pf-v6-c-button pf-m-link"
1921
+ href="#jump-links-drawer-jump-links-fourth"
1922
+ >
1923
+ <span class="pf-v6-c-button__text">
1924
+ <span
1925
+ class="pf-v6-c-jump-links__link-text"
1926
+ >Fourth section</span>
1927
+ </span>
1928
+ </a>
1929
+ </span>
1930
+ </li>
1931
+ <li class="pf-v6-c-jump-links__item">
1932
+ <span class="pf-v6-c-jump-links__link">
1933
+ <a
1934
+ class="pf-v6-c-button pf-m-link"
1935
+ href="#jump-links-drawer-jump-links-fifth"
1936
+ >
1937
+ <span class="pf-v6-c-button__text">
1938
+ <span
1939
+ class="pf-v6-c-jump-links__link-text"
1940
+ >Fifth section</span>
1941
+ </span>
1942
+ </a>
1943
+ </span>
1944
+ </li>
1945
+ </ul>
1946
+ </nav>
1947
+ </div>
1948
+ </section>
1949
+ </div>
1950
+ <div class="pf-v6-c-sidebar__content">
1951
+ <section class="pf-v6-c-page__main-section">
1952
+ <div class="pf-v6-c-page__main-body">
1953
+ <div class="pf-v6-c-content">
1954
+ <p>
1955
+ <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1956
+ </p>
1957
+
1958
+ <h2
1959
+ id="jump-links-drawer-jump-links-first"
1960
+ >First section</h2>
1961
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1962
+
1963
+ <h2
1964
+ id="jump-links-drawer-jump-links-second"
1965
+ >Second section</h2>
1966
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1967
+
1968
+ <h2
1969
+ id="jump-links-drawer-jump-links-third"
1970
+ >Third section</h2>
1971
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1972
+
1973
+ <h2
1974
+ id="jump-links-drawer-jump-links-fourth"
1975
+ >Fourth section</h2>
1976
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1977
+
1978
+ <h2
1979
+ id="jump-links-drawer-jump-links-fifth"
1980
+ >Fifth section</h2>
1981
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
1982
+ </div>
1983
+ </div>
1984
+ </section>
1985
+ </div>
1910
1986
  </div>
1911
1987
  </div>
1912
1988
  </div>
1913
1989
  </div>
1914
- </div>
1915
- <div class="pf-v6-c-drawer__panel" hidden>
1916
- <div class="pf-v6-c-drawer__head">
1917
- <span>Drawer panel header content</span>
1918
- <div class="pf-v6-c-drawer__actions">
1919
- <div class="pf-v6-c-drawer__close">
1920
- <button
1921
- class="pf-v6-c-button pf-m-plain"
1922
- type="button"
1923
- aria-label="Close drawer panel"
1924
- >
1925
- <i class="fas fa-times" aria-hidden="true"></i>
1926
- </button>
1990
+ <div class="pf-v6-c-drawer__panel" hidden>
1991
+ <div class="pf-v6-c-drawer__head">
1992
+ <span>Drawer panel header content</span>
1993
+ <div class="pf-v6-c-drawer__actions">
1994
+ <div class="pf-v6-c-drawer__close">
1995
+ <button
1996
+ class="pf-v6-c-button pf-m-plain"
1997
+ type="button"
1998
+ aria-label="Close drawer panel"
1999
+ >
2000
+ <span class="pf-v6-c-button__icon">
2001
+ <i class="fas fa-times" aria-hidden="true"></i>
2002
+ </span>
2003
+ </button>
2004
+ </div>
1927
2005
  </div>
1928
2006
  </div>
2007
+ <div
2008
+ class="pf-v6-c-drawer__description"
2009
+ >This is a helpful description of the drawer panel.</div>
2010
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
1929
2011
  </div>
1930
- <div
1931
- class="pf-v6-c-drawer__description"
1932
- >This is a helpful description of the drawer panel.</div>
1933
- <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
1934
2012
  </div>
1935
2013
  </div>
1936
- </div>
1937
- </main>
2014
+ </main>
2015
+ </div>
1938
2016
  </div>
1939
2017
 
1940
2018
  ```
@@ -1947,91 +2025,99 @@ section: components
1947
2025
  <a
1948
2026
  class="pf-v6-c-button pf-m-primary"
1949
2027
  href="#main-content-jump-links-drawer-expanded"
1950
- >Skip to content</a>
2028
+ >
2029
+ <span class="pf-v6-c-button__text">Skip to content</span>
2030
+ </a>
1951
2031
  </div>
1952
2032
  <header class="pf-v6-c-masthead" id="jump-links-drawer-expanded-masthead">
1953
- <span class="pf-v6-c-masthead__toggle">
1954
- <button
1955
- class="pf-v6-c-button pf-m-plain"
1956
- type="button"
1957
- aria-label="Global navigation"
1958
- >
1959
- <i class="fas fa-bars" aria-hidden="true"></i>
1960
- </button>
1961
- </span>
1962
2033
  <div class="pf-v6-c-masthead__main">
1963
- <a class="pf-v6-c-masthead__brand" href="#">
1964
- <svg height="40px" viewBox="0 0 679 158">
1965
- <title>PF-HorizontalLogo-Color</title>
1966
- <defs>
1967
- <linearGradient
1968
- x1="68%"
1969
- y1="2.25860997e-13%"
1970
- x2="32%"
1971
- y2="100%"
1972
- id="linearGradient-jump-links-drawer-expanded-masthead"
1973
- >
1974
- <stop stop-color="#2B9AF3" offset="0%" />
1975
- <stop
1976
- stop-color="#73BCF7"
1977
- stop-opacity="0.502212631"
1978
- offset="100%"
1979
- />
1980
- </linearGradient>
1981
- </defs>
1982
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1983
- <g
1984
- transform="translate(206.000000, 45.750000)"
1985
- fill="var(--pf-t--global--text--color--regular)"
1986
- fill-rule="nonzero"
1987
- >
1988
- <path
1989
- 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"
1990
- />
1991
- <path
1992
- 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"
1993
- />
1994
- <path
1995
- 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"
1996
- />
1997
- <path
1998
- 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"
1999
- />
2000
- <path
2001
- 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"
2002
- />
2003
- <path
2004
- 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"
2005
- />
2006
- <path
2007
- 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"
2008
- />
2009
- <polygon
2010
- 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"
2011
- />
2012
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2013
- <path
2014
- 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"
2015
- />
2016
- </g>
2017
- <g transform="translate(0.000000, 0.000000)">
2018
- <path
2019
- 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"
2020
- fill="#0066CC"
2021
- />
2022
- <path
2023
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2024
- fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2025
- />
2026
- <path
2027
- 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"
2028
- fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2029
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2030
- />
2034
+ <span class="pf-v6-c-masthead__toggle">
2035
+ <button
2036
+ class="pf-v6-c-button pf-m-plain"
2037
+ type="button"
2038
+ aria-label="Global navigation"
2039
+ >
2040
+ <span class="pf-v6-c-button__icon">
2041
+ <i class="fas fa-bars" aria-hidden="true"></i>
2042
+ </span>
2043
+ </button>
2044
+ </span>
2045
+ <div class="pf-v6-c-masthead__brand">
2046
+ <a class="pf-v6-c-masthead__logo" href="#">
2047
+ <svg height="37px" viewBox="0 0 679 158">
2048
+ <title>PF-HorizontalLogo-Color</title>
2049
+ <defs>
2050
+ <linearGradient
2051
+ x1="68%"
2052
+ y1="2.25860997e-13%"
2053
+ x2="32%"
2054
+ y2="100%"
2055
+ id="linearGradient-jump-links-drawer-expanded-masthead"
2056
+ >
2057
+ <stop stop-color="#2B9AF3" offset="0%" />
2058
+ <stop
2059
+ stop-color="#73BCF7"
2060
+ stop-opacity="0.502212631"
2061
+ offset="100%"
2062
+ />
2063
+ </linearGradient>
2064
+ </defs>
2065
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2066
+ <g
2067
+ transform="translate(206.000000, 45.750000)"
2068
+ fill="var(--pf-t--global--text--color--regular)"
2069
+ fill-rule="nonzero"
2070
+ >
2071
+ <path
2072
+ 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"
2073
+ />
2074
+ <path
2075
+ 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"
2076
+ />
2077
+ <path
2078
+ 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"
2079
+ />
2080
+ <path
2081
+ 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"
2082
+ />
2083
+ <path
2084
+ 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"
2085
+ />
2086
+ <path
2087
+ 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"
2088
+ />
2089
+ <path
2090
+ 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"
2091
+ />
2092
+ <polygon
2093
+ 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"
2094
+ />
2095
+ <polygon
2096
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2097
+ />
2098
+ <path
2099
+ 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"
2100
+ />
2101
+ </g>
2102
+ <g transform="translate(0.000000, 0.000000)">
2103
+ <path
2104
+ 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"
2105
+ fill="#0066CC"
2106
+ />
2107
+ <path
2108
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2109
+ fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2110
+ />
2111
+ <path
2112
+ 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"
2113
+ fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2114
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2115
+ />
2116
+ </g>
2031
2117
  </g>
2032
- </g>
2033
- </svg>
2034
- </a>
2118
+ </svg>
2119
+ </a>
2120
+ </div>
2035
2121
  </div>
2036
2122
  <div class="pf-v6-c-masthead__content">
2037
2123
  <div
@@ -2040,41 +2126,11 @@ section: components
2040
2126
  >
2041
2127
  <div class="pf-v6-c-toolbar__content">
2042
2128
  <div class="pf-v6-c-toolbar__content-section">
2043
- <div class="pf-v6-c-toolbar__item">
2044
- <button
2045
- class="pf-v6-c-menu-toggle"
2046
- type="button"
2047
- aria-expanded="false"
2048
- >
2049
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
2050
- <span class="pf-v6-c-menu-toggle__controls">
2051
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2052
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2053
- </span>
2054
- </span>
2055
- </button>
2056
- </div>
2057
-
2058
- <div class="pf-v6-c-toolbar__item">
2059
- <button
2060
- class="pf-v6-c-menu-toggle"
2061
- type="button"
2062
- aria-expanded="false"
2063
- >
2064
- <span class="pf-v6-c-menu-toggle__text">Services</span>
2065
- <span class="pf-v6-c-menu-toggle__controls">
2066
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2067
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2068
- </span>
2069
- </span>
2070
- </button>
2071
- </div>
2072
-
2073
2129
  <div
2074
- 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"
2130
+ 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"
2075
2131
  >
2076
2132
  <div
2077
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2133
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
2078
2134
  >
2079
2135
  <div class="pf-v6-c-toolbar__item">
2080
2136
  <button
@@ -2113,6 +2169,7 @@ section: components
2113
2169
  </button>
2114
2170
  </div>
2115
2171
  </div>
2172
+
2116
2173
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2117
2174
  <button
2118
2175
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -2140,174 +2197,225 @@ section: components
2140
2197
  >
2141
2198
  <ul class="pf-v6-c-nav__list" role="list">
2142
2199
  <li class="pf-v6-c-nav__item">
2143
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
2200
+ <a href="#" class="pf-v6-c-nav__link">
2201
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2202
+ </a>
2144
2203
  </li>
2145
2204
  <li class="pf-v6-c-nav__item">
2146
2205
  <a
2147
2206
  href="#"
2148
2207
  class="pf-v6-c-nav__link pf-m-current"
2149
2208
  aria-current="page"
2150
- >Policy</a>
2209
+ >
2210
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2211
+ </a>
2151
2212
  </li>
2152
2213
  <li class="pf-v6-c-nav__item">
2153
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
2214
+ <a href="#" class="pf-v6-c-nav__link">
2215
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2216
+ </a>
2154
2217
  </li>
2155
2218
  <li class="pf-v6-c-nav__item">
2156
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
2219
+ <a href="#" class="pf-v6-c-nav__link">
2220
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2221
+ </a>
2157
2222
  </li>
2158
2223
  <li class="pf-v6-c-nav__item">
2159
- <a href="#" class="pf-v6-c-nav__link">Server</a>
2224
+ <a href="#" class="pf-v6-c-nav__link">
2225
+ <span class="pf-v6-c-nav__link-text">Server</span>
2226
+ </a>
2160
2227
  </li>
2161
2228
  </ul>
2162
2229
  </nav>
2163
2230
  </div>
2164
2231
  </div>
2165
- <main
2166
- class="pf-v6-c-page__main"
2167
- tabindex="-1"
2168
- id="main-content-jump-links-drawer-expanded"
2169
- >
2170
- <div class="pf-v6-c-drawer pf-m-expanded">
2171
- <div class="pf-v6-c-drawer__main">
2172
- <div
2173
- class="pf-v6-c-drawer__content"
2174
- id="jump-links-drawer-expanded-drawer-scrollable-container"
2175
- >
2176
- <div class="pf-v6-c-drawer__body">
2177
- <div class="pf-v6-c-sidebar">
2178
- <div class="pf-v6-c-sidebar__main">
2179
- <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
2180
- <section class="pf-v6-c-page__main-section pf-m-light">
2181
- <nav
2182
- class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
2183
- >
2184
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
2185
- <ul class="pf-v6-c-jump-links__list" role="list">
2186
- <li class="pf-v6-c-jump-links__item pf-m-current">
2187
- <span class="pf-v6-c-jump-links__link">
2188
- <a
2189
- class="pf-v6-c-button pf-m-link"
2190
- href="#jump-links-drawer-expanded-jump-links-first"
2191
- >
2192
- <span
2193
- class="pf-v6-c-jump-links__link-text"
2194
- >First section</span>
2195
- </a>
2196
- </span>
2197
- </li>
2198
- <li class="pf-v6-c-jump-links__item">
2199
- <span class="pf-v6-c-jump-links__link">
2200
- <a
2201
- class="pf-v6-c-button pf-m-link"
2202
- href="#jump-links-drawer-expanded-jump-links-second"
2203
- >
2204
- <span
2205
- class="pf-v6-c-jump-links__link-text"
2206
- >Second section</span>
2207
- </a>
2208
- </span>
2209
- </li>
2210
- <li class="pf-v6-c-jump-links__item">
2211
- <span class="pf-v6-c-jump-links__link">
2212
- <a
2213
- class="pf-v6-c-button pf-m-link"
2214
- href="#jump-links-drawer-expanded-jump-links-third"
2215
- >
2216
- <span
2217
- class="pf-v6-c-jump-links__link-text"
2218
- >Third section</span>
2219
- </a>
2220
- </span>
2221
- </li>
2222
- <li class="pf-v6-c-jump-links__item">
2223
- <span class="pf-v6-c-jump-links__link">
2224
- <a
2225
- class="pf-v6-c-button pf-m-link"
2226
- href="#jump-links-drawer-expanded-jump-links-fourth"
2227
- >
2228
- <span
2229
- class="pf-v6-c-jump-links__link-text"
2230
- >Fourth section</span>
2231
- </a>
2232
- </span>
2233
- </li>
2234
- <li class="pf-v6-c-jump-links__item">
2235
- <span class="pf-v6-c-jump-links__link">
2236
- <a
2237
- class="pf-v6-c-button pf-m-link"
2238
- href="#jump-links-drawer-expanded-jump-links-fifth"
2239
- >
2240
- <span
2241
- class="pf-v6-c-jump-links__link-text"
2242
- >Fifth section</span>
2243
- </a>
2244
- </span>
2245
- </li>
2246
- </ul>
2247
- </nav>
2248
- </section>
2249
- </div>
2250
- <div class="pf-v6-c-sidebar__content">
2251
- <section class="pf-v6-c-page__main-section pf-m-light">
2252
- <div class="pf-v6-c-content">
2253
- <p>
2254
- <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
2255
- </p>
2256
-
2257
- <h2
2258
- id="jump-links-drawer-expanded-jump-links-first"
2259
- >First section</h2>
2260
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2261
-
2262
- <h2
2263
- id="jump-links-drawer-expanded-jump-links-second"
2264
- >Second section</h2>
2265
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2266
-
2267
- <h2
2268
- id="jump-links-drawer-expanded-jump-links-third"
2269
- >Third section</h2>
2270
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2271
-
2272
- <h2
2273
- id="jump-links-drawer-expanded-jump-links-fourth"
2274
- >Fourth section</h2>
2275
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2276
-
2277
- <h2
2278
- id="jump-links-drawer-expanded-jump-links-fifth"
2279
- >Fifth section</h2>
2280
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2281
- </div>
2282
- </section>
2232
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2233
+ <main
2234
+ class="pf-v6-c-page__main"
2235
+ tabindex="-1"
2236
+ id="main-content-jump-links-drawer-expanded"
2237
+ >
2238
+ <div class="pf-v6-c-drawer pf-m-expanded">
2239
+ <div class="pf-v6-c-drawer__main">
2240
+ <div
2241
+ class="pf-v6-c-drawer__content"
2242
+ id="jump-links-drawer-expanded-drawer-scrollable-container"
2243
+ >
2244
+ <div class="pf-v6-c-drawer__body">
2245
+ <div class="pf-v6-c-sidebar">
2246
+ <div class="pf-v6-c-sidebar__main">
2247
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
2248
+ <section class="pf-v6-c-page__main-section">
2249
+ <div class="pf-v6-c-page__main-body">
2250
+ <nav
2251
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
2252
+ >
2253
+ <div class="pf-v6-c-jump-links__header">
2254
+ <div class="pf-v6-c-jump-links__toggle">
2255
+ <button
2256
+ class="pf-v6-c-button pf-m-plain"
2257
+ type="button"
2258
+ aria-label="Toggle jump links"
2259
+ >
2260
+ <span class="pf-v6-c-button__icon pf-m-start">
2261
+ <span class="pf-v6-c-jump-links__toggle-icon">
2262
+ <i
2263
+ class="fas fa-angle-right"
2264
+ aria-hidden="true"
2265
+ ></i>
2266
+ </span>
2267
+ </span>
2268
+ <span
2269
+ class="pf-v6-c-button__text"
2270
+ >Jump to section</span>
2271
+ </button>
2272
+ </div>
2273
+ <div
2274
+ class="pf-v6-c-jump-links__label"
2275
+ >Jump to section</div>
2276
+ </div>
2277
+ <ul class="pf-v6-c-jump-links__list" role="list">
2278
+ <li class="pf-v6-c-jump-links__item pf-m-current">
2279
+ <span class="pf-v6-c-jump-links__link">
2280
+ <a
2281
+ class="pf-v6-c-button pf-m-link"
2282
+ href="#jump-links-drawer-expanded-jump-links-first"
2283
+ >
2284
+ <span class="pf-v6-c-button__text">
2285
+ <span
2286
+ class="pf-v6-c-jump-links__link-text"
2287
+ >First section</span>
2288
+ </span>
2289
+ </a>
2290
+ </span>
2291
+ </li>
2292
+ <li class="pf-v6-c-jump-links__item">
2293
+ <span class="pf-v6-c-jump-links__link">
2294
+ <a
2295
+ class="pf-v6-c-button pf-m-link"
2296
+ href="#jump-links-drawer-expanded-jump-links-second"
2297
+ >
2298
+ <span class="pf-v6-c-button__text">
2299
+ <span
2300
+ class="pf-v6-c-jump-links__link-text"
2301
+ >Second section</span>
2302
+ </span>
2303
+ </a>
2304
+ </span>
2305
+ </li>
2306
+ <li class="pf-v6-c-jump-links__item">
2307
+ <span class="pf-v6-c-jump-links__link">
2308
+ <a
2309
+ class="pf-v6-c-button pf-m-link"
2310
+ href="#jump-links-drawer-expanded-jump-links-third"
2311
+ >
2312
+ <span class="pf-v6-c-button__text">
2313
+ <span
2314
+ class="pf-v6-c-jump-links__link-text"
2315
+ >Third section</span>
2316
+ </span>
2317
+ </a>
2318
+ </span>
2319
+ </li>
2320
+ <li class="pf-v6-c-jump-links__item">
2321
+ <span class="pf-v6-c-jump-links__link">
2322
+ <a
2323
+ class="pf-v6-c-button pf-m-link"
2324
+ href="#jump-links-drawer-expanded-jump-links-fourth"
2325
+ >
2326
+ <span class="pf-v6-c-button__text">
2327
+ <span
2328
+ class="pf-v6-c-jump-links__link-text"
2329
+ >Fourth section</span>
2330
+ </span>
2331
+ </a>
2332
+ </span>
2333
+ </li>
2334
+ <li class="pf-v6-c-jump-links__item">
2335
+ <span class="pf-v6-c-jump-links__link">
2336
+ <a
2337
+ class="pf-v6-c-button pf-m-link"
2338
+ href="#jump-links-drawer-expanded-jump-links-fifth"
2339
+ >
2340
+ <span class="pf-v6-c-button__text">
2341
+ <span
2342
+ class="pf-v6-c-jump-links__link-text"
2343
+ >Fifth section</span>
2344
+ </span>
2345
+ </a>
2346
+ </span>
2347
+ </li>
2348
+ </ul>
2349
+ </nav>
2350
+ </div>
2351
+ </section>
2352
+ </div>
2353
+ <div class="pf-v6-c-sidebar__content">
2354
+ <section class="pf-v6-c-page__main-section">
2355
+ <div class="pf-v6-c-page__main-body">
2356
+ <div class="pf-v6-c-content">
2357
+ <p>
2358
+ <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
2359
+ </p>
2360
+
2361
+ <h2
2362
+ id="jump-links-drawer-expanded-jump-links-first"
2363
+ >First section</h2>
2364
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2365
+
2366
+ <h2
2367
+ id="jump-links-drawer-expanded-jump-links-second"
2368
+ >Second section</h2>
2369
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2370
+
2371
+ <h2
2372
+ id="jump-links-drawer-expanded-jump-links-third"
2373
+ >Third section</h2>
2374
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2375
+
2376
+ <h2
2377
+ id="jump-links-drawer-expanded-jump-links-fourth"
2378
+ >Fourth section</h2>
2379
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2380
+
2381
+ <h2
2382
+ id="jump-links-drawer-expanded-jump-links-fifth"
2383
+ >Fifth section</h2>
2384
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
2385
+ </div>
2386
+ </div>
2387
+ </section>
2388
+ </div>
2283
2389
  </div>
2284
2390
  </div>
2285
2391
  </div>
2286
2392
  </div>
2287
- </div>
2288
- <div class="pf-v6-c-drawer__panel">
2289
- <div class="pf-v6-c-drawer__head">
2290
- <span>Drawer panel header content</span>
2291
- <div class="pf-v6-c-drawer__actions">
2292
- <div class="pf-v6-c-drawer__close">
2293
- <button
2294
- class="pf-v6-c-button pf-m-plain"
2295
- type="button"
2296
- aria-label="Close drawer panel"
2297
- >
2298
- <i class="fas fa-times" aria-hidden="true"></i>
2299
- </button>
2393
+ <div class="pf-v6-c-drawer__panel">
2394
+ <div class="pf-v6-c-drawer__head">
2395
+ <span>Drawer panel header content</span>
2396
+ <div class="pf-v6-c-drawer__actions">
2397
+ <div class="pf-v6-c-drawer__close">
2398
+ <button
2399
+ class="pf-v6-c-button pf-m-plain"
2400
+ type="button"
2401
+ aria-label="Close drawer panel"
2402
+ >
2403
+ <span class="pf-v6-c-button__icon">
2404
+ <i class="fas fa-times" aria-hidden="true"></i>
2405
+ </span>
2406
+ </button>
2407
+ </div>
2300
2408
  </div>
2301
2409
  </div>
2410
+ <div
2411
+ class="pf-v6-c-drawer__description"
2412
+ >This is a helpful description of the drawer panel.</div>
2413
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
2302
2414
  </div>
2303
- <div
2304
- class="pf-v6-c-drawer__description"
2305
- >This is a helpful description of the drawer panel.</div>
2306
- <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
2307
2415
  </div>
2308
2416
  </div>
2309
- </div>
2310
- </main>
2417
+ </main>
2418
+ </div>
2311
2419
  </div>
2312
2420
 
2313
2421
  ```