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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -12,91 +12,99 @@ wrapperTag: div
12
12
  <a
13
13
  class="pf-v6-c-button pf-m-primary"
14
14
  href="#main-content-drawer-collapsed-example"
15
- >Skip to content</a>
15
+ >
16
+ <span class="pf-v6-c-button__text">Skip to content</span>
17
+ </a>
16
18
  </div>
17
19
  <header class="pf-v6-c-masthead" id="drawer-collapsed-example-masthead">
18
- <span class="pf-v6-c-masthead__toggle">
19
- <button
20
- class="pf-v6-c-button pf-m-plain"
21
- type="button"
22
- aria-label="Global navigation"
23
- >
24
- <i class="fas fa-bars" aria-hidden="true"></i>
25
- </button>
26
- </span>
27
20
  <div class="pf-v6-c-masthead__main">
28
- <a class="pf-v6-c-masthead__brand" href="#">
29
- <svg height="40px" viewBox="0 0 679 158">
30
- <title>PF-HorizontalLogo-Color</title>
31
- <defs>
32
- <linearGradient
33
- x1="68%"
34
- y1="2.25860997e-13%"
35
- x2="32%"
36
- y2="100%"
37
- id="linearGradient-drawer-collapsed-example-masthead"
38
- >
39
- <stop stop-color="#2B9AF3" offset="0%" />
40
- <stop
41
- stop-color="#73BCF7"
42
- stop-opacity="0.502212631"
43
- offset="100%"
44
- />
45
- </linearGradient>
46
- </defs>
47
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
48
- <g
49
- transform="translate(206.000000, 45.750000)"
50
- fill="var(--pf-t--global--text--color--regular)"
51
- fill-rule="nonzero"
52
- >
53
- <path
54
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
55
- />
56
- <path
57
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
58
- />
59
- <path
60
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
61
- />
62
- <path
63
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
64
- />
65
- <path
66
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
67
- />
68
- <path
69
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
70
- />
71
- <path
72
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
73
- />
74
- <polygon
75
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
76
- />
77
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
78
- <path
79
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
80
- />
81
- </g>
82
- <g transform="translate(0.000000, 0.000000)">
83
- <path
84
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
85
- fill="#0066CC"
86
- />
87
- <path
88
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
89
- fill="url(#linearGradient-drawer-collapsed-example-masthead)"
90
- />
91
- <path
92
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
93
- fill="url(#linearGradient-drawer-collapsed-example-masthead)"
94
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
95
- />
21
+ <span class="pf-v6-c-masthead__toggle">
22
+ <button
23
+ class="pf-v6-c-button pf-m-plain"
24
+ type="button"
25
+ aria-label="Global navigation"
26
+ >
27
+ <span class="pf-v6-c-button__icon">
28
+ <i class="fas fa-bars" aria-hidden="true"></i>
29
+ </span>
30
+ </button>
31
+ </span>
32
+ <div class="pf-v6-c-masthead__brand">
33
+ <a class="pf-v6-c-masthead__logo" href="#">
34
+ <svg height="37px" viewBox="0 0 679 158">
35
+ <title>PF-HorizontalLogo-Color</title>
36
+ <defs>
37
+ <linearGradient
38
+ x1="68%"
39
+ y1="2.25860997e-13%"
40
+ x2="32%"
41
+ y2="100%"
42
+ id="linearGradient-drawer-collapsed-example-masthead"
43
+ >
44
+ <stop stop-color="#2B9AF3" offset="0%" />
45
+ <stop
46
+ stop-color="#73BCF7"
47
+ stop-opacity="0.502212631"
48
+ offset="100%"
49
+ />
50
+ </linearGradient>
51
+ </defs>
52
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
53
+ <g
54
+ transform="translate(206.000000, 45.750000)"
55
+ fill="var(--pf-t--global--text--color--regular)"
56
+ fill-rule="nonzero"
57
+ >
58
+ <path
59
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
60
+ />
61
+ <path
62
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
63
+ />
64
+ <path
65
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
66
+ />
67
+ <path
68
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
69
+ />
70
+ <path
71
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
72
+ />
73
+ <path
74
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
75
+ />
76
+ <path
77
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
78
+ />
79
+ <polygon
80
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
81
+ />
82
+ <polygon
83
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
84
+ />
85
+ <path
86
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
87
+ />
88
+ </g>
89
+ <g transform="translate(0.000000, 0.000000)">
90
+ <path
91
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
92
+ fill="#0066CC"
93
+ />
94
+ <path
95
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
96
+ fill="url(#linearGradient-drawer-collapsed-example-masthead)"
97
+ />
98
+ <path
99
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
100
+ fill="url(#linearGradient-drawer-collapsed-example-masthead)"
101
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
102
+ />
103
+ </g>
96
104
  </g>
97
- </g>
98
- </svg>
99
- </a>
105
+ </svg>
106
+ </a>
107
+ </div>
100
108
  </div>
101
109
  <div class="pf-v6-c-masthead__content">
102
110
  <div
@@ -105,41 +113,11 @@ wrapperTag: div
105
113
  >
106
114
  <div class="pf-v6-c-toolbar__content">
107
115
  <div class="pf-v6-c-toolbar__content-section">
108
- <div class="pf-v6-c-toolbar__item">
109
- <button
110
- class="pf-v6-c-menu-toggle"
111
- type="button"
112
- aria-expanded="false"
113
- >
114
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
115
- <span class="pf-v6-c-menu-toggle__controls">
116
- <span class="pf-v6-c-menu-toggle__toggle-icon">
117
- <i class="fas fa-caret-down" aria-hidden="true"></i>
118
- </span>
119
- </span>
120
- </button>
121
- </div>
122
-
123
- <div class="pf-v6-c-toolbar__item">
124
- <button
125
- class="pf-v6-c-menu-toggle"
126
- type="button"
127
- aria-expanded="false"
128
- >
129
- <span class="pf-v6-c-menu-toggle__text">Services</span>
130
- <span class="pf-v6-c-menu-toggle__controls">
131
- <span class="pf-v6-c-menu-toggle__toggle-icon">
132
- <i class="fas fa-caret-down" aria-hidden="true"></i>
133
- </span>
134
- </span>
135
- </button>
136
- </div>
137
-
138
116
  <div
139
- 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"
117
+ 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"
140
118
  >
141
119
  <div
142
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
120
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
143
121
  >
144
122
  <div class="pf-v6-c-toolbar__item">
145
123
  <button
@@ -178,6 +156,7 @@ wrapperTag: div
178
156
  </button>
179
157
  </div>
180
158
  </div>
159
+
181
160
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
182
161
  <button
183
162
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -205,23 +184,33 @@ wrapperTag: div
205
184
  >
206
185
  <ul class="pf-v6-c-nav__list" role="list">
207
186
  <li class="pf-v6-c-nav__item">
208
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
187
+ <a href="#" class="pf-v6-c-nav__link">
188
+ <span class="pf-v6-c-nav__link-text">System panel</span>
189
+ </a>
209
190
  </li>
210
191
  <li class="pf-v6-c-nav__item">
211
192
  <a
212
193
  href="#"
213
194
  class="pf-v6-c-nav__link pf-m-current"
214
195
  aria-current="page"
215
- >Policy</a>
196
+ >
197
+ <span class="pf-v6-c-nav__link-text">Policy</span>
198
+ </a>
216
199
  </li>
217
200
  <li class="pf-v6-c-nav__item">
218
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
201
+ <a href="#" class="pf-v6-c-nav__link">
202
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
203
+ </a>
219
204
  </li>
220
205
  <li class="pf-v6-c-nav__item">
221
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
206
+ <a href="#" class="pf-v6-c-nav__link">
207
+ <span class="pf-v6-c-nav__link-text">Network services</span>
208
+ </a>
222
209
  </li>
223
210
  <li class="pf-v6-c-nav__item">
224
- <a href="#" class="pf-v6-c-nav__link">Server</a>
211
+ <a href="#" class="pf-v6-c-nav__link">
212
+ <span class="pf-v6-c-nav__link-text">Server</span>
213
+ </a>
225
214
  </li>
226
215
  </ul>
227
216
  </nav>
@@ -232,173 +221,129 @@ wrapperTag: div
232
221
  <div class="pf-v6-c-drawer__main">
233
222
  <div class="pf-v6-c-drawer__content">
234
223
  <div class="pf-v6-c-drawer__body">
235
- <main
236
- class="pf-v6-c-page__main"
237
- tabindex="-1"
238
- id="main-content-drawer-collapsed-example"
239
- >
240
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
241
- <div class="pf-v6-c-page__main-body">
242
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
243
- <ol class="pf-v6-c-breadcrumb__list" role="list">
244
- <li class="pf-v6-c-breadcrumb__item">
245
- <a
246
- href="#"
247
- class="pf-v6-c-breadcrumb__link"
248
- >Section home</a>
249
- </li>
250
- <li class="pf-v6-c-breadcrumb__item">
251
- <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
253
- </span>
224
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
225
+ <main
226
+ class="pf-v6-c-page__main"
227
+ tabindex="-1"
228
+ id="main-content-drawer-collapsed-example"
229
+ >
230
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
231
+ <div class="pf-v6-c-page__main-body">
232
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
233
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
234
+ <li class="pf-v6-c-breadcrumb__item">
235
+ <a
236
+ href="#"
237
+ class="pf-v6-c-breadcrumb__link"
238
+ >Section home</a>
239
+ </li>
240
+ <li class="pf-v6-c-breadcrumb__item">
241
+ <span class="pf-v6-c-breadcrumb__item-divider">
242
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
243
+ </span>
254
244
 
255
- <a
256
- href="#"
257
- class="pf-v6-c-breadcrumb__link"
258
- >Section title</a>
259
- </li>
260
- <li class="pf-v6-c-breadcrumb__item">
261
- <span class="pf-v6-c-breadcrumb__item-divider">
262
- <i class="fas fa-angle-right" aria-hidden="true"></i>
263
- </span>
245
+ <a
246
+ href="#"
247
+ class="pf-v6-c-breadcrumb__link"
248
+ >Section title</a>
249
+ </li>
250
+ <li class="pf-v6-c-breadcrumb__item">
251
+ <span class="pf-v6-c-breadcrumb__item-divider">
252
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
253
+ </span>
264
254
 
265
- <a
266
- href="#"
267
- class="pf-v6-c-breadcrumb__link"
268
- >Section title</a>
269
- </li>
270
- <li class="pf-v6-c-breadcrumb__item">
271
- <span class="pf-v6-c-breadcrumb__item-divider">
272
- <i class="fas fa-angle-right" aria-hidden="true"></i>
273
- </span>
255
+ <a
256
+ href="#"
257
+ class="pf-v6-c-breadcrumb__link"
258
+ >Section title</a>
259
+ </li>
260
+ <li class="pf-v6-c-breadcrumb__item">
261
+ <span class="pf-v6-c-breadcrumb__item-divider">
262
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
263
+ </span>
274
264
 
275
- <a
276
- href="#"
277
- class="pf-v6-c-breadcrumb__link pf-m-current"
278
- aria-current="page"
279
- >Section landing</a>
280
- </li>
281
- </ol>
282
- </nav>
283
- </div>
284
- </section>
285
- <section
286
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
287
- >
288
- <div class="pf-v6-c-page__main-body">
289
- <div class="pf-v6-c-content">
290
- <h1>Main title</h1>
291
- <p>This is a full page demo.</p>
265
+ <a
266
+ href="#"
267
+ class="pf-v6-c-breadcrumb__link pf-m-current"
268
+ aria-current="page"
269
+ >Section landing</a>
270
+ </li>
271
+ </ol>
272
+ </nav>
292
273
  </div>
293
- </div>
294
- </section>
295
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
296
- <div class="pf-v6-c-page__main-body">
297
- <div class="pf-v6-l-gallery pf-m-gutter">
298
- <div class="pf-v6-c-card">
299
- <div class="pf-v6-c-card__body">This is a card</div>
300
- </div>
301
- <div class="pf-v6-c-card">
302
- <div class="pf-v6-c-card__body">This is a card</div>
303
- </div>
304
- <div class="pf-v6-c-card">
305
- <div class="pf-v6-c-card__body">This is a card</div>
306
- </div>
307
- <div class="pf-v6-c-card">
308
- <div class="pf-v6-c-card__body">This is a card</div>
309
- </div>
310
- <div class="pf-v6-c-card">
311
- <div class="pf-v6-c-card__body">This is a card</div>
312
- </div>
313
- <div class="pf-v6-c-card">
314
- <div class="pf-v6-c-card__body">This is a card</div>
315
- </div>
316
- <div class="pf-v6-c-card">
317
- <div class="pf-v6-c-card__body">This is a card</div>
318
- </div>
319
- <div class="pf-v6-c-card">
320
- <div class="pf-v6-c-card__body">This is a card</div>
321
- </div>
322
- <div class="pf-v6-c-card">
323
- <div class="pf-v6-c-card__body">This is a card</div>
274
+ </section>
275
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
276
+ <div class="pf-v6-c-page__main-body">
277
+ <div class="pf-v6-c-content">
278
+ <h1>Main title</h1>
279
+ <p>This is a full page demo.</p>
324
280
  </div>
325
- <div class="pf-v6-c-card">
326
- <div class="pf-v6-c-card__body">This is a card</div>
281
+ </div>
282
+ </section>
283
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
284
+ <div class="pf-v6-c-page__main-body">
285
+ <div class="pf-v6-l-gallery pf-m-gutter">
286
+ <div class="pf-v6-c-card">
287
+ <div class="pf-v6-c-card__body">This is a card</div>
288
+ </div>
289
+ <div class="pf-v6-c-card">
290
+ <div class="pf-v6-c-card__body">This is a card</div>
291
+ </div>
292
+ <div class="pf-v6-c-card">
293
+ <div class="pf-v6-c-card__body">This is a card</div>
294
+ </div>
295
+ <div class="pf-v6-c-card">
296
+ <div class="pf-v6-c-card__body">This is a card</div>
297
+ </div>
298
+ <div class="pf-v6-c-card">
299
+ <div class="pf-v6-c-card__body">This is a card</div>
300
+ </div>
301
+ <div class="pf-v6-c-card">
302
+ <div class="pf-v6-c-card__body">This is a card</div>
303
+ </div>
304
+ <div class="pf-v6-c-card">
305
+ <div class="pf-v6-c-card__body">This is a card</div>
306
+ </div>
307
+ <div class="pf-v6-c-card">
308
+ <div class="pf-v6-c-card__body">This is a card</div>
309
+ </div>
310
+ <div class="pf-v6-c-card">
311
+ <div class="pf-v6-c-card__body">This is a card</div>
312
+ </div>
313
+ <div class="pf-v6-c-card">
314
+ <div class="pf-v6-c-card__body">This is a card</div>
315
+ </div>
327
316
  </div>
328
317
  </div>
329
- </div>
330
- </section>
331
- </main>
318
+ </section>
319
+ </main>
320
+ </div>
332
321
  </div>
333
322
  </div>
334
323
  <div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg" hidden>
335
324
  <div class="pf-v6-c-drawer__body">
336
325
  <div class="pf-v6-c-drawer__head">
337
326
  <div class="pf-v6-c-drawer__actions">
338
- <div class="pf-v6-c-dropdown">
339
- <button
340
- class="pf-v6-c-dropdown__toggle pf-m-plain"
341
- id="-button"
342
- aria-expanded="false"
343
- type="button"
344
- aria-label="Actions"
345
- >
327
+ <button
328
+ class="pf-v6-c-menu-toggle pf-m-plain"
329
+ type="button"
330
+ aria-expanded="false"
331
+ aria-label="Menu toggle"
332
+ id="drawer-collapsed-example-toggle"
333
+ >
334
+ <span class="pf-v6-c-menu-toggle__icon">
346
335
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
347
- </button>
348
- <ul
349
- class="pf-v6-c-dropdown__menu"
350
- aria-labelledby="-button"
351
- hidden
352
- role="menu"
353
- >
354
- <li role="none">
355
- <a
356
- class="pf-v6-c-dropdown__menu-item"
357
- role="menuitem"
358
- href="#"
359
- >Link</a>
360
- </li>
361
- <li role="none">
362
- <button
363
- class="pf-v6-c-dropdown__menu-item"
364
- role="menuitem"
365
- type="button"
366
- >Action</button>
367
- </li>
368
- <li role="none">
369
- <a
370
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
371
- role="menuitem"
372
- href="#"
373
- aria-disabled="true"
374
- tabindex="-1"
375
- >Disabled link</a>
376
- </li>
377
- <li role="none">
378
- <button
379
- class="pf-v6-c-dropdown__menu-item"
380
- role="menuitem"
381
- type="button"
382
- disabled
383
- >Disabled action</button>
384
- </li>
385
- <li class="pf-v6-c-divider" role="separator"></li>
386
- <li role="none">
387
- <a
388
- class="pf-v6-c-dropdown__menu-item"
389
- role="menuitem"
390
- href="#"
391
- >Separated link</a>
392
- </li>
393
- </ul>
394
- </div>
336
+ </span>
337
+ </button>
395
338
  <div class="pf-v6-c-drawer__close">
396
339
  <button
397
340
  class="pf-v6-c-button pf-m-plain"
398
341
  type="button"
399
342
  aria-label="Close drawer panel"
400
343
  >
401
- <i class="fas fa-times" aria-hidden="true"></i>
344
+ <span class="pf-v6-c-button__icon">
345
+ <i class="fas fa-times" aria-hidden="true"></i>
346
+ </span>
402
347
  </button>
403
348
  </div>
404
349
  </div>
@@ -538,91 +483,99 @@ wrapperTag: div
538
483
  <a
539
484
  class="pf-v6-c-button pf-m-primary"
540
485
  href="#main-content-drawer-expanded-example"
541
- >Skip to content</a>
486
+ >
487
+ <span class="pf-v6-c-button__text">Skip to content</span>
488
+ </a>
542
489
  </div>
543
490
  <header class="pf-v6-c-masthead" id="drawer-expanded-example-masthead">
544
- <span class="pf-v6-c-masthead__toggle">
545
- <button
546
- class="pf-v6-c-button pf-m-plain"
547
- type="button"
548
- aria-label="Global navigation"
549
- >
550
- <i class="fas fa-bars" aria-hidden="true"></i>
551
- </button>
552
- </span>
553
491
  <div class="pf-v6-c-masthead__main">
554
- <a class="pf-v6-c-masthead__brand" href="#">
555
- <svg height="40px" viewBox="0 0 679 158">
556
- <title>PF-HorizontalLogo-Color</title>
557
- <defs>
558
- <linearGradient
559
- x1="68%"
560
- y1="2.25860997e-13%"
561
- x2="32%"
562
- y2="100%"
563
- id="linearGradient-drawer-expanded-example-masthead"
564
- >
565
- <stop stop-color="#2B9AF3" offset="0%" />
566
- <stop
567
- stop-color="#73BCF7"
568
- stop-opacity="0.502212631"
569
- offset="100%"
570
- />
571
- </linearGradient>
572
- </defs>
573
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
574
- <g
575
- transform="translate(206.000000, 45.750000)"
576
- fill="var(--pf-t--global--text--color--regular)"
577
- fill-rule="nonzero"
578
- >
579
- <path
580
- 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"
581
- />
582
- <path
583
- 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"
584
- />
585
- <path
586
- 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"
587
- />
588
- <path
589
- 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"
590
- />
591
- <path
592
- 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"
593
- />
594
- <path
595
- 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"
596
- />
597
- <path
598
- 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"
599
- />
600
- <polygon
601
- 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"
602
- />
603
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
604
- <path
605
- 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"
606
- />
607
- </g>
608
- <g transform="translate(0.000000, 0.000000)">
609
- <path
610
- 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"
611
- fill="#0066CC"
612
- />
613
- <path
614
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
615
- fill="url(#linearGradient-drawer-expanded-example-masthead)"
616
- />
617
- <path
618
- 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"
619
- fill="url(#linearGradient-drawer-expanded-example-masthead)"
620
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
621
- />
492
+ <span class="pf-v6-c-masthead__toggle">
493
+ <button
494
+ class="pf-v6-c-button pf-m-plain"
495
+ type="button"
496
+ aria-label="Global navigation"
497
+ >
498
+ <span class="pf-v6-c-button__icon">
499
+ <i class="fas fa-bars" aria-hidden="true"></i>
500
+ </span>
501
+ </button>
502
+ </span>
503
+ <div class="pf-v6-c-masthead__brand">
504
+ <a class="pf-v6-c-masthead__logo" href="#">
505
+ <svg height="37px" viewBox="0 0 679 158">
506
+ <title>PF-HorizontalLogo-Color</title>
507
+ <defs>
508
+ <linearGradient
509
+ x1="68%"
510
+ y1="2.25860997e-13%"
511
+ x2="32%"
512
+ y2="100%"
513
+ id="linearGradient-drawer-expanded-example-masthead"
514
+ >
515
+ <stop stop-color="#2B9AF3" offset="0%" />
516
+ <stop
517
+ stop-color="#73BCF7"
518
+ stop-opacity="0.502212631"
519
+ offset="100%"
520
+ />
521
+ </linearGradient>
522
+ </defs>
523
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
524
+ <g
525
+ transform="translate(206.000000, 45.750000)"
526
+ fill="var(--pf-t--global--text--color--regular)"
527
+ fill-rule="nonzero"
528
+ >
529
+ <path
530
+ 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"
531
+ />
532
+ <path
533
+ 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"
534
+ />
535
+ <path
536
+ 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"
537
+ />
538
+ <path
539
+ 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"
540
+ />
541
+ <path
542
+ 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"
543
+ />
544
+ <path
545
+ 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"
546
+ />
547
+ <path
548
+ 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"
549
+ />
550
+ <polygon
551
+ 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"
552
+ />
553
+ <polygon
554
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
555
+ />
556
+ <path
557
+ 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"
558
+ />
559
+ </g>
560
+ <g transform="translate(0.000000, 0.000000)">
561
+ <path
562
+ 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"
563
+ fill="#0066CC"
564
+ />
565
+ <path
566
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
567
+ fill="url(#linearGradient-drawer-expanded-example-masthead)"
568
+ />
569
+ <path
570
+ 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"
571
+ fill="url(#linearGradient-drawer-expanded-example-masthead)"
572
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
573
+ />
574
+ </g>
622
575
  </g>
623
- </g>
624
- </svg>
625
- </a>
576
+ </svg>
577
+ </a>
578
+ </div>
626
579
  </div>
627
580
  <div class="pf-v6-c-masthead__content">
628
581
  <div
@@ -631,41 +584,11 @@ wrapperTag: div
631
584
  >
632
585
  <div class="pf-v6-c-toolbar__content">
633
586
  <div class="pf-v6-c-toolbar__content-section">
634
- <div class="pf-v6-c-toolbar__item">
635
- <button
636
- class="pf-v6-c-menu-toggle"
637
- type="button"
638
- aria-expanded="false"
639
- >
640
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
641
- <span class="pf-v6-c-menu-toggle__controls">
642
- <span class="pf-v6-c-menu-toggle__toggle-icon">
643
- <i class="fas fa-caret-down" aria-hidden="true"></i>
644
- </span>
645
- </span>
646
- </button>
647
- </div>
648
-
649
- <div class="pf-v6-c-toolbar__item">
650
- <button
651
- class="pf-v6-c-menu-toggle"
652
- type="button"
653
- aria-expanded="false"
654
- >
655
- <span class="pf-v6-c-menu-toggle__text">Services</span>
656
- <span class="pf-v6-c-menu-toggle__controls">
657
- <span class="pf-v6-c-menu-toggle__toggle-icon">
658
- <i class="fas fa-caret-down" aria-hidden="true"></i>
659
- </span>
660
- </span>
661
- </button>
662
- </div>
663
-
664
587
  <div
665
- 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"
588
+ 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"
666
589
  >
667
590
  <div
668
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
591
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
669
592
  >
670
593
  <div class="pf-v6-c-toolbar__item">
671
594
  <button
@@ -704,6 +627,7 @@ wrapperTag: div
704
627
  </button>
705
628
  </div>
706
629
  </div>
630
+
707
631
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
708
632
  <button
709
633
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -731,23 +655,33 @@ wrapperTag: div
731
655
  >
732
656
  <ul class="pf-v6-c-nav__list" role="list">
733
657
  <li class="pf-v6-c-nav__item">
734
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
658
+ <a href="#" class="pf-v6-c-nav__link">
659
+ <span class="pf-v6-c-nav__link-text">System panel</span>
660
+ </a>
735
661
  </li>
736
662
  <li class="pf-v6-c-nav__item">
737
663
  <a
738
664
  href="#"
739
665
  class="pf-v6-c-nav__link pf-m-current"
740
666
  aria-current="page"
741
- >Policy</a>
667
+ >
668
+ <span class="pf-v6-c-nav__link-text">Policy</span>
669
+ </a>
742
670
  </li>
743
671
  <li class="pf-v6-c-nav__item">
744
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
672
+ <a href="#" class="pf-v6-c-nav__link">
673
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
674
+ </a>
745
675
  </li>
746
676
  <li class="pf-v6-c-nav__item">
747
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
677
+ <a href="#" class="pf-v6-c-nav__link">
678
+ <span class="pf-v6-c-nav__link-text">Network services</span>
679
+ </a>
748
680
  </li>
749
681
  <li class="pf-v6-c-nav__item">
750
- <a href="#" class="pf-v6-c-nav__link">Server</a>
682
+ <a href="#" class="pf-v6-c-nav__link">
683
+ <span class="pf-v6-c-nav__link-text">Server</span>
684
+ </a>
751
685
  </li>
752
686
  </ul>
753
687
  </nav>
@@ -758,103 +692,103 @@ wrapperTag: div
758
692
  <div class="pf-v6-c-drawer__main">
759
693
  <div class="pf-v6-c-drawer__content">
760
694
  <div class="pf-v6-c-drawer__body">
761
- <main
762
- class="pf-v6-c-page__main"
763
- tabindex="-1"
764
- id="main-content-drawer-expanded-example"
765
- >
766
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
767
- <div class="pf-v6-c-page__main-body">
768
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
769
- <ol class="pf-v6-c-breadcrumb__list" role="list">
770
- <li class="pf-v6-c-breadcrumb__item">
771
- <a
772
- href="#"
773
- class="pf-v6-c-breadcrumb__link"
774
- >Section home</a>
775
- </li>
776
- <li class="pf-v6-c-breadcrumb__item">
777
- <span class="pf-v6-c-breadcrumb__item-divider">
778
- <i class="fas fa-angle-right" aria-hidden="true"></i>
779
- </span>
695
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
696
+ <main
697
+ class="pf-v6-c-page__main"
698
+ tabindex="-1"
699
+ id="main-content-drawer-expanded-example"
700
+ >
701
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
702
+ <div class="pf-v6-c-page__main-body">
703
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
704
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
705
+ <li class="pf-v6-c-breadcrumb__item">
706
+ <a
707
+ href="#"
708
+ class="pf-v6-c-breadcrumb__link"
709
+ >Section home</a>
710
+ </li>
711
+ <li class="pf-v6-c-breadcrumb__item">
712
+ <span class="pf-v6-c-breadcrumb__item-divider">
713
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
714
+ </span>
780
715
 
781
- <a
782
- href="#"
783
- class="pf-v6-c-breadcrumb__link"
784
- >Section title</a>
785
- </li>
786
- <li class="pf-v6-c-breadcrumb__item">
787
- <span class="pf-v6-c-breadcrumb__item-divider">
788
- <i class="fas fa-angle-right" aria-hidden="true"></i>
789
- </span>
716
+ <a
717
+ href="#"
718
+ class="pf-v6-c-breadcrumb__link"
719
+ >Section title</a>
720
+ </li>
721
+ <li class="pf-v6-c-breadcrumb__item">
722
+ <span class="pf-v6-c-breadcrumb__item-divider">
723
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
724
+ </span>
790
725
 
791
- <a
792
- href="#"
793
- class="pf-v6-c-breadcrumb__link"
794
- >Section title</a>
795
- </li>
796
- <li class="pf-v6-c-breadcrumb__item">
797
- <span class="pf-v6-c-breadcrumb__item-divider">
798
- <i class="fas fa-angle-right" aria-hidden="true"></i>
799
- </span>
726
+ <a
727
+ href="#"
728
+ class="pf-v6-c-breadcrumb__link"
729
+ >Section title</a>
730
+ </li>
731
+ <li class="pf-v6-c-breadcrumb__item">
732
+ <span class="pf-v6-c-breadcrumb__item-divider">
733
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
734
+ </span>
800
735
 
801
- <a
802
- href="#"
803
- class="pf-v6-c-breadcrumb__link pf-m-current"
804
- aria-current="page"
805
- >Section landing</a>
806
- </li>
807
- </ol>
808
- </nav>
809
- </div>
810
- </section>
811
- <section
812
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
813
- >
814
- <div class="pf-v6-c-page__main-body">
815
- <div class="pf-v6-c-content">
816
- <h1>Main title</h1>
817
- <p>This is a full page demo.</p>
736
+ <a
737
+ href="#"
738
+ class="pf-v6-c-breadcrumb__link pf-m-current"
739
+ aria-current="page"
740
+ >Section landing</a>
741
+ </li>
742
+ </ol>
743
+ </nav>
818
744
  </div>
819
- </div>
820
- </section>
821
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
822
- <div class="pf-v6-c-page__main-body">
823
- <div class="pf-v6-l-gallery pf-m-gutter">
824
- <div class="pf-v6-c-card">
825
- <div class="pf-v6-c-card__body">This is a card</div>
826
- </div>
827
- <div class="pf-v6-c-card">
828
- <div class="pf-v6-c-card__body">This is a card</div>
829
- </div>
830
- <div class="pf-v6-c-card">
831
- <div class="pf-v6-c-card__body">This is a card</div>
832
- </div>
833
- <div class="pf-v6-c-card">
834
- <div class="pf-v6-c-card__body">This is a card</div>
835
- </div>
836
- <div class="pf-v6-c-card">
837
- <div class="pf-v6-c-card__body">This is a card</div>
838
- </div>
839
- <div class="pf-v6-c-card">
840
- <div class="pf-v6-c-card__body">This is a card</div>
841
- </div>
842
- <div class="pf-v6-c-card">
843
- <div class="pf-v6-c-card__body">This is a card</div>
844
- </div>
845
- <div class="pf-v6-c-card">
846
- <div class="pf-v6-c-card__body">This is a card</div>
847
- </div>
848
- <div class="pf-v6-c-card">
849
- <div class="pf-v6-c-card__body">This is a card</div>
745
+ </section>
746
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
747
+ <div class="pf-v6-c-page__main-body">
748
+ <div class="pf-v6-c-content">
749
+ <h1>Main title</h1>
750
+ <p>This is a full page demo.</p>
850
751
  </div>
851
- <div class="pf-v6-c-card">
852
- <div class="pf-v6-c-card__body">This is a card</div>
752
+ </div>
753
+ </section>
754
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
755
+ <div class="pf-v6-c-page__main-body">
756
+ <div class="pf-v6-l-gallery pf-m-gutter">
757
+ <div class="pf-v6-c-card">
758
+ <div class="pf-v6-c-card__body">This is a card</div>
759
+ </div>
760
+ <div class="pf-v6-c-card">
761
+ <div class="pf-v6-c-card__body">This is a card</div>
762
+ </div>
763
+ <div class="pf-v6-c-card">
764
+ <div class="pf-v6-c-card__body">This is a card</div>
765
+ </div>
766
+ <div class="pf-v6-c-card">
767
+ <div class="pf-v6-c-card__body">This is a card</div>
768
+ </div>
769
+ <div class="pf-v6-c-card">
770
+ <div class="pf-v6-c-card__body">This is a card</div>
771
+ </div>
772
+ <div class="pf-v6-c-card">
773
+ <div class="pf-v6-c-card__body">This is a card</div>
774
+ </div>
775
+ <div class="pf-v6-c-card">
776
+ <div class="pf-v6-c-card__body">This is a card</div>
777
+ </div>
778
+ <div class="pf-v6-c-card">
779
+ <div class="pf-v6-c-card__body">This is a card</div>
780
+ </div>
781
+ <div class="pf-v6-c-card">
782
+ <div class="pf-v6-c-card__body">This is a card</div>
783
+ </div>
784
+ <div class="pf-v6-c-card">
785
+ <div class="pf-v6-c-card__body">This is a card</div>
786
+ </div>
853
787
  </div>
854
788
  </div>
855
- </div>
856
- </section>
857
- </main>
789
+ </section>
790
+ </main>
791
+ </div>
858
792
  </div>
859
793
  </div>
860
794
  <div class="pf-v6-c-drawer__panel">
@@ -875,91 +809,99 @@ wrapperTag: div
875
809
  <a
876
810
  class="pf-v6-c-button pf-m-primary"
877
811
  href="#main-content-drawer-expanded-bottom-example"
878
- >Skip to content</a>
812
+ >
813
+ <span class="pf-v6-c-button__text">Skip to content</span>
814
+ </a>
879
815
  </div>
880
816
  <header class="pf-v6-c-masthead" id="drawer-expanded-bottom-example-masthead">
881
- <span class="pf-v6-c-masthead__toggle">
882
- <button
883
- class="pf-v6-c-button pf-m-plain"
884
- type="button"
885
- aria-label="Global navigation"
886
- >
887
- <i class="fas fa-bars" aria-hidden="true"></i>
888
- </button>
889
- </span>
890
817
  <div class="pf-v6-c-masthead__main">
891
- <a class="pf-v6-c-masthead__brand" href="#">
892
- <svg height="40px" viewBox="0 0 679 158">
893
- <title>PF-HorizontalLogo-Color</title>
894
- <defs>
895
- <linearGradient
896
- x1="68%"
897
- y1="2.25860997e-13%"
898
- x2="32%"
899
- y2="100%"
900
- id="linearGradient-drawer-expanded-bottom-example-masthead"
901
- >
902
- <stop stop-color="#2B9AF3" offset="0%" />
903
- <stop
904
- stop-color="#73BCF7"
905
- stop-opacity="0.502212631"
906
- offset="100%"
907
- />
908
- </linearGradient>
909
- </defs>
910
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
911
- <g
912
- transform="translate(206.000000, 45.750000)"
913
- fill="var(--pf-t--global--text--color--regular)"
914
- fill-rule="nonzero"
915
- >
916
- <path
917
- 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"
918
- />
919
- <path
920
- 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"
921
- />
922
- <path
923
- 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"
924
- />
925
- <path
926
- 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"
927
- />
928
- <path
929
- 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"
930
- />
931
- <path
932
- 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"
933
- />
934
- <path
935
- 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"
936
- />
937
- <polygon
938
- 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"
939
- />
940
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
941
- <path
942
- 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"
943
- />
944
- </g>
945
- <g transform="translate(0.000000, 0.000000)">
946
- <path
947
- 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"
948
- fill="#0066CC"
949
- />
950
- <path
951
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
952
- fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
953
- />
954
- <path
955
- 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"
956
- fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
957
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
958
- />
818
+ <span class="pf-v6-c-masthead__toggle">
819
+ <button
820
+ class="pf-v6-c-button pf-m-plain"
821
+ type="button"
822
+ aria-label="Global navigation"
823
+ >
824
+ <span class="pf-v6-c-button__icon">
825
+ <i class="fas fa-bars" aria-hidden="true"></i>
826
+ </span>
827
+ </button>
828
+ </span>
829
+ <div class="pf-v6-c-masthead__brand">
830
+ <a class="pf-v6-c-masthead__logo" href="#">
831
+ <svg height="37px" viewBox="0 0 679 158">
832
+ <title>PF-HorizontalLogo-Color</title>
833
+ <defs>
834
+ <linearGradient
835
+ x1="68%"
836
+ y1="2.25860997e-13%"
837
+ x2="32%"
838
+ y2="100%"
839
+ id="linearGradient-drawer-expanded-bottom-example-masthead"
840
+ >
841
+ <stop stop-color="#2B9AF3" offset="0%" />
842
+ <stop
843
+ stop-color="#73BCF7"
844
+ stop-opacity="0.502212631"
845
+ offset="100%"
846
+ />
847
+ </linearGradient>
848
+ </defs>
849
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
850
+ <g
851
+ transform="translate(206.000000, 45.750000)"
852
+ fill="var(--pf-t--global--text--color--regular)"
853
+ fill-rule="nonzero"
854
+ >
855
+ <path
856
+ 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"
857
+ />
858
+ <path
859
+ 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"
860
+ />
861
+ <path
862
+ 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"
863
+ />
864
+ <path
865
+ 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"
866
+ />
867
+ <path
868
+ 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"
869
+ />
870
+ <path
871
+ 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"
872
+ />
873
+ <path
874
+ 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"
875
+ />
876
+ <polygon
877
+ 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"
878
+ />
879
+ <polygon
880
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
881
+ />
882
+ <path
883
+ 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"
884
+ />
885
+ </g>
886
+ <g transform="translate(0.000000, 0.000000)">
887
+ <path
888
+ 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"
889
+ fill="#0066CC"
890
+ />
891
+ <path
892
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
893
+ fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
894
+ />
895
+ <path
896
+ 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"
897
+ fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
898
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
899
+ />
900
+ </g>
959
901
  </g>
960
- </g>
961
- </svg>
962
- </a>
902
+ </svg>
903
+ </a>
904
+ </div>
963
905
  </div>
964
906
  <div class="pf-v6-c-masthead__content">
965
907
  <div
@@ -968,41 +910,11 @@ wrapperTag: div
968
910
  >
969
911
  <div class="pf-v6-c-toolbar__content">
970
912
  <div class="pf-v6-c-toolbar__content-section">
971
- <div class="pf-v6-c-toolbar__item">
972
- <button
973
- class="pf-v6-c-menu-toggle"
974
- type="button"
975
- aria-expanded="false"
976
- >
977
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
978
- <span class="pf-v6-c-menu-toggle__controls">
979
- <span class="pf-v6-c-menu-toggle__toggle-icon">
980
- <i class="fas fa-caret-down" aria-hidden="true"></i>
981
- </span>
982
- </span>
983
- </button>
984
- </div>
985
-
986
- <div class="pf-v6-c-toolbar__item">
987
- <button
988
- class="pf-v6-c-menu-toggle"
989
- type="button"
990
- aria-expanded="false"
991
- >
992
- <span class="pf-v6-c-menu-toggle__text">Services</span>
993
- <span class="pf-v6-c-menu-toggle__controls">
994
- <span class="pf-v6-c-menu-toggle__toggle-icon">
995
- <i class="fas fa-caret-down" aria-hidden="true"></i>
996
- </span>
997
- </span>
998
- </button>
999
- </div>
1000
-
1001
913
  <div
1002
- 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"
914
+ 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"
1003
915
  >
1004
916
  <div
1005
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
917
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1006
918
  >
1007
919
  <div class="pf-v6-c-toolbar__item">
1008
920
  <button
@@ -1041,6 +953,7 @@ wrapperTag: div
1041
953
  </button>
1042
954
  </div>
1043
955
  </div>
956
+
1044
957
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1045
958
  <button
1046
959
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1068,23 +981,33 @@ wrapperTag: div
1068
981
  >
1069
982
  <ul class="pf-v6-c-nav__list" role="list">
1070
983
  <li class="pf-v6-c-nav__item">
1071
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
984
+ <a href="#" class="pf-v6-c-nav__link">
985
+ <span class="pf-v6-c-nav__link-text">System panel</span>
986
+ </a>
1072
987
  </li>
1073
988
  <li class="pf-v6-c-nav__item">
1074
989
  <a
1075
990
  href="#"
1076
991
  class="pf-v6-c-nav__link pf-m-current"
1077
992
  aria-current="page"
1078
- >Policy</a>
993
+ >
994
+ <span class="pf-v6-c-nav__link-text">Policy</span>
995
+ </a>
1079
996
  </li>
1080
997
  <li class="pf-v6-c-nav__item">
1081
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
998
+ <a href="#" class="pf-v6-c-nav__link">
999
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1000
+ </a>
1082
1001
  </li>
1083
1002
  <li class="pf-v6-c-nav__item">
1084
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1003
+ <a href="#" class="pf-v6-c-nav__link">
1004
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1005
+ </a>
1085
1006
  </li>
1086
1007
  <li class="pf-v6-c-nav__item">
1087
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1008
+ <a href="#" class="pf-v6-c-nav__link">
1009
+ <span class="pf-v6-c-nav__link-text">Server</span>
1010
+ </a>
1088
1011
  </li>
1089
1012
  </ul>
1090
1013
  </nav>
@@ -1095,103 +1018,103 @@ wrapperTag: div
1095
1018
  <div class="pf-v6-c-drawer__main">
1096
1019
  <div class="pf-v6-c-drawer__content">
1097
1020
  <div class="pf-v6-c-drawer__body">
1098
- <main
1099
- class="pf-v6-c-page__main"
1100
- tabindex="-1"
1101
- id="main-content-drawer-expanded-bottom-example"
1102
- >
1103
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1104
- <div class="pf-v6-c-page__main-body">
1105
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1106
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1107
- <li class="pf-v6-c-breadcrumb__item">
1108
- <a
1109
- href="#"
1110
- class="pf-v6-c-breadcrumb__link"
1111
- >Section home</a>
1112
- </li>
1113
- <li class="pf-v6-c-breadcrumb__item">
1114
- <span class="pf-v6-c-breadcrumb__item-divider">
1115
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1116
- </span>
1021
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1022
+ <main
1023
+ class="pf-v6-c-page__main"
1024
+ tabindex="-1"
1025
+ id="main-content-drawer-expanded-bottom-example"
1026
+ >
1027
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1028
+ <div class="pf-v6-c-page__main-body">
1029
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1030
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1031
+ <li class="pf-v6-c-breadcrumb__item">
1032
+ <a
1033
+ href="#"
1034
+ class="pf-v6-c-breadcrumb__link"
1035
+ >Section home</a>
1036
+ </li>
1037
+ <li class="pf-v6-c-breadcrumb__item">
1038
+ <span class="pf-v6-c-breadcrumb__item-divider">
1039
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1040
+ </span>
1117
1041
 
1118
- <a
1119
- href="#"
1120
- class="pf-v6-c-breadcrumb__link"
1121
- >Section title</a>
1122
- </li>
1123
- <li class="pf-v6-c-breadcrumb__item">
1124
- <span class="pf-v6-c-breadcrumb__item-divider">
1125
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1126
- </span>
1042
+ <a
1043
+ href="#"
1044
+ class="pf-v6-c-breadcrumb__link"
1045
+ >Section title</a>
1046
+ </li>
1047
+ <li class="pf-v6-c-breadcrumb__item">
1048
+ <span class="pf-v6-c-breadcrumb__item-divider">
1049
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1050
+ </span>
1127
1051
 
1128
- <a
1129
- href="#"
1130
- class="pf-v6-c-breadcrumb__link"
1131
- >Section title</a>
1132
- </li>
1133
- <li class="pf-v6-c-breadcrumb__item">
1134
- <span class="pf-v6-c-breadcrumb__item-divider">
1135
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1136
- </span>
1052
+ <a
1053
+ href="#"
1054
+ class="pf-v6-c-breadcrumb__link"
1055
+ >Section title</a>
1056
+ </li>
1057
+ <li class="pf-v6-c-breadcrumb__item">
1058
+ <span class="pf-v6-c-breadcrumb__item-divider">
1059
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1060
+ </span>
1137
1061
 
1138
- <a
1139
- href="#"
1140
- class="pf-v6-c-breadcrumb__link pf-m-current"
1141
- aria-current="page"
1142
- >Section landing</a>
1143
- </li>
1144
- </ol>
1145
- </nav>
1146
- </div>
1147
- </section>
1148
- <section
1149
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
1150
- >
1151
- <div class="pf-v6-c-page__main-body">
1152
- <div class="pf-v6-c-content">
1153
- <h1>Main title</h1>
1154
- <p>This is a full page demo.</p>
1062
+ <a
1063
+ href="#"
1064
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1065
+ aria-current="page"
1066
+ >Section landing</a>
1067
+ </li>
1068
+ </ol>
1069
+ </nav>
1155
1070
  </div>
1156
- </div>
1157
- </section>
1158
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1159
- <div class="pf-v6-c-page__main-body">
1160
- <div class="pf-v6-l-gallery pf-m-gutter">
1161
- <div class="pf-v6-c-card">
1162
- <div class="pf-v6-c-card__body">This is a card</div>
1163
- </div>
1164
- <div class="pf-v6-c-card">
1165
- <div class="pf-v6-c-card__body">This is a card</div>
1166
- </div>
1167
- <div class="pf-v6-c-card">
1168
- <div class="pf-v6-c-card__body">This is a card</div>
1169
- </div>
1170
- <div class="pf-v6-c-card">
1171
- <div class="pf-v6-c-card__body">This is a card</div>
1172
- </div>
1173
- <div class="pf-v6-c-card">
1174
- <div class="pf-v6-c-card__body">This is a card</div>
1175
- </div>
1176
- <div class="pf-v6-c-card">
1177
- <div class="pf-v6-c-card__body">This is a card</div>
1178
- </div>
1179
- <div class="pf-v6-c-card">
1180
- <div class="pf-v6-c-card__body">This is a card</div>
1181
- </div>
1182
- <div class="pf-v6-c-card">
1183
- <div class="pf-v6-c-card__body">This is a card</div>
1184
- </div>
1185
- <div class="pf-v6-c-card">
1186
- <div class="pf-v6-c-card__body">This is a card</div>
1071
+ </section>
1072
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1073
+ <div class="pf-v6-c-page__main-body">
1074
+ <div class="pf-v6-c-content">
1075
+ <h1>Main title</h1>
1076
+ <p>This is a full page demo.</p>
1187
1077
  </div>
1188
- <div class="pf-v6-c-card">
1189
- <div class="pf-v6-c-card__body">This is a card</div>
1078
+ </div>
1079
+ </section>
1080
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1081
+ <div class="pf-v6-c-page__main-body">
1082
+ <div class="pf-v6-l-gallery pf-m-gutter">
1083
+ <div class="pf-v6-c-card">
1084
+ <div class="pf-v6-c-card__body">This is a card</div>
1085
+ </div>
1086
+ <div class="pf-v6-c-card">
1087
+ <div class="pf-v6-c-card__body">This is a card</div>
1088
+ </div>
1089
+ <div class="pf-v6-c-card">
1090
+ <div class="pf-v6-c-card__body">This is a card</div>
1091
+ </div>
1092
+ <div class="pf-v6-c-card">
1093
+ <div class="pf-v6-c-card__body">This is a card</div>
1094
+ </div>
1095
+ <div class="pf-v6-c-card">
1096
+ <div class="pf-v6-c-card__body">This is a card</div>
1097
+ </div>
1098
+ <div class="pf-v6-c-card">
1099
+ <div class="pf-v6-c-card__body">This is a card</div>
1100
+ </div>
1101
+ <div class="pf-v6-c-card">
1102
+ <div class="pf-v6-c-card__body">This is a card</div>
1103
+ </div>
1104
+ <div class="pf-v6-c-card">
1105
+ <div class="pf-v6-c-card__body">This is a card</div>
1106
+ </div>
1107
+ <div class="pf-v6-c-card">
1108
+ <div class="pf-v6-c-card__body">This is a card</div>
1109
+ </div>
1110
+ <div class="pf-v6-c-card">
1111
+ <div class="pf-v6-c-card__body">This is a card</div>
1112
+ </div>
1190
1113
  </div>
1191
1114
  </div>
1192
- </div>
1193
- </section>
1194
- </main>
1115
+ </section>
1116
+ </main>
1117
+ </div>
1195
1118
  </div>
1196
1119
  </div>
1197
1120
  <div class="pf-v6-c-drawer__panel">
@@ -1204,7 +1127,7 @@ wrapperTag: div
1204
1127
 
1205
1128
  ```
1206
1129
 
1207
- ### Drawer with jump links
1130
+ ### Collapsed drawer with jump links
1208
1131
 
1209
1132
  ```html isFullscreen
1210
1133
  <div class="pf-v6-c-page" id="drawer-jump-links">
@@ -1212,91 +1135,99 @@ wrapperTag: div
1212
1135
  <a
1213
1136
  class="pf-v6-c-button pf-m-primary"
1214
1137
  href="#main-content-drawer-jump-links"
1215
- >Skip to content</a>
1138
+ >
1139
+ <span class="pf-v6-c-button__text">Skip to content</span>
1140
+ </a>
1216
1141
  </div>
1217
1142
  <header class="pf-v6-c-masthead" id="drawer-jump-links-masthead">
1218
- <span class="pf-v6-c-masthead__toggle">
1219
- <button
1220
- class="pf-v6-c-button pf-m-plain"
1221
- type="button"
1222
- aria-label="Global navigation"
1223
- >
1224
- <i class="fas fa-bars" aria-hidden="true"></i>
1225
- </button>
1226
- </span>
1227
1143
  <div class="pf-v6-c-masthead__main">
1228
- <a class="pf-v6-c-masthead__brand" href="#">
1229
- <svg height="40px" viewBox="0 0 679 158">
1230
- <title>PF-HorizontalLogo-Color</title>
1231
- <defs>
1232
- <linearGradient
1233
- x1="68%"
1234
- y1="2.25860997e-13%"
1235
- x2="32%"
1236
- y2="100%"
1237
- id="linearGradient-drawer-jump-links-masthead"
1238
- >
1239
- <stop stop-color="#2B9AF3" offset="0%" />
1240
- <stop
1241
- stop-color="#73BCF7"
1242
- stop-opacity="0.502212631"
1243
- offset="100%"
1244
- />
1245
- </linearGradient>
1246
- </defs>
1247
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1248
- <g
1249
- transform="translate(206.000000, 45.750000)"
1250
- fill="var(--pf-t--global--text--color--regular)"
1251
- fill-rule="nonzero"
1252
- >
1253
- <path
1254
- 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"
1255
- />
1256
- <path
1257
- 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"
1258
- />
1259
- <path
1260
- 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"
1261
- />
1262
- <path
1263
- 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"
1264
- />
1265
- <path
1266
- 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"
1267
- />
1268
- <path
1269
- 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"
1270
- />
1271
- <path
1272
- 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"
1273
- />
1274
- <polygon
1275
- 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"
1276
- />
1277
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1278
- <path
1279
- 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"
1280
- />
1281
- </g>
1282
- <g transform="translate(0.000000, 0.000000)">
1283
- <path
1284
- 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"
1285
- fill="#0066CC"
1286
- />
1287
- <path
1288
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1289
- fill="url(#linearGradient-drawer-jump-links-masthead)"
1290
- />
1291
- <path
1292
- 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"
1293
- fill="url(#linearGradient-drawer-jump-links-masthead)"
1294
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1295
- />
1144
+ <span class="pf-v6-c-masthead__toggle">
1145
+ <button
1146
+ class="pf-v6-c-button pf-m-plain"
1147
+ type="button"
1148
+ aria-label="Global navigation"
1149
+ >
1150
+ <span class="pf-v6-c-button__icon">
1151
+ <i class="fas fa-bars" aria-hidden="true"></i>
1152
+ </span>
1153
+ </button>
1154
+ </span>
1155
+ <div class="pf-v6-c-masthead__brand">
1156
+ <a class="pf-v6-c-masthead__logo" href="#">
1157
+ <svg height="37px" viewBox="0 0 679 158">
1158
+ <title>PF-HorizontalLogo-Color</title>
1159
+ <defs>
1160
+ <linearGradient
1161
+ x1="68%"
1162
+ y1="2.25860997e-13%"
1163
+ x2="32%"
1164
+ y2="100%"
1165
+ id="linearGradient-drawer-jump-links-masthead"
1166
+ >
1167
+ <stop stop-color="#2B9AF3" offset="0%" />
1168
+ <stop
1169
+ stop-color="#73BCF7"
1170
+ stop-opacity="0.502212631"
1171
+ offset="100%"
1172
+ />
1173
+ </linearGradient>
1174
+ </defs>
1175
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1176
+ <g
1177
+ transform="translate(206.000000, 45.750000)"
1178
+ fill="var(--pf-t--global--text--color--regular)"
1179
+ fill-rule="nonzero"
1180
+ >
1181
+ <path
1182
+ 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"
1183
+ />
1184
+ <path
1185
+ 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"
1186
+ />
1187
+ <path
1188
+ 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"
1189
+ />
1190
+ <path
1191
+ 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"
1192
+ />
1193
+ <path
1194
+ 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"
1195
+ />
1196
+ <path
1197
+ 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"
1198
+ />
1199
+ <path
1200
+ 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"
1201
+ />
1202
+ <polygon
1203
+ 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"
1204
+ />
1205
+ <polygon
1206
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1207
+ />
1208
+ <path
1209
+ 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"
1210
+ />
1211
+ </g>
1212
+ <g transform="translate(0.000000, 0.000000)">
1213
+ <path
1214
+ 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"
1215
+ fill="#0066CC"
1216
+ />
1217
+ <path
1218
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1219
+ fill="url(#linearGradient-drawer-jump-links-masthead)"
1220
+ />
1221
+ <path
1222
+ 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"
1223
+ fill="url(#linearGradient-drawer-jump-links-masthead)"
1224
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1225
+ />
1226
+ </g>
1296
1227
  </g>
1297
- </g>
1298
- </svg>
1299
- </a>
1228
+ </svg>
1229
+ </a>
1230
+ </div>
1300
1231
  </div>
1301
1232
  <div class="pf-v6-c-masthead__content">
1302
1233
  <div
@@ -1305,41 +1236,11 @@ wrapperTag: div
1305
1236
  >
1306
1237
  <div class="pf-v6-c-toolbar__content">
1307
1238
  <div class="pf-v6-c-toolbar__content-section">
1308
- <div class="pf-v6-c-toolbar__item">
1309
- <button
1310
- class="pf-v6-c-menu-toggle"
1311
- type="button"
1312
- aria-expanded="false"
1313
- >
1314
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1315
- <span class="pf-v6-c-menu-toggle__controls">
1316
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1317
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1318
- </span>
1319
- </span>
1320
- </button>
1321
- </div>
1322
-
1323
- <div class="pf-v6-c-toolbar__item">
1324
- <button
1325
- class="pf-v6-c-menu-toggle"
1326
- type="button"
1327
- aria-expanded="false"
1328
- >
1329
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1330
- <span class="pf-v6-c-menu-toggle__controls">
1331
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1332
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1333
- </span>
1334
- </span>
1335
- </button>
1336
- </div>
1337
-
1338
1239
  <div
1339
- 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"
1240
+ 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"
1340
1241
  >
1341
1242
  <div
1342
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1243
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1343
1244
  >
1344
1245
  <div class="pf-v6-c-toolbar__item">
1345
1246
  <button
@@ -1378,6 +1279,7 @@ wrapperTag: div
1378
1279
  </button>
1379
1280
  </div>
1380
1281
  </div>
1282
+
1381
1283
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1382
1284
  <button
1383
1285
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1405,168 +1307,225 @@ wrapperTag: div
1405
1307
  >
1406
1308
  <ul class="pf-v6-c-nav__list" role="list">
1407
1309
  <li class="pf-v6-c-nav__item">
1408
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1310
+ <a href="#" class="pf-v6-c-nav__link">
1311
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1312
+ </a>
1409
1313
  </li>
1410
1314
  <li class="pf-v6-c-nav__item">
1411
1315
  <a
1412
1316
  href="#"
1413
1317
  class="pf-v6-c-nav__link pf-m-current"
1414
1318
  aria-current="page"
1415
- >Policy</a>
1319
+ >
1320
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1321
+ </a>
1416
1322
  </li>
1417
1323
  <li class="pf-v6-c-nav__item">
1418
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1324
+ <a href="#" class="pf-v6-c-nav__link">
1325
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1326
+ </a>
1419
1327
  </li>
1420
1328
  <li class="pf-v6-c-nav__item">
1421
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1329
+ <a href="#" class="pf-v6-c-nav__link">
1330
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1331
+ </a>
1422
1332
  </li>
1423
1333
  <li class="pf-v6-c-nav__item">
1424
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1334
+ <a href="#" class="pf-v6-c-nav__link">
1335
+ <span class="pf-v6-c-nav__link-text">Server</span>
1336
+ </a>
1425
1337
  </li>
1426
1338
  </ul>
1427
1339
  </nav>
1428
1340
  </div>
1429
1341
  </div>
1430
- <main
1431
- class="pf-v6-c-page__main"
1432
- tabindex="-1"
1433
- id="main-content-drawer-jump-links"
1434
- >
1435
- <div class="pf-v6-c-drawer">
1436
- <div class="pf-v6-c-drawer__main">
1437
- <div
1438
- class="pf-v6-c-drawer__content"
1439
- id="drawer-jump-links-drawer-scrollable-container"
1440
- >
1441
- <div class="pf-v6-c-drawer__body">
1442
- <div class="pf-v6-c-sidebar">
1443
- <div class="pf-v6-c-sidebar__main">
1444
- <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1445
- <section class="pf-v6-c-page__main-section pf-m-light">
1446
- <nav
1447
- class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1448
- >
1449
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
1450
- <ul class="pf-v6-c-jump-links__list" role="list">
1451
- <li class="pf-v6-c-jump-links__item pf-m-current">
1452
- <span class="pf-v6-c-jump-links__link">
1453
- <a
1454
- class="pf-v6-c-button pf-m-link"
1455
- href="#drawer-jump-links-jump-links-first"
1456
- >
1457
- <span
1458
- class="pf-v6-c-jump-links__link-text"
1459
- >First section</span>
1460
- </a>
1461
- </span>
1462
- </li>
1463
- <li class="pf-v6-c-jump-links__item">
1464
- <span class="pf-v6-c-jump-links__link">
1465
- <a
1466
- class="pf-v6-c-button pf-m-link"
1467
- href="#drawer-jump-links-jump-links-second"
1468
- >
1469
- <span
1470
- class="pf-v6-c-jump-links__link-text"
1471
- >Second section</span>
1472
- </a>
1473
- </span>
1474
- </li>
1475
- <li class="pf-v6-c-jump-links__item">
1476
- <span class="pf-v6-c-jump-links__link">
1477
- <a
1478
- class="pf-v6-c-button pf-m-link"
1479
- href="#drawer-jump-links-jump-links-third"
1480
- >
1481
- <span
1482
- class="pf-v6-c-jump-links__link-text"
1483
- >Third section</span>
1484
- </a>
1485
- </span>
1486
- </li>
1487
- <li class="pf-v6-c-jump-links__item">
1488
- <span class="pf-v6-c-jump-links__link">
1489
- <a
1490
- class="pf-v6-c-button pf-m-link"
1491
- href="#drawer-jump-links-jump-links-fourth"
1492
- >
1493
- <span
1494
- class="pf-v6-c-jump-links__link-text"
1495
- >Fourth section</span>
1496
- </a>
1497
- </span>
1498
- </li>
1499
- <li class="pf-v6-c-jump-links__item">
1500
- <span class="pf-v6-c-jump-links__link">
1501
- <a
1502
- class="pf-v6-c-button pf-m-link"
1503
- href="#drawer-jump-links-jump-links-fifth"
1504
- >
1505
- <span
1506
- class="pf-v6-c-jump-links__link-text"
1507
- >Fifth section</span>
1508
- </a>
1509
- </span>
1510
- </li>
1511
- </ul>
1512
- </nav>
1513
- </section>
1514
- </div>
1515
- <div class="pf-v6-c-sidebar__content">
1516
- <section class="pf-v6-c-page__main-section pf-m-light">
1517
- <div class="pf-v6-c-content">
1518
- <p>
1519
- <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.
1520
- </p>
1342
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1343
+ <main
1344
+ class="pf-v6-c-page__main"
1345
+ tabindex="-1"
1346
+ id="main-content-drawer-jump-links"
1347
+ >
1348
+ <div class="pf-v6-c-drawer">
1349
+ <div class="pf-v6-c-drawer__main">
1350
+ <div
1351
+ class="pf-v6-c-drawer__content"
1352
+ id="drawer-jump-links-drawer-scrollable-container"
1353
+ >
1354
+ <div class="pf-v6-c-drawer__body">
1355
+ <div class="pf-v6-c-sidebar">
1356
+ <div class="pf-v6-c-sidebar__main">
1357
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1358
+ <section class="pf-v6-c-page__main-section">
1359
+ <div class="pf-v6-c-page__main-body">
1360
+ <nav
1361
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1362
+ >
1363
+ <div class="pf-v6-c-jump-links__header">
1364
+ <div class="pf-v6-c-jump-links__toggle">
1365
+ <button
1366
+ class="pf-v6-c-button pf-m-plain"
1367
+ type="button"
1368
+ aria-label="Toggle jump links"
1369
+ >
1370
+ <span class="pf-v6-c-button__icon pf-m-start">
1371
+ <span class="pf-v6-c-jump-links__toggle-icon">
1372
+ <i
1373
+ class="fas fa-angle-right"
1374
+ aria-hidden="true"
1375
+ ></i>
1376
+ </span>
1377
+ </span>
1378
+ <span
1379
+ class="pf-v6-c-button__text"
1380
+ >Jump to section</span>
1381
+ </button>
1382
+ </div>
1383
+ <div
1384
+ class="pf-v6-c-jump-links__label"
1385
+ >Jump to section</div>
1386
+ </div>
1387
+ <ul class="pf-v6-c-jump-links__list" role="list">
1388
+ <li class="pf-v6-c-jump-links__item pf-m-current">
1389
+ <span class="pf-v6-c-jump-links__link">
1390
+ <a
1391
+ class="pf-v6-c-button pf-m-link"
1392
+ href="#drawer-jump-links-jump-links-first"
1393
+ >
1394
+ <span class="pf-v6-c-button__text">
1395
+ <span
1396
+ class="pf-v6-c-jump-links__link-text"
1397
+ >First section</span>
1398
+ </span>
1399
+ </a>
1400
+ </span>
1401
+ </li>
1402
+ <li class="pf-v6-c-jump-links__item">
1403
+ <span class="pf-v6-c-jump-links__link">
1404
+ <a
1405
+ class="pf-v6-c-button pf-m-link"
1406
+ href="#drawer-jump-links-jump-links-second"
1407
+ >
1408
+ <span class="pf-v6-c-button__text">
1409
+ <span
1410
+ class="pf-v6-c-jump-links__link-text"
1411
+ >Second section</span>
1412
+ </span>
1413
+ </a>
1414
+ </span>
1415
+ </li>
1416
+ <li class="pf-v6-c-jump-links__item">
1417
+ <span class="pf-v6-c-jump-links__link">
1418
+ <a
1419
+ class="pf-v6-c-button pf-m-link"
1420
+ href="#drawer-jump-links-jump-links-third"
1421
+ >
1422
+ <span class="pf-v6-c-button__text">
1423
+ <span
1424
+ class="pf-v6-c-jump-links__link-text"
1425
+ >Third section</span>
1426
+ </span>
1427
+ </a>
1428
+ </span>
1429
+ </li>
1430
+ <li class="pf-v6-c-jump-links__item">
1431
+ <span class="pf-v6-c-jump-links__link">
1432
+ <a
1433
+ class="pf-v6-c-button pf-m-link"
1434
+ href="#drawer-jump-links-jump-links-fourth"
1435
+ >
1436
+ <span class="pf-v6-c-button__text">
1437
+ <span
1438
+ class="pf-v6-c-jump-links__link-text"
1439
+ >Fourth section</span>
1440
+ </span>
1441
+ </a>
1442
+ </span>
1443
+ </li>
1444
+ <li class="pf-v6-c-jump-links__item">
1445
+ <span class="pf-v6-c-jump-links__link">
1446
+ <a
1447
+ class="pf-v6-c-button pf-m-link"
1448
+ href="#drawer-jump-links-jump-links-fifth"
1449
+ >
1450
+ <span class="pf-v6-c-button__text">
1451
+ <span
1452
+ class="pf-v6-c-jump-links__link-text"
1453
+ >Fifth section</span>
1454
+ </span>
1455
+ </a>
1456
+ </span>
1457
+ </li>
1458
+ </ul>
1459
+ </nav>
1460
+ </div>
1461
+ </section>
1462
+ </div>
1463
+ <div class="pf-v6-c-sidebar__content">
1464
+ <section class="pf-v6-c-page__main-section">
1465
+ <div class="pf-v6-c-page__main-body">
1466
+ <div class="pf-v6-c-content">
1467
+ <p>
1468
+ <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.
1469
+ </p>
1521
1470
 
1522
- <h2 id="drawer-jump-links-jump-links-first">First section</h2>
1523
- <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>
1471
+ <h2
1472
+ id="drawer-jump-links-jump-links-first"
1473
+ >First section</h2>
1474
+ <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>
1524
1475
 
1525
- <h2
1526
- id="drawer-jump-links-jump-links-second"
1527
- >Second section</h2>
1528
- <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>
1476
+ <h2
1477
+ id="drawer-jump-links-jump-links-second"
1478
+ >Second section</h2>
1479
+ <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>
1529
1480
 
1530
- <h2 id="drawer-jump-links-jump-links-third">Third section</h2>
1531
- <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>
1481
+ <h2
1482
+ id="drawer-jump-links-jump-links-third"
1483
+ >Third section</h2>
1484
+ <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>
1532
1485
 
1533
- <h2
1534
- id="drawer-jump-links-jump-links-fourth"
1535
- >Fourth section</h2>
1536
- <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>
1486
+ <h2
1487
+ id="drawer-jump-links-jump-links-fourth"
1488
+ >Fourth section</h2>
1489
+ <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>
1537
1490
 
1538
- <h2 id="drawer-jump-links-jump-links-fifth">Fifth section</h2>
1539
- <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>
1540
- </div>
1541
- </section>
1491
+ <h2
1492
+ id="drawer-jump-links-jump-links-fifth"
1493
+ >Fifth section</h2>
1494
+ <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>
1495
+ </div>
1496
+ </div>
1497
+ </section>
1498
+ </div>
1542
1499
  </div>
1543
1500
  </div>
1544
1501
  </div>
1545
1502
  </div>
1546
- </div>
1547
- <div class="pf-v6-c-drawer__panel" hidden>
1548
- <div class="pf-v6-c-drawer__head">
1549
- <span>Drawer panel header content</span>
1550
- <div class="pf-v6-c-drawer__actions">
1551
- <div class="pf-v6-c-drawer__close">
1552
- <button
1553
- class="pf-v6-c-button pf-m-plain"
1554
- type="button"
1555
- aria-label="Close drawer panel"
1556
- >
1557
- <i class="fas fa-times" aria-hidden="true"></i>
1558
- </button>
1503
+ <div class="pf-v6-c-drawer__panel" hidden>
1504
+ <div class="pf-v6-c-drawer__head">
1505
+ <span>Drawer panel header content</span>
1506
+ <div class="pf-v6-c-drawer__actions">
1507
+ <div class="pf-v6-c-drawer__close">
1508
+ <button
1509
+ class="pf-v6-c-button pf-m-plain"
1510
+ type="button"
1511
+ aria-label="Close drawer panel"
1512
+ >
1513
+ <span class="pf-v6-c-button__icon">
1514
+ <i class="fas fa-times" aria-hidden="true"></i>
1515
+ </span>
1516
+ </button>
1517
+ </div>
1559
1518
  </div>
1560
1519
  </div>
1520
+ <div
1521
+ class="pf-v6-c-drawer__description"
1522
+ >This is a helpful description of the drawer panel.</div>
1523
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
1561
1524
  </div>
1562
- <div
1563
- class="pf-v6-c-drawer__description"
1564
- >This is a helpful description of the drawer panel.</div>
1565
- <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
1566
1525
  </div>
1567
1526
  </div>
1568
- </div>
1569
- </main>
1527
+ </main>
1528
+ </div>
1570
1529
  </div>
1571
1530
 
1572
1531
  ```
@@ -1579,91 +1538,99 @@ wrapperTag: div
1579
1538
  <a
1580
1539
  class="pf-v6-c-button pf-m-primary"
1581
1540
  href="#main-content-drawer-expanded-jump-links"
1582
- >Skip to content</a>
1541
+ >
1542
+ <span class="pf-v6-c-button__text">Skip to content</span>
1543
+ </a>
1583
1544
  </div>
1584
1545
  <header class="pf-v6-c-masthead" id="drawer-expanded-jump-links-masthead">
1585
- <span class="pf-v6-c-masthead__toggle">
1586
- <button
1587
- class="pf-v6-c-button pf-m-plain"
1588
- type="button"
1589
- aria-label="Global navigation"
1590
- >
1591
- <i class="fas fa-bars" aria-hidden="true"></i>
1592
- </button>
1593
- </span>
1594
1546
  <div class="pf-v6-c-masthead__main">
1595
- <a class="pf-v6-c-masthead__brand" href="#">
1596
- <svg height="40px" viewBox="0 0 679 158">
1597
- <title>PF-HorizontalLogo-Color</title>
1598
- <defs>
1599
- <linearGradient
1600
- x1="68%"
1601
- y1="2.25860997e-13%"
1602
- x2="32%"
1603
- y2="100%"
1604
- id="linearGradient-drawer-expanded-jump-links-masthead"
1605
- >
1606
- <stop stop-color="#2B9AF3" offset="0%" />
1607
- <stop
1608
- stop-color="#73BCF7"
1609
- stop-opacity="0.502212631"
1610
- offset="100%"
1611
- />
1612
- </linearGradient>
1613
- </defs>
1614
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1615
- <g
1616
- transform="translate(206.000000, 45.750000)"
1617
- fill="var(--pf-t--global--text--color--regular)"
1618
- fill-rule="nonzero"
1619
- >
1620
- <path
1621
- 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"
1622
- />
1623
- <path
1624
- 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"
1625
- />
1626
- <path
1627
- 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"
1628
- />
1629
- <path
1630
- 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"
1631
- />
1632
- <path
1633
- 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"
1634
- />
1635
- <path
1636
- 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"
1637
- />
1638
- <path
1639
- 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"
1640
- />
1641
- <polygon
1642
- 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"
1643
- />
1644
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1645
- <path
1646
- 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"
1647
- />
1648
- </g>
1649
- <g transform="translate(0.000000, 0.000000)">
1650
- <path
1651
- 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"
1652
- fill="#0066CC"
1653
- />
1654
- <path
1655
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1656
- fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1657
- />
1658
- <path
1659
- 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"
1660
- fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1661
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1662
- />
1547
+ <span class="pf-v6-c-masthead__toggle">
1548
+ <button
1549
+ class="pf-v6-c-button pf-m-plain"
1550
+ type="button"
1551
+ aria-label="Global navigation"
1552
+ >
1553
+ <span class="pf-v6-c-button__icon">
1554
+ <i class="fas fa-bars" aria-hidden="true"></i>
1555
+ </span>
1556
+ </button>
1557
+ </span>
1558
+ <div class="pf-v6-c-masthead__brand">
1559
+ <a class="pf-v6-c-masthead__logo" href="#">
1560
+ <svg height="37px" viewBox="0 0 679 158">
1561
+ <title>PF-HorizontalLogo-Color</title>
1562
+ <defs>
1563
+ <linearGradient
1564
+ x1="68%"
1565
+ y1="2.25860997e-13%"
1566
+ x2="32%"
1567
+ y2="100%"
1568
+ id="linearGradient-drawer-expanded-jump-links-masthead"
1569
+ >
1570
+ <stop stop-color="#2B9AF3" offset="0%" />
1571
+ <stop
1572
+ stop-color="#73BCF7"
1573
+ stop-opacity="0.502212631"
1574
+ offset="100%"
1575
+ />
1576
+ </linearGradient>
1577
+ </defs>
1578
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1579
+ <g
1580
+ transform="translate(206.000000, 45.750000)"
1581
+ fill="var(--pf-t--global--text--color--regular)"
1582
+ fill-rule="nonzero"
1583
+ >
1584
+ <path
1585
+ 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"
1586
+ />
1587
+ <path
1588
+ 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"
1589
+ />
1590
+ <path
1591
+ 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"
1592
+ />
1593
+ <path
1594
+ 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"
1595
+ />
1596
+ <path
1597
+ 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"
1598
+ />
1599
+ <path
1600
+ 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"
1601
+ />
1602
+ <path
1603
+ 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"
1604
+ />
1605
+ <polygon
1606
+ 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"
1607
+ />
1608
+ <polygon
1609
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1610
+ />
1611
+ <path
1612
+ 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"
1613
+ />
1614
+ </g>
1615
+ <g transform="translate(0.000000, 0.000000)">
1616
+ <path
1617
+ 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"
1618
+ fill="#0066CC"
1619
+ />
1620
+ <path
1621
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1622
+ fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1623
+ />
1624
+ <path
1625
+ 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"
1626
+ fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1627
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1628
+ />
1629
+ </g>
1663
1630
  </g>
1664
- </g>
1665
- </svg>
1666
- </a>
1631
+ </svg>
1632
+ </a>
1633
+ </div>
1667
1634
  </div>
1668
1635
  <div class="pf-v6-c-masthead__content">
1669
1636
  <div
@@ -1672,41 +1639,11 @@ wrapperTag: div
1672
1639
  >
1673
1640
  <div class="pf-v6-c-toolbar__content">
1674
1641
  <div class="pf-v6-c-toolbar__content-section">
1675
- <div class="pf-v6-c-toolbar__item">
1676
- <button
1677
- class="pf-v6-c-menu-toggle"
1678
- type="button"
1679
- aria-expanded="false"
1680
- >
1681
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1682
- <span class="pf-v6-c-menu-toggle__controls">
1683
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1684
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1685
- </span>
1686
- </span>
1687
- </button>
1688
- </div>
1689
-
1690
- <div class="pf-v6-c-toolbar__item">
1691
- <button
1692
- class="pf-v6-c-menu-toggle"
1693
- type="button"
1694
- aria-expanded="false"
1695
- >
1696
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1697
- <span class="pf-v6-c-menu-toggle__controls">
1698
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1699
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1700
- </span>
1701
- </span>
1702
- </button>
1703
- </div>
1704
-
1705
1642
  <div
1706
- 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"
1643
+ 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"
1707
1644
  >
1708
1645
  <div
1709
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1646
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1710
1647
  >
1711
1648
  <div class="pf-v6-c-toolbar__item">
1712
1649
  <button
@@ -1745,6 +1682,7 @@ wrapperTag: div
1745
1682
  </button>
1746
1683
  </div>
1747
1684
  </div>
1685
+
1748
1686
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1749
1687
  <button
1750
1688
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1772,174 +1710,225 @@ wrapperTag: div
1772
1710
  >
1773
1711
  <ul class="pf-v6-c-nav__list" role="list">
1774
1712
  <li class="pf-v6-c-nav__item">
1775
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1713
+ <a href="#" class="pf-v6-c-nav__link">
1714
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1715
+ </a>
1776
1716
  </li>
1777
1717
  <li class="pf-v6-c-nav__item">
1778
1718
  <a
1779
1719
  href="#"
1780
1720
  class="pf-v6-c-nav__link pf-m-current"
1781
1721
  aria-current="page"
1782
- >Policy</a>
1722
+ >
1723
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1724
+ </a>
1783
1725
  </li>
1784
1726
  <li class="pf-v6-c-nav__item">
1785
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1727
+ <a href="#" class="pf-v6-c-nav__link">
1728
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1729
+ </a>
1786
1730
  </li>
1787
1731
  <li class="pf-v6-c-nav__item">
1788
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1732
+ <a href="#" class="pf-v6-c-nav__link">
1733
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1734
+ </a>
1789
1735
  </li>
1790
1736
  <li class="pf-v6-c-nav__item">
1791
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1737
+ <a href="#" class="pf-v6-c-nav__link">
1738
+ <span class="pf-v6-c-nav__link-text">Server</span>
1739
+ </a>
1792
1740
  </li>
1793
1741
  </ul>
1794
1742
  </nav>
1795
1743
  </div>
1796
1744
  </div>
1797
- <main
1798
- class="pf-v6-c-page__main"
1799
- tabindex="-1"
1800
- id="main-content-drawer-expanded-jump-links"
1801
- >
1802
- <div class="pf-v6-c-drawer pf-m-expanded">
1803
- <div class="pf-v6-c-drawer__main">
1804
- <div
1805
- class="pf-v6-c-drawer__content"
1806
- id="drawer-expanded-jump-links-drawer-scrollable-container"
1807
- >
1808
- <div class="pf-v6-c-drawer__body">
1809
- <div class="pf-v6-c-sidebar">
1810
- <div class="pf-v6-c-sidebar__main">
1811
- <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1812
- <section class="pf-v6-c-page__main-section pf-m-light">
1813
- <nav
1814
- class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1815
- >
1816
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
1817
- <ul class="pf-v6-c-jump-links__list" role="list">
1818
- <li class="pf-v6-c-jump-links__item pf-m-current">
1819
- <span class="pf-v6-c-jump-links__link">
1820
- <a
1821
- class="pf-v6-c-button pf-m-link"
1822
- href="#drawer-expanded-jump-links-jump-links-first"
1823
- >
1824
- <span
1825
- class="pf-v6-c-jump-links__link-text"
1826
- >First section</span>
1827
- </a>
1828
- </span>
1829
- </li>
1830
- <li class="pf-v6-c-jump-links__item">
1831
- <span class="pf-v6-c-jump-links__link">
1832
- <a
1833
- class="pf-v6-c-button pf-m-link"
1834
- href="#drawer-expanded-jump-links-jump-links-second"
1835
- >
1836
- <span
1837
- class="pf-v6-c-jump-links__link-text"
1838
- >Second section</span>
1839
- </a>
1840
- </span>
1841
- </li>
1842
- <li class="pf-v6-c-jump-links__item">
1843
- <span class="pf-v6-c-jump-links__link">
1844
- <a
1845
- class="pf-v6-c-button pf-m-link"
1846
- href="#drawer-expanded-jump-links-jump-links-third"
1847
- >
1848
- <span
1849
- class="pf-v6-c-jump-links__link-text"
1850
- >Third section</span>
1851
- </a>
1852
- </span>
1853
- </li>
1854
- <li class="pf-v6-c-jump-links__item">
1855
- <span class="pf-v6-c-jump-links__link">
1856
- <a
1857
- class="pf-v6-c-button pf-m-link"
1858
- href="#drawer-expanded-jump-links-jump-links-fourth"
1859
- >
1860
- <span
1861
- class="pf-v6-c-jump-links__link-text"
1862
- >Fourth section</span>
1863
- </a>
1864
- </span>
1865
- </li>
1866
- <li class="pf-v6-c-jump-links__item">
1867
- <span class="pf-v6-c-jump-links__link">
1868
- <a
1869
- class="pf-v6-c-button pf-m-link"
1870
- href="#drawer-expanded-jump-links-jump-links-fifth"
1871
- >
1872
- <span
1873
- class="pf-v6-c-jump-links__link-text"
1874
- >Fifth section</span>
1875
- </a>
1876
- </span>
1877
- </li>
1878
- </ul>
1879
- </nav>
1880
- </section>
1881
- </div>
1882
- <div class="pf-v6-c-sidebar__content">
1883
- <section class="pf-v6-c-page__main-section pf-m-light">
1884
- <div class="pf-v6-c-content">
1885
- <p>
1886
- <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.
1887
- </p>
1745
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1746
+ <main
1747
+ class="pf-v6-c-page__main"
1748
+ tabindex="-1"
1749
+ id="main-content-drawer-expanded-jump-links"
1750
+ >
1751
+ <div class="pf-v6-c-drawer pf-m-expanded">
1752
+ <div class="pf-v6-c-drawer__main">
1753
+ <div
1754
+ class="pf-v6-c-drawer__content"
1755
+ id="drawer-expanded-jump-links-drawer-scrollable-container"
1756
+ >
1757
+ <div class="pf-v6-c-drawer__body">
1758
+ <div class="pf-v6-c-sidebar">
1759
+ <div class="pf-v6-c-sidebar__main">
1760
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1761
+ <section class="pf-v6-c-page__main-section">
1762
+ <div class="pf-v6-c-page__main-body">
1763
+ <nav
1764
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1765
+ >
1766
+ <div class="pf-v6-c-jump-links__header">
1767
+ <div class="pf-v6-c-jump-links__toggle">
1768
+ <button
1769
+ class="pf-v6-c-button pf-m-plain"
1770
+ type="button"
1771
+ aria-label="Toggle jump links"
1772
+ >
1773
+ <span class="pf-v6-c-button__icon pf-m-start">
1774
+ <span class="pf-v6-c-jump-links__toggle-icon">
1775
+ <i
1776
+ class="fas fa-angle-right"
1777
+ aria-hidden="true"
1778
+ ></i>
1779
+ </span>
1780
+ </span>
1781
+ <span
1782
+ class="pf-v6-c-button__text"
1783
+ >Jump to section</span>
1784
+ </button>
1785
+ </div>
1786
+ <div
1787
+ class="pf-v6-c-jump-links__label"
1788
+ >Jump to section</div>
1789
+ </div>
1790
+ <ul class="pf-v6-c-jump-links__list" role="list">
1791
+ <li class="pf-v6-c-jump-links__item pf-m-current">
1792
+ <span class="pf-v6-c-jump-links__link">
1793
+ <a
1794
+ class="pf-v6-c-button pf-m-link"
1795
+ href="#drawer-expanded-jump-links-jump-links-first"
1796
+ >
1797
+ <span class="pf-v6-c-button__text">
1798
+ <span
1799
+ class="pf-v6-c-jump-links__link-text"
1800
+ >First section</span>
1801
+ </span>
1802
+ </a>
1803
+ </span>
1804
+ </li>
1805
+ <li class="pf-v6-c-jump-links__item">
1806
+ <span class="pf-v6-c-jump-links__link">
1807
+ <a
1808
+ class="pf-v6-c-button pf-m-link"
1809
+ href="#drawer-expanded-jump-links-jump-links-second"
1810
+ >
1811
+ <span class="pf-v6-c-button__text">
1812
+ <span
1813
+ class="pf-v6-c-jump-links__link-text"
1814
+ >Second section</span>
1815
+ </span>
1816
+ </a>
1817
+ </span>
1818
+ </li>
1819
+ <li class="pf-v6-c-jump-links__item">
1820
+ <span class="pf-v6-c-jump-links__link">
1821
+ <a
1822
+ class="pf-v6-c-button pf-m-link"
1823
+ href="#drawer-expanded-jump-links-jump-links-third"
1824
+ >
1825
+ <span class="pf-v6-c-button__text">
1826
+ <span
1827
+ class="pf-v6-c-jump-links__link-text"
1828
+ >Third section</span>
1829
+ </span>
1830
+ </a>
1831
+ </span>
1832
+ </li>
1833
+ <li class="pf-v6-c-jump-links__item">
1834
+ <span class="pf-v6-c-jump-links__link">
1835
+ <a
1836
+ class="pf-v6-c-button pf-m-link"
1837
+ href="#drawer-expanded-jump-links-jump-links-fourth"
1838
+ >
1839
+ <span class="pf-v6-c-button__text">
1840
+ <span
1841
+ class="pf-v6-c-jump-links__link-text"
1842
+ >Fourth section</span>
1843
+ </span>
1844
+ </a>
1845
+ </span>
1846
+ </li>
1847
+ <li class="pf-v6-c-jump-links__item">
1848
+ <span class="pf-v6-c-jump-links__link">
1849
+ <a
1850
+ class="pf-v6-c-button pf-m-link"
1851
+ href="#drawer-expanded-jump-links-jump-links-fifth"
1852
+ >
1853
+ <span class="pf-v6-c-button__text">
1854
+ <span
1855
+ class="pf-v6-c-jump-links__link-text"
1856
+ >Fifth section</span>
1857
+ </span>
1858
+ </a>
1859
+ </span>
1860
+ </li>
1861
+ </ul>
1862
+ </nav>
1863
+ </div>
1864
+ </section>
1865
+ </div>
1866
+ <div class="pf-v6-c-sidebar__content">
1867
+ <section class="pf-v6-c-page__main-section">
1868
+ <div class="pf-v6-c-page__main-body">
1869
+ <div class="pf-v6-c-content">
1870
+ <p>
1871
+ <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.
1872
+ </p>
1888
1873
 
1889
- <h2
1890
- id="drawer-expanded-jump-links-jump-links-first"
1891
- >First section</h2>
1892
- <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>
1874
+ <h2
1875
+ id="drawer-expanded-jump-links-jump-links-first"
1876
+ >First section</h2>
1877
+ <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>
1893
1878
 
1894
- <h2
1895
- id="drawer-expanded-jump-links-jump-links-second"
1896
- >Second section</h2>
1897
- <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>
1879
+ <h2
1880
+ id="drawer-expanded-jump-links-jump-links-second"
1881
+ >Second section</h2>
1882
+ <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>
1898
1883
 
1899
- <h2
1900
- id="drawer-expanded-jump-links-jump-links-third"
1901
- >Third section</h2>
1902
- <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>
1884
+ <h2
1885
+ id="drawer-expanded-jump-links-jump-links-third"
1886
+ >Third section</h2>
1887
+ <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>
1903
1888
 
1904
- <h2
1905
- id="drawer-expanded-jump-links-jump-links-fourth"
1906
- >Fourth 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>
1889
+ <h2
1890
+ id="drawer-expanded-jump-links-jump-links-fourth"
1891
+ >Fourth section</h2>
1892
+ <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
1893
 
1909
- <h2
1910
- id="drawer-expanded-jump-links-jump-links-fifth"
1911
- >Fifth section</h2>
1912
- <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>
1913
- </div>
1914
- </section>
1894
+ <h2
1895
+ id="drawer-expanded-jump-links-jump-links-fifth"
1896
+ >Fifth section</h2>
1897
+ <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>
1898
+ </div>
1899
+ </div>
1900
+ </section>
1901
+ </div>
1915
1902
  </div>
1916
1903
  </div>
1917
1904
  </div>
1918
1905
  </div>
1919
- </div>
1920
- <div class="pf-v6-c-drawer__panel">
1921
- <div class="pf-v6-c-drawer__head">
1922
- <span>Drawer panel header content</span>
1923
- <div class="pf-v6-c-drawer__actions">
1924
- <div class="pf-v6-c-drawer__close">
1925
- <button
1926
- class="pf-v6-c-button pf-m-plain"
1927
- type="button"
1928
- aria-label="Close drawer panel"
1929
- >
1930
- <i class="fas fa-times" aria-hidden="true"></i>
1931
- </button>
1906
+ <div class="pf-v6-c-drawer__panel">
1907
+ <div class="pf-v6-c-drawer__head">
1908
+ <span>Drawer panel header content</span>
1909
+ <div class="pf-v6-c-drawer__actions">
1910
+ <div class="pf-v6-c-drawer__close">
1911
+ <button
1912
+ class="pf-v6-c-button pf-m-plain"
1913
+ type="button"
1914
+ aria-label="Close drawer panel"
1915
+ >
1916
+ <span class="pf-v6-c-button__icon">
1917
+ <i class="fas fa-times" aria-hidden="true"></i>
1918
+ </span>
1919
+ </button>
1920
+ </div>
1932
1921
  </div>
1933
1922
  </div>
1923
+ <div
1924
+ class="pf-v6-c-drawer__description"
1925
+ >This is a helpful description of the drawer panel.</div>
1926
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
1934
1927
  </div>
1935
- <div
1936
- class="pf-v6-c-drawer__description"
1937
- >This is a helpful description of the drawer panel.</div>
1938
- <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
1939
1928
  </div>
1940
1929
  </div>
1941
- </div>
1942
- </main>
1930
+ </main>
1931
+ </div>
1943
1932
  </div>
1944
1933
 
1945
1934
  ```