@patternfly/patternfly 6.5.0-prerelease.7 → 6.5.0-prerelease.70

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 (400) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +17 -0
  21. package/base/patternfly-svg-icons.scss +20 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +26 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +10 -5
  48. package/components/Breadcrumb/breadcrumb.scss +6 -2
  49. package/components/Button/button.css +123 -32
  50. package/components/Button/button.scss +134 -29
  51. package/components/CalendarMonth/calendar-month.css +4 -3
  52. package/components/Card/card.css +51 -15
  53. package/components/Card/card.scss +65 -9
  54. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  55. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  56. package/components/CodeEditor/code-editor.css +2 -2
  57. package/components/CodeEditor/code-editor.scss +2 -2
  58. package/components/Compass/compass.css +320 -0
  59. package/components/Compass/compass.scss +350 -0
  60. package/components/DataList/data-list.css +34 -23
  61. package/components/DataList/data-list.scss +8 -2
  62. package/components/DescriptionList/description-list-order.scss +5 -1
  63. package/components/DescriptionList/description-list.css +7 -5
  64. package/components/DescriptionList/description-list.scss +5 -1
  65. package/components/Divider/divider.css +7 -5
  66. package/components/Drawer/drawer.css +220 -73
  67. package/components/Drawer/drawer.scss +189 -26
  68. package/components/DualListSelector/dual-list-selector.css +18 -12
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/ExpandableSection/expandable-section.css +21 -16
  71. package/components/ExpandableSection/expandable-section.scss +6 -3
  72. package/components/Form/form.css +2 -2
  73. package/components/Form/form.scss +2 -2
  74. package/components/FormControl/form-control.css +3 -3
  75. package/components/FormControl/form-control.scss +3 -3
  76. package/components/Hero/hero.css +74 -0
  77. package/components/Hero/hero.scss +86 -0
  78. package/components/JumpLinks/jump-links.css +16 -5
  79. package/components/JumpLinks/jump-links.scss +17 -3
  80. package/components/Label/label-group.css +2 -2
  81. package/components/Label/label-group.scss +2 -2
  82. package/components/Label/label.css +4 -3
  83. package/components/Login/login.css +58 -40
  84. package/components/Login/login.scss +7 -3
  85. package/components/Masthead/masthead.css +112 -16
  86. package/components/Masthead/masthead.scss +112 -1
  87. package/components/Menu/menu.css +49 -33
  88. package/components/Menu/menu.scss +26 -19
  89. package/components/MenuToggle/menu-toggle.css +35 -8
  90. package/components/MenuToggle/menu-toggle.scss +42 -8
  91. package/components/ModalBox/modal-box.css +9 -7
  92. package/components/ModalBox/modal-box.scss +2 -2
  93. package/components/Nav/nav.css +82 -11
  94. package/components/Nav/nav.scss +85 -5
  95. package/components/NotificationDrawer/notification-drawer.css +19 -9
  96. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  97. package/components/OverflowMenu/overflow-menu.css +16 -0
  98. package/components/OverflowMenu/overflow-menu.scss +20 -1
  99. package/components/Page/page.css +264 -27
  100. package/components/Page/page.scss +288 -14
  101. package/components/Pagination/pagination.scss +5 -1
  102. package/components/Panel/panel.css +14 -0
  103. package/components/Panel/panel.scss +18 -0
  104. package/components/Progress/progress.css +3 -1
  105. package/components/Progress/progress.scss +3 -1
  106. package/components/ProgressStepper/progress-stepper.scss +5 -1
  107. package/components/Sidebar/sidebar.css +1 -1
  108. package/components/Sidebar/sidebar.scss +7 -3
  109. package/components/Skeleton/skeleton.css +16 -15
  110. package/components/Slider/slider.css +32 -18
  111. package/components/Switch/switch.css +4 -2
  112. package/components/Switch/switch.scss +1 -1
  113. package/components/Table/table-grid.css +28 -36
  114. package/components/Table/table-grid.scss +4 -4
  115. package/components/Table/table-tree-view.css +4 -2
  116. package/components/Table/table.css +104 -57
  117. package/components/Table/table.scss +92 -37
  118. package/components/Tabs/tabs.css +51 -33
  119. package/components/Tabs/tabs.scss +54 -26
  120. package/components/TextInputGroup/text-input-group.css +2 -2
  121. package/components/TextInputGroup/text-input-group.scss +2 -2
  122. package/components/ToggleGroup/toggle-group.css +34 -17
  123. package/components/ToggleGroup/toggle-group.scss +36 -20
  124. package/components/Toolbar/toolbar.css +147 -15
  125. package/components/Toolbar/toolbar.scss +36 -8
  126. package/components/TreeView/tree-view.css +45 -14
  127. package/components/TreeView/tree-view.scss +32 -1
  128. package/components/Wizard/wizard.css +41 -19
  129. package/components/Wizard/wizard.scss +26 -6
  130. package/components/_index.css +2319 -771
  131. package/components/_index.scss +3 -1
  132. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  133. package/docs/components/Accordion/examples/Accordion.md +392 -30
  134. package/docs/components/ActionList/examples/ActionList.md +143 -11
  135. package/docs/components/Alert/examples/Alert.md +678 -54
  136. package/docs/components/Avatar/examples/Avatar.md +4 -4
  137. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  138. package/docs/components/Banner/examples/Banner.md +65 -5
  139. package/docs/components/Brand/examples/Brand.md +2 -2
  140. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  141. package/docs/components/Button/examples/Button.md +2362 -163
  142. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  143. package/docs/components/Card/examples/Card.md +335 -12
  144. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  145. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  146. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  147. package/docs/components/Compass/examples/Compass.css +17 -0
  148. package/docs/components/Compass/examples/Compass.md +119 -0
  149. package/docs/components/DataList/examples/DataList.md +627 -222
  150. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  151. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  152. package/docs/components/Divider/examples/Divider.md +2 -2
  153. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  154. package/docs/components/Drawer/examples/Drawer.md +355 -35
  155. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  156. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  157. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  158. package/docs/components/Form/examples/Form.md +78 -6
  159. package/docs/components/Hero/examples/Hero.md +25 -0
  160. package/docs/components/Hint/examples/Hint.md +39 -3
  161. package/docs/components/Icon/examples/Icon.md +105 -9
  162. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  163. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  164. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  165. package/docs/components/Label/examples/Label.md +2834 -218
  166. package/docs/components/Login/examples/Login.md +39 -3
  167. package/docs/components/Masthead/examples/masthead.md +80 -1
  168. package/docs/components/Menu/examples/Menu.md +1679 -133
  169. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  170. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  171. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  172. package/docs/components/Nav/examples/Navigation.md +798 -58
  173. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  174. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  175. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  176. package/docs/components/Page/examples/Page.md +133 -25
  177. package/docs/components/Pagination/examples/Pagination.md +796 -77
  178. package/docs/components/Panel/examples/Panel.md +12 -0
  179. package/docs/components/Popover/examples/Popover.md +286 -22
  180. package/docs/components/Progress/examples/Progress.md +91 -7
  181. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  182. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  183. package/docs/components/Slider/examples/Slider.md +52 -4
  184. package/docs/components/Table/examples/Table.css +2 -1
  185. package/docs/components/Table/examples/Table.md +7543 -653
  186. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  187. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  188. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  189. package/docs/components/Toolbar/examples/Toolbar.md +1101 -88
  190. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  191. package/docs/components/Wizard/examples/Wizard.md +828 -73
  192. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  193. package/docs/demos/Alert/examples/Alert.md +539 -164
  194. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  195. package/docs/demos/Banner/examples/Banner.md +290 -104
  196. package/docs/demos/Button/examples/Button.md +13 -1
  197. package/docs/demos/Card/examples/Card.md +1041 -134
  198. package/docs/demos/CardView/examples/CardView.md +569 -170
  199. package/docs/demos/Compass/examples/Compass.md +8009 -0
  200. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  201. package/docs/demos/DataList/examples/DataList.md +1300 -291
  202. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  203. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  204. package/docs/demos/Form/examples/BasicForms.md +273 -21
  205. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  206. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  207. package/docs/demos/Modal/examples/Modal.md +948 -321
  208. package/docs/demos/Nav/examples/Nav.md +3267 -499
  209. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  210. package/docs/demos/Page/examples/Page.md +2137 -773
  211. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  212. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  213. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  214. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  215. package/docs/demos/Table/examples/Table.md +11806 -2274
  216. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  217. package/docs/demos/Toolbar/examples/Toolbar.md +1811 -279
  218. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  219. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  220. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  221. package/docs/layouts/Flex/examples/Flex.css +3 -3
  222. package/docs/layouts/Flex/examples/Flex.md +3 -2
  223. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  224. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  225. package/docs/layouts/Grid/examples/Grid.css +1 -1
  226. package/docs/layouts/Grid/examples/Grid.md +6 -5
  227. package/docs/layouts/Level/examples/Level.css +3 -3
  228. package/docs/layouts/Level/examples/Level.md +2 -1
  229. package/docs/layouts/Split/examples/Split.css +1 -1
  230. package/docs/layouts/Split/examples/Split.md +2 -1
  231. package/docs/layouts/Stack/examples/Stack.css +3 -3
  232. package/docs/layouts/Stack/examples/Stack.md +2 -1
  233. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  234. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  235. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  236. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  237. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  238. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  239. package/docs/utilities/Display/examples/Display.css +1 -1
  240. package/docs/utilities/Display/examples/Display.md +3 -2
  241. package/docs/utilities/Flex/examples/Flex.css +7 -7
  242. package/docs/utilities/Flex/examples/Flex.md +3 -2
  243. package/docs/utilities/Float/examples/Float.css +2 -2
  244. package/docs/utilities/Float/examples/Float.md +3 -2
  245. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  246. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  247. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  248. package/docs/utilities/Text/examples/Text.md +5 -4
  249. package/icons/PfIcons/add-circle-o.svg +4 -0
  250. package/icons/PfIcons/ansible-tower.svg +4 -0
  251. package/icons/PfIcons/applications.svg +4 -0
  252. package/icons/PfIcons/arrow.svg +4 -0
  253. package/icons/PfIcons/asleep.svg +4 -0
  254. package/icons/PfIcons/attention-bell.svg +4 -0
  255. package/icons/PfIcons/automation.svg +4 -0
  256. package/icons/PfIcons/bell.svg +4 -0
  257. package/icons/PfIcons/blueprint.svg +4 -0
  258. package/icons/PfIcons/build.svg +4 -0
  259. package/icons/PfIcons/builder-image.svg +4 -0
  260. package/icons/PfIcons/bundle.svg +4 -0
  261. package/icons/PfIcons/catalog.svg +4 -0
  262. package/icons/PfIcons/chat.svg +4 -0
  263. package/icons/PfIcons/close.svg +4 -0
  264. package/icons/PfIcons/cloud-security.svg +4 -0
  265. package/icons/PfIcons/cloud-tenant.svg +4 -0
  266. package/icons/PfIcons/cluster.svg +4 -0
  267. package/icons/PfIcons/connected.svg +4 -0
  268. package/icons/PfIcons/container-node.svg +4 -0
  269. package/icons/PfIcons/cpu.svg +4 -0
  270. package/icons/PfIcons/critical-risk.svg +4 -0
  271. package/icons/PfIcons/data-processor.svg +4 -0
  272. package/icons/PfIcons/data-sink.svg +4 -0
  273. package/icons/PfIcons/data-source.svg +4 -0
  274. package/icons/PfIcons/degraded.svg +4 -0
  275. package/icons/PfIcons/disconnected.svg +4 -0
  276. package/icons/PfIcons/domain.svg +4 -0
  277. package/icons/PfIcons/edit.svg +4 -0
  278. package/icons/PfIcons/enhancement.svg +4 -0
  279. package/icons/PfIcons/enterprise.svg +4 -0
  280. package/icons/PfIcons/equalizer.svg +4 -0
  281. package/icons/PfIcons/error-circle-o.svg +4 -0
  282. package/icons/PfIcons/export.svg +4 -0
  283. package/icons/PfIcons/filter.svg +4 -0
  284. package/icons/PfIcons/flavor.svg +4 -0
  285. package/icons/PfIcons/folder-close.svg +4 -0
  286. package/icons/PfIcons/folder-open.svg +4 -0
  287. package/icons/PfIcons/globe-route.svg +4 -0
  288. package/icons/PfIcons/help.svg +4 -0
  289. package/icons/PfIcons/history.svg +4 -0
  290. package/icons/PfIcons/home.svg +4 -0
  291. package/icons/PfIcons/import.svg +4 -0
  292. package/icons/PfIcons/in-progress.svg +4 -0
  293. package/icons/PfIcons/info.svg +4 -0
  294. package/icons/PfIcons/infrastructure.svg +4 -0
  295. package/icons/PfIcons/integration.svg +4 -0
  296. package/icons/PfIcons/key.svg +4 -0
  297. package/icons/PfIcons/locked.svg +4 -0
  298. package/icons/PfIcons/maintenance.svg +4 -0
  299. package/icons/PfIcons/memory.svg +4 -0
  300. package/icons/PfIcons/messages.svg +4 -0
  301. package/icons/PfIcons/middleware.svg +4 -0
  302. package/icons/PfIcons/migration.svg +4 -0
  303. package/icons/PfIcons/module.svg +4 -0
  304. package/icons/PfIcons/monitoring.svg +4 -0
  305. package/icons/PfIcons/multicluster.svg +4 -0
  306. package/icons/PfIcons/namespaces.svg +4 -0
  307. package/icons/PfIcons/network.svg +4 -0
  308. package/icons/PfIcons/new-process.svg +4 -0
  309. package/icons/PfIcons/not-started.svg +4 -0
  310. package/icons/PfIcons/off.svg +4 -0
  311. package/icons/PfIcons/ok.svg +4 -0
  312. package/icons/PfIcons/on-running.svg +4 -0
  313. package/icons/PfIcons/on.svg +4 -0
  314. package/icons/PfIcons/open-drawer-right.svg +4 -0
  315. package/icons/PfIcons/openshift.svg +4 -0
  316. package/icons/PfIcons/openstack.svg +4 -0
  317. package/icons/PfIcons/optimize.svg +4 -0
  318. package/icons/PfIcons/orders.svg +4 -0
  319. package/icons/PfIcons/os-image.svg +4 -0
  320. package/icons/PfIcons/package.svg +4 -0
  321. package/icons/PfIcons/panel-close.svg +4 -0
  322. package/icons/PfIcons/panel-open.svg +4 -0
  323. package/icons/PfIcons/paused.svg +4 -0
  324. package/icons/PfIcons/pending.svg +4 -0
  325. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  326. package/icons/PfIcons/pficon-history.svg +4 -0
  327. package/icons/PfIcons/pficon-network-range.svg +4 -0
  328. package/icons/PfIcons/pficon-satellite.svg +4 -0
  329. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  330. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  331. package/icons/PfIcons/pficon-template.svg +4 -0
  332. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  333. package/icons/PfIcons/plugged.svg +4 -0
  334. package/icons/PfIcons/port.svg +4 -0
  335. package/icons/PfIcons/print.svg +4 -0
  336. package/icons/PfIcons/private.svg +4 -0
  337. package/icons/PfIcons/process-automation.svg +4 -0
  338. package/icons/PfIcons/project.svg +4 -0
  339. package/icons/PfIcons/rebalance.svg +4 -0
  340. package/icons/PfIcons/rebooting.svg +4 -0
  341. package/icons/PfIcons/regions.svg +4 -0
  342. package/icons/PfIcons/registry.svg +4 -0
  343. package/icons/PfIcons/remove2.svg +4 -0
  344. package/icons/PfIcons/replicator.svg +4 -0
  345. package/icons/PfIcons/repository.svg +4 -0
  346. package/icons/PfIcons/resource-pool.svg +4 -0
  347. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  348. package/icons/PfIcons/resources-almost-full.svg +4 -0
  349. package/icons/PfIcons/resources-empty.svg +4 -0
  350. package/icons/PfIcons/resources-full.svg +4 -0
  351. package/icons/PfIcons/running.svg +4 -0
  352. package/icons/PfIcons/save.svg +4 -0
  353. package/icons/PfIcons/screen.svg +4 -0
  354. package/icons/PfIcons/security.svg +4 -0
  355. package/icons/PfIcons/server-group.svg +4 -0
  356. package/icons/PfIcons/server.svg +4 -0
  357. package/icons/PfIcons/service-catalog.svg +4 -0
  358. package/icons/PfIcons/service.svg +4 -0
  359. package/icons/PfIcons/services.svg +4 -0
  360. package/icons/PfIcons/severity-critical.svg +4 -0
  361. package/icons/PfIcons/severity-important.svg +4 -0
  362. package/icons/PfIcons/severity-minor.svg +4 -0
  363. package/icons/PfIcons/severity-moderate.svg +4 -0
  364. package/icons/PfIcons/severity-none.svg +4 -0
  365. package/icons/PfIcons/severity-undefined.svg +4 -0
  366. package/icons/PfIcons/spinner.svg +4 -0
  367. package/icons/PfIcons/spinner2.svg +4 -0
  368. package/icons/PfIcons/storage-domain.svg +4 -0
  369. package/icons/PfIcons/task.svg +4 -0
  370. package/icons/PfIcons/tenant.svg +4 -0
  371. package/icons/PfIcons/thumb-tack.svg +4 -0
  372. package/icons/PfIcons/topology.svg +4 -0
  373. package/icons/PfIcons/treeview.svg +4 -0
  374. package/icons/PfIcons/trend-down.svg +4 -0
  375. package/icons/PfIcons/trend-up.svg +4 -0
  376. package/icons/PfIcons/unknown.svg +4 -0
  377. package/icons/PfIcons/unlocked.svg +4 -0
  378. package/icons/PfIcons/unplugged.svg +4 -0
  379. package/icons/PfIcons/user.svg +4 -0
  380. package/icons/PfIcons/users.svg +4 -0
  381. package/icons/PfIcons/virtual-machine.svg +4 -0
  382. package/icons/PfIcons/volume.svg +4 -0
  383. package/icons/PfIcons/warning-triangle.svg +4 -0
  384. package/icons/PfIcons/zone.svg +4 -0
  385. package/layouts/Flex/flex.scss +83 -19
  386. package/layouts/Gallery/gallery.css +6 -2
  387. package/layouts/_index.css +6 -2
  388. package/package.json +54 -16
  389. package/patternfly-base-no-globals.css +969 -489
  390. package/patternfly-base.css +976 -489
  391. package/patternfly-charts.css +3 -3
  392. package/patternfly-no-globals.css +3186 -1137
  393. package/patternfly.css +3193 -1137
  394. package/patternfly.min.css +1 -1
  395. package/patternfly.min.css.map +1 -1
  396. package/patternfly.scss +29 -0
  397. package/sass-utilities/functions.scss +32 -25
  398. package/sass-utilities/mixins.scss +52 -21
  399. package/sass-utilities/namespaces-components.scss +6 -0
  400. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -15,7 +15,8 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="nav-basic-example-masthead">
18
+
19
+ <header class="pf-v6-c-masthead" id="nav-basic-example-docked">
19
20
  <div class="pf-v6-c-masthead__main">
20
21
  <span class="pf-v6-c-masthead__toggle">
21
22
  <button
@@ -57,7 +58,7 @@ section: components
57
58
  y1="2.25860997e-13%"
58
59
  x2="32%"
59
60
  y2="100%"
60
- id="linearGradient-nav-basic-example-masthead"
61
+ id="linearGradient-nav-basic-example-docked"
61
62
  >
62
63
  <stop stop-color="#2B9AF3" offset="0%" />
63
64
  <stop
@@ -111,11 +112,11 @@ section: components
111
112
  />
112
113
  <path
113
114
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-nav-basic-example-masthead)"
115
+ fill="url(#linearGradient-nav-basic-example-docked)"
115
116
  />
116
117
  <path
117
118
  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"
118
- fill="url(#linearGradient-nav-basic-example-masthead)"
119
+ fill="url(#linearGradient-nav-basic-example-docked)"
119
120
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
121
  />
121
122
  </g>
@@ -127,7 +128,7 @@ section: components
127
128
  <div class="pf-v6-c-masthead__content">
128
129
  <div
129
130
  class="pf-v6-c-toolbar pf-m-static"
130
- id="nav-basic-example-masthead-toolbar"
131
+ id="nav-basic-example-docked-toolbar"
131
132
  >
132
133
  <div class="pf-v6-c-toolbar__content">
133
134
  <div class="pf-v6-c-toolbar__content-section">
@@ -145,7 +146,19 @@ section: components
145
146
  aria-label="Application launcher"
146
147
  >
147
148
  <span class="pf-v6-c-menu-toggle__icon">
148
- <i class="fas fa-th" aria-hidden="true"></i>
149
+ <svg
150
+ class="pf-v6-svg"
151
+ viewBox="0 0 512 512"
152
+ fill="currentColor"
153
+ aria-hidden="true"
154
+ role="img"
155
+ width="1em"
156
+ height="1em"
157
+ >
158
+ <path
159
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
160
+ />
161
+ </svg>
149
162
  </span>
150
163
  </button>
151
164
  </div>
@@ -157,7 +170,19 @@ section: components
157
170
  aria-label="Settings"
158
171
  >
159
172
  <span class="pf-v6-c-menu-toggle__icon">
160
- <i class="fas fa-cog" aria-hidden="true"></i>
173
+ <svg
174
+ class="pf-v6-svg"
175
+ viewBox="0 0 32 32"
176
+ fill="currentColor"
177
+ aria-hidden="true"
178
+ role="img"
179
+ width="1em"
180
+ height="1em"
181
+ >
182
+ <path
183
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
184
+ />
185
+ </svg>
161
186
  </span>
162
187
  </button>
163
188
  </div>
@@ -169,7 +194,19 @@ section: components
169
194
  aria-label="Help"
170
195
  >
171
196
  <span class="pf-v6-c-menu-toggle__icon">
172
- <i class="fas fa-question-circle" aria-hidden="true"></i>
197
+ <svg
198
+ class="pf-v6-svg"
199
+ viewBox="0 0 512 512"
200
+ fill="currentColor"
201
+ aria-hidden="true"
202
+ role="img"
203
+ width="1em"
204
+ height="1em"
205
+ >
206
+ <path
207
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
208
+ />
209
+ </svg>
173
210
  </span>
174
211
  </button>
175
212
  </div>
@@ -183,7 +220,19 @@ section: components
183
220
  aria-label="Actions"
184
221
  >
185
222
  <span class="pf-v6-c-menu-toggle__icon">
186
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
223
+ <svg
224
+ class="pf-v6-svg"
225
+ viewBox="0 0 32 32"
226
+ fill="currentColor"
227
+ aria-hidden="true"
228
+ role="img"
229
+ width="1em"
230
+ height="1em"
231
+ >
232
+ <path
233
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
234
+ />
235
+ </svg>
187
236
  </span>
188
237
  </button>
189
238
  </div>
@@ -194,44 +243,46 @@ section: components
194
243
  </div>
195
244
  </header>
196
245
  <div class="pf-v6-c-page__sidebar">
197
- <div class="pf-v6-c-page__sidebar-body">
198
- <nav
199
- class="pf-v6-c-nav"
200
- id="nav-basic-example-primary-nav"
201
- aria-label="Global"
202
- >
203
- <ul class="pf-v6-c-nav__list" role="list">
204
- <li class="pf-v6-c-nav__item">
205
- <a href="#" class="pf-v6-c-nav__link">
206
- <span class="pf-v6-c-nav__link-text">System panel</span>
207
- </a>
208
- </li>
209
- <li class="pf-v6-c-nav__item">
210
- <a
211
- href="#"
212
- class="pf-v6-c-nav__link pf-m-current"
213
- aria-current="page"
214
- >
215
- <span class="pf-v6-c-nav__link-text">Policy</span>
216
- </a>
217
- </li>
218
- <li class="pf-v6-c-nav__item">
219
- <a href="#" class="pf-v6-c-nav__link">
220
- <span class="pf-v6-c-nav__link-text">Authentication</span>
221
- </a>
222
- </li>
223
- <li class="pf-v6-c-nav__item">
224
- <a href="#" class="pf-v6-c-nav__link">
225
- <span class="pf-v6-c-nav__link-text">Network services</span>
226
- </a>
227
- </li>
228
- <li class="pf-v6-c-nav__item">
229
- <a href="#" class="pf-v6-c-nav__link">
230
- <span class="pf-v6-c-nav__link-text">Server</span>
231
- </a>
232
- </li>
233
- </ul>
234
- </nav>
246
+ <div class="pf-v6-c-page__sidebar-main">
247
+ <div class="pf-v6-c-page__sidebar-body">
248
+ <nav
249
+ class="pf-v6-c-nav"
250
+ id="nav-basic-example-primary-nav"
251
+ aria-label="Global"
252
+ >
253
+ <ul class="pf-v6-c-nav__list" role="list">
254
+ <li class="pf-v6-c-nav__item">
255
+ <a href="#" class="pf-v6-c-nav__link">
256
+ <span class="pf-v6-c-nav__link-text">System panel</span>
257
+ </a>
258
+ </li>
259
+ <li class="pf-v6-c-nav__item">
260
+ <a
261
+ href="#"
262
+ class="pf-v6-c-nav__link pf-m-current"
263
+ aria-current="page"
264
+ >
265
+ <span class="pf-v6-c-nav__link-text">Policy</span>
266
+ </a>
267
+ </li>
268
+ <li class="pf-v6-c-nav__item">
269
+ <a href="#" class="pf-v6-c-nav__link">
270
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
271
+ </a>
272
+ </li>
273
+ <li class="pf-v6-c-nav__item">
274
+ <a href="#" class="pf-v6-c-nav__link">
275
+ <span class="pf-v6-c-nav__link-text">Network services</span>
276
+ </a>
277
+ </li>
278
+ <li class="pf-v6-c-nav__item">
279
+ <a href="#" class="pf-v6-c-nav__link">
280
+ <span class="pf-v6-c-nav__link-text">Server</span>
281
+ </a>
282
+ </li>
283
+ </ul>
284
+ </nav>
285
+ </div>
235
286
  </div>
236
287
  </div>
237
288
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +300,57 @@ section: components
249
300
  </li>
250
301
  <li class="pf-v6-c-breadcrumb__item">
251
302
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
303
+ <svg
304
+ class="pf-v6-svg"
305
+ viewBox="0 0 20 20"
306
+ fill="currentColor"
307
+ aria-hidden="true"
308
+ role="img"
309
+ width="1em"
310
+ height="1em"
311
+ >
312
+ <path
313
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
314
+ />
315
+ </svg>
253
316
  </span>
254
317
 
255
318
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
319
  </li>
257
320
  <li class="pf-v6-c-breadcrumb__item">
258
321
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
322
+ <svg
323
+ class="pf-v6-svg"
324
+ viewBox="0 0 20 20"
325
+ fill="currentColor"
326
+ aria-hidden="true"
327
+ role="img"
328
+ width="1em"
329
+ height="1em"
330
+ >
331
+ <path
332
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
333
+ />
334
+ </svg>
260
335
  </span>
261
336
 
262
337
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
338
  </li>
264
339
  <li class="pf-v6-c-breadcrumb__item">
265
340
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
341
+ <svg
342
+ class="pf-v6-svg"
343
+ viewBox="0 0 20 20"
344
+ fill="currentColor"
345
+ aria-hidden="true"
346
+ role="img"
347
+ width="1em"
348
+ height="1em"
349
+ >
350
+ <path
351
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
352
+ />
353
+ </svg>
267
354
  </span>
268
355
 
269
356
  <a
@@ -276,9 +363,15 @@ section: components
276
363
  </nav>
277
364
  </div>
278
365
  </section>
279
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
366
+ <section
367
+ class="pf-v6-c-page__main-section pf-m-limit-width"
368
+ aria-labelledby="main-title"
369
+ >
280
370
  <div class="pf-v6-c-page__main-body">
281
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
371
+ <h1
372
+ class="pf-v6-c-content--h1 pf-m-page-title"
373
+ id="main-title"
374
+ >Main title</h1>
282
375
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
283
376
  </div>
284
377
  </section>
@@ -336,7 +429,8 @@ section: components
336
429
  <span class="pf-v6-c-button__text">Skip to content</span>
337
430
  </a>
338
431
  </div>
339
- <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-masthead">
432
+
433
+ <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-docked">
340
434
  <div class="pf-v6-c-masthead__main">
341
435
  <span class="pf-v6-c-masthead__toggle">
342
436
  <button
@@ -378,7 +472,7 @@ section: components
378
472
  y1="2.25860997e-13%"
379
473
  x2="32%"
380
474
  y2="100%"
381
- id="linearGradient-nav-grouped-nav-example-masthead"
475
+ id="linearGradient-nav-grouped-nav-example-docked"
382
476
  >
383
477
  <stop stop-color="#2B9AF3" offset="0%" />
384
478
  <stop
@@ -432,11 +526,11 @@ section: components
432
526
  />
433
527
  <path
434
528
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
435
- fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
529
+ fill="url(#linearGradient-nav-grouped-nav-example-docked)"
436
530
  />
437
531
  <path
438
532
  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"
439
- fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
533
+ fill="url(#linearGradient-nav-grouped-nav-example-docked)"
440
534
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
441
535
  />
442
536
  </g>
@@ -448,7 +542,7 @@ section: components
448
542
  <div class="pf-v6-c-masthead__content">
449
543
  <div
450
544
  class="pf-v6-c-toolbar pf-m-static"
451
- id="nav-grouped-nav-example-masthead-toolbar"
545
+ id="nav-grouped-nav-example-docked-toolbar"
452
546
  >
453
547
  <div class="pf-v6-c-toolbar__content">
454
548
  <div class="pf-v6-c-toolbar__content-section">
@@ -466,7 +560,19 @@ section: components
466
560
  aria-label="Application launcher"
467
561
  >
468
562
  <span class="pf-v6-c-menu-toggle__icon">
469
- <i class="fas fa-th" aria-hidden="true"></i>
563
+ <svg
564
+ class="pf-v6-svg"
565
+ viewBox="0 0 512 512"
566
+ fill="currentColor"
567
+ aria-hidden="true"
568
+ role="img"
569
+ width="1em"
570
+ height="1em"
571
+ >
572
+ <path
573
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
574
+ />
575
+ </svg>
470
576
  </span>
471
577
  </button>
472
578
  </div>
@@ -478,7 +584,19 @@ section: components
478
584
  aria-label="Settings"
479
585
  >
480
586
  <span class="pf-v6-c-menu-toggle__icon">
481
- <i class="fas fa-cog" aria-hidden="true"></i>
587
+ <svg
588
+ class="pf-v6-svg"
589
+ viewBox="0 0 32 32"
590
+ fill="currentColor"
591
+ aria-hidden="true"
592
+ role="img"
593
+ width="1em"
594
+ height="1em"
595
+ >
596
+ <path
597
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
598
+ />
599
+ </svg>
482
600
  </span>
483
601
  </button>
484
602
  </div>
@@ -490,7 +608,19 @@ section: components
490
608
  aria-label="Help"
491
609
  >
492
610
  <span class="pf-v6-c-menu-toggle__icon">
493
- <i class="fas fa-question-circle" aria-hidden="true"></i>
611
+ <svg
612
+ class="pf-v6-svg"
613
+ viewBox="0 0 512 512"
614
+ fill="currentColor"
615
+ aria-hidden="true"
616
+ role="img"
617
+ width="1em"
618
+ height="1em"
619
+ >
620
+ <path
621
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
622
+ />
623
+ </svg>
494
624
  </span>
495
625
  </button>
496
626
  </div>
@@ -504,7 +634,19 @@ section: components
504
634
  aria-label="Actions"
505
635
  >
506
636
  <span class="pf-v6-c-menu-toggle__icon">
507
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
637
+ <svg
638
+ class="pf-v6-svg"
639
+ viewBox="0 0 32 32"
640
+ fill="currentColor"
641
+ aria-hidden="true"
642
+ role="img"
643
+ width="1em"
644
+ height="1em"
645
+ >
646
+ <path
647
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
648
+ />
649
+ </svg>
508
650
  </span>
509
651
  </button>
510
652
  </div>
@@ -515,76 +657,84 @@ section: components
515
657
  </div>
516
658
  </header>
517
659
  <div class="pf-v6-c-page__sidebar">
518
- <div class="pf-v6-c-page__sidebar-body">
519
- <nav
520
- class="pf-v6-c-nav"
521
- id="nav-grouped-nav-example-grouped-nav"
522
- aria-label="Global"
523
- >
524
- <section class="pf-v6-c-nav__section" aria-labelledby="grouped-title1">
525
- <h2
526
- class="pf-v6-c-nav__section-title"
527
- id="grouped-title1"
528
- >System panel</h2>
529
- <ul class="pf-v6-c-nav__list" role="list">
530
- <li class="pf-v6-c-nav__item">
531
- <a href="#" class="pf-v6-c-nav__link">
532
- <span class="pf-v6-c-nav__link-text">Overview</span>
533
- </a>
534
- </li>
535
- <li class="pf-v6-c-nav__item">
536
- <a href="#" class="pf-v6-c-nav__link">
537
- <span class="pf-v6-c-nav__link-text">Resource usage</span>
538
- </a>
539
- </li>
540
- <li class="pf-v6-c-nav__item">
541
- <a
542
- href="#"
543
- class="pf-v6-c-nav__link pf-m-current"
544
- aria-current="page"
545
- >
546
- <span class="pf-v6-c-nav__link-text">Hypervisors</span>
547
- </a>
548
- </li>
549
- <li class="pf-v6-c-nav__item">
550
- <a href="#" class="pf-v6-c-nav__link">
551
- <span class="pf-v6-c-nav__link-text">Instances</span>
552
- </a>
553
- </li>
554
- <li class="pf-v6-c-nav__item">
555
- <a href="#" class="pf-v6-c-nav__link">
556
- <span class="pf-v6-c-nav__link-text">Volumes</span>
557
- </a>
558
- </li>
559
- <li class="pf-v6-c-nav__item">
560
- <a href="#" class="pf-v6-c-nav__link">
561
- <span class="pf-v6-c-nav__link-text">Networks</span>
562
- </a>
563
- </li>
564
- </ul>
565
- </section>
660
+ <div class="pf-v6-c-page__sidebar-main">
661
+ <div class="pf-v6-c-page__sidebar-body">
662
+ <nav
663
+ class="pf-v6-c-nav"
664
+ id="nav-grouped-nav-example-grouped-nav"
665
+ aria-label="Global"
666
+ >
667
+ <section
668
+ class="pf-v6-c-nav__section"
669
+ aria-labelledby="grouped-title1"
670
+ >
671
+ <h2
672
+ class="pf-v6-c-nav__section-title"
673
+ id="grouped-title1"
674
+ >System panel</h2>
675
+ <ul class="pf-v6-c-nav__list" role="list">
676
+ <li class="pf-v6-c-nav__item">
677
+ <a href="#" class="pf-v6-c-nav__link">
678
+ <span class="pf-v6-c-nav__link-text">Overview</span>
679
+ </a>
680
+ </li>
681
+ <li class="pf-v6-c-nav__item">
682
+ <a href="#" class="pf-v6-c-nav__link">
683
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
684
+ </a>
685
+ </li>
686
+ <li class="pf-v6-c-nav__item">
687
+ <a
688
+ href="#"
689
+ class="pf-v6-c-nav__link pf-m-current"
690
+ aria-current="page"
691
+ >
692
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
693
+ </a>
694
+ </li>
695
+ <li class="pf-v6-c-nav__item">
696
+ <a href="#" class="pf-v6-c-nav__link">
697
+ <span class="pf-v6-c-nav__link-text">Instances</span>
698
+ </a>
699
+ </li>
700
+ <li class="pf-v6-c-nav__item">
701
+ <a href="#" class="pf-v6-c-nav__link">
702
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
703
+ </a>
704
+ </li>
705
+ <li class="pf-v6-c-nav__item">
706
+ <a href="#" class="pf-v6-c-nav__link">
707
+ <span class="pf-v6-c-nav__link-text">Networks</span>
708
+ </a>
709
+ </li>
710
+ </ul>
711
+ </section>
566
712
 
567
- <section class="pf-v6-c-nav__section" aria-labelledby="grouped-title2">
568
- <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Policy</h2>
569
- <ul class="pf-v6-c-nav__list" role="list">
570
- <li class="pf-v6-c-nav__item">
571
- <a href="#" class="pf-v6-c-nav__link">
572
- <span class="pf-v6-c-nav__link-text">Hosts</span>
573
- </a>
574
- </li>
575
- <li class="pf-v6-c-nav__item">
576
- <a href="#" class="pf-v6-c-nav__link">
577
- <span class="pf-v6-c-nav__link-text">Virtual machines</span>
578
- </a>
579
- </li>
580
- <li class="pf-v6-c-nav__item">
581
- <a href="#" class="pf-v6-c-nav__link">
582
- <span class="pf-v6-c-nav__link-text">Storage</span>
583
- </a>
584
- </li>
585
- </ul>
586
- </section>
587
- </nav>
713
+ <section
714
+ class="pf-v6-c-nav__section"
715
+ aria-labelledby="grouped-title2"
716
+ >
717
+ <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Policy</h2>
718
+ <ul class="pf-v6-c-nav__list" role="list">
719
+ <li class="pf-v6-c-nav__item">
720
+ <a href="#" class="pf-v6-c-nav__link">
721
+ <span class="pf-v6-c-nav__link-text">Hosts</span>
722
+ </a>
723
+ </li>
724
+ <li class="pf-v6-c-nav__item">
725
+ <a href="#" class="pf-v6-c-nav__link">
726
+ <span class="pf-v6-c-nav__link-text">Virtual machines</span>
727
+ </a>
728
+ </li>
729
+ <li class="pf-v6-c-nav__item">
730
+ <a href="#" class="pf-v6-c-nav__link">
731
+ <span class="pf-v6-c-nav__link-text">Storage</span>
732
+ </a>
733
+ </li>
734
+ </ul>
735
+ </section>
736
+ </nav>
737
+ </div>
588
738
  </div>
589
739
  </div>
590
740
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -602,21 +752,57 @@ section: components
602
752
  </li>
603
753
  <li class="pf-v6-c-breadcrumb__item">
604
754
  <span class="pf-v6-c-breadcrumb__item-divider">
605
- <i class="fas fa-angle-right" aria-hidden="true"></i>
755
+ <svg
756
+ class="pf-v6-svg"
757
+ viewBox="0 0 20 20"
758
+ fill="currentColor"
759
+ aria-hidden="true"
760
+ role="img"
761
+ width="1em"
762
+ height="1em"
763
+ >
764
+ <path
765
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
766
+ />
767
+ </svg>
606
768
  </span>
607
769
 
608
770
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
609
771
  </li>
610
772
  <li class="pf-v6-c-breadcrumb__item">
611
773
  <span class="pf-v6-c-breadcrumb__item-divider">
612
- <i class="fas fa-angle-right" aria-hidden="true"></i>
774
+ <svg
775
+ class="pf-v6-svg"
776
+ viewBox="0 0 20 20"
777
+ fill="currentColor"
778
+ aria-hidden="true"
779
+ role="img"
780
+ width="1em"
781
+ height="1em"
782
+ >
783
+ <path
784
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
785
+ />
786
+ </svg>
613
787
  </span>
614
788
 
615
789
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
616
790
  </li>
617
791
  <li class="pf-v6-c-breadcrumb__item">
618
792
  <span class="pf-v6-c-breadcrumb__item-divider">
619
- <i class="fas fa-angle-right" aria-hidden="true"></i>
793
+ <svg
794
+ class="pf-v6-svg"
795
+ viewBox="0 0 20 20"
796
+ fill="currentColor"
797
+ aria-hidden="true"
798
+ role="img"
799
+ width="1em"
800
+ height="1em"
801
+ >
802
+ <path
803
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
804
+ />
805
+ </svg>
620
806
  </span>
621
807
 
622
808
  <a
@@ -629,9 +815,15 @@ section: components
629
815
  </nav>
630
816
  </div>
631
817
  </section>
632
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
818
+ <section
819
+ class="pf-v6-c-page__main-section pf-m-limit-width"
820
+ aria-labelledby="main-title"
821
+ >
633
822
  <div class="pf-v6-c-page__main-body">
634
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
823
+ <h1
824
+ class="pf-v6-c-content--h1 pf-m-page-title"
825
+ id="main-title"
826
+ >Main title</h1>
635
827
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
636
828
  </div>
637
829
  </section>
@@ -689,7 +881,8 @@ section: components
689
881
  <span class="pf-v6-c-button__text">Skip to content</span>
690
882
  </a>
691
883
  </div>
692
- <header class="pf-v6-c-masthead" id="nav-expandable-example-masthead">
884
+
885
+ <header class="pf-v6-c-masthead" id="nav-expandable-example-docked">
693
886
  <div class="pf-v6-c-masthead__main">
694
887
  <span class="pf-v6-c-masthead__toggle">
695
888
  <button
@@ -731,7 +924,7 @@ section: components
731
924
  y1="2.25860997e-13%"
732
925
  x2="32%"
733
926
  y2="100%"
734
- id="linearGradient-nav-expandable-example-masthead"
927
+ id="linearGradient-nav-expandable-example-docked"
735
928
  >
736
929
  <stop stop-color="#2B9AF3" offset="0%" />
737
930
  <stop
@@ -785,11 +978,11 @@ section: components
785
978
  />
786
979
  <path
787
980
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
788
- fill="url(#linearGradient-nav-expandable-example-masthead)"
981
+ fill="url(#linearGradient-nav-expandable-example-docked)"
789
982
  />
790
983
  <path
791
984
  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"
792
- fill="url(#linearGradient-nav-expandable-example-masthead)"
985
+ fill="url(#linearGradient-nav-expandable-example-docked)"
793
986
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
794
987
  />
795
988
  </g>
@@ -801,7 +994,7 @@ section: components
801
994
  <div class="pf-v6-c-masthead__content">
802
995
  <div
803
996
  class="pf-v6-c-toolbar pf-m-static"
804
- id="nav-expandable-example-masthead-toolbar"
997
+ id="nav-expandable-example-docked-toolbar"
805
998
  >
806
999
  <div class="pf-v6-c-toolbar__content">
807
1000
  <div class="pf-v6-c-toolbar__content-section">
@@ -819,7 +1012,19 @@ section: components
819
1012
  aria-label="Application launcher"
820
1013
  >
821
1014
  <span class="pf-v6-c-menu-toggle__icon">
822
- <i class="fas fa-th" aria-hidden="true"></i>
1015
+ <svg
1016
+ class="pf-v6-svg"
1017
+ viewBox="0 0 512 512"
1018
+ fill="currentColor"
1019
+ aria-hidden="true"
1020
+ role="img"
1021
+ width="1em"
1022
+ height="1em"
1023
+ >
1024
+ <path
1025
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
1026
+ />
1027
+ </svg>
823
1028
  </span>
824
1029
  </button>
825
1030
  </div>
@@ -831,7 +1036,19 @@ section: components
831
1036
  aria-label="Settings"
832
1037
  >
833
1038
  <span class="pf-v6-c-menu-toggle__icon">
834
- <i class="fas fa-cog" aria-hidden="true"></i>
1039
+ <svg
1040
+ class="pf-v6-svg"
1041
+ viewBox="0 0 32 32"
1042
+ fill="currentColor"
1043
+ aria-hidden="true"
1044
+ role="img"
1045
+ width="1em"
1046
+ height="1em"
1047
+ >
1048
+ <path
1049
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1050
+ />
1051
+ </svg>
835
1052
  </span>
836
1053
  </button>
837
1054
  </div>
@@ -843,7 +1060,19 @@ section: components
843
1060
  aria-label="Help"
844
1061
  >
845
1062
  <span class="pf-v6-c-menu-toggle__icon">
846
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1063
+ <svg
1064
+ class="pf-v6-svg"
1065
+ viewBox="0 0 512 512"
1066
+ fill="currentColor"
1067
+ aria-hidden="true"
1068
+ role="img"
1069
+ width="1em"
1070
+ height="1em"
1071
+ >
1072
+ <path
1073
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1074
+ />
1075
+ </svg>
847
1076
  </span>
848
1077
  </button>
849
1078
  </div>
@@ -857,7 +1086,19 @@ section: components
857
1086
  aria-label="Actions"
858
1087
  >
859
1088
  <span class="pf-v6-c-menu-toggle__icon">
860
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1089
+ <svg
1090
+ class="pf-v6-svg"
1091
+ viewBox="0 0 32 32"
1092
+ fill="currentColor"
1093
+ aria-hidden="true"
1094
+ role="img"
1095
+ width="1em"
1096
+ height="1em"
1097
+ >
1098
+ <path
1099
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1100
+ />
1101
+ </svg>
861
1102
  </span>
862
1103
  </button>
863
1104
  </div>
@@ -868,136 +1109,174 @@ section: components
868
1109
  </div>
869
1110
  </header>
870
1111
  <div class="pf-v6-c-page__sidebar">
871
- <div class="pf-v6-c-page__sidebar-body">
872
- <nav
873
- class="pf-v6-c-nav"
874
- id="nav-expandable-example-expandable-nav"
875
- aria-label="Global"
876
- >
877
- <ul class="pf-v6-c-nav__list" role="list">
878
- <li class="pf-v6-c-nav__item pf-m-expanded">
879
- <button
880
- class="pf-v6-c-nav__link"
881
- aria-expanded="true"
882
- id="nav-expandable-example-expandable-nav-link1"
883
- >
884
- <span class="pf-v6-c-nav__link-text">System panel</span>
885
- <span class="pf-v6-c-nav__toggle">
886
- <span class="pf-v6-c-nav__toggle-icon">
887
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1112
+ <div class="pf-v6-c-page__sidebar-main">
1113
+ <div class="pf-v6-c-page__sidebar-body">
1114
+ <nav
1115
+ class="pf-v6-c-nav"
1116
+ id="nav-expandable-example-expandable-nav"
1117
+ aria-label="Global"
1118
+ >
1119
+ <ul class="pf-v6-c-nav__list" role="list">
1120
+ <li class="pf-v6-c-nav__item pf-m-expanded">
1121
+ <button
1122
+ class="pf-v6-c-nav__link"
1123
+ aria-expanded="true"
1124
+ id="nav-expandable-example-expandable-nav-link1"
1125
+ >
1126
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1127
+ <span class="pf-v6-c-nav__toggle">
1128
+ <span class="pf-v6-c-nav__toggle-icon">
1129
+ <svg
1130
+ class="pf-v6-svg"
1131
+ viewBox="0 0 20 20"
1132
+ fill="currentColor"
1133
+ aria-hidden="true"
1134
+ role="img"
1135
+ width="1em"
1136
+ height="1em"
1137
+ >
1138
+ <path
1139
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1140
+ />
1141
+ </svg>
1142
+ </span>
888
1143
  </span>
889
- </span>
890
- </button>
891
- <section
892
- class="pf-v6-c-nav__subnav"
893
- aria-labelledby="nav-expandable-example-expandable-nav-link1"
894
- >
895
- <ul class="pf-v6-c-nav__list" role="list">
896
- <li class="pf-v6-c-nav__item">
897
- <a href="#" class="pf-v6-c-nav__link">
898
- <span class="pf-v6-c-nav__link-text">Overview</span>
899
- </a>
900
- </li>
901
- <li class="pf-v6-c-nav__item">
902
- <a
903
- href="#"
904
- class="pf-v6-c-nav__link pf-m-current"
905
- aria-current="page"
906
- >
907
- <span class="pf-v6-c-nav__link-text">Resource usage</span>
908
- </a>
909
- </li>
910
- <li class="pf-v6-c-nav__item">
911
- <a href="#" class="pf-v6-c-nav__link">
912
- <span class="pf-v6-c-nav__link-text">Hypervisors</span>
913
- </a>
914
- </li>
915
- <li class="pf-v6-c-nav__item">
916
- <a href="#" class="pf-v6-c-nav__link">
917
- <span class="pf-v6-c-nav__link-text">Instances</span>
918
- </a>
919
- </li>
920
- <li class="pf-v6-c-nav__item">
921
- <a href="#" class="pf-v6-c-nav__link">
922
- <span class="pf-v6-c-nav__link-text">Volumes</span>
923
- </a>
924
- </li>
925
- <li class="pf-v6-c-nav__item">
926
- <a href="#" class="pf-v6-c-nav__link">
927
- <span class="pf-v6-c-nav__link-text">Networks</span>
928
- </a>
929
- </li>
930
- </ul>
931
- </section>
932
- </li>
933
- <li class="pf-v6-c-nav__item">
934
- <button
935
- class="pf-v6-c-nav__link"
936
- aria-expanded="false"
937
- id="nav-expandable-example-expandable-nav-link2"
938
- >
939
- <span class="pf-v6-c-nav__link-text">Policy</span>
940
- <span class="pf-v6-c-nav__toggle">
941
- <span class="pf-v6-c-nav__toggle-icon">
942
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1144
+ </button>
1145
+ <section
1146
+ class="pf-v6-c-nav__subnav"
1147
+ aria-labelledby="nav-expandable-example-expandable-nav-link1"
1148
+ >
1149
+ <ul class="pf-v6-c-nav__list" role="list">
1150
+ <li class="pf-v6-c-nav__item">
1151
+ <a href="#" class="pf-v6-c-nav__link">
1152
+ <span class="pf-v6-c-nav__link-text">Overview</span>
1153
+ </a>
1154
+ </li>
1155
+ <li class="pf-v6-c-nav__item">
1156
+ <a
1157
+ href="#"
1158
+ class="pf-v6-c-nav__link pf-m-current"
1159
+ aria-current="page"
1160
+ >
1161
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
1162
+ </a>
1163
+ </li>
1164
+ <li class="pf-v6-c-nav__item">
1165
+ <a href="#" class="pf-v6-c-nav__link">
1166
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
1167
+ </a>
1168
+ </li>
1169
+ <li class="pf-v6-c-nav__item">
1170
+ <a href="#" class="pf-v6-c-nav__link">
1171
+ <span class="pf-v6-c-nav__link-text">Instances</span>
1172
+ </a>
1173
+ </li>
1174
+ <li class="pf-v6-c-nav__item">
1175
+ <a href="#" class="pf-v6-c-nav__link">
1176
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
1177
+ </a>
1178
+ </li>
1179
+ <li class="pf-v6-c-nav__item">
1180
+ <a href="#" class="pf-v6-c-nav__link">
1181
+ <span class="pf-v6-c-nav__link-text">Networks</span>
1182
+ </a>
1183
+ </li>
1184
+ </ul>
1185
+ </section>
1186
+ </li>
1187
+ <li class="pf-v6-c-nav__item">
1188
+ <button
1189
+ class="pf-v6-c-nav__link"
1190
+ aria-expanded="false"
1191
+ id="nav-expandable-example-expandable-nav-link2"
1192
+ >
1193
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1194
+ <span class="pf-v6-c-nav__toggle">
1195
+ <span class="pf-v6-c-nav__toggle-icon">
1196
+ <svg
1197
+ class="pf-v6-svg"
1198
+ viewBox="0 0 20 20"
1199
+ fill="currentColor"
1200
+ aria-hidden="true"
1201
+ role="img"
1202
+ width="1em"
1203
+ height="1em"
1204
+ >
1205
+ <path
1206
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1207
+ />
1208
+ </svg>
1209
+ </span>
943
1210
  </span>
944
- </span>
945
- </button>
946
- <section
947
- class="pf-v6-c-nav__subnav"
948
- aria-labelledby="nav-expandable-example-expandable-nav-link2"
949
- hidden
950
- inert
951
- >
952
- <ul class="pf-v6-c-nav__list" role="list">
953
- <li class="pf-v6-c-nav__item">
954
- <a href="#" class="pf-v6-c-nav__link">
955
- <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
956
- </a>
957
- </li>
958
- <li class="pf-v6-c-nav__item">
959
- <a href="#" class="pf-v6-c-nav__link">
960
- <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
961
- </a>
962
- </li>
963
- </ul>
964
- </section>
965
- </li>
966
- <li class="pf-v6-c-nav__item">
967
- <button
968
- class="pf-v6-c-nav__link"
969
- aria-expanded="false"
970
- id="nav-expandable-example-expandable-nav-link3"
971
- >
972
- <span class="pf-v6-c-nav__link-text">Authentication</span>
973
- <span class="pf-v6-c-nav__toggle">
974
- <span class="pf-v6-c-nav__toggle-icon">
975
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1211
+ </button>
1212
+ <section
1213
+ class="pf-v6-c-nav__subnav"
1214
+ aria-labelledby="nav-expandable-example-expandable-nav-link2"
1215
+ hidden
1216
+ inert
1217
+ >
1218
+ <ul class="pf-v6-c-nav__list" role="list">
1219
+ <li class="pf-v6-c-nav__item">
1220
+ <a href="#" class="pf-v6-c-nav__link">
1221
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
1222
+ </a>
1223
+ </li>
1224
+ <li class="pf-v6-c-nav__item">
1225
+ <a href="#" class="pf-v6-c-nav__link">
1226
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1227
+ </a>
1228
+ </li>
1229
+ </ul>
1230
+ </section>
1231
+ </li>
1232
+ <li class="pf-v6-c-nav__item">
1233
+ <button
1234
+ class="pf-v6-c-nav__link"
1235
+ aria-expanded="false"
1236
+ id="nav-expandable-example-expandable-nav-link3"
1237
+ >
1238
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1239
+ <span class="pf-v6-c-nav__toggle">
1240
+ <span class="pf-v6-c-nav__toggle-icon">
1241
+ <svg
1242
+ class="pf-v6-svg"
1243
+ viewBox="0 0 20 20"
1244
+ fill="currentColor"
1245
+ aria-hidden="true"
1246
+ role="img"
1247
+ width="1em"
1248
+ height="1em"
1249
+ >
1250
+ <path
1251
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1252
+ />
1253
+ </svg>
1254
+ </span>
976
1255
  </span>
977
- </span>
978
- </button>
979
- <section
980
- class="pf-v6-c-nav__subnav"
981
- aria-labelledby="nav-expandable-example-expandable-nav-link3"
982
- hidden
983
- inert
984
- >
985
- <ul class="pf-v6-c-nav__list" role="list">
986
- <li class="pf-v6-c-nav__item">
987
- <a href="#" class="pf-v6-c-nav__link">
988
- <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
989
- </a>
990
- </li>
991
- <li class="pf-v6-c-nav__item">
992
- <a href="#" class="pf-v6-c-nav__link">
993
- <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
994
- </a>
995
- </li>
996
- </ul>
997
- </section>
998
- </li>
999
- </ul>
1000
- </nav>
1256
+ </button>
1257
+ <section
1258
+ class="pf-v6-c-nav__subnav"
1259
+ aria-labelledby="nav-expandable-example-expandable-nav-link3"
1260
+ hidden
1261
+ inert
1262
+ >
1263
+ <ul class="pf-v6-c-nav__list" role="list">
1264
+ <li class="pf-v6-c-nav__item">
1265
+ <a href="#" class="pf-v6-c-nav__link">
1266
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
1267
+ </a>
1268
+ </li>
1269
+ <li class="pf-v6-c-nav__item">
1270
+ <a href="#" class="pf-v6-c-nav__link">
1271
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1272
+ </a>
1273
+ </li>
1274
+ </ul>
1275
+ </section>
1276
+ </li>
1277
+ </ul>
1278
+ </nav>
1279
+ </div>
1001
1280
  </div>
1002
1281
  </div>
1003
1282
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1015,21 +1294,57 @@ section: components
1015
1294
  </li>
1016
1295
  <li class="pf-v6-c-breadcrumb__item">
1017
1296
  <span class="pf-v6-c-breadcrumb__item-divider">
1018
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1297
+ <svg
1298
+ class="pf-v6-svg"
1299
+ viewBox="0 0 20 20"
1300
+ fill="currentColor"
1301
+ aria-hidden="true"
1302
+ role="img"
1303
+ width="1em"
1304
+ height="1em"
1305
+ >
1306
+ <path
1307
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1308
+ />
1309
+ </svg>
1019
1310
  </span>
1020
1311
 
1021
1312
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1022
1313
  </li>
1023
1314
  <li class="pf-v6-c-breadcrumb__item">
1024
1315
  <span class="pf-v6-c-breadcrumb__item-divider">
1025
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1316
+ <svg
1317
+ class="pf-v6-svg"
1318
+ viewBox="0 0 20 20"
1319
+ fill="currentColor"
1320
+ aria-hidden="true"
1321
+ role="img"
1322
+ width="1em"
1323
+ height="1em"
1324
+ >
1325
+ <path
1326
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1327
+ />
1328
+ </svg>
1026
1329
  </span>
1027
1330
 
1028
1331
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1029
1332
  </li>
1030
1333
  <li class="pf-v6-c-breadcrumb__item">
1031
1334
  <span class="pf-v6-c-breadcrumb__item-divider">
1032
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1335
+ <svg
1336
+ class="pf-v6-svg"
1337
+ viewBox="0 0 20 20"
1338
+ fill="currentColor"
1339
+ aria-hidden="true"
1340
+ role="img"
1341
+ width="1em"
1342
+ height="1em"
1343
+ >
1344
+ <path
1345
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1346
+ />
1347
+ </svg>
1033
1348
  </span>
1034
1349
 
1035
1350
  <a
@@ -1042,9 +1357,15 @@ section: components
1042
1357
  </nav>
1043
1358
  </div>
1044
1359
  </section>
1045
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1360
+ <section
1361
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1362
+ aria-labelledby="main-title"
1363
+ >
1046
1364
  <div class="pf-v6-c-page__main-body">
1047
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1365
+ <h1
1366
+ class="pf-v6-c-content--h1 pf-m-page-title"
1367
+ id="main-title"
1368
+ >Main title</h1>
1048
1369
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1049
1370
  </div>
1050
1371
  </section>
@@ -1102,7 +1423,8 @@ section: components
1102
1423
  <span class="pf-v6-c-button__text">Skip to content</span>
1103
1424
  </a>
1104
1425
  </div>
1105
- <header class="pf-v6-c-masthead" id="nav-horizontal-example-masthead">
1426
+
1427
+ <header class="pf-v6-c-masthead" id="nav-horizontal-example-docked">
1106
1428
  <div class="pf-v6-c-masthead__main">
1107
1429
  <div class="pf-v6-c-masthead__brand">
1108
1430
  <a class="pf-v6-c-masthead__logo" href="#">
@@ -1114,7 +1436,7 @@ section: components
1114
1436
  y1="2.25860997e-13%"
1115
1437
  x2="32%"
1116
1438
  y2="100%"
1117
- id="linearGradient-nav-horizontal-example-masthead"
1439
+ id="linearGradient-nav-horizontal-example-docked"
1118
1440
  >
1119
1441
  <stop stop-color="#2B9AF3" offset="0%" />
1120
1442
  <stop
@@ -1168,11 +1490,11 @@ section: components
1168
1490
  />
1169
1491
  <path
1170
1492
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1171
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
1493
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1172
1494
  />
1173
1495
  <path
1174
1496
  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"
1175
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
1497
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1176
1498
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1177
1499
  />
1178
1500
  </g>
@@ -1184,7 +1506,7 @@ section: components
1184
1506
  <div class="pf-v6-c-masthead__content">
1185
1507
  <div
1186
1508
  class="pf-v6-c-toolbar pf-m-static"
1187
- id="nav-horizontal-example-masthead-toolbar"
1509
+ id="nav-horizontal-example-docked-toolbar"
1188
1510
  >
1189
1511
  <div class="pf-v6-c-toolbar__content">
1190
1512
  <div class="pf-v6-c-toolbar__content-section">
@@ -1194,7 +1516,7 @@ section: components
1194
1516
  >
1195
1517
  <nav
1196
1518
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
1197
- id="nav-horizontal-example-masthead-horizontal-nav"
1519
+ id="nav-horizontal-example-docked-horizontal-nav"
1198
1520
  aria-label="Global"
1199
1521
  >
1200
1522
  <div class="pf-v6-c-nav__scroll-button">
@@ -1204,7 +1526,19 @@ section: components
1204
1526
  aria-label="Scroll start"
1205
1527
  >
1206
1528
  <span class="pf-v6-c-button__icon">
1207
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1529
+ <svg
1530
+ class="pf-v6-svg"
1531
+ viewBox="0 0 20 20"
1532
+ fill="currentColor"
1533
+ aria-hidden="true"
1534
+ role="img"
1535
+ width="1em"
1536
+ height="1em"
1537
+ >
1538
+ <path
1539
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1540
+ />
1541
+ </svg>
1208
1542
  </span>
1209
1543
  </button>
1210
1544
  </div>
@@ -1246,70 +1580,24 @@ section: components
1246
1580
  aria-label="Scroll end"
1247
1581
  >
1248
1582
  <span class="pf-v6-c-button__icon">
1249
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1583
+ <svg
1584
+ class="pf-v6-svg"
1585
+ viewBox="0 0 20 20"
1586
+ fill="currentColor"
1587
+ aria-hidden="true"
1588
+ role="img"
1589
+ width="1em"
1590
+ height="1em"
1591
+ >
1592
+ <path
1593
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1594
+ />
1595
+ </svg>
1250
1596
  </span>
1251
1597
  </button>
1252
1598
  </div>
1253
1599
  </nav>
1254
1600
  </div>
1255
-
1256
- <div
1257
- 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"
1258
- >
1259
- <div
1260
- class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1261
- >
1262
- <div class="pf-v6-c-toolbar__item">
1263
- <button
1264
- class="pf-v6-c-menu-toggle pf-m-plain"
1265
- type="button"
1266
- aria-expanded="false"
1267
- aria-label="Application launcher"
1268
- >
1269
- <span class="pf-v6-c-menu-toggle__icon">
1270
- <i class="fas fa-th" aria-hidden="true"></i>
1271
- </span>
1272
- </button>
1273
- </div>
1274
- <div class="pf-v6-c-toolbar__item">
1275
- <button
1276
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1277
- type="button"
1278
- aria-expanded="false"
1279
- aria-label="Settings"
1280
- >
1281
- <span class="pf-v6-c-menu-toggle__icon">
1282
- <i class="fas fa-cog" aria-hidden="true"></i>
1283
- </span>
1284
- </button>
1285
- </div>
1286
- <div class="pf-v6-c-toolbar__item">
1287
- <button
1288
- class="pf-v6-c-menu-toggle pf-m-plain"
1289
- type="button"
1290
- aria-expanded="false"
1291
- aria-label="Help"
1292
- >
1293
- <span class="pf-v6-c-menu-toggle__icon">
1294
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1295
- </span>
1296
- </button>
1297
- </div>
1298
- </div>
1299
-
1300
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1301
- <button
1302
- class="pf-v6-c-menu-toggle pf-m-plain"
1303
- type="button"
1304
- aria-expanded="false"
1305
- aria-label="Actions"
1306
- >
1307
- <span class="pf-v6-c-menu-toggle__icon">
1308
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1309
- </span>
1310
- </button>
1311
- </div>
1312
- </div>
1313
1601
  </div>
1314
1602
  </div>
1315
1603
  </div>
@@ -1330,21 +1618,57 @@ section: components
1330
1618
  </li>
1331
1619
  <li class="pf-v6-c-breadcrumb__item">
1332
1620
  <span class="pf-v6-c-breadcrumb__item-divider">
1333
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1621
+ <svg
1622
+ class="pf-v6-svg"
1623
+ viewBox="0 0 20 20"
1624
+ fill="currentColor"
1625
+ aria-hidden="true"
1626
+ role="img"
1627
+ width="1em"
1628
+ height="1em"
1629
+ >
1630
+ <path
1631
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1632
+ />
1633
+ </svg>
1334
1634
  </span>
1335
1635
 
1336
1636
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1337
1637
  </li>
1338
1638
  <li class="pf-v6-c-breadcrumb__item">
1339
1639
  <span class="pf-v6-c-breadcrumb__item-divider">
1340
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1640
+ <svg
1641
+ class="pf-v6-svg"
1642
+ viewBox="0 0 20 20"
1643
+ fill="currentColor"
1644
+ aria-hidden="true"
1645
+ role="img"
1646
+ width="1em"
1647
+ height="1em"
1648
+ >
1649
+ <path
1650
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1651
+ />
1652
+ </svg>
1341
1653
  </span>
1342
1654
 
1343
1655
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1344
1656
  </li>
1345
1657
  <li class="pf-v6-c-breadcrumb__item">
1346
1658
  <span class="pf-v6-c-breadcrumb__item-divider">
1347
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1659
+ <svg
1660
+ class="pf-v6-svg"
1661
+ viewBox="0 0 20 20"
1662
+ fill="currentColor"
1663
+ aria-hidden="true"
1664
+ role="img"
1665
+ width="1em"
1666
+ height="1em"
1667
+ >
1668
+ <path
1669
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1670
+ />
1671
+ </svg>
1348
1672
  </span>
1349
1673
 
1350
1674
  <a
@@ -1357,9 +1681,15 @@ section: components
1357
1681
  </nav>
1358
1682
  </div>
1359
1683
  </section>
1360
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1684
+ <section
1685
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1686
+ aria-labelledby="main-title"
1687
+ >
1361
1688
  <div class="pf-v6-c-page__main-body">
1362
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1689
+ <h1
1690
+ class="pf-v6-c-content--h1 pf-m-page-title"
1691
+ id="main-title"
1692
+ >Main title</h1>
1363
1693
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1364
1694
  </div>
1365
1695
  </section>
@@ -1417,7 +1747,8 @@ section: components
1417
1747
  <span class="pf-v6-c-button__text">Skip to content</span>
1418
1748
  </a>
1419
1749
  </div>
1420
- <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-masthead">
1750
+
1751
+ <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-docked">
1421
1752
  <div class="pf-v6-c-masthead__main">
1422
1753
  <span class="pf-v6-c-masthead__toggle">
1423
1754
  <button
@@ -1459,7 +1790,7 @@ section: components
1459
1790
  y1="2.25860997e-13%"
1460
1791
  x2="32%"
1461
1792
  y2="100%"
1462
- id="linearGradient-nav-horizontal-subnav-example-masthead"
1793
+ id="linearGradient-nav-horizontal-subnav-example-docked"
1463
1794
  >
1464
1795
  <stop stop-color="#2B9AF3" offset="0%" />
1465
1796
  <stop
@@ -1513,11 +1844,11 @@ section: components
1513
1844
  />
1514
1845
  <path
1515
1846
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1516
- fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1847
+ fill="url(#linearGradient-nav-horizontal-subnav-example-docked)"
1517
1848
  />
1518
1849
  <path
1519
1850
  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"
1520
- fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1851
+ fill="url(#linearGradient-nav-horizontal-subnav-example-docked)"
1521
1852
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1522
1853
  />
1523
1854
  </g>
@@ -1529,7 +1860,7 @@ section: components
1529
1860
  <div class="pf-v6-c-masthead__content">
1530
1861
  <div
1531
1862
  class="pf-v6-c-toolbar pf-m-static"
1532
- id="nav-horizontal-subnav-example-masthead-toolbar"
1863
+ id="nav-horizontal-subnav-example-docked-toolbar"
1533
1864
  >
1534
1865
  <div class="pf-v6-c-toolbar__content">
1535
1866
  <div class="pf-v6-c-toolbar__content-section">
@@ -1547,7 +1878,19 @@ section: components
1547
1878
  aria-label="Application launcher"
1548
1879
  >
1549
1880
  <span class="pf-v6-c-menu-toggle__icon">
1550
- <i class="fas fa-th" aria-hidden="true"></i>
1881
+ <svg
1882
+ class="pf-v6-svg"
1883
+ viewBox="0 0 512 512"
1884
+ fill="currentColor"
1885
+ aria-hidden="true"
1886
+ role="img"
1887
+ width="1em"
1888
+ height="1em"
1889
+ >
1890
+ <path
1891
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
1892
+ />
1893
+ </svg>
1551
1894
  </span>
1552
1895
  </button>
1553
1896
  </div>
@@ -1559,7 +1902,19 @@ section: components
1559
1902
  aria-label="Settings"
1560
1903
  >
1561
1904
  <span class="pf-v6-c-menu-toggle__icon">
1562
- <i class="fas fa-cog" aria-hidden="true"></i>
1905
+ <svg
1906
+ class="pf-v6-svg"
1907
+ viewBox="0 0 32 32"
1908
+ fill="currentColor"
1909
+ aria-hidden="true"
1910
+ role="img"
1911
+ width="1em"
1912
+ height="1em"
1913
+ >
1914
+ <path
1915
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1916
+ />
1917
+ </svg>
1563
1918
  </span>
1564
1919
  </button>
1565
1920
  </div>
@@ -1571,7 +1926,19 @@ section: components
1571
1926
  aria-label="Help"
1572
1927
  >
1573
1928
  <span class="pf-v6-c-menu-toggle__icon">
1574
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1929
+ <svg
1930
+ class="pf-v6-svg"
1931
+ viewBox="0 0 512 512"
1932
+ fill="currentColor"
1933
+ aria-hidden="true"
1934
+ role="img"
1935
+ width="1em"
1936
+ height="1em"
1937
+ >
1938
+ <path
1939
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1940
+ />
1941
+ </svg>
1575
1942
  </span>
1576
1943
  </button>
1577
1944
  </div>
@@ -1585,7 +1952,19 @@ section: components
1585
1952
  aria-label="Actions"
1586
1953
  >
1587
1954
  <span class="pf-v6-c-menu-toggle__icon">
1588
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1955
+ <svg
1956
+ class="pf-v6-svg"
1957
+ viewBox="0 0 32 32"
1958
+ fill="currentColor"
1959
+ aria-hidden="true"
1960
+ role="img"
1961
+ width="1em"
1962
+ height="1em"
1963
+ >
1964
+ <path
1965
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1966
+ />
1967
+ </svg>
1589
1968
  </span>
1590
1969
  </button>
1591
1970
  </div>
@@ -1596,44 +1975,46 @@ section: components
1596
1975
  </div>
1597
1976
  </header>
1598
1977
  <div class="pf-v6-c-page__sidebar">
1599
- <div class="pf-v6-c-page__sidebar-body">
1600
- <nav
1601
- class="pf-v6-c-nav"
1602
- id="nav-horizontal-subnav-example-primary-nav"
1603
- aria-label="Global"
1604
- >
1605
- <ul class="pf-v6-c-nav__list" role="list">
1606
- <li class="pf-v6-c-nav__item">
1607
- <a href="#" class="pf-v6-c-nav__link">
1608
- <span class="pf-v6-c-nav__link-text">System panel</span>
1609
- </a>
1610
- </li>
1611
- <li class="pf-v6-c-nav__item">
1612
- <a
1613
- href="#"
1614
- class="pf-v6-c-nav__link pf-m-current"
1615
- aria-current="page"
1616
- >
1617
- <span class="pf-v6-c-nav__link-text">Policy</span>
1618
- </a>
1619
- </li>
1620
- <li class="pf-v6-c-nav__item">
1621
- <a href="#" class="pf-v6-c-nav__link">
1622
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1623
- </a>
1624
- </li>
1625
- <li class="pf-v6-c-nav__item">
1626
- <a href="#" class="pf-v6-c-nav__link">
1627
- <span class="pf-v6-c-nav__link-text">Network services</span>
1628
- </a>
1629
- </li>
1630
- <li class="pf-v6-c-nav__item">
1631
- <a href="#" class="pf-v6-c-nav__link">
1632
- <span class="pf-v6-c-nav__link-text">Server</span>
1633
- </a>
1634
- </li>
1635
- </ul>
1636
- </nav>
1978
+ <div class="pf-v6-c-page__sidebar-main">
1979
+ <div class="pf-v6-c-page__sidebar-body">
1980
+ <nav
1981
+ class="pf-v6-c-nav"
1982
+ id="nav-horizontal-subnav-example-primary-nav"
1983
+ aria-label="Global"
1984
+ >
1985
+ <ul class="pf-v6-c-nav__list" role="list">
1986
+ <li class="pf-v6-c-nav__item">
1987
+ <a href="#" class="pf-v6-c-nav__link">
1988
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1989
+ </a>
1990
+ </li>
1991
+ <li class="pf-v6-c-nav__item">
1992
+ <a
1993
+ href="#"
1994
+ class="pf-v6-c-nav__link pf-m-current"
1995
+ aria-current="page"
1996
+ >
1997
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1998
+ </a>
1999
+ </li>
2000
+ <li class="pf-v6-c-nav__item">
2001
+ <a href="#" class="pf-v6-c-nav__link">
2002
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2003
+ </a>
2004
+ </li>
2005
+ <li class="pf-v6-c-nav__item">
2006
+ <a href="#" class="pf-v6-c-nav__link">
2007
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2008
+ </a>
2009
+ </li>
2010
+ <li class="pf-v6-c-nav__item">
2011
+ <a href="#" class="pf-v6-c-nav__link">
2012
+ <span class="pf-v6-c-nav__link-text">Server</span>
2013
+ </a>
2014
+ </li>
2015
+ </ul>
2016
+ </nav>
2017
+ </div>
1637
2018
  </div>
1638
2019
  </div>
1639
2020
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1676,21 +2057,57 @@ section: components
1676
2057
  </li>
1677
2058
  <li class="pf-v6-c-breadcrumb__item">
1678
2059
  <span class="pf-v6-c-breadcrumb__item-divider">
1679
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2060
+ <svg
2061
+ class="pf-v6-svg"
2062
+ viewBox="0 0 20 20"
2063
+ fill="currentColor"
2064
+ aria-hidden="true"
2065
+ role="img"
2066
+ width="1em"
2067
+ height="1em"
2068
+ >
2069
+ <path
2070
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2071
+ />
2072
+ </svg>
1680
2073
  </span>
1681
2074
 
1682
2075
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1683
2076
  </li>
1684
2077
  <li class="pf-v6-c-breadcrumb__item">
1685
2078
  <span class="pf-v6-c-breadcrumb__item-divider">
1686
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2079
+ <svg
2080
+ class="pf-v6-svg"
2081
+ viewBox="0 0 20 20"
2082
+ fill="currentColor"
2083
+ aria-hidden="true"
2084
+ role="img"
2085
+ width="1em"
2086
+ height="1em"
2087
+ >
2088
+ <path
2089
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2090
+ />
2091
+ </svg>
1687
2092
  </span>
1688
2093
 
1689
2094
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1690
2095
  </li>
1691
2096
  <li class="pf-v6-c-breadcrumb__item">
1692
2097
  <span class="pf-v6-c-breadcrumb__item-divider">
1693
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2098
+ <svg
2099
+ class="pf-v6-svg"
2100
+ viewBox="0 0 20 20"
2101
+ fill="currentColor"
2102
+ aria-hidden="true"
2103
+ role="img"
2104
+ width="1em"
2105
+ height="1em"
2106
+ >
2107
+ <path
2108
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2109
+ />
2110
+ </svg>
1694
2111
  </span>
1695
2112
 
1696
2113
  <a
@@ -1703,9 +2120,15 @@ section: components
1703
2120
  </nav>
1704
2121
  </div>
1705
2122
  </section>
1706
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2123
+ <section
2124
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2125
+ aria-labelledby="main-title"
2126
+ >
1707
2127
  <div class="pf-v6-c-page__main-body">
1708
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2128
+ <h1
2129
+ class="pf-v6-c-content--h1 pf-m-page-title"
2130
+ id="main-title"
2131
+ >Main title</h1>
1709
2132
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1710
2133
  </div>
1711
2134
  </section>
@@ -1763,41 +2186,12 @@ section: components
1763
2186
  <span class="pf-v6-c-button__text">Skip to content</span>
1764
2187
  </a>
1765
2188
  </div>
2189
+
1766
2190
  <header
1767
2191
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
1768
- id="nav-horizontal-example-masthead"
2192
+ id="nav-horizontal-example-docked"
1769
2193
  >
1770
2194
  <div class="pf-v6-c-masthead__main">
1771
- <span class="pf-v6-c-masthead__toggle">
1772
- <button
1773
- class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1774
- type="button"
1775
- aria-label="Global navigation"
1776
- >
1777
- <span class="pf-v6-c-button__icon">
1778
- <svg
1779
- viewBox="0 0 10 10"
1780
- class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1781
- width="1em"
1782
- height="1em"
1783
- >
1784
- <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1785
- <path
1786
- class="pf-v6-c-button--hamburger-icon--middle"
1787
- d="M1,5 L9,5"
1788
- />
1789
- <path
1790
- class="pf-v6-c-button--hamburger-icon--arrow"
1791
- d="M1,5 L1,5 L1,5"
1792
- />
1793
- <path
1794
- class="pf-v6-c-button--hamburger-icon--bottom"
1795
- d="M9,9 L1,9"
1796
- />
1797
- </svg>
1798
- </span>
1799
- </button>
1800
- </span>
1801
2195
  <div class="pf-v6-c-masthead__brand">
1802
2196
  <a class="pf-v6-c-masthead__logo" href="#">
1803
2197
  <svg height="37px" viewBox="0 0 679 158">
@@ -1808,7 +2202,7 @@ section: components
1808
2202
  y1="2.25860997e-13%"
1809
2203
  x2="32%"
1810
2204
  y2="100%"
1811
- id="linearGradient-nav-horizontal-example-masthead"
2205
+ id="linearGradient-nav-horizontal-example-docked"
1812
2206
  >
1813
2207
  <stop stop-color="#2B9AF3" offset="0%" />
1814
2208
  <stop
@@ -1862,11 +2256,11 @@ section: components
1862
2256
  />
1863
2257
  <path
1864
2258
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1865
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
2259
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1866
2260
  />
1867
2261
  <path
1868
2262
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1869
- fill="url(#linearGradient-nav-horizontal-example-masthead)"
2263
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1870
2264
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1871
2265
  />
1872
2266
  </g>
@@ -1878,7 +2272,7 @@ section: components
1878
2272
  <div class="pf-v6-c-masthead__content">
1879
2273
  <div
1880
2274
  class="pf-v6-c-toolbar pf-m-static"
1881
- id="nav-horizontal-example-masthead-toolbar"
2275
+ id="nav-horizontal-example-docked-toolbar"
1882
2276
  >
1883
2277
  <div class="pf-v6-c-toolbar__content">
1884
2278
  <div class="pf-v6-c-toolbar__content-section">
@@ -1888,7 +2282,7 @@ section: components
1888
2282
  >
1889
2283
  <nav
1890
2284
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
1891
- id="nav-horizontal-example-masthead-horizontal-nav"
2285
+ id="nav-horizontal-example-docked-horizontal-nav"
1892
2286
  aria-label="Global"
1893
2287
  >
1894
2288
  <div class="pf-v6-c-nav__scroll-button">
@@ -1898,7 +2292,19 @@ section: components
1898
2292
  aria-label="Scroll start"
1899
2293
  >
1900
2294
  <span class="pf-v6-c-button__icon">
1901
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2295
+ <svg
2296
+ class="pf-v6-svg"
2297
+ viewBox="0 0 20 20"
2298
+ fill="currentColor"
2299
+ aria-hidden="true"
2300
+ role="img"
2301
+ width="1em"
2302
+ height="1em"
2303
+ >
2304
+ <path
2305
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2306
+ />
2307
+ </svg>
1902
2308
  </span>
1903
2309
  </button>
1904
2310
  </div>
@@ -1940,70 +2346,24 @@ section: components
1940
2346
  aria-label="Scroll end"
1941
2347
  >
1942
2348
  <span class="pf-v6-c-button__icon">
1943
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2349
+ <svg
2350
+ class="pf-v6-svg"
2351
+ viewBox="0 0 20 20"
2352
+ fill="currentColor"
2353
+ aria-hidden="true"
2354
+ role="img"
2355
+ width="1em"
2356
+ height="1em"
2357
+ >
2358
+ <path
2359
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2360
+ />
2361
+ </svg>
1944
2362
  </span>
1945
2363
  </button>
1946
2364
  </div>
1947
2365
  </nav>
1948
2366
  </div>
1949
-
1950
- <div
1951
- 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"
1952
- >
1953
- <div
1954
- class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1955
- >
1956
- <div class="pf-v6-c-toolbar__item">
1957
- <button
1958
- class="pf-v6-c-menu-toggle pf-m-plain"
1959
- type="button"
1960
- aria-expanded="false"
1961
- aria-label="Application launcher"
1962
- >
1963
- <span class="pf-v6-c-menu-toggle__icon">
1964
- <i class="fas fa-th" aria-hidden="true"></i>
1965
- </span>
1966
- </button>
1967
- </div>
1968
- <div class="pf-v6-c-toolbar__item">
1969
- <button
1970
- class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1971
- type="button"
1972
- aria-expanded="false"
1973
- aria-label="Settings"
1974
- >
1975
- <span class="pf-v6-c-menu-toggle__icon">
1976
- <i class="fas fa-cog" aria-hidden="true"></i>
1977
- </span>
1978
- </button>
1979
- </div>
1980
- <div class="pf-v6-c-toolbar__item">
1981
- <button
1982
- class="pf-v6-c-menu-toggle pf-m-plain"
1983
- type="button"
1984
- aria-expanded="false"
1985
- aria-label="Help"
1986
- >
1987
- <span class="pf-v6-c-menu-toggle__icon">
1988
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1989
- </span>
1990
- </button>
1991
- </div>
1992
- </div>
1993
-
1994
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1995
- <button
1996
- class="pf-v6-c-menu-toggle pf-m-plain"
1997
- type="button"
1998
- aria-expanded="false"
1999
- aria-label="Actions"
2000
- >
2001
- <span class="pf-v6-c-menu-toggle__icon">
2002
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2003
- </span>
2004
- </button>
2005
- </div>
2006
- </div>
2007
2367
  </div>
2008
2368
  </div>
2009
2369
  </div>
@@ -2049,21 +2409,57 @@ section: components
2049
2409
  </li>
2050
2410
  <li class="pf-v6-c-breadcrumb__item">
2051
2411
  <span class="pf-v6-c-breadcrumb__item-divider">
2052
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2412
+ <svg
2413
+ class="pf-v6-svg"
2414
+ viewBox="0 0 20 20"
2415
+ fill="currentColor"
2416
+ aria-hidden="true"
2417
+ role="img"
2418
+ width="1em"
2419
+ height="1em"
2420
+ >
2421
+ <path
2422
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2423
+ />
2424
+ </svg>
2053
2425
  </span>
2054
2426
 
2055
2427
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2056
2428
  </li>
2057
2429
  <li class="pf-v6-c-breadcrumb__item">
2058
2430
  <span class="pf-v6-c-breadcrumb__item-divider">
2059
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2431
+ <svg
2432
+ class="pf-v6-svg"
2433
+ viewBox="0 0 20 20"
2434
+ fill="currentColor"
2435
+ aria-hidden="true"
2436
+ role="img"
2437
+ width="1em"
2438
+ height="1em"
2439
+ >
2440
+ <path
2441
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2442
+ />
2443
+ </svg>
2060
2444
  </span>
2061
2445
 
2062
2446
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2063
2447
  </li>
2064
2448
  <li class="pf-v6-c-breadcrumb__item">
2065
2449
  <span class="pf-v6-c-breadcrumb__item-divider">
2066
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2450
+ <svg
2451
+ class="pf-v6-svg"
2452
+ viewBox="0 0 20 20"
2453
+ fill="currentColor"
2454
+ aria-hidden="true"
2455
+ role="img"
2456
+ width="1em"
2457
+ height="1em"
2458
+ >
2459
+ <path
2460
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2461
+ />
2462
+ </svg>
2067
2463
  </span>
2068
2464
 
2069
2465
  <a
@@ -2076,9 +2472,2381 @@ section: components
2076
2472
  </nav>
2077
2473
  </div>
2078
2474
  </section>
2475
+ <section
2476
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2477
+ aria-labelledby="main-title"
2478
+ >
2479
+ <div class="pf-v6-c-page__main-body">
2480
+ <h1
2481
+ class="pf-v6-c-content--h1 pf-m-page-title"
2482
+ id="main-title"
2483
+ >Main title</h1>
2484
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2485
+ </div>
2486
+ </section>
2079
2487
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2080
2488
  <div class="pf-v6-c-page__main-body">
2081
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2489
+ <div class="pf-v6-l-gallery pf-m-gutter">
2490
+ <div class="pf-v6-c-card">
2491
+ <div class="pf-v6-c-card__body">This is a card</div>
2492
+ </div>
2493
+ <div class="pf-v6-c-card">
2494
+ <div class="pf-v6-c-card__body">This is a card</div>
2495
+ </div>
2496
+ <div class="pf-v6-c-card">
2497
+ <div class="pf-v6-c-card__body">This is a card</div>
2498
+ </div>
2499
+ <div class="pf-v6-c-card">
2500
+ <div class="pf-v6-c-card__body">This is a card</div>
2501
+ </div>
2502
+ <div class="pf-v6-c-card">
2503
+ <div class="pf-v6-c-card__body">This is a card</div>
2504
+ </div>
2505
+ <div class="pf-v6-c-card">
2506
+ <div class="pf-v6-c-card__body">This is a card</div>
2507
+ </div>
2508
+ <div class="pf-v6-c-card">
2509
+ <div class="pf-v6-c-card__body">This is a card</div>
2510
+ </div>
2511
+ <div class="pf-v6-c-card">
2512
+ <div class="pf-v6-c-card__body">This is a card</div>
2513
+ </div>
2514
+ <div class="pf-v6-c-card">
2515
+ <div class="pf-v6-c-card__body">This is a card</div>
2516
+ </div>
2517
+ <div class="pf-v6-c-card">
2518
+ <div class="pf-v6-c-card__body">This is a card</div>
2519
+ </div>
2520
+ </div>
2521
+ </div>
2522
+ </section>
2523
+ </main>
2524
+ </div>
2525
+ </div>
2526
+
2527
+ ```
2528
+
2529
+ ### Docked nav
2530
+
2531
+ ```html isFullscreen isBeta
2532
+ <div class="pf-v6-c-page pf-m-docked pf-m-no-sidebar" id="nav-docked-example">
2533
+ <header class="pf-v6-c-masthead pf-m-display-inline">
2534
+ <div class="pf-v6-c-masthead__main">
2535
+ <span class="pf-v6-c-masthead__toggle">
2536
+ <button
2537
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2538
+ type="button"
2539
+ aria-label="Global navigation"
2540
+ >
2541
+ <span class="pf-v6-c-button__icon">
2542
+ <svg
2543
+ viewBox="0 0 10 10"
2544
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2545
+ width="1em"
2546
+ height="1em"
2547
+ >
2548
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2549
+ <path
2550
+ class="pf-v6-c-button--hamburger-icon--middle"
2551
+ d="M1,5 L9,5"
2552
+ />
2553
+ <path
2554
+ class="pf-v6-c-button--hamburger-icon--arrow"
2555
+ d="M1,5 L1,5 L1,5"
2556
+ />
2557
+ <path
2558
+ class="pf-v6-c-button--hamburger-icon--bottom"
2559
+ d="M9,9 L1,9"
2560
+ />
2561
+ </svg>
2562
+ </span>
2563
+ </button>
2564
+ </span>
2565
+ <div class="pf-v6-c-masthead__brand">
2566
+ <a class="pf-v6-c-masthead__logo" href="#">
2567
+ <svg height="37px" viewBox="0 0 679 158">
2568
+ <title>PF-HorizontalLogo-Color</title>
2569
+ <defs>
2570
+ <linearGradient
2571
+ x1="68%"
2572
+ y1="2.25860997e-13%"
2573
+ x2="32%"
2574
+ y2="100%"
2575
+ id="linearGradient-"
2576
+ >
2577
+ <stop stop-color="#2B9AF3" offset="0%" />
2578
+ <stop
2579
+ stop-color="#73BCF7"
2580
+ stop-opacity="0.502212631"
2581
+ offset="100%"
2582
+ />
2583
+ </linearGradient>
2584
+ </defs>
2585
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2586
+ <g
2587
+ transform="translate(206.000000, 45.750000)"
2588
+ fill="var(--pf-t--global--text--color--regular)"
2589
+ fill-rule="nonzero"
2590
+ >
2591
+ <path
2592
+ 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"
2593
+ />
2594
+ <path
2595
+ 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"
2596
+ />
2597
+ <path
2598
+ 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"
2599
+ />
2600
+ <path
2601
+ 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"
2602
+ />
2603
+ <path
2604
+ 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"
2605
+ />
2606
+ <path
2607
+ 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"
2608
+ />
2609
+ <path
2610
+ 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"
2611
+ />
2612
+ <polygon
2613
+ 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"
2614
+ />
2615
+ <polygon
2616
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2617
+ />
2618
+ <path
2619
+ 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"
2620
+ />
2621
+ </g>
2622
+ <g transform="translate(0.000000, 0.000000)">
2623
+ <path
2624
+ 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"
2625
+ fill="#0066CC"
2626
+ />
2627
+ <path
2628
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2629
+ fill="url(#linearGradient-)"
2630
+ />
2631
+ <path
2632
+ 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"
2633
+ fill="url(#linearGradient-)"
2634
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2635
+ />
2636
+ </g>
2637
+ </g>
2638
+ </svg>
2639
+ </a>
2640
+ </div>
2641
+ </div>
2642
+ <div class="pf-v6-c-masthead__content">
2643
+ <div class="pf-v6-c-toolbar pf-m-static">
2644
+ <div class="pf-v6-c-toolbar__content">
2645
+ <div class="pf-v6-c-toolbar__content-section">
2646
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
2647
+ <button
2648
+ class="pf-v6-c-button pf-m-plain"
2649
+ type="button"
2650
+ aria-label="Search"
2651
+ >
2652
+ <span class="pf-v6-c-button__icon">
2653
+ <svg
2654
+ class="pf-v6-svg"
2655
+ viewBox="0 0 512 512"
2656
+ fill="currentColor"
2657
+ aria-hidden="true"
2658
+ role="img"
2659
+ width="1em"
2660
+ height="1em"
2661
+ >
2662
+ <path
2663
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
2664
+ />
2665
+ </svg>
2666
+ </span>
2667
+ </button>
2668
+ </div>
2669
+ </div>
2670
+ </div>
2671
+ </div>
2672
+ </div>
2673
+ </header>
2674
+ <div class="pf-v6-c-page__dock">
2675
+ <div class="pf-v6-c-page__dock-main">
2676
+ <div class="pf-v6-c-skip-to-content">
2677
+ <a
2678
+ class="pf-v6-c-button pf-m-primary"
2679
+ href="#main-content-nav-docked-example"
2680
+ >
2681
+ <span class="pf-v6-c-button__text">Skip to content</span>
2682
+ </a>
2683
+ </div>
2684
+
2685
+ <header
2686
+ class="pf-v6-c-masthead pf-m-docked"
2687
+ id="nav-docked-example-masthead"
2688
+ >
2689
+ <div class="pf-v6-c-masthead__main">
2690
+ <span class="pf-v6-c-masthead__toggle">
2691
+ <button
2692
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2693
+ type="button"
2694
+ aria-label="Global navigation"
2695
+ >
2696
+ <span class="pf-v6-c-button__icon">
2697
+ <svg
2698
+ viewBox="0 0 10 10"
2699
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2700
+ width="1em"
2701
+ height="1em"
2702
+ >
2703
+ <path
2704
+ class="pf-v6-c-button--hamburger-icon--top"
2705
+ d="M1,1 L9,1"
2706
+ />
2707
+ <path
2708
+ class="pf-v6-c-button--hamburger-icon--middle"
2709
+ d="M1,5 L9,5"
2710
+ />
2711
+ <path
2712
+ class="pf-v6-c-button--hamburger-icon--arrow"
2713
+ d="M1,5 L1,5 L1,5"
2714
+ />
2715
+ <path
2716
+ class="pf-v6-c-button--hamburger-icon--bottom"
2717
+ d="M9,9 L1,9"
2718
+ />
2719
+ </svg>
2720
+ </span>
2721
+ </button>
2722
+ </span>
2723
+ <div class="pf-v6-c-masthead__brand">
2724
+ <a class="pf-v6-c-masthead__logo" href="#">
2725
+ <svg height="37px" viewBox="0 0 679 158">
2726
+ <title>PF-HorizontalLogo-Color</title>
2727
+ <defs>
2728
+ <linearGradient
2729
+ x1="68%"
2730
+ y1="2.25860997e-13%"
2731
+ x2="32%"
2732
+ y2="100%"
2733
+ id="linearGradient-nav-docked-example-masthead"
2734
+ >
2735
+ <stop stop-color="#2B9AF3" offset="0%" />
2736
+ <stop
2737
+ stop-color="#73BCF7"
2738
+ stop-opacity="0.502212631"
2739
+ offset="100%"
2740
+ />
2741
+ </linearGradient>
2742
+ </defs>
2743
+ <g
2744
+ stroke="none"
2745
+ stroke-width="1"
2746
+ fill="none"
2747
+ fill-rule="evenodd"
2748
+ >
2749
+ <g
2750
+ transform="translate(206.000000, 45.750000)"
2751
+ fill="var(--pf-t--global--text--color--regular)"
2752
+ fill-rule="nonzero"
2753
+ >
2754
+ <path
2755
+ 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"
2756
+ />
2757
+ <path
2758
+ 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"
2759
+ />
2760
+ <path
2761
+ 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"
2762
+ />
2763
+ <path
2764
+ 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"
2765
+ />
2766
+ <path
2767
+ 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"
2768
+ />
2769
+ <path
2770
+ 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"
2771
+ />
2772
+ <path
2773
+ 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"
2774
+ />
2775
+ <polygon
2776
+ 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"
2777
+ />
2778
+ <polygon
2779
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2780
+ />
2781
+ <path
2782
+ 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"
2783
+ />
2784
+ </g>
2785
+ <g transform="translate(0.000000, 0.000000)">
2786
+ <path
2787
+ 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"
2788
+ fill="#0066CC"
2789
+ />
2790
+ <path
2791
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2792
+ fill="url(#linearGradient-nav-docked-example-masthead)"
2793
+ />
2794
+ <path
2795
+ 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"
2796
+ fill="url(#linearGradient-nav-docked-example-masthead)"
2797
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2798
+ />
2799
+ </g>
2800
+ </g>
2801
+ </svg>
2802
+ </a>
2803
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
2804
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
2805
+ <title>PF-HorizontalLogo-Color</title>
2806
+ <defs>
2807
+ <linearGradient
2808
+ x1="68%"
2809
+ y1="2.25860997e-13%"
2810
+ x2="32%"
2811
+ y2="100%"
2812
+ id="linearGradient-1"
2813
+ >
2814
+ <stop stop-color="#2B9AF3" offset="0%" />
2815
+ <stop
2816
+ stop-color="#73BCF7"
2817
+ stop-opacity="0.502212631"
2818
+ offset="100%"
2819
+ />
2820
+ </linearGradient>
2821
+ </defs>
2822
+ <g
2823
+ id="PF-IconLogo-color"
2824
+ stroke="none"
2825
+ stroke-width="1"
2826
+ fill="none"
2827
+ fill-rule="evenodd"
2828
+ >
2829
+ <g id="Logo">
2830
+ <path
2831
+ 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"
2832
+ id="Rectangle-Copy-17"
2833
+ fill="#0066CC"
2834
+ />
2835
+ <path
2836
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2837
+ id="Path-2"
2838
+ fill="url(#linearGradient-1)"
2839
+ />
2840
+ <path
2841
+ 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"
2842
+ id="Path-2"
2843
+ fill="url(#linearGradient-1)"
2844
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2845
+ />
2846
+ </g>
2847
+ </g>
2848
+ </svg>
2849
+ </a>
2850
+ </div>
2851
+ </div>
2852
+ <hr class="pf-v6-c-divider" />
2853
+ <div class="pf-v6-c-masthead__content">
2854
+ <div
2855
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
2856
+ id="nav-docked-example-masthead-toolbar"
2857
+ >
2858
+ <div class="pf-v6-c-toolbar__content">
2859
+ <div class="pf-v6-c-toolbar__content-section">
2860
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
2861
+ <ul class="pf-v6-c-nav__list" role="list">
2862
+ <li class="pf-v6-c-nav__item">
2863
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
2864
+ <span class="pf-v6-c-nav__link-icon">
2865
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2866
+ </span>
2867
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2868
+ </a>
2869
+ </li>
2870
+ <li class="pf-v6-c-nav__item">
2871
+ <a
2872
+ href="#"
2873
+ class="pf-v6-c-nav__link pf-m-current"
2874
+ aria-current="page"
2875
+ aria-label="Folder"
2876
+ >
2877
+ <span class="pf-v6-c-nav__link-icon">
2878
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
2879
+ </span>
2880
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2881
+ </a>
2882
+ </li>
2883
+ <li class="pf-v6-c-nav__item">
2884
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
2885
+ <span class="pf-v6-c-nav__link-icon">
2886
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
2887
+ </span>
2888
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2889
+ </a>
2890
+ </li>
2891
+ <li class="pf-v6-c-nav__item">
2892
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
2893
+ <span class="pf-v6-c-nav__link-icon">
2894
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
2895
+ </span>
2896
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2897
+ </a>
2898
+ </li>
2899
+ </ul>
2900
+ </nav>
2901
+
2902
+ <div
2903
+ 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"
2904
+ >
2905
+ <div class="pf-v6-c-toolbar__item">
2906
+ <button
2907
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
2908
+ type="button"
2909
+ aria-expanded="false"
2910
+ aria-label="Applications"
2911
+ >
2912
+ <span class="pf-v6-c-menu-toggle__icon">
2913
+ <svg
2914
+ class="pf-v6-svg"
2915
+ viewBox="0 0 512 512"
2916
+ fill="currentColor"
2917
+ aria-hidden="true"
2918
+ role="img"
2919
+ width="1em"
2920
+ height="1em"
2921
+ >
2922
+ <path
2923
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
2924
+ />
2925
+ </svg>
2926
+ </span>
2927
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
2928
+ </button>
2929
+ </div>
2930
+ <div class="pf-v6-c-toolbar__item">
2931
+ <button
2932
+ class="pf-v6-c-button pf-m-docked pf-m-settings pf-m-plain"
2933
+ type="button"
2934
+ aria-label="Settings"
2935
+ >
2936
+ <span class="pf-v6-c-button__icon pf-m-start">
2937
+ <svg
2938
+ class="pf-v6-svg"
2939
+ viewBox="0 0 32 32"
2940
+ fill="currentColor"
2941
+ aria-hidden="true"
2942
+ role="img"
2943
+ width="1em"
2944
+ height="1em"
2945
+ >
2946
+ <path
2947
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
2948
+ />
2949
+ </svg>
2950
+ </span>
2951
+ <span class="pf-v6-c-button__text">Settings</span>
2952
+ </button>
2953
+ </div>
2954
+ <div class="pf-v6-c-toolbar__item">
2955
+ <button
2956
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
2957
+ type="button"
2958
+ aria-expanded="false"
2959
+ aria-label="Help"
2960
+ >
2961
+ <span class="pf-v6-c-menu-toggle__icon">
2962
+ <svg
2963
+ class="pf-v6-svg"
2964
+ viewBox="0 0 512 512"
2965
+ fill="currentColor"
2966
+ aria-hidden="true"
2967
+ role="img"
2968
+ width="1em"
2969
+ height="1em"
2970
+ >
2971
+ <path
2972
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
2973
+ />
2974
+ </svg>
2975
+ </span>
2976
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
2977
+ </button>
2978
+ </div>
2979
+ </div>
2980
+ </div>
2981
+ </div>
2982
+ </div>
2983
+ </div>
2984
+ </header>
2985
+ </div>
2986
+ </div>
2987
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2988
+ <main
2989
+ class="pf-v6-c-page__main"
2990
+ tabindex="-1"
2991
+ id="main-content-nav-docked-example"
2992
+ >
2993
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2994
+ <div class="pf-v6-c-page__main-body">
2995
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2996
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2997
+ <li class="pf-v6-c-breadcrumb__item">
2998
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2999
+ </li>
3000
+ <li class="pf-v6-c-breadcrumb__item">
3001
+ <span class="pf-v6-c-breadcrumb__item-divider">
3002
+ <svg
3003
+ class="pf-v6-svg"
3004
+ viewBox="0 0 20 20"
3005
+ fill="currentColor"
3006
+ aria-hidden="true"
3007
+ role="img"
3008
+ width="1em"
3009
+ height="1em"
3010
+ >
3011
+ <path
3012
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3013
+ />
3014
+ </svg>
3015
+ </span>
3016
+
3017
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3018
+ </li>
3019
+ <li class="pf-v6-c-breadcrumb__item">
3020
+ <span class="pf-v6-c-breadcrumb__item-divider">
3021
+ <svg
3022
+ class="pf-v6-svg"
3023
+ viewBox="0 0 20 20"
3024
+ fill="currentColor"
3025
+ aria-hidden="true"
3026
+ role="img"
3027
+ width="1em"
3028
+ height="1em"
3029
+ >
3030
+ <path
3031
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3032
+ />
3033
+ </svg>
3034
+ </span>
3035
+
3036
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3037
+ </li>
3038
+ <li class="pf-v6-c-breadcrumb__item">
3039
+ <span class="pf-v6-c-breadcrumb__item-divider">
3040
+ <svg
3041
+ class="pf-v6-svg"
3042
+ viewBox="0 0 20 20"
3043
+ fill="currentColor"
3044
+ aria-hidden="true"
3045
+ role="img"
3046
+ width="1em"
3047
+ height="1em"
3048
+ >
3049
+ <path
3050
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3051
+ />
3052
+ </svg>
3053
+ </span>
3054
+
3055
+ <a
3056
+ href="#"
3057
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3058
+ aria-current="page"
3059
+ >Section landing</a>
3060
+ </li>
3061
+ </ol>
3062
+ </nav>
3063
+ </div>
3064
+ </section>
3065
+ <section
3066
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3067
+ aria-labelledby="main-title"
3068
+ >
3069
+ <div class="pf-v6-c-page__main-body">
3070
+ <h1
3071
+ class="pf-v6-c-content--h1 pf-m-page-title"
3072
+ id="main-title"
3073
+ >Main title</h1>
3074
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3075
+ </div>
3076
+ </section>
3077
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3078
+ <div class="pf-v6-c-page__main-body">
3079
+ <div class="pf-v6-l-gallery pf-m-gutter">
3080
+ <div class="pf-v6-c-card">
3081
+ <div class="pf-v6-c-card__body">This is a card</div>
3082
+ </div>
3083
+ <div class="pf-v6-c-card">
3084
+ <div class="pf-v6-c-card__body">This is a card</div>
3085
+ </div>
3086
+ <div class="pf-v6-c-card">
3087
+ <div class="pf-v6-c-card__body">This is a card</div>
3088
+ </div>
3089
+ <div class="pf-v6-c-card">
3090
+ <div class="pf-v6-c-card__body">This is a card</div>
3091
+ </div>
3092
+ <div class="pf-v6-c-card">
3093
+ <div class="pf-v6-c-card__body">This is a card</div>
3094
+ </div>
3095
+ <div class="pf-v6-c-card">
3096
+ <div class="pf-v6-c-card__body">This is a card</div>
3097
+ </div>
3098
+ <div class="pf-v6-c-card">
3099
+ <div class="pf-v6-c-card__body">This is a card</div>
3100
+ </div>
3101
+ <div class="pf-v6-c-card">
3102
+ <div class="pf-v6-c-card__body">This is a card</div>
3103
+ </div>
3104
+ <div class="pf-v6-c-card">
3105
+ <div class="pf-v6-c-card__body">This is a card</div>
3106
+ </div>
3107
+ <div class="pf-v6-c-card">
3108
+ <div class="pf-v6-c-card__body">This is a card</div>
3109
+ </div>
3110
+ </div>
3111
+ </div>
3112
+ </section>
3113
+ </main>
3114
+ </div>
3115
+ </div>
3116
+
3117
+ ```
3118
+
3119
+ ### Docked nav - expanded on mobile
3120
+
3121
+ ```html isFullscreen isBeta
3122
+ <div
3123
+ class="pf-v6-c-page pf-m-docked pf-m-no-sidebar"
3124
+ id="nav-docked-expanded-example"
3125
+ >
3126
+ <header class="pf-v6-c-masthead pf-m-display-inline">
3127
+ <div class="pf-v6-c-masthead__main">
3128
+ <span class="pf-v6-c-masthead__toggle">
3129
+ <button
3130
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3131
+ type="button"
3132
+ aria-label="Global navigation"
3133
+ >
3134
+ <span class="pf-v6-c-button__icon">
3135
+ <svg
3136
+ viewBox="0 0 10 10"
3137
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3138
+ width="1em"
3139
+ height="1em"
3140
+ >
3141
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3142
+ <path
3143
+ class="pf-v6-c-button--hamburger-icon--middle"
3144
+ d="M1,5 L9,5"
3145
+ />
3146
+ <path
3147
+ class="pf-v6-c-button--hamburger-icon--arrow"
3148
+ d="M1,5 L1,5 L1,5"
3149
+ />
3150
+ <path
3151
+ class="pf-v6-c-button--hamburger-icon--bottom"
3152
+ d="M9,9 L1,9"
3153
+ />
3154
+ </svg>
3155
+ </span>
3156
+ </button>
3157
+ </span>
3158
+ <div class="pf-v6-c-masthead__brand">
3159
+ <a class="pf-v6-c-masthead__logo" href="#">
3160
+ <svg height="37px" viewBox="0 0 679 158">
3161
+ <title>PF-HorizontalLogo-Color</title>
3162
+ <defs>
3163
+ <linearGradient
3164
+ x1="68%"
3165
+ y1="2.25860997e-13%"
3166
+ x2="32%"
3167
+ y2="100%"
3168
+ id="linearGradient-"
3169
+ >
3170
+ <stop stop-color="#2B9AF3" offset="0%" />
3171
+ <stop
3172
+ stop-color="#73BCF7"
3173
+ stop-opacity="0.502212631"
3174
+ offset="100%"
3175
+ />
3176
+ </linearGradient>
3177
+ </defs>
3178
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3179
+ <g
3180
+ transform="translate(206.000000, 45.750000)"
3181
+ fill="var(--pf-t--global--text--color--regular)"
3182
+ fill-rule="nonzero"
3183
+ >
3184
+ <path
3185
+ 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"
3186
+ />
3187
+ <path
3188
+ 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"
3189
+ />
3190
+ <path
3191
+ 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"
3192
+ />
3193
+ <path
3194
+ 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"
3195
+ />
3196
+ <path
3197
+ 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"
3198
+ />
3199
+ <path
3200
+ 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"
3201
+ />
3202
+ <path
3203
+ 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"
3204
+ />
3205
+ <polygon
3206
+ 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"
3207
+ />
3208
+ <polygon
3209
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3210
+ />
3211
+ <path
3212
+ 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"
3213
+ />
3214
+ </g>
3215
+ <g transform="translate(0.000000, 0.000000)">
3216
+ <path
3217
+ 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"
3218
+ fill="#0066CC"
3219
+ />
3220
+ <path
3221
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3222
+ fill="url(#linearGradient-)"
3223
+ />
3224
+ <path
3225
+ 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"
3226
+ fill="url(#linearGradient-)"
3227
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3228
+ />
3229
+ </g>
3230
+ </g>
3231
+ </svg>
3232
+ </a>
3233
+ </div>
3234
+ </div>
3235
+ <div class="pf-v6-c-masthead__content">
3236
+ <div class="pf-v6-c-toolbar pf-m-static">
3237
+ <div class="pf-v6-c-toolbar__content">
3238
+ <div class="pf-v6-c-toolbar__content-section">
3239
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
3240
+ <button
3241
+ class="pf-v6-c-button pf-m-plain"
3242
+ type="button"
3243
+ aria-label="Search"
3244
+ >
3245
+ <span class="pf-v6-c-button__icon">
3246
+ <svg
3247
+ class="pf-v6-svg"
3248
+ viewBox="0 0 512 512"
3249
+ fill="currentColor"
3250
+ aria-hidden="true"
3251
+ role="img"
3252
+ width="1em"
3253
+ height="1em"
3254
+ >
3255
+ <path
3256
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
3257
+ />
3258
+ </svg>
3259
+ </span>
3260
+ </button>
3261
+ </div>
3262
+ </div>
3263
+ </div>
3264
+ </div>
3265
+ </div>
3266
+ </header>
3267
+ <div class="pf-v6-c-page__dock pf-m-expanded">
3268
+ <div class="pf-v6-c-page__dock-main">
3269
+ <div class="pf-v6-c-skip-to-content">
3270
+ <a
3271
+ class="pf-v6-c-button pf-m-primary"
3272
+ href="#main-content-nav-docked-expanded-example"
3273
+ >
3274
+ <span class="pf-v6-c-button__text">Skip to content</span>
3275
+ </a>
3276
+ </div>
3277
+
3278
+ <header
3279
+ class="pf-v6-c-masthead pf-m-docked"
3280
+ id="nav-docked-expanded-example-masthead"
3281
+ >
3282
+ <div class="pf-v6-c-masthead__main">
3283
+ <span class="pf-v6-c-masthead__toggle">
3284
+ <button
3285
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3286
+ type="button"
3287
+ aria-label="Global navigation"
3288
+ >
3289
+ <span class="pf-v6-c-button__icon">
3290
+ <svg
3291
+ viewBox="0 0 10 10"
3292
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3293
+ width="1em"
3294
+ height="1em"
3295
+ >
3296
+ <path
3297
+ class="pf-v6-c-button--hamburger-icon--top"
3298
+ d="M1,1 L9,1"
3299
+ />
3300
+ <path
3301
+ class="pf-v6-c-button--hamburger-icon--middle"
3302
+ d="M1,5 L9,5"
3303
+ />
3304
+ <path
3305
+ class="pf-v6-c-button--hamburger-icon--arrow"
3306
+ d="M1,5 L1,5 L1,5"
3307
+ />
3308
+ <path
3309
+ class="pf-v6-c-button--hamburger-icon--bottom"
3310
+ d="M9,9 L1,9"
3311
+ />
3312
+ </svg>
3313
+ </span>
3314
+ </button>
3315
+ </span>
3316
+ <div class="pf-v6-c-masthead__brand">
3317
+ <a class="pf-v6-c-masthead__logo" href="#">
3318
+ <svg height="37px" viewBox="0 0 679 158">
3319
+ <title>PF-HorizontalLogo-Color</title>
3320
+ <defs>
3321
+ <linearGradient
3322
+ x1="68%"
3323
+ y1="2.25860997e-13%"
3324
+ x2="32%"
3325
+ y2="100%"
3326
+ id="linearGradient-nav-docked-expanded-example-masthead"
3327
+ >
3328
+ <stop stop-color="#2B9AF3" offset="0%" />
3329
+ <stop
3330
+ stop-color="#73BCF7"
3331
+ stop-opacity="0.502212631"
3332
+ offset="100%"
3333
+ />
3334
+ </linearGradient>
3335
+ </defs>
3336
+ <g
3337
+ stroke="none"
3338
+ stroke-width="1"
3339
+ fill="none"
3340
+ fill-rule="evenodd"
3341
+ >
3342
+ <g
3343
+ transform="translate(206.000000, 45.750000)"
3344
+ fill="var(--pf-t--global--text--color--regular)"
3345
+ fill-rule="nonzero"
3346
+ >
3347
+ <path
3348
+ 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"
3349
+ />
3350
+ <path
3351
+ 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"
3352
+ />
3353
+ <path
3354
+ 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"
3355
+ />
3356
+ <path
3357
+ 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"
3358
+ />
3359
+ <path
3360
+ 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"
3361
+ />
3362
+ <path
3363
+ 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"
3364
+ />
3365
+ <path
3366
+ 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"
3367
+ />
3368
+ <polygon
3369
+ 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"
3370
+ />
3371
+ <polygon
3372
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3373
+ />
3374
+ <path
3375
+ 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"
3376
+ />
3377
+ </g>
3378
+ <g transform="translate(0.000000, 0.000000)">
3379
+ <path
3380
+ 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"
3381
+ fill="#0066CC"
3382
+ />
3383
+ <path
3384
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3385
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
3386
+ />
3387
+ <path
3388
+ 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"
3389
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
3390
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3391
+ />
3392
+ </g>
3393
+ </g>
3394
+ </svg>
3395
+ </a>
3396
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
3397
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
3398
+ <title>PF-HorizontalLogo-Color</title>
3399
+ <defs>
3400
+ <linearGradient
3401
+ x1="68%"
3402
+ y1="2.25860997e-13%"
3403
+ x2="32%"
3404
+ y2="100%"
3405
+ id="linearGradient-1"
3406
+ >
3407
+ <stop stop-color="#2B9AF3" offset="0%" />
3408
+ <stop
3409
+ stop-color="#73BCF7"
3410
+ stop-opacity="0.502212631"
3411
+ offset="100%"
3412
+ />
3413
+ </linearGradient>
3414
+ </defs>
3415
+ <g
3416
+ id="PF-IconLogo-color"
3417
+ stroke="none"
3418
+ stroke-width="1"
3419
+ fill="none"
3420
+ fill-rule="evenodd"
3421
+ >
3422
+ <g id="Logo">
3423
+ <path
3424
+ 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"
3425
+ id="Rectangle-Copy-17"
3426
+ fill="#0066CC"
3427
+ />
3428
+ <path
3429
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3430
+ id="Path-2"
3431
+ fill="url(#linearGradient-1)"
3432
+ />
3433
+ <path
3434
+ 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"
3435
+ id="Path-2"
3436
+ fill="url(#linearGradient-1)"
3437
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3438
+ />
3439
+ </g>
3440
+ </g>
3441
+ </svg>
3442
+ </a>
3443
+ </div>
3444
+ </div>
3445
+ <hr class="pf-v6-c-divider" />
3446
+ <div class="pf-v6-c-masthead__content">
3447
+ <div
3448
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
3449
+ id="nav-docked-expanded-example-masthead-toolbar"
3450
+ >
3451
+ <div class="pf-v6-c-toolbar__content">
3452
+ <div class="pf-v6-c-toolbar__content-section">
3453
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
3454
+ <ul class="pf-v6-c-nav__list" role="list">
3455
+ <li class="pf-v6-c-nav__item">
3456
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
3457
+ <span class="pf-v6-c-nav__link-icon">
3458
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3459
+ </span>
3460
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3461
+ </a>
3462
+ </li>
3463
+ <li class="pf-v6-c-nav__item">
3464
+ <a
3465
+ href="#"
3466
+ class="pf-v6-c-nav__link pf-m-current"
3467
+ aria-current="page"
3468
+ aria-label="Folder"
3469
+ >
3470
+ <span class="pf-v6-c-nav__link-icon">
3471
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
3472
+ </span>
3473
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3474
+ </a>
3475
+ </li>
3476
+ <li class="pf-v6-c-nav__item">
3477
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
3478
+ <span class="pf-v6-c-nav__link-icon">
3479
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
3480
+ </span>
3481
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3482
+ </a>
3483
+ </li>
3484
+ <li class="pf-v6-c-nav__item">
3485
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
3486
+ <span class="pf-v6-c-nav__link-icon">
3487
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
3488
+ </span>
3489
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3490
+ </a>
3491
+ </li>
3492
+ </ul>
3493
+ </nav>
3494
+
3495
+ <div
3496
+ 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"
3497
+ >
3498
+ <div class="pf-v6-c-toolbar__item">
3499
+ <button
3500
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
3501
+ type="button"
3502
+ aria-expanded="false"
3503
+ aria-label="Applications"
3504
+ >
3505
+ <span class="pf-v6-c-menu-toggle__icon">
3506
+ <svg
3507
+ class="pf-v6-svg"
3508
+ viewBox="0 0 512 512"
3509
+ fill="currentColor"
3510
+ aria-hidden="true"
3511
+ role="img"
3512
+ width="1em"
3513
+ height="1em"
3514
+ >
3515
+ <path
3516
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
3517
+ />
3518
+ </svg>
3519
+ </span>
3520
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
3521
+ </button>
3522
+ </div>
3523
+ <div class="pf-v6-c-toolbar__item">
3524
+ <button
3525
+ class="pf-v6-c-button pf-m-docked pf-m-settings pf-m-plain"
3526
+ type="button"
3527
+ aria-label="Settings"
3528
+ >
3529
+ <span class="pf-v6-c-button__icon pf-m-start">
3530
+ <svg
3531
+ class="pf-v6-svg"
3532
+ viewBox="0 0 32 32"
3533
+ fill="currentColor"
3534
+ aria-hidden="true"
3535
+ role="img"
3536
+ width="1em"
3537
+ height="1em"
3538
+ >
3539
+ <path
3540
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3541
+ />
3542
+ </svg>
3543
+ </span>
3544
+ <span class="pf-v6-c-button__text">Settings</span>
3545
+ </button>
3546
+ </div>
3547
+ <div class="pf-v6-c-toolbar__item">
3548
+ <button
3549
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
3550
+ type="button"
3551
+ aria-expanded="false"
3552
+ aria-label="Help"
3553
+ >
3554
+ <span class="pf-v6-c-menu-toggle__icon">
3555
+ <svg
3556
+ class="pf-v6-svg"
3557
+ viewBox="0 0 512 512"
3558
+ fill="currentColor"
3559
+ aria-hidden="true"
3560
+ role="img"
3561
+ width="1em"
3562
+ height="1em"
3563
+ >
3564
+ <path
3565
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
3566
+ />
3567
+ </svg>
3568
+ </span>
3569
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
3570
+ </button>
3571
+ </div>
3572
+ </div>
3573
+ </div>
3574
+ </div>
3575
+ </div>
3576
+ </div>
3577
+ </header>
3578
+ </div>
3579
+ </div>
3580
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3581
+ <main
3582
+ class="pf-v6-c-page__main"
3583
+ tabindex="-1"
3584
+ id="main-content-nav-docked-expanded-example"
3585
+ >
3586
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3587
+ <div class="pf-v6-c-page__main-body">
3588
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3589
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3590
+ <li class="pf-v6-c-breadcrumb__item">
3591
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3592
+ </li>
3593
+ <li class="pf-v6-c-breadcrumb__item">
3594
+ <span class="pf-v6-c-breadcrumb__item-divider">
3595
+ <svg
3596
+ class="pf-v6-svg"
3597
+ viewBox="0 0 20 20"
3598
+ fill="currentColor"
3599
+ aria-hidden="true"
3600
+ role="img"
3601
+ width="1em"
3602
+ height="1em"
3603
+ >
3604
+ <path
3605
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3606
+ />
3607
+ </svg>
3608
+ </span>
3609
+
3610
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3611
+ </li>
3612
+ <li class="pf-v6-c-breadcrumb__item">
3613
+ <span class="pf-v6-c-breadcrumb__item-divider">
3614
+ <svg
3615
+ class="pf-v6-svg"
3616
+ viewBox="0 0 20 20"
3617
+ fill="currentColor"
3618
+ aria-hidden="true"
3619
+ role="img"
3620
+ width="1em"
3621
+ height="1em"
3622
+ >
3623
+ <path
3624
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3625
+ />
3626
+ </svg>
3627
+ </span>
3628
+
3629
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3630
+ </li>
3631
+ <li class="pf-v6-c-breadcrumb__item">
3632
+ <span class="pf-v6-c-breadcrumb__item-divider">
3633
+ <svg
3634
+ class="pf-v6-svg"
3635
+ viewBox="0 0 20 20"
3636
+ fill="currentColor"
3637
+ aria-hidden="true"
3638
+ role="img"
3639
+ width="1em"
3640
+ height="1em"
3641
+ >
3642
+ <path
3643
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3644
+ />
3645
+ </svg>
3646
+ </span>
3647
+
3648
+ <a
3649
+ href="#"
3650
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3651
+ aria-current="page"
3652
+ >Section landing</a>
3653
+ </li>
3654
+ </ol>
3655
+ </nav>
3656
+ </div>
3657
+ </section>
3658
+ <section
3659
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3660
+ aria-labelledby="main-title"
3661
+ >
3662
+ <div class="pf-v6-c-page__main-body">
3663
+ <h1
3664
+ class="pf-v6-c-content--h1 pf-m-page-title"
3665
+ id="main-title"
3666
+ >Main title</h1>
3667
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3668
+ </div>
3669
+ </section>
3670
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3671
+ <div class="pf-v6-c-page__main-body">
3672
+ <div class="pf-v6-l-gallery pf-m-gutter">
3673
+ <div class="pf-v6-c-card">
3674
+ <div class="pf-v6-c-card__body">This is a card</div>
3675
+ </div>
3676
+ <div class="pf-v6-c-card">
3677
+ <div class="pf-v6-c-card__body">This is a card</div>
3678
+ </div>
3679
+ <div class="pf-v6-c-card">
3680
+ <div class="pf-v6-c-card__body">This is a card</div>
3681
+ </div>
3682
+ <div class="pf-v6-c-card">
3683
+ <div class="pf-v6-c-card__body">This is a card</div>
3684
+ </div>
3685
+ <div class="pf-v6-c-card">
3686
+ <div class="pf-v6-c-card__body">This is a card</div>
3687
+ </div>
3688
+ <div class="pf-v6-c-card">
3689
+ <div class="pf-v6-c-card__body">This is a card</div>
3690
+ </div>
3691
+ <div class="pf-v6-c-card">
3692
+ <div class="pf-v6-c-card__body">This is a card</div>
3693
+ </div>
3694
+ <div class="pf-v6-c-card">
3695
+ <div class="pf-v6-c-card__body">This is a card</div>
3696
+ </div>
3697
+ <div class="pf-v6-c-card">
3698
+ <div class="pf-v6-c-card__body">This is a card</div>
3699
+ </div>
3700
+ <div class="pf-v6-c-card">
3701
+ <div class="pf-v6-c-card__body">This is a card</div>
3702
+ </div>
3703
+ </div>
3704
+ </div>
3705
+ </section>
3706
+ </main>
3707
+ </div>
3708
+ </div>
3709
+
3710
+ ```
3711
+
3712
+ ### Docked nav text expanded
3713
+
3714
+ ```html isFullscreen isBeta
3715
+ <div class="pf-v6-c-page pf-m-docked pf-m-no-sidebar" id="nav-docked-example">
3716
+ <header class="pf-v6-c-masthead pf-m-display-inline">
3717
+ <div class="pf-v6-c-masthead__main">
3718
+ <span class="pf-v6-c-masthead__toggle">
3719
+ <button
3720
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3721
+ type="button"
3722
+ aria-label="Global navigation"
3723
+ >
3724
+ <span class="pf-v6-c-button__icon">
3725
+ <svg
3726
+ viewBox="0 0 10 10"
3727
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3728
+ width="1em"
3729
+ height="1em"
3730
+ >
3731
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3732
+ <path
3733
+ class="pf-v6-c-button--hamburger-icon--middle"
3734
+ d="M1,5 L9,5"
3735
+ />
3736
+ <path
3737
+ class="pf-v6-c-button--hamburger-icon--arrow"
3738
+ d="M1,5 L1,5 L1,5"
3739
+ />
3740
+ <path
3741
+ class="pf-v6-c-button--hamburger-icon--bottom"
3742
+ d="M9,9 L1,9"
3743
+ />
3744
+ </svg>
3745
+ </span>
3746
+ </button>
3747
+ </span>
3748
+ <div class="pf-v6-c-masthead__brand">
3749
+ <a class="pf-v6-c-masthead__logo" href="#">
3750
+ <svg height="37px" viewBox="0 0 679 158">
3751
+ <title>PF-HorizontalLogo-Color</title>
3752
+ <defs>
3753
+ <linearGradient
3754
+ x1="68%"
3755
+ y1="2.25860997e-13%"
3756
+ x2="32%"
3757
+ y2="100%"
3758
+ id="linearGradient-"
3759
+ >
3760
+ <stop stop-color="#2B9AF3" offset="0%" />
3761
+ <stop
3762
+ stop-color="#73BCF7"
3763
+ stop-opacity="0.502212631"
3764
+ offset="100%"
3765
+ />
3766
+ </linearGradient>
3767
+ </defs>
3768
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3769
+ <g
3770
+ transform="translate(206.000000, 45.750000)"
3771
+ fill="var(--pf-t--global--text--color--regular)"
3772
+ fill-rule="nonzero"
3773
+ >
3774
+ <path
3775
+ 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"
3776
+ />
3777
+ <path
3778
+ 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"
3779
+ />
3780
+ <path
3781
+ 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"
3782
+ />
3783
+ <path
3784
+ 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"
3785
+ />
3786
+ <path
3787
+ 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"
3788
+ />
3789
+ <path
3790
+ 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"
3791
+ />
3792
+ <path
3793
+ 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"
3794
+ />
3795
+ <polygon
3796
+ 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"
3797
+ />
3798
+ <polygon
3799
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3800
+ />
3801
+ <path
3802
+ 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"
3803
+ />
3804
+ </g>
3805
+ <g transform="translate(0.000000, 0.000000)">
3806
+ <path
3807
+ 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"
3808
+ fill="#0066CC"
3809
+ />
3810
+ <path
3811
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3812
+ fill="url(#linearGradient-)"
3813
+ />
3814
+ <path
3815
+ 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"
3816
+ fill="url(#linearGradient-)"
3817
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3818
+ />
3819
+ </g>
3820
+ </g>
3821
+ </svg>
3822
+ </a>
3823
+ </div>
3824
+ </div>
3825
+ <div class="pf-v6-c-masthead__content">
3826
+ <div class="pf-v6-c-toolbar pf-m-static">
3827
+ <div class="pf-v6-c-toolbar__content">
3828
+ <div class="pf-v6-c-toolbar__content-section">
3829
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
3830
+ <button
3831
+ class="pf-v6-c-button pf-m-plain"
3832
+ type="button"
3833
+ aria-label="Search"
3834
+ >
3835
+ <span class="pf-v6-c-button__icon">
3836
+ <svg
3837
+ class="pf-v6-svg"
3838
+ viewBox="0 0 512 512"
3839
+ fill="currentColor"
3840
+ aria-hidden="true"
3841
+ role="img"
3842
+ width="1em"
3843
+ height="1em"
3844
+ >
3845
+ <path
3846
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
3847
+ />
3848
+ </svg>
3849
+ </span>
3850
+ </button>
3851
+ </div>
3852
+ </div>
3853
+ </div>
3854
+ </div>
3855
+ </div>
3856
+ </header>
3857
+ <div class="pf-v6-c-page__dock pf-m-text-expanded">
3858
+ <div class="pf-v6-c-page__dock-main">
3859
+ <div class="pf-v6-c-skip-to-content">
3860
+ <a
3861
+ class="pf-v6-c-button pf-m-primary"
3862
+ href="#main-content-nav-docked-example"
3863
+ >
3864
+ <span class="pf-v6-c-button__text">Skip to content</span>
3865
+ </a>
3866
+ </div>
3867
+
3868
+ <header
3869
+ class="pf-v6-c-masthead pf-m-docked"
3870
+ id="nav-docked-example-masthead"
3871
+ >
3872
+ <div class="pf-v6-c-masthead__main">
3873
+ <span class="pf-v6-c-masthead__toggle">
3874
+ <button
3875
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3876
+ type="button"
3877
+ aria-label="Global navigation"
3878
+ >
3879
+ <span class="pf-v6-c-button__icon">
3880
+ <svg
3881
+ viewBox="0 0 10 10"
3882
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3883
+ width="1em"
3884
+ height="1em"
3885
+ >
3886
+ <path
3887
+ class="pf-v6-c-button--hamburger-icon--top"
3888
+ d="M1,1 L9,1"
3889
+ />
3890
+ <path
3891
+ class="pf-v6-c-button--hamburger-icon--middle"
3892
+ d="M1,5 L9,5"
3893
+ />
3894
+ <path
3895
+ class="pf-v6-c-button--hamburger-icon--arrow"
3896
+ d="M1,5 L1,5 L1,5"
3897
+ />
3898
+ <path
3899
+ class="pf-v6-c-button--hamburger-icon--bottom"
3900
+ d="M9,9 L1,9"
3901
+ />
3902
+ </svg>
3903
+ </span>
3904
+ </button>
3905
+ </span>
3906
+ <div class="pf-v6-c-masthead__brand">
3907
+ <a class="pf-v6-c-masthead__logo" href="#">
3908
+ <svg height="37px" viewBox="0 0 679 158">
3909
+ <title>PF-HorizontalLogo-Color</title>
3910
+ <defs>
3911
+ <linearGradient
3912
+ x1="68%"
3913
+ y1="2.25860997e-13%"
3914
+ x2="32%"
3915
+ y2="100%"
3916
+ id="linearGradient-nav-docked-example-masthead"
3917
+ >
3918
+ <stop stop-color="#2B9AF3" offset="0%" />
3919
+ <stop
3920
+ stop-color="#73BCF7"
3921
+ stop-opacity="0.502212631"
3922
+ offset="100%"
3923
+ />
3924
+ </linearGradient>
3925
+ </defs>
3926
+ <g
3927
+ stroke="none"
3928
+ stroke-width="1"
3929
+ fill="none"
3930
+ fill-rule="evenodd"
3931
+ >
3932
+ <g
3933
+ transform="translate(206.000000, 45.750000)"
3934
+ fill="var(--pf-t--global--text--color--regular)"
3935
+ fill-rule="nonzero"
3936
+ >
3937
+ <path
3938
+ 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"
3939
+ />
3940
+ <path
3941
+ 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"
3942
+ />
3943
+ <path
3944
+ 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"
3945
+ />
3946
+ <path
3947
+ 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"
3948
+ />
3949
+ <path
3950
+ 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"
3951
+ />
3952
+ <path
3953
+ 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"
3954
+ />
3955
+ <path
3956
+ 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"
3957
+ />
3958
+ <polygon
3959
+ 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"
3960
+ />
3961
+ <polygon
3962
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3963
+ />
3964
+ <path
3965
+ 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"
3966
+ />
3967
+ </g>
3968
+ <g transform="translate(0.000000, 0.000000)">
3969
+ <path
3970
+ 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"
3971
+ fill="#0066CC"
3972
+ />
3973
+ <path
3974
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3975
+ fill="url(#linearGradient-nav-docked-example-masthead)"
3976
+ />
3977
+ <path
3978
+ 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"
3979
+ fill="url(#linearGradient-nav-docked-example-masthead)"
3980
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3981
+ />
3982
+ </g>
3983
+ </g>
3984
+ </svg>
3985
+ </a>
3986
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
3987
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
3988
+ <title>PF-HorizontalLogo-Color</title>
3989
+ <defs>
3990
+ <linearGradient
3991
+ x1="68%"
3992
+ y1="2.25860997e-13%"
3993
+ x2="32%"
3994
+ y2="100%"
3995
+ id="linearGradient-1"
3996
+ >
3997
+ <stop stop-color="#2B9AF3" offset="0%" />
3998
+ <stop
3999
+ stop-color="#73BCF7"
4000
+ stop-opacity="0.502212631"
4001
+ offset="100%"
4002
+ />
4003
+ </linearGradient>
4004
+ </defs>
4005
+ <g
4006
+ id="PF-IconLogo-color"
4007
+ stroke="none"
4008
+ stroke-width="1"
4009
+ fill="none"
4010
+ fill-rule="evenodd"
4011
+ >
4012
+ <g id="Logo">
4013
+ <path
4014
+ 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"
4015
+ id="Rectangle-Copy-17"
4016
+ fill="#0066CC"
4017
+ />
4018
+ <path
4019
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4020
+ id="Path-2"
4021
+ fill="url(#linearGradient-1)"
4022
+ />
4023
+ <path
4024
+ 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"
4025
+ id="Path-2"
4026
+ fill="url(#linearGradient-1)"
4027
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4028
+ />
4029
+ </g>
4030
+ </g>
4031
+ </svg>
4032
+ </a>
4033
+ </div>
4034
+ </div>
4035
+ <hr class="pf-v6-c-divider" />
4036
+ <div class="pf-v6-c-masthead__content">
4037
+ <div
4038
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
4039
+ id="nav-docked-example-masthead-toolbar"
4040
+ >
4041
+ <div class="pf-v6-c-toolbar__content">
4042
+ <div class="pf-v6-c-toolbar__content-section">
4043
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
4044
+ <ul class="pf-v6-c-nav__list" role="list">
4045
+ <li class="pf-v6-c-nav__item">
4046
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
4047
+ <span class="pf-v6-c-nav__link-icon">
4048
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4049
+ </span>
4050
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4051
+ </a>
4052
+ </li>
4053
+ <li class="pf-v6-c-nav__item">
4054
+ <a
4055
+ href="#"
4056
+ class="pf-v6-c-nav__link pf-m-current"
4057
+ aria-current="page"
4058
+ aria-label="Folder"
4059
+ >
4060
+ <span class="pf-v6-c-nav__link-icon">
4061
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
4062
+ </span>
4063
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4064
+ </a>
4065
+ </li>
4066
+ <li class="pf-v6-c-nav__item">
4067
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
4068
+ <span class="pf-v6-c-nav__link-icon">
4069
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
4070
+ </span>
4071
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4072
+ </a>
4073
+ </li>
4074
+ <li class="pf-v6-c-nav__item">
4075
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
4076
+ <span class="pf-v6-c-nav__link-icon">
4077
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
4078
+ </span>
4079
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4080
+ </a>
4081
+ </li>
4082
+ </ul>
4083
+ </nav>
4084
+
4085
+ <div
4086
+ 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"
4087
+ >
4088
+ <div class="pf-v6-c-toolbar__item">
4089
+ <button
4090
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
4091
+ type="button"
4092
+ aria-expanded="false"
4093
+ aria-label="Applications"
4094
+ >
4095
+ <span class="pf-v6-c-menu-toggle__icon">
4096
+ <svg
4097
+ class="pf-v6-svg"
4098
+ viewBox="0 0 512 512"
4099
+ fill="currentColor"
4100
+ aria-hidden="true"
4101
+ role="img"
4102
+ width="1em"
4103
+ height="1em"
4104
+ >
4105
+ <path
4106
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
4107
+ />
4108
+ </svg>
4109
+ </span>
4110
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
4111
+ </button>
4112
+ </div>
4113
+ <div class="pf-v6-c-toolbar__item">
4114
+ <button
4115
+ class="pf-v6-c-button pf-m-docked pf-m-settings pf-m-plain"
4116
+ type="button"
4117
+ aria-label="Settings"
4118
+ >
4119
+ <span class="pf-v6-c-button__icon pf-m-start">
4120
+ <svg
4121
+ class="pf-v6-svg"
4122
+ viewBox="0 0 32 32"
4123
+ fill="currentColor"
4124
+ aria-hidden="true"
4125
+ role="img"
4126
+ width="1em"
4127
+ height="1em"
4128
+ >
4129
+ <path
4130
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
4131
+ />
4132
+ </svg>
4133
+ </span>
4134
+ <span class="pf-v6-c-button__text">Settings</span>
4135
+ </button>
4136
+ </div>
4137
+ <div class="pf-v6-c-toolbar__item">
4138
+ <button
4139
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
4140
+ type="button"
4141
+ aria-expanded="false"
4142
+ aria-label="Help"
4143
+ >
4144
+ <span class="pf-v6-c-menu-toggle__icon">
4145
+ <svg
4146
+ class="pf-v6-svg"
4147
+ viewBox="0 0 512 512"
4148
+ fill="currentColor"
4149
+ aria-hidden="true"
4150
+ role="img"
4151
+ width="1em"
4152
+ height="1em"
4153
+ >
4154
+ <path
4155
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
4156
+ />
4157
+ </svg>
4158
+ </span>
4159
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
4160
+ </button>
4161
+ </div>
4162
+ </div>
4163
+ </div>
4164
+ </div>
4165
+ </div>
4166
+ </div>
4167
+ </header>
4168
+ </div>
4169
+ </div>
4170
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4171
+ <main
4172
+ class="pf-v6-c-page__main"
4173
+ tabindex="-1"
4174
+ id="main-content-nav-docked-example"
4175
+ >
4176
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4177
+ <div class="pf-v6-c-page__main-body">
4178
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4179
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4180
+ <li class="pf-v6-c-breadcrumb__item">
4181
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4182
+ </li>
4183
+ <li class="pf-v6-c-breadcrumb__item">
4184
+ <span class="pf-v6-c-breadcrumb__item-divider">
4185
+ <svg
4186
+ class="pf-v6-svg"
4187
+ viewBox="0 0 20 20"
4188
+ fill="currentColor"
4189
+ aria-hidden="true"
4190
+ role="img"
4191
+ width="1em"
4192
+ height="1em"
4193
+ >
4194
+ <path
4195
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4196
+ />
4197
+ </svg>
4198
+ </span>
4199
+
4200
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4201
+ </li>
4202
+ <li class="pf-v6-c-breadcrumb__item">
4203
+ <span class="pf-v6-c-breadcrumb__item-divider">
4204
+ <svg
4205
+ class="pf-v6-svg"
4206
+ viewBox="0 0 20 20"
4207
+ fill="currentColor"
4208
+ aria-hidden="true"
4209
+ role="img"
4210
+ width="1em"
4211
+ height="1em"
4212
+ >
4213
+ <path
4214
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4215
+ />
4216
+ </svg>
4217
+ </span>
4218
+
4219
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4220
+ </li>
4221
+ <li class="pf-v6-c-breadcrumb__item">
4222
+ <span class="pf-v6-c-breadcrumb__item-divider">
4223
+ <svg
4224
+ class="pf-v6-svg"
4225
+ viewBox="0 0 20 20"
4226
+ fill="currentColor"
4227
+ aria-hidden="true"
4228
+ role="img"
4229
+ width="1em"
4230
+ height="1em"
4231
+ >
4232
+ <path
4233
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4234
+ />
4235
+ </svg>
4236
+ </span>
4237
+
4238
+ <a
4239
+ href="#"
4240
+ class="pf-v6-c-breadcrumb__link pf-m-current"
4241
+ aria-current="page"
4242
+ >Section landing</a>
4243
+ </li>
4244
+ </ol>
4245
+ </nav>
4246
+ </div>
4247
+ </section>
4248
+ <section
4249
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4250
+ aria-labelledby="main-title"
4251
+ >
4252
+ <div class="pf-v6-c-page__main-body">
4253
+ <h1
4254
+ class="pf-v6-c-content--h1 pf-m-page-title"
4255
+ id="main-title"
4256
+ >Main title</h1>
4257
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
4258
+ </div>
4259
+ </section>
4260
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
4261
+ <div class="pf-v6-c-page__main-body">
4262
+ <div class="pf-v6-l-gallery pf-m-gutter">
4263
+ <div class="pf-v6-c-card">
4264
+ <div class="pf-v6-c-card__body">This is a card</div>
4265
+ </div>
4266
+ <div class="pf-v6-c-card">
4267
+ <div class="pf-v6-c-card__body">This is a card</div>
4268
+ </div>
4269
+ <div class="pf-v6-c-card">
4270
+ <div class="pf-v6-c-card__body">This is a card</div>
4271
+ </div>
4272
+ <div class="pf-v6-c-card">
4273
+ <div class="pf-v6-c-card__body">This is a card</div>
4274
+ </div>
4275
+ <div class="pf-v6-c-card">
4276
+ <div class="pf-v6-c-card__body">This is a card</div>
4277
+ </div>
4278
+ <div class="pf-v6-c-card">
4279
+ <div class="pf-v6-c-card__body">This is a card</div>
4280
+ </div>
4281
+ <div class="pf-v6-c-card">
4282
+ <div class="pf-v6-c-card__body">This is a card</div>
4283
+ </div>
4284
+ <div class="pf-v6-c-card">
4285
+ <div class="pf-v6-c-card__body">This is a card</div>
4286
+ </div>
4287
+ <div class="pf-v6-c-card">
4288
+ <div class="pf-v6-c-card__body">This is a card</div>
4289
+ </div>
4290
+ <div class="pf-v6-c-card">
4291
+ <div class="pf-v6-c-card__body">This is a card</div>
4292
+ </div>
4293
+ </div>
4294
+ </div>
4295
+ </section>
4296
+ </main>
4297
+ </div>
4298
+ </div>
4299
+
4300
+ ```
4301
+
4302
+ ### Docked nav text expanded - expanded on mobile
4303
+
4304
+ ```html isFullscreen isBeta
4305
+ <div
4306
+ class="pf-v6-c-page pf-m-docked pf-m-no-sidebar"
4307
+ id="nav-docked-expanded-example"
4308
+ >
4309
+ <header class="pf-v6-c-masthead pf-m-display-inline">
4310
+ <div class="pf-v6-c-masthead__main">
4311
+ <span class="pf-v6-c-masthead__toggle">
4312
+ <button
4313
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4314
+ type="button"
4315
+ aria-label="Global navigation"
4316
+ >
4317
+ <span class="pf-v6-c-button__icon">
4318
+ <svg
4319
+ viewBox="0 0 10 10"
4320
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4321
+ width="1em"
4322
+ height="1em"
4323
+ >
4324
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4325
+ <path
4326
+ class="pf-v6-c-button--hamburger-icon--middle"
4327
+ d="M1,5 L9,5"
4328
+ />
4329
+ <path
4330
+ class="pf-v6-c-button--hamburger-icon--arrow"
4331
+ d="M1,5 L1,5 L1,5"
4332
+ />
4333
+ <path
4334
+ class="pf-v6-c-button--hamburger-icon--bottom"
4335
+ d="M9,9 L1,9"
4336
+ />
4337
+ </svg>
4338
+ </span>
4339
+ </button>
4340
+ </span>
4341
+ <div class="pf-v6-c-masthead__brand">
4342
+ <a class="pf-v6-c-masthead__logo" href="#">
4343
+ <svg height="37px" viewBox="0 0 679 158">
4344
+ <title>PF-HorizontalLogo-Color</title>
4345
+ <defs>
4346
+ <linearGradient
4347
+ x1="68%"
4348
+ y1="2.25860997e-13%"
4349
+ x2="32%"
4350
+ y2="100%"
4351
+ id="linearGradient-"
4352
+ >
4353
+ <stop stop-color="#2B9AF3" offset="0%" />
4354
+ <stop
4355
+ stop-color="#73BCF7"
4356
+ stop-opacity="0.502212631"
4357
+ offset="100%"
4358
+ />
4359
+ </linearGradient>
4360
+ </defs>
4361
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4362
+ <g
4363
+ transform="translate(206.000000, 45.750000)"
4364
+ fill="var(--pf-t--global--text--color--regular)"
4365
+ fill-rule="nonzero"
4366
+ >
4367
+ <path
4368
+ 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"
4369
+ />
4370
+ <path
4371
+ 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"
4372
+ />
4373
+ <path
4374
+ 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"
4375
+ />
4376
+ <path
4377
+ 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"
4378
+ />
4379
+ <path
4380
+ 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"
4381
+ />
4382
+ <path
4383
+ 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"
4384
+ />
4385
+ <path
4386
+ 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"
4387
+ />
4388
+ <polygon
4389
+ 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"
4390
+ />
4391
+ <polygon
4392
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4393
+ />
4394
+ <path
4395
+ 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"
4396
+ />
4397
+ </g>
4398
+ <g transform="translate(0.000000, 0.000000)">
4399
+ <path
4400
+ 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"
4401
+ fill="#0066CC"
4402
+ />
4403
+ <path
4404
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4405
+ fill="url(#linearGradient-)"
4406
+ />
4407
+ <path
4408
+ 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"
4409
+ fill="url(#linearGradient-)"
4410
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4411
+ />
4412
+ </g>
4413
+ </g>
4414
+ </svg>
4415
+ </a>
4416
+ </div>
4417
+ </div>
4418
+ <div class="pf-v6-c-masthead__content">
4419
+ <div class="pf-v6-c-toolbar pf-m-static">
4420
+ <div class="pf-v6-c-toolbar__content">
4421
+ <div class="pf-v6-c-toolbar__content-section">
4422
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
4423
+ <button
4424
+ class="pf-v6-c-button pf-m-plain"
4425
+ type="button"
4426
+ aria-label="Search"
4427
+ >
4428
+ <span class="pf-v6-c-button__icon">
4429
+ <svg
4430
+ class="pf-v6-svg"
4431
+ viewBox="0 0 512 512"
4432
+ fill="currentColor"
4433
+ aria-hidden="true"
4434
+ role="img"
4435
+ width="1em"
4436
+ height="1em"
4437
+ >
4438
+ <path
4439
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
4440
+ />
4441
+ </svg>
4442
+ </span>
4443
+ </button>
4444
+ </div>
4445
+ </div>
4446
+ </div>
4447
+ </div>
4448
+ </div>
4449
+ </header>
4450
+ <div class="pf-v6-c-page__dock pf-m-text-expanded pf-m-expanded">
4451
+ <div class="pf-v6-c-page__dock-main">
4452
+ <div class="pf-v6-c-skip-to-content">
4453
+ <a
4454
+ class="pf-v6-c-button pf-m-primary"
4455
+ href="#main-content-nav-docked-expanded-example"
4456
+ >
4457
+ <span class="pf-v6-c-button__text">Skip to content</span>
4458
+ </a>
4459
+ </div>
4460
+
4461
+ <header
4462
+ class="pf-v6-c-masthead pf-m-docked"
4463
+ id="nav-docked-expanded-example-masthead"
4464
+ >
4465
+ <div class="pf-v6-c-masthead__main">
4466
+ <span class="pf-v6-c-masthead__toggle">
4467
+ <button
4468
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4469
+ type="button"
4470
+ aria-label="Global navigation"
4471
+ >
4472
+ <span class="pf-v6-c-button__icon">
4473
+ <svg
4474
+ viewBox="0 0 10 10"
4475
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4476
+ width="1em"
4477
+ height="1em"
4478
+ >
4479
+ <path
4480
+ class="pf-v6-c-button--hamburger-icon--top"
4481
+ d="M1,1 L9,1"
4482
+ />
4483
+ <path
4484
+ class="pf-v6-c-button--hamburger-icon--middle"
4485
+ d="M1,5 L9,5"
4486
+ />
4487
+ <path
4488
+ class="pf-v6-c-button--hamburger-icon--arrow"
4489
+ d="M1,5 L1,5 L1,5"
4490
+ />
4491
+ <path
4492
+ class="pf-v6-c-button--hamburger-icon--bottom"
4493
+ d="M9,9 L1,9"
4494
+ />
4495
+ </svg>
4496
+ </span>
4497
+ </button>
4498
+ </span>
4499
+ <div class="pf-v6-c-masthead__brand">
4500
+ <a class="pf-v6-c-masthead__logo" href="#">
4501
+ <svg height="37px" viewBox="0 0 679 158">
4502
+ <title>PF-HorizontalLogo-Color</title>
4503
+ <defs>
4504
+ <linearGradient
4505
+ x1="68%"
4506
+ y1="2.25860997e-13%"
4507
+ x2="32%"
4508
+ y2="100%"
4509
+ id="linearGradient-nav-docked-expanded-example-masthead"
4510
+ >
4511
+ <stop stop-color="#2B9AF3" offset="0%" />
4512
+ <stop
4513
+ stop-color="#73BCF7"
4514
+ stop-opacity="0.502212631"
4515
+ offset="100%"
4516
+ />
4517
+ </linearGradient>
4518
+ </defs>
4519
+ <g
4520
+ stroke="none"
4521
+ stroke-width="1"
4522
+ fill="none"
4523
+ fill-rule="evenodd"
4524
+ >
4525
+ <g
4526
+ transform="translate(206.000000, 45.750000)"
4527
+ fill="var(--pf-t--global--text--color--regular)"
4528
+ fill-rule="nonzero"
4529
+ >
4530
+ <path
4531
+ 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"
4532
+ />
4533
+ <path
4534
+ 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"
4535
+ />
4536
+ <path
4537
+ 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"
4538
+ />
4539
+ <path
4540
+ 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"
4541
+ />
4542
+ <path
4543
+ 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"
4544
+ />
4545
+ <path
4546
+ 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"
4547
+ />
4548
+ <path
4549
+ 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"
4550
+ />
4551
+ <polygon
4552
+ 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"
4553
+ />
4554
+ <polygon
4555
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4556
+ />
4557
+ <path
4558
+ 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"
4559
+ />
4560
+ </g>
4561
+ <g transform="translate(0.000000, 0.000000)">
4562
+ <path
4563
+ 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"
4564
+ fill="#0066CC"
4565
+ />
4566
+ <path
4567
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4568
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
4569
+ />
4570
+ <path
4571
+ 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"
4572
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
4573
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4574
+ />
4575
+ </g>
4576
+ </g>
4577
+ </svg>
4578
+ </a>
4579
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
4580
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
4581
+ <title>PF-HorizontalLogo-Color</title>
4582
+ <defs>
4583
+ <linearGradient
4584
+ x1="68%"
4585
+ y1="2.25860997e-13%"
4586
+ x2="32%"
4587
+ y2="100%"
4588
+ id="linearGradient-1"
4589
+ >
4590
+ <stop stop-color="#2B9AF3" offset="0%" />
4591
+ <stop
4592
+ stop-color="#73BCF7"
4593
+ stop-opacity="0.502212631"
4594
+ offset="100%"
4595
+ />
4596
+ </linearGradient>
4597
+ </defs>
4598
+ <g
4599
+ id="PF-IconLogo-color"
4600
+ stroke="none"
4601
+ stroke-width="1"
4602
+ fill="none"
4603
+ fill-rule="evenodd"
4604
+ >
4605
+ <g id="Logo">
4606
+ <path
4607
+ 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"
4608
+ id="Rectangle-Copy-17"
4609
+ fill="#0066CC"
4610
+ />
4611
+ <path
4612
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4613
+ id="Path-2"
4614
+ fill="url(#linearGradient-1)"
4615
+ />
4616
+ <path
4617
+ 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"
4618
+ id="Path-2"
4619
+ fill="url(#linearGradient-1)"
4620
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4621
+ />
4622
+ </g>
4623
+ </g>
4624
+ </svg>
4625
+ </a>
4626
+ </div>
4627
+ </div>
4628
+ <hr class="pf-v6-c-divider" />
4629
+ <div class="pf-v6-c-masthead__content">
4630
+ <div
4631
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
4632
+ id="nav-docked-expanded-example-masthead-toolbar"
4633
+ >
4634
+ <div class="pf-v6-c-toolbar__content">
4635
+ <div class="pf-v6-c-toolbar__content-section">
4636
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
4637
+ <ul class="pf-v6-c-nav__list" role="list">
4638
+ <li class="pf-v6-c-nav__item">
4639
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
4640
+ <span class="pf-v6-c-nav__link-icon">
4641
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4642
+ </span>
4643
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4644
+ </a>
4645
+ </li>
4646
+ <li class="pf-v6-c-nav__item">
4647
+ <a
4648
+ href="#"
4649
+ class="pf-v6-c-nav__link pf-m-current"
4650
+ aria-current="page"
4651
+ aria-label="Folder"
4652
+ >
4653
+ <span class="pf-v6-c-nav__link-icon">
4654
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
4655
+ </span>
4656
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4657
+ </a>
4658
+ </li>
4659
+ <li class="pf-v6-c-nav__item">
4660
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
4661
+ <span class="pf-v6-c-nav__link-icon">
4662
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
4663
+ </span>
4664
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4665
+ </a>
4666
+ </li>
4667
+ <li class="pf-v6-c-nav__item">
4668
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
4669
+ <span class="pf-v6-c-nav__link-icon">
4670
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
4671
+ </span>
4672
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4673
+ </a>
4674
+ </li>
4675
+ </ul>
4676
+ </nav>
4677
+
4678
+ <div
4679
+ 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"
4680
+ >
4681
+ <div class="pf-v6-c-toolbar__item">
4682
+ <button
4683
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
4684
+ type="button"
4685
+ aria-expanded="false"
4686
+ aria-label="Applications"
4687
+ >
4688
+ <span class="pf-v6-c-menu-toggle__icon">
4689
+ <svg
4690
+ class="pf-v6-svg"
4691
+ viewBox="0 0 512 512"
4692
+ fill="currentColor"
4693
+ aria-hidden="true"
4694
+ role="img"
4695
+ width="1em"
4696
+ height="1em"
4697
+ >
4698
+ <path
4699
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
4700
+ />
4701
+ </svg>
4702
+ </span>
4703
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
4704
+ </button>
4705
+ </div>
4706
+ <div class="pf-v6-c-toolbar__item">
4707
+ <button
4708
+ class="pf-v6-c-button pf-m-docked pf-m-settings pf-m-plain"
4709
+ type="button"
4710
+ aria-label="Settings"
4711
+ >
4712
+ <span class="pf-v6-c-button__icon pf-m-start">
4713
+ <svg
4714
+ class="pf-v6-svg"
4715
+ viewBox="0 0 32 32"
4716
+ fill="currentColor"
4717
+ aria-hidden="true"
4718
+ role="img"
4719
+ width="1em"
4720
+ height="1em"
4721
+ >
4722
+ <path
4723
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
4724
+ />
4725
+ </svg>
4726
+ </span>
4727
+ <span class="pf-v6-c-button__text">Settings</span>
4728
+ </button>
4729
+ </div>
4730
+ <div class="pf-v6-c-toolbar__item">
4731
+ <button
4732
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
4733
+ type="button"
4734
+ aria-expanded="false"
4735
+ aria-label="Help"
4736
+ >
4737
+ <span class="pf-v6-c-menu-toggle__icon">
4738
+ <svg
4739
+ class="pf-v6-svg"
4740
+ viewBox="0 0 512 512"
4741
+ fill="currentColor"
4742
+ aria-hidden="true"
4743
+ role="img"
4744
+ width="1em"
4745
+ height="1em"
4746
+ >
4747
+ <path
4748
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
4749
+ />
4750
+ </svg>
4751
+ </span>
4752
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
4753
+ </button>
4754
+ </div>
4755
+ </div>
4756
+ </div>
4757
+ </div>
4758
+ </div>
4759
+ </div>
4760
+ </header>
4761
+ </div>
4762
+ </div>
4763
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4764
+ <main
4765
+ class="pf-v6-c-page__main"
4766
+ tabindex="-1"
4767
+ id="main-content-nav-docked-expanded-example"
4768
+ >
4769
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4770
+ <div class="pf-v6-c-page__main-body">
4771
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4772
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4773
+ <li class="pf-v6-c-breadcrumb__item">
4774
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4775
+ </li>
4776
+ <li class="pf-v6-c-breadcrumb__item">
4777
+ <span class="pf-v6-c-breadcrumb__item-divider">
4778
+ <svg
4779
+ class="pf-v6-svg"
4780
+ viewBox="0 0 20 20"
4781
+ fill="currentColor"
4782
+ aria-hidden="true"
4783
+ role="img"
4784
+ width="1em"
4785
+ height="1em"
4786
+ >
4787
+ <path
4788
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4789
+ />
4790
+ </svg>
4791
+ </span>
4792
+
4793
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4794
+ </li>
4795
+ <li class="pf-v6-c-breadcrumb__item">
4796
+ <span class="pf-v6-c-breadcrumb__item-divider">
4797
+ <svg
4798
+ class="pf-v6-svg"
4799
+ viewBox="0 0 20 20"
4800
+ fill="currentColor"
4801
+ aria-hidden="true"
4802
+ role="img"
4803
+ width="1em"
4804
+ height="1em"
4805
+ >
4806
+ <path
4807
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4808
+ />
4809
+ </svg>
4810
+ </span>
4811
+
4812
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4813
+ </li>
4814
+ <li class="pf-v6-c-breadcrumb__item">
4815
+ <span class="pf-v6-c-breadcrumb__item-divider">
4816
+ <svg
4817
+ class="pf-v6-svg"
4818
+ viewBox="0 0 20 20"
4819
+ fill="currentColor"
4820
+ aria-hidden="true"
4821
+ role="img"
4822
+ width="1em"
4823
+ height="1em"
4824
+ >
4825
+ <path
4826
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4827
+ />
4828
+ </svg>
4829
+ </span>
4830
+
4831
+ <a
4832
+ href="#"
4833
+ class="pf-v6-c-breadcrumb__link pf-m-current"
4834
+ aria-current="page"
4835
+ >Section landing</a>
4836
+ </li>
4837
+ </ol>
4838
+ </nav>
4839
+ </div>
4840
+ </section>
4841
+ <section
4842
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4843
+ aria-labelledby="main-title"
4844
+ >
4845
+ <div class="pf-v6-c-page__main-body">
4846
+ <h1
4847
+ class="pf-v6-c-content--h1 pf-m-page-title"
4848
+ id="main-title"
4849
+ >Main title</h1>
2082
4850
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2083
4851
  </div>
2084
4852
  </section>