@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

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 (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. 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,2563 @@ 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" id="nav-docked-example">
2533
+ <div class="pf-v6-c-skip-to-content">
2534
+ <a
2535
+ class="pf-v6-c-button pf-m-primary"
2536
+ href="#main-content-nav-docked-example"
2537
+ >
2538
+ <span class="pf-v6-c-button__text">Skip to content</span>
2539
+ </a>
2540
+ </div>
2541
+ <header class="pf-v6-c-masthead pf-m-display-inline">
2542
+ <div class="pf-v6-c-masthead__main">
2543
+ <span class="pf-v6-c-masthead__toggle">
2544
+ <button
2545
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2546
+ type="button"
2547
+ aria-label="Global navigation"
2548
+ >
2549
+ <span class="pf-v6-c-button__icon">
2550
+ <svg
2551
+ viewBox="0 0 10 10"
2552
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2553
+ width="1em"
2554
+ height="1em"
2555
+ >
2556
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2557
+ <path
2558
+ class="pf-v6-c-button--hamburger-icon--middle"
2559
+ d="M1,5 L9,5"
2560
+ />
2561
+ <path
2562
+ class="pf-v6-c-button--hamburger-icon--arrow"
2563
+ d="M1,5 L1,5 L1,5"
2564
+ />
2565
+ <path
2566
+ class="pf-v6-c-button--hamburger-icon--bottom"
2567
+ d="M9,9 L1,9"
2568
+ />
2569
+ </svg>
2570
+ </span>
2571
+ </button>
2572
+ </span>
2573
+ <div class="pf-v6-c-masthead__brand">
2574
+ <a class="pf-v6-c-masthead__logo" href="#">
2575
+ <svg height="37px" viewBox="0 0 679 158">
2576
+ <title>PF-HorizontalLogo-Color</title>
2577
+ <defs>
2578
+ <linearGradient
2579
+ x1="68%"
2580
+ y1="2.25860997e-13%"
2581
+ x2="32%"
2582
+ y2="100%"
2583
+ id="linearGradient-"
2584
+ >
2585
+ <stop stop-color="#2B9AF3" offset="0%" />
2586
+ <stop
2587
+ stop-color="#73BCF7"
2588
+ stop-opacity="0.502212631"
2589
+ offset="100%"
2590
+ />
2591
+ </linearGradient>
2592
+ </defs>
2593
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2594
+ <g
2595
+ transform="translate(206.000000, 45.750000)"
2596
+ fill="var(--pf-t--global--text--color--regular)"
2597
+ fill-rule="nonzero"
2598
+ >
2599
+ <path
2600
+ 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"
2601
+ />
2602
+ <path
2603
+ 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"
2604
+ />
2605
+ <path
2606
+ 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"
2607
+ />
2608
+ <path
2609
+ 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"
2610
+ />
2611
+ <path
2612
+ 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"
2613
+ />
2614
+ <path
2615
+ 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"
2616
+ />
2617
+ <path
2618
+ 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"
2619
+ />
2620
+ <polygon
2621
+ 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"
2622
+ />
2623
+ <polygon
2624
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2625
+ />
2626
+ <path
2627
+ 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"
2628
+ />
2629
+ </g>
2630
+ <g transform="translate(0.000000, 0.000000)">
2631
+ <path
2632
+ 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"
2633
+ fill="#0066CC"
2634
+ />
2635
+ <path
2636
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2637
+ fill="url(#linearGradient-)"
2638
+ />
2639
+ <path
2640
+ 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"
2641
+ fill="url(#linearGradient-)"
2642
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2643
+ />
2644
+ </g>
2645
+ </g>
2646
+ </svg>
2647
+ </a>
2648
+ </div>
2649
+ </div>
2650
+ <div class="pf-v6-c-masthead__content">
2651
+ <div class="pf-v6-c-toolbar pf-m-static">
2652
+ <div class="pf-v6-c-toolbar__content">
2653
+ <div class="pf-v6-c-toolbar__content-section">
2654
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
2655
+ <button
2656
+ class="pf-v6-c-button pf-m-plain"
2657
+ type="button"
2658
+ aria-label="Search"
2659
+ >
2660
+ <span class="pf-v6-c-button__icon">
2661
+ <svg
2662
+ class="pf-v6-svg"
2663
+ viewBox="0 0 32 32"
2664
+ fill="currentColor"
2665
+ aria-hidden="true"
2666
+ role="img"
2667
+ width="1em"
2668
+ height="1em"
2669
+ >
2670
+ <path
2671
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
2672
+ />
2673
+ </svg>
2674
+ </span>
2675
+ </button>
2676
+ </div>
2677
+ </div>
2678
+ </div>
2679
+ </div>
2680
+ </div>
2681
+ </header>
2682
+ <div class="pf-v6-c-page__dock">
2683
+ <div class="pf-v6-c-page__dock-main">
2684
+ <header
2685
+ class="pf-v6-c-masthead pf-m-docked"
2686
+ id="nav-docked-example-masthead"
2687
+ >
2688
+ <div class="pf-v6-c-masthead__main">
2689
+ <span class="pf-v6-c-masthead__toggle">
2690
+ <button
2691
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2692
+ type="button"
2693
+ aria-label="Global navigation"
2694
+ >
2695
+ <span class="pf-v6-c-button__icon">
2696
+ <svg
2697
+ viewBox="0 0 10 10"
2698
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2699
+ width="1em"
2700
+ height="1em"
2701
+ >
2702
+ <path
2703
+ class="pf-v6-c-button--hamburger-icon--top"
2704
+ d="M1,1 L9,1"
2705
+ />
2706
+ <path
2707
+ class="pf-v6-c-button--hamburger-icon--middle"
2708
+ d="M1,5 L9,5"
2709
+ />
2710
+ <path
2711
+ class="pf-v6-c-button--hamburger-icon--arrow"
2712
+ d="M1,5 L1,5 L1,5"
2713
+ />
2714
+ <path
2715
+ class="pf-v6-c-button--hamburger-icon--bottom"
2716
+ d="M9,9 L1,9"
2717
+ />
2718
+ </svg>
2719
+ </span>
2720
+ </button>
2721
+ </span>
2722
+ <div class="pf-v6-c-masthead__brand">
2723
+ <a class="pf-v6-c-masthead__logo" href="#">
2724
+ <svg height="37px" viewBox="0 0 679 158">
2725
+ <title>PF-HorizontalLogo-Color</title>
2726
+ <defs>
2727
+ <linearGradient
2728
+ x1="68%"
2729
+ y1="2.25860997e-13%"
2730
+ x2="32%"
2731
+ y2="100%"
2732
+ id="linearGradient-nav-docked-example-masthead"
2733
+ >
2734
+ <stop stop-color="#2B9AF3" offset="0%" />
2735
+ <stop
2736
+ stop-color="#73BCF7"
2737
+ stop-opacity="0.502212631"
2738
+ offset="100%"
2739
+ />
2740
+ </linearGradient>
2741
+ </defs>
2742
+ <g
2743
+ stroke="none"
2744
+ stroke-width="1"
2745
+ fill="none"
2746
+ fill-rule="evenodd"
2747
+ >
2748
+ <g
2749
+ transform="translate(206.000000, 45.750000)"
2750
+ fill="var(--pf-t--global--text--color--regular)"
2751
+ fill-rule="nonzero"
2752
+ >
2753
+ <path
2754
+ 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"
2755
+ />
2756
+ <path
2757
+ 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"
2758
+ />
2759
+ <path
2760
+ 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"
2761
+ />
2762
+ <path
2763
+ 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"
2764
+ />
2765
+ <path
2766
+ 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"
2767
+ />
2768
+ <path
2769
+ 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"
2770
+ />
2771
+ <path
2772
+ 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"
2773
+ />
2774
+ <polygon
2775
+ 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"
2776
+ />
2777
+ <polygon
2778
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2779
+ />
2780
+ <path
2781
+ 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"
2782
+ />
2783
+ </g>
2784
+ <g transform="translate(0.000000, 0.000000)">
2785
+ <path
2786
+ 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"
2787
+ fill="#0066CC"
2788
+ />
2789
+ <path
2790
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2791
+ fill="url(#linearGradient-nav-docked-example-masthead)"
2792
+ />
2793
+ <path
2794
+ 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"
2795
+ fill="url(#linearGradient-nav-docked-example-masthead)"
2796
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2797
+ />
2798
+ </g>
2799
+ </g>
2800
+ </svg>
2801
+ </a>
2802
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
2803
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
2804
+ <title>PF-HorizontalLogo-Color</title>
2805
+ <defs>
2806
+ <linearGradient
2807
+ x1="68%"
2808
+ y1="2.25860997e-13%"
2809
+ x2="32%"
2810
+ y2="100%"
2811
+ id="linearGradient-1"
2812
+ >
2813
+ <stop stop-color="#2B9AF3" offset="0%" />
2814
+ <stop
2815
+ stop-color="#73BCF7"
2816
+ stop-opacity="0.502212631"
2817
+ offset="100%"
2818
+ />
2819
+ </linearGradient>
2820
+ </defs>
2821
+ <g
2822
+ id="PF-IconLogo-color"
2823
+ stroke="none"
2824
+ stroke-width="1"
2825
+ fill="none"
2826
+ fill-rule="evenodd"
2827
+ >
2828
+ <g id="Logo">
2829
+ <path
2830
+ 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"
2831
+ id="Rectangle-Copy-17"
2832
+ fill="#0066CC"
2833
+ />
2834
+ <path
2835
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2836
+ id="Path-2"
2837
+ fill="url(#linearGradient-1)"
2838
+ />
2839
+ <path
2840
+ 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"
2841
+ id="Path-2"
2842
+ fill="url(#linearGradient-1)"
2843
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2844
+ />
2845
+ </g>
2846
+ </g>
2847
+ </svg>
2848
+ </a>
2849
+ </div>
2850
+ </div>
2851
+ <hr class="pf-v6-c-divider" />
2852
+ <div class="pf-v6-c-masthead__content">
2853
+ <div
2854
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
2855
+ id="nav-docked-example-masthead-toolbar"
2856
+ >
2857
+ <div class="pf-v6-c-toolbar__content">
2858
+ <div class="pf-v6-c-toolbar__content-section">
2859
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
2860
+ <ul class="pf-v6-c-nav__list" role="list">
2861
+ <li class="pf-v6-c-nav__item">
2862
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cubes">
2863
+ <span class="pf-v6-c-nav__link-icon">
2864
+ <svg
2865
+ class="pf-v6-svg"
2866
+ viewBox="0 0 32 32"
2867
+ fill="currentColor"
2868
+ aria-hidden="true"
2869
+ role="img"
2870
+ width="1em"
2871
+ height="1em"
2872
+ >
2873
+ <path
2874
+ d="M12.5 12h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5v7c0 .827.673 1.5 1.5 1.5Zm.5-8h6v6h-6V4ZM5.5 25h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5v7c0 .827.673 1.5 1.5 1.5Zm.5-8h6v6H6v-6Zm24 12a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1ZM18 16.5v7c0 .827.673 1.5 1.5 1.5h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5Zm2 .5h6v6h-6v-6Z"
2875
+ />
2876
+ </svg>
2877
+ </span>
2878
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2879
+ </a>
2880
+ </li>
2881
+ <li class="pf-v6-c-nav__item">
2882
+ <a
2883
+ href="#"
2884
+ class="pf-v6-c-nav__link pf-m-current"
2885
+ aria-current="page"
2886
+ aria-label="Folder"
2887
+ >
2888
+ <span class="pf-v6-c-nav__link-icon">
2889
+ <svg
2890
+ class="pf-v6-svg"
2891
+ viewBox="0 0 32 32"
2892
+ fill="currentColor"
2893
+ aria-hidden="true"
2894
+ role="img"
2895
+ width="1em"
2896
+ height="1em"
2897
+ >
2898
+ <path
2899
+ d="M29.5 8H17.81l-.681-3.208A1 1 0 0 0 16.15 4h-9.3a1 1 0 0 0-.979.792L5.19 8H2.5C1.673 8 1 8.673 1 9.5v17c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-17c0-.827-.673-1.5-1.5-1.5ZM29 26H3V10h3a1 1 0 0 0 .979-.792L7.66 6h7.682l.681 3.208a1 1 0 0 0 .979.792h12v16Z"
2900
+ />
2901
+ </svg>
2902
+ </span>
2903
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2904
+ </a>
2905
+ </li>
2906
+ <li class="pf-v6-c-nav__item">
2907
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
2908
+ <span class="pf-v6-c-nav__link-icon">
2909
+ <svg
2910
+ class="pf-v6-svg"
2911
+ viewBox="0 0 32 32"
2912
+ fill="currentColor"
2913
+ aria-hidden="true"
2914
+ role="img"
2915
+ width="1em"
2916
+ height="1em"
2917
+ >
2918
+ <path
2919
+ d="M26.996 14.228c.003-.077.004-.153.004-.228 0-4.962-4.037-9-9-9-3.899 0-7.333 2.532-8.54 6.156A6.891 6.891 0 0 0 8 11c-3.859 0-7 3.14-7 7s3.141 7 7 7h17.5c3.032 0 5.5-2.467 5.5-5.5a5.456 5.456 0 0 0-4.004-5.272ZM25.5 23H8c-2.757 0-5-2.243-5-5s2.243-5 5-5a4.97 4.97 0 0 1 1.799.34 1.003 1.003 0 0 0 1.341-.735C11.796 9.357 14.682 7 18 7c3.859 0 7 3.14 7 7 0 .311-.028.615-.067.916a1.004 1.004 0 0 0 .898 1.123 3.473 3.473 0 0 1 3.17 3.461c0 1.93-1.57 3.5-3.5 3.5Z"
2920
+ />
2921
+ </svg>
2922
+ </span>
2923
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2924
+ </a>
2925
+ </li>
2926
+ <li class="pf-v6-c-nav__item">
2927
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
2928
+ <span class="pf-v6-c-nav__link-icon">
2929
+ <svg
2930
+ class="pf-v6-svg"
2931
+ viewBox="0 0 32 32"
2932
+ fill="currentColor"
2933
+ aria-hidden="true"
2934
+ role="img"
2935
+ width="1em"
2936
+ height="1em"
2937
+ >
2938
+ <path
2939
+ d="M9.707 9.707 3.414 16l6.293 6.293a.999.999 0 1 1-1.414 1.414l-6.646-6.646a1.501 1.501 0 0 1 0-2.121l6.646-6.646a.999.999 0 1 1 1.414 1.414Zm20.647 5.232-6.646-6.646a.999.999 0 1 0-1.414 1.414L28.587 16l-6.293 6.293a.999.999 0 1 0 1.414 1.414l6.646-6.646a1.501 1.501 0 0 0 0-2.121ZM18.121 6.022a.997.997 0 0 0-1.186.77l-3.826 18a1 1 0 1 0 1.956.416l3.826-18a1 1 0 0 0-.77-1.186Z"
2940
+ />
2941
+ </svg>
2942
+ </span>
2943
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2944
+ </a>
2945
+ </li>
2946
+ </ul>
2947
+ </nav>
2948
+
2949
+ <div
2950
+ 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"
2951
+ >
2952
+ <div class="pf-v6-c-toolbar__item">
2953
+ <button
2954
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
2955
+ type="button"
2956
+ aria-expanded="false"
2957
+ aria-label="Applications"
2958
+ >
2959
+ <span class="pf-v6-c-menu-toggle__icon">
2960
+ <svg
2961
+ class="pf-v6-svg"
2962
+ viewBox="0 0 32 32"
2963
+ fill="currentColor"
2964
+ aria-hidden="true"
2965
+ role="img"
2966
+ width="1em"
2967
+ height="1em"
2968
+ >
2969
+ <path
2970
+ d="M13.75 2H3.25C2.561 2 2 2.561 2 3.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25V3.25C15 2.561 14.439 2 13.75 2ZM13 13H4V4h9v9ZM28.75 2h-10.5C17.561 2 17 2.561 17 3.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25V3.25C30 2.561 29.439 2 28.75 2ZM28 13h-9V4h9v9Zm-14.25 4H3.25C2.561 17 2 17.561 2 18.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25v-10.5c0-.689-.561-1.25-1.25-1.25ZM13 28H4v-9h9v9Zm15.75-11h-10.5c-.689 0-1.25.561-1.25 1.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25v-10.5c0-.689-.561-1.25-1.25-1.25ZM28 28h-9v-9h9v9Z"
2971
+ />
2972
+ </svg>
2973
+ </span>
2974
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
2975
+ </button>
2976
+ </div>
2977
+ <div class="pf-v6-c-toolbar__item">
2978
+ <button
2979
+ class="pf-v6-c-button pf-m-docked pf-m-settings pf-m-plain"
2980
+ type="button"
2981
+ aria-label="Settings"
2982
+ >
2983
+ <span class="pf-v6-c-button__icon pf-m-start">
2984
+ <svg
2985
+ class="pf-v6-svg"
2986
+ viewBox="0 0 32 32"
2987
+ fill="currentColor"
2988
+ aria-hidden="true"
2989
+ role="img"
2990
+ width="1em"
2991
+ height="1em"
2992
+ >
2993
+ <path
2994
+ 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"
2995
+ />
2996
+ </svg>
2997
+ </span>
2998
+ <span class="pf-v6-c-button__text">Settings</span>
2999
+ </button>
3000
+ </div>
3001
+ <div class="pf-v6-c-toolbar__item">
3002
+ <button
3003
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
3004
+ type="button"
3005
+ aria-expanded="false"
3006
+ aria-label="Help"
3007
+ >
3008
+ <span class="pf-v6-c-menu-toggle__icon">
3009
+ <svg
3010
+ class="pf-v6-svg"
3011
+ viewBox="0 0 32 32"
3012
+ fill="currentColor"
3013
+ aria-hidden="true"
3014
+ role="img"
3015
+ width="1em"
3016
+ height="1em"
3017
+ >
3018
+ <path
3019
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
3020
+ />
3021
+ </svg>
3022
+ </span>
3023
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
3024
+ </button>
3025
+ </div>
3026
+ </div>
3027
+ </div>
3028
+ </div>
3029
+ </div>
3030
+ </div>
3031
+ </header>
3032
+ </div>
3033
+ </div>
3034
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3035
+ <main
3036
+ class="pf-v6-c-page__main"
3037
+ tabindex="-1"
3038
+ id="main-content-nav-docked-example"
3039
+ >
3040
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3041
+ <div class="pf-v6-c-page__main-body">
3042
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3043
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3044
+ <li class="pf-v6-c-breadcrumb__item">
3045
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3046
+ </li>
3047
+ <li class="pf-v6-c-breadcrumb__item">
3048
+ <span class="pf-v6-c-breadcrumb__item-divider">
3049
+ <svg
3050
+ class="pf-v6-svg"
3051
+ viewBox="0 0 20 20"
3052
+ fill="currentColor"
3053
+ aria-hidden="true"
3054
+ role="img"
3055
+ width="1em"
3056
+ height="1em"
3057
+ >
3058
+ <path
3059
+ 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"
3060
+ />
3061
+ </svg>
3062
+ </span>
3063
+
3064
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3065
+ </li>
3066
+ <li class="pf-v6-c-breadcrumb__item">
3067
+ <span class="pf-v6-c-breadcrumb__item-divider">
3068
+ <svg
3069
+ class="pf-v6-svg"
3070
+ viewBox="0 0 20 20"
3071
+ fill="currentColor"
3072
+ aria-hidden="true"
3073
+ role="img"
3074
+ width="1em"
3075
+ height="1em"
3076
+ >
3077
+ <path
3078
+ 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"
3079
+ />
3080
+ </svg>
3081
+ </span>
3082
+
3083
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3084
+ </li>
3085
+ <li class="pf-v6-c-breadcrumb__item">
3086
+ <span class="pf-v6-c-breadcrumb__item-divider">
3087
+ <svg
3088
+ class="pf-v6-svg"
3089
+ viewBox="0 0 20 20"
3090
+ fill="currentColor"
3091
+ aria-hidden="true"
3092
+ role="img"
3093
+ width="1em"
3094
+ height="1em"
3095
+ >
3096
+ <path
3097
+ 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"
3098
+ />
3099
+ </svg>
3100
+ </span>
3101
+
3102
+ <a
3103
+ href="#"
3104
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3105
+ aria-current="page"
3106
+ >Section landing</a>
3107
+ </li>
3108
+ </ol>
3109
+ </nav>
3110
+ </div>
3111
+ </section>
3112
+ <section
3113
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3114
+ aria-labelledby="main-title"
3115
+ >
3116
+ <div class="pf-v6-c-page__main-body">
3117
+ <h1
3118
+ class="pf-v6-c-content--h1 pf-m-page-title"
3119
+ id="main-title"
3120
+ >Main title</h1>
3121
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3122
+ </div>
3123
+ </section>
3124
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3125
+ <div class="pf-v6-c-page__main-body">
3126
+ <div class="pf-v6-l-gallery pf-m-gutter">
3127
+ <div class="pf-v6-c-card">
3128
+ <div class="pf-v6-c-card__body">This is a card</div>
3129
+ </div>
3130
+ <div class="pf-v6-c-card">
3131
+ <div class="pf-v6-c-card__body">This is a card</div>
3132
+ </div>
3133
+ <div class="pf-v6-c-card">
3134
+ <div class="pf-v6-c-card__body">This is a card</div>
3135
+ </div>
3136
+ <div class="pf-v6-c-card">
3137
+ <div class="pf-v6-c-card__body">This is a card</div>
3138
+ </div>
3139
+ <div class="pf-v6-c-card">
3140
+ <div class="pf-v6-c-card__body">This is a card</div>
3141
+ </div>
3142
+ <div class="pf-v6-c-card">
3143
+ <div class="pf-v6-c-card__body">This is a card</div>
3144
+ </div>
3145
+ <div class="pf-v6-c-card">
3146
+ <div class="pf-v6-c-card__body">This is a card</div>
3147
+ </div>
3148
+ <div class="pf-v6-c-card">
3149
+ <div class="pf-v6-c-card__body">This is a card</div>
3150
+ </div>
3151
+ <div class="pf-v6-c-card">
3152
+ <div class="pf-v6-c-card__body">This is a card</div>
3153
+ </div>
3154
+ <div class="pf-v6-c-card">
3155
+ <div class="pf-v6-c-card__body">This is a card</div>
3156
+ </div>
3157
+ </div>
3158
+ </div>
3159
+ </section>
3160
+ </main>
3161
+ </div>
3162
+ </div>
3163
+
3164
+ ```
3165
+
3166
+ ### Docked nav - expanded on mobile
3167
+
3168
+ ```html isFullscreen isBeta
3169
+ <div class="pf-v6-c-page pf-m-docked" id="nav-docked-expanded-example">
3170
+ <div class="pf-v6-c-skip-to-content">
3171
+ <a
3172
+ class="pf-v6-c-button pf-m-primary"
3173
+ href="#main-content-nav-docked-expanded-example"
3174
+ >
3175
+ <span class="pf-v6-c-button__text">Skip to content</span>
3176
+ </a>
3177
+ </div>
3178
+ <header class="pf-v6-c-masthead pf-m-display-inline">
3179
+ <div class="pf-v6-c-masthead__main">
3180
+ <span class="pf-v6-c-masthead__toggle">
3181
+ <button
3182
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3183
+ type="button"
3184
+ aria-label="Global navigation"
3185
+ >
3186
+ <span class="pf-v6-c-button__icon">
3187
+ <svg
3188
+ viewBox="0 0 10 10"
3189
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3190
+ width="1em"
3191
+ height="1em"
3192
+ >
3193
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3194
+ <path
3195
+ class="pf-v6-c-button--hamburger-icon--middle"
3196
+ d="M1,5 L9,5"
3197
+ />
3198
+ <path
3199
+ class="pf-v6-c-button--hamburger-icon--arrow"
3200
+ d="M1,5 L1,5 L1,5"
3201
+ />
3202
+ <path
3203
+ class="pf-v6-c-button--hamburger-icon--bottom"
3204
+ d="M9,9 L1,9"
3205
+ />
3206
+ </svg>
3207
+ </span>
3208
+ </button>
3209
+ </span>
3210
+ <div class="pf-v6-c-masthead__brand">
3211
+ <a class="pf-v6-c-masthead__logo" href="#">
3212
+ <svg height="37px" viewBox="0 0 679 158">
3213
+ <title>PF-HorizontalLogo-Color</title>
3214
+ <defs>
3215
+ <linearGradient
3216
+ x1="68%"
3217
+ y1="2.25860997e-13%"
3218
+ x2="32%"
3219
+ y2="100%"
3220
+ id="linearGradient-"
3221
+ >
3222
+ <stop stop-color="#2B9AF3" offset="0%" />
3223
+ <stop
3224
+ stop-color="#73BCF7"
3225
+ stop-opacity="0.502212631"
3226
+ offset="100%"
3227
+ />
3228
+ </linearGradient>
3229
+ </defs>
3230
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3231
+ <g
3232
+ transform="translate(206.000000, 45.750000)"
3233
+ fill="var(--pf-t--global--text--color--regular)"
3234
+ fill-rule="nonzero"
3235
+ >
3236
+ <path
3237
+ 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"
3238
+ />
3239
+ <path
3240
+ 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"
3241
+ />
3242
+ <path
3243
+ 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"
3244
+ />
3245
+ <path
3246
+ 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"
3247
+ />
3248
+ <path
3249
+ 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"
3250
+ />
3251
+ <path
3252
+ 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"
3253
+ />
3254
+ <path
3255
+ 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"
3256
+ />
3257
+ <polygon
3258
+ 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"
3259
+ />
3260
+ <polygon
3261
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3262
+ />
3263
+ <path
3264
+ 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"
3265
+ />
3266
+ </g>
3267
+ <g transform="translate(0.000000, 0.000000)">
3268
+ <path
3269
+ 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"
3270
+ fill="#0066CC"
3271
+ />
3272
+ <path
3273
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3274
+ fill="url(#linearGradient-)"
3275
+ />
3276
+ <path
3277
+ 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"
3278
+ fill="url(#linearGradient-)"
3279
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3280
+ />
3281
+ </g>
3282
+ </g>
3283
+ </svg>
3284
+ </a>
3285
+ </div>
3286
+ </div>
3287
+ <div class="pf-v6-c-masthead__content">
3288
+ <div class="pf-v6-c-toolbar pf-m-static">
3289
+ <div class="pf-v6-c-toolbar__content">
3290
+ <div class="pf-v6-c-toolbar__content-section">
3291
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
3292
+ <button
3293
+ class="pf-v6-c-button pf-m-plain"
3294
+ type="button"
3295
+ aria-label="Search"
3296
+ >
3297
+ <span class="pf-v6-c-button__icon">
3298
+ <svg
3299
+ class="pf-v6-svg"
3300
+ viewBox="0 0 32 32"
3301
+ fill="currentColor"
3302
+ aria-hidden="true"
3303
+ role="img"
3304
+ width="1em"
3305
+ height="1em"
3306
+ >
3307
+ <path
3308
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
3309
+ />
3310
+ </svg>
3311
+ </span>
3312
+ </button>
3313
+ </div>
3314
+ </div>
3315
+ </div>
3316
+ </div>
3317
+ </div>
3318
+ </header>
3319
+ <div class="pf-v6-c-page__dock pf-m-expanded">
3320
+ <div class="pf-v6-c-page__dock-main">
3321
+ <header
3322
+ class="pf-v6-c-masthead pf-m-docked"
3323
+ id="nav-docked-expanded-example-masthead"
3324
+ >
3325
+ <div class="pf-v6-c-masthead__main">
3326
+ <span class="pf-v6-c-masthead__toggle">
3327
+ <button
3328
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3329
+ type="button"
3330
+ aria-label="Global navigation"
3331
+ >
3332
+ <span class="pf-v6-c-button__icon">
3333
+ <svg
3334
+ viewBox="0 0 10 10"
3335
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3336
+ width="1em"
3337
+ height="1em"
3338
+ >
3339
+ <path
3340
+ class="pf-v6-c-button--hamburger-icon--top"
3341
+ d="M1,1 L9,1"
3342
+ />
3343
+ <path
3344
+ class="pf-v6-c-button--hamburger-icon--middle"
3345
+ d="M1,5 L9,5"
3346
+ />
3347
+ <path
3348
+ class="pf-v6-c-button--hamburger-icon--arrow"
3349
+ d="M1,5 L1,5 L1,5"
3350
+ />
3351
+ <path
3352
+ class="pf-v6-c-button--hamburger-icon--bottom"
3353
+ d="M9,9 L1,9"
3354
+ />
3355
+ </svg>
3356
+ </span>
3357
+ </button>
3358
+ </span>
3359
+ <div class="pf-v6-c-masthead__brand">
3360
+ <a class="pf-v6-c-masthead__logo" href="#">
3361
+ <svg height="37px" viewBox="0 0 679 158">
3362
+ <title>PF-HorizontalLogo-Color</title>
3363
+ <defs>
3364
+ <linearGradient
3365
+ x1="68%"
3366
+ y1="2.25860997e-13%"
3367
+ x2="32%"
3368
+ y2="100%"
3369
+ id="linearGradient-nav-docked-expanded-example-masthead"
3370
+ >
3371
+ <stop stop-color="#2B9AF3" offset="0%" />
3372
+ <stop
3373
+ stop-color="#73BCF7"
3374
+ stop-opacity="0.502212631"
3375
+ offset="100%"
3376
+ />
3377
+ </linearGradient>
3378
+ </defs>
3379
+ <g
3380
+ stroke="none"
3381
+ stroke-width="1"
3382
+ fill="none"
3383
+ fill-rule="evenodd"
3384
+ >
3385
+ <g
3386
+ transform="translate(206.000000, 45.750000)"
3387
+ fill="var(--pf-t--global--text--color--regular)"
3388
+ fill-rule="nonzero"
3389
+ >
3390
+ <path
3391
+ 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"
3392
+ />
3393
+ <path
3394
+ 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"
3395
+ />
3396
+ <path
3397
+ 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"
3398
+ />
3399
+ <path
3400
+ 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"
3401
+ />
3402
+ <path
3403
+ 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"
3404
+ />
3405
+ <path
3406
+ 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"
3407
+ />
3408
+ <path
3409
+ 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"
3410
+ />
3411
+ <polygon
3412
+ 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"
3413
+ />
3414
+ <polygon
3415
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3416
+ />
3417
+ <path
3418
+ 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"
3419
+ />
3420
+ </g>
3421
+ <g transform="translate(0.000000, 0.000000)">
3422
+ <path
3423
+ 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"
3424
+ fill="#0066CC"
3425
+ />
3426
+ <path
3427
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3428
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
3429
+ />
3430
+ <path
3431
+ 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"
3432
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
3433
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3434
+ />
3435
+ </g>
3436
+ </g>
3437
+ </svg>
3438
+ </a>
3439
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
3440
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
3441
+ <title>PF-HorizontalLogo-Color</title>
3442
+ <defs>
3443
+ <linearGradient
3444
+ x1="68%"
3445
+ y1="2.25860997e-13%"
3446
+ x2="32%"
3447
+ y2="100%"
3448
+ id="linearGradient-1"
3449
+ >
3450
+ <stop stop-color="#2B9AF3" offset="0%" />
3451
+ <stop
3452
+ stop-color="#73BCF7"
3453
+ stop-opacity="0.502212631"
3454
+ offset="100%"
3455
+ />
3456
+ </linearGradient>
3457
+ </defs>
3458
+ <g
3459
+ id="PF-IconLogo-color"
3460
+ stroke="none"
3461
+ stroke-width="1"
3462
+ fill="none"
3463
+ fill-rule="evenodd"
3464
+ >
3465
+ <g id="Logo">
3466
+ <path
3467
+ 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"
3468
+ id="Rectangle-Copy-17"
3469
+ fill="#0066CC"
3470
+ />
3471
+ <path
3472
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3473
+ id="Path-2"
3474
+ fill="url(#linearGradient-1)"
3475
+ />
3476
+ <path
3477
+ 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"
3478
+ id="Path-2"
3479
+ fill="url(#linearGradient-1)"
3480
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3481
+ />
3482
+ </g>
3483
+ </g>
3484
+ </svg>
3485
+ </a>
3486
+ </div>
3487
+ </div>
3488
+ <hr class="pf-v6-c-divider" />
3489
+ <div class="pf-v6-c-masthead__content">
3490
+ <div
3491
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
3492
+ id="nav-docked-expanded-example-masthead-toolbar"
3493
+ >
3494
+ <div class="pf-v6-c-toolbar__content">
3495
+ <div class="pf-v6-c-toolbar__content-section">
3496
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
3497
+ <ul class="pf-v6-c-nav__list" role="list">
3498
+ <li class="pf-v6-c-nav__item">
3499
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cubes">
3500
+ <span class="pf-v6-c-nav__link-icon">
3501
+ <svg
3502
+ class="pf-v6-svg"
3503
+ viewBox="0 0 32 32"
3504
+ fill="currentColor"
3505
+ aria-hidden="true"
3506
+ role="img"
3507
+ width="1em"
3508
+ height="1em"
3509
+ >
3510
+ <path
3511
+ d="M12.5 12h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5v7c0 .827.673 1.5 1.5 1.5Zm.5-8h6v6h-6V4ZM5.5 25h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5v7c0 .827.673 1.5 1.5 1.5Zm.5-8h6v6H6v-6Zm24 12a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1ZM18 16.5v7c0 .827.673 1.5 1.5 1.5h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5Zm2 .5h6v6h-6v-6Z"
3512
+ />
3513
+ </svg>
3514
+ </span>
3515
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3516
+ </a>
3517
+ </li>
3518
+ <li class="pf-v6-c-nav__item">
3519
+ <a
3520
+ href="#"
3521
+ class="pf-v6-c-nav__link pf-m-current"
3522
+ aria-current="page"
3523
+ aria-label="Folder"
3524
+ >
3525
+ <span class="pf-v6-c-nav__link-icon">
3526
+ <svg
3527
+ class="pf-v6-svg"
3528
+ viewBox="0 0 32 32"
3529
+ fill="currentColor"
3530
+ aria-hidden="true"
3531
+ role="img"
3532
+ width="1em"
3533
+ height="1em"
3534
+ >
3535
+ <path
3536
+ d="M29.5 8H17.81l-.681-3.208A1 1 0 0 0 16.15 4h-9.3a1 1 0 0 0-.979.792L5.19 8H2.5C1.673 8 1 8.673 1 9.5v17c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-17c0-.827-.673-1.5-1.5-1.5ZM29 26H3V10h3a1 1 0 0 0 .979-.792L7.66 6h7.682l.681 3.208a1 1 0 0 0 .979.792h12v16Z"
3537
+ />
3538
+ </svg>
3539
+ </span>
3540
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3541
+ </a>
3542
+ </li>
3543
+ <li class="pf-v6-c-nav__item">
3544
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
3545
+ <span class="pf-v6-c-nav__link-icon">
3546
+ <svg
3547
+ class="pf-v6-svg"
3548
+ viewBox="0 0 32 32"
3549
+ fill="currentColor"
3550
+ aria-hidden="true"
3551
+ role="img"
3552
+ width="1em"
3553
+ height="1em"
3554
+ >
3555
+ <path
3556
+ d="M26.996 14.228c.003-.077.004-.153.004-.228 0-4.962-4.037-9-9-9-3.899 0-7.333 2.532-8.54 6.156A6.891 6.891 0 0 0 8 11c-3.859 0-7 3.14-7 7s3.141 7 7 7h17.5c3.032 0 5.5-2.467 5.5-5.5a5.456 5.456 0 0 0-4.004-5.272ZM25.5 23H8c-2.757 0-5-2.243-5-5s2.243-5 5-5a4.97 4.97 0 0 1 1.799.34 1.003 1.003 0 0 0 1.341-.735C11.796 9.357 14.682 7 18 7c3.859 0 7 3.14 7 7 0 .311-.028.615-.067.916a1.004 1.004 0 0 0 .898 1.123 3.473 3.473 0 0 1 3.17 3.461c0 1.93-1.57 3.5-3.5 3.5Z"
3557
+ />
3558
+ </svg>
3559
+ </span>
3560
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3561
+ </a>
3562
+ </li>
3563
+ <li class="pf-v6-c-nav__item">
3564
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
3565
+ <span class="pf-v6-c-nav__link-icon">
3566
+ <svg
3567
+ class="pf-v6-svg"
3568
+ viewBox="0 0 32 32"
3569
+ fill="currentColor"
3570
+ aria-hidden="true"
3571
+ role="img"
3572
+ width="1em"
3573
+ height="1em"
3574
+ >
3575
+ <path
3576
+ d="M9.707 9.707 3.414 16l6.293 6.293a.999.999 0 1 1-1.414 1.414l-6.646-6.646a1.501 1.501 0 0 1 0-2.121l6.646-6.646a.999.999 0 1 1 1.414 1.414Zm20.647 5.232-6.646-6.646a.999.999 0 1 0-1.414 1.414L28.587 16l-6.293 6.293a.999.999 0 1 0 1.414 1.414l6.646-6.646a1.501 1.501 0 0 0 0-2.121ZM18.121 6.022a.997.997 0 0 0-1.186.77l-3.826 18a1 1 0 1 0 1.956.416l3.826-18a1 1 0 0 0-.77-1.186Z"
3577
+ />
3578
+ </svg>
3579
+ </span>
3580
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3581
+ </a>
3582
+ </li>
3583
+ </ul>
3584
+ </nav>
3585
+
3586
+ <div
3587
+ 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"
3588
+ >
3589
+ <div class="pf-v6-c-toolbar__item">
3590
+ <button
3591
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
3592
+ type="button"
3593
+ aria-expanded="false"
3594
+ aria-label="Applications"
3595
+ >
3596
+ <span class="pf-v6-c-menu-toggle__icon">
3597
+ <svg
3598
+ class="pf-v6-svg"
3599
+ viewBox="0 0 32 32"
3600
+ fill="currentColor"
3601
+ aria-hidden="true"
3602
+ role="img"
3603
+ width="1em"
3604
+ height="1em"
3605
+ >
3606
+ <path
3607
+ d="M13.75 2H3.25C2.561 2 2 2.561 2 3.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25V3.25C15 2.561 14.439 2 13.75 2ZM13 13H4V4h9v9ZM28.75 2h-10.5C17.561 2 17 2.561 17 3.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25V3.25C30 2.561 29.439 2 28.75 2ZM28 13h-9V4h9v9Zm-14.25 4H3.25C2.561 17 2 17.561 2 18.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25v-10.5c0-.689-.561-1.25-1.25-1.25ZM13 28H4v-9h9v9Zm15.75-11h-10.5c-.689 0-1.25.561-1.25 1.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25v-10.5c0-.689-.561-1.25-1.25-1.25ZM28 28h-9v-9h9v9Z"
3608
+ />
3609
+ </svg>
3610
+ </span>
3611
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
3612
+ </button>
3613
+ </div>
3614
+ <div class="pf-v6-c-toolbar__item">
3615
+ <button
3616
+ class="pf-v6-c-button pf-m-docked pf-m-settings pf-m-plain"
3617
+ type="button"
3618
+ aria-label="Settings"
3619
+ >
3620
+ <span class="pf-v6-c-button__icon pf-m-start">
3621
+ <svg
3622
+ class="pf-v6-svg"
3623
+ viewBox="0 0 32 32"
3624
+ fill="currentColor"
3625
+ aria-hidden="true"
3626
+ role="img"
3627
+ width="1em"
3628
+ height="1em"
3629
+ >
3630
+ <path
3631
+ 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"
3632
+ />
3633
+ </svg>
3634
+ </span>
3635
+ <span class="pf-v6-c-button__text">Settings</span>
3636
+ </button>
3637
+ </div>
3638
+ <div class="pf-v6-c-toolbar__item">
3639
+ <button
3640
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
3641
+ type="button"
3642
+ aria-expanded="false"
3643
+ aria-label="Help"
3644
+ >
3645
+ <span class="pf-v6-c-menu-toggle__icon">
3646
+ <svg
3647
+ class="pf-v6-svg"
3648
+ viewBox="0 0 32 32"
3649
+ fill="currentColor"
3650
+ aria-hidden="true"
3651
+ role="img"
3652
+ width="1em"
3653
+ height="1em"
3654
+ >
3655
+ <path
3656
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
3657
+ />
3658
+ </svg>
3659
+ </span>
3660
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
3661
+ </button>
3662
+ </div>
3663
+ </div>
3664
+ </div>
3665
+ </div>
3666
+ </div>
3667
+ </div>
3668
+ </header>
3669
+ </div>
3670
+ </div>
3671
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3672
+ <main
3673
+ class="pf-v6-c-page__main"
3674
+ tabindex="-1"
3675
+ id="main-content-nav-docked-expanded-example"
3676
+ >
3677
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3678
+ <div class="pf-v6-c-page__main-body">
3679
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3680
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3681
+ <li class="pf-v6-c-breadcrumb__item">
3682
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3683
+ </li>
3684
+ <li class="pf-v6-c-breadcrumb__item">
3685
+ <span class="pf-v6-c-breadcrumb__item-divider">
3686
+ <svg
3687
+ class="pf-v6-svg"
3688
+ viewBox="0 0 20 20"
3689
+ fill="currentColor"
3690
+ aria-hidden="true"
3691
+ role="img"
3692
+ width="1em"
3693
+ height="1em"
3694
+ >
3695
+ <path
3696
+ 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"
3697
+ />
3698
+ </svg>
3699
+ </span>
3700
+
3701
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3702
+ </li>
3703
+ <li class="pf-v6-c-breadcrumb__item">
3704
+ <span class="pf-v6-c-breadcrumb__item-divider">
3705
+ <svg
3706
+ class="pf-v6-svg"
3707
+ viewBox="0 0 20 20"
3708
+ fill="currentColor"
3709
+ aria-hidden="true"
3710
+ role="img"
3711
+ width="1em"
3712
+ height="1em"
3713
+ >
3714
+ <path
3715
+ 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"
3716
+ />
3717
+ </svg>
3718
+ </span>
3719
+
3720
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3721
+ </li>
3722
+ <li class="pf-v6-c-breadcrumb__item">
3723
+ <span class="pf-v6-c-breadcrumb__item-divider">
3724
+ <svg
3725
+ class="pf-v6-svg"
3726
+ viewBox="0 0 20 20"
3727
+ fill="currentColor"
3728
+ aria-hidden="true"
3729
+ role="img"
3730
+ width="1em"
3731
+ height="1em"
3732
+ >
3733
+ <path
3734
+ 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"
3735
+ />
3736
+ </svg>
3737
+ </span>
3738
+
3739
+ <a
3740
+ href="#"
3741
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3742
+ aria-current="page"
3743
+ >Section landing</a>
3744
+ </li>
3745
+ </ol>
3746
+ </nav>
3747
+ </div>
3748
+ </section>
3749
+ <section
3750
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3751
+ aria-labelledby="main-title"
3752
+ >
3753
+ <div class="pf-v6-c-page__main-body">
3754
+ <h1
3755
+ class="pf-v6-c-content--h1 pf-m-page-title"
3756
+ id="main-title"
3757
+ >Main title</h1>
3758
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3759
+ </div>
3760
+ </section>
3761
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3762
+ <div class="pf-v6-c-page__main-body">
3763
+ <div class="pf-v6-l-gallery pf-m-gutter">
3764
+ <div class="pf-v6-c-card">
3765
+ <div class="pf-v6-c-card__body">This is a card</div>
3766
+ </div>
3767
+ <div class="pf-v6-c-card">
3768
+ <div class="pf-v6-c-card__body">This is a card</div>
3769
+ </div>
3770
+ <div class="pf-v6-c-card">
3771
+ <div class="pf-v6-c-card__body">This is a card</div>
3772
+ </div>
3773
+ <div class="pf-v6-c-card">
3774
+ <div class="pf-v6-c-card__body">This is a card</div>
3775
+ </div>
3776
+ <div class="pf-v6-c-card">
3777
+ <div class="pf-v6-c-card__body">This is a card</div>
3778
+ </div>
3779
+ <div class="pf-v6-c-card">
3780
+ <div class="pf-v6-c-card__body">This is a card</div>
3781
+ </div>
3782
+ <div class="pf-v6-c-card">
3783
+ <div class="pf-v6-c-card__body">This is a card</div>
3784
+ </div>
3785
+ <div class="pf-v6-c-card">
3786
+ <div class="pf-v6-c-card__body">This is a card</div>
3787
+ </div>
3788
+ <div class="pf-v6-c-card">
3789
+ <div class="pf-v6-c-card__body">This is a card</div>
3790
+ </div>
3791
+ <div class="pf-v6-c-card">
3792
+ <div class="pf-v6-c-card__body">This is a card</div>
3793
+ </div>
3794
+ </div>
3795
+ </div>
3796
+ </section>
3797
+ </main>
3798
+ </div>
3799
+ </div>
3800
+
3801
+ ```
3802
+
3803
+ ### Docked nav text expanded
3804
+
3805
+ ```html isFullscreen isBeta
3806
+ <div class="pf-v6-c-page pf-m-docked" id="nav-docked-example">
3807
+ <div class="pf-v6-c-skip-to-content">
3808
+ <a
3809
+ class="pf-v6-c-button pf-m-primary"
3810
+ href="#main-content-nav-docked-example"
3811
+ >
3812
+ <span class="pf-v6-c-button__text">Skip to content</span>
3813
+ </a>
3814
+ </div>
3815
+ <header class="pf-v6-c-masthead pf-m-display-inline">
3816
+ <div class="pf-v6-c-masthead__main">
3817
+ <span class="pf-v6-c-masthead__toggle">
3818
+ <button
3819
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3820
+ type="button"
3821
+ aria-label="Global navigation"
3822
+ >
3823
+ <span class="pf-v6-c-button__icon">
3824
+ <svg
3825
+ viewBox="0 0 10 10"
3826
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3827
+ width="1em"
3828
+ height="1em"
3829
+ >
3830
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3831
+ <path
3832
+ class="pf-v6-c-button--hamburger-icon--middle"
3833
+ d="M1,5 L9,5"
3834
+ />
3835
+ <path
3836
+ class="pf-v6-c-button--hamburger-icon--arrow"
3837
+ d="M1,5 L1,5 L1,5"
3838
+ />
3839
+ <path
3840
+ class="pf-v6-c-button--hamburger-icon--bottom"
3841
+ d="M9,9 L1,9"
3842
+ />
3843
+ </svg>
3844
+ </span>
3845
+ </button>
3846
+ </span>
3847
+ <div class="pf-v6-c-masthead__brand">
3848
+ <a class="pf-v6-c-masthead__logo" href="#">
3849
+ <svg height="37px" viewBox="0 0 679 158">
3850
+ <title>PF-HorizontalLogo-Color</title>
3851
+ <defs>
3852
+ <linearGradient
3853
+ x1="68%"
3854
+ y1="2.25860997e-13%"
3855
+ x2="32%"
3856
+ y2="100%"
3857
+ id="linearGradient-"
3858
+ >
3859
+ <stop stop-color="#2B9AF3" offset="0%" />
3860
+ <stop
3861
+ stop-color="#73BCF7"
3862
+ stop-opacity="0.502212631"
3863
+ offset="100%"
3864
+ />
3865
+ </linearGradient>
3866
+ </defs>
3867
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3868
+ <g
3869
+ transform="translate(206.000000, 45.750000)"
3870
+ fill="var(--pf-t--global--text--color--regular)"
3871
+ fill-rule="nonzero"
3872
+ >
3873
+ <path
3874
+ 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"
3875
+ />
3876
+ <path
3877
+ 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"
3878
+ />
3879
+ <path
3880
+ 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"
3881
+ />
3882
+ <path
3883
+ 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"
3884
+ />
3885
+ <path
3886
+ 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"
3887
+ />
3888
+ <path
3889
+ 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"
3890
+ />
3891
+ <path
3892
+ 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"
3893
+ />
3894
+ <polygon
3895
+ 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"
3896
+ />
3897
+ <polygon
3898
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3899
+ />
3900
+ <path
3901
+ 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"
3902
+ />
3903
+ </g>
3904
+ <g transform="translate(0.000000, 0.000000)">
3905
+ <path
3906
+ 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"
3907
+ fill="#0066CC"
3908
+ />
3909
+ <path
3910
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3911
+ fill="url(#linearGradient-)"
3912
+ />
3913
+ <path
3914
+ 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"
3915
+ fill="url(#linearGradient-)"
3916
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3917
+ />
3918
+ </g>
3919
+ </g>
3920
+ </svg>
3921
+ </a>
3922
+ </div>
3923
+ </div>
3924
+ <div class="pf-v6-c-masthead__content">
3925
+ <div class="pf-v6-c-toolbar pf-m-static">
3926
+ <div class="pf-v6-c-toolbar__content">
3927
+ <div class="pf-v6-c-toolbar__content-section">
3928
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
3929
+ <button
3930
+ class="pf-v6-c-button pf-m-plain"
3931
+ type="button"
3932
+ aria-label="Search"
3933
+ >
3934
+ <span class="pf-v6-c-button__icon">
3935
+ <svg
3936
+ class="pf-v6-svg"
3937
+ viewBox="0 0 32 32"
3938
+ fill="currentColor"
3939
+ aria-hidden="true"
3940
+ role="img"
3941
+ width="1em"
3942
+ height="1em"
3943
+ >
3944
+ <path
3945
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
3946
+ />
3947
+ </svg>
3948
+ </span>
3949
+ </button>
3950
+ </div>
3951
+ </div>
3952
+ </div>
3953
+ </div>
3954
+ </div>
3955
+ </header>
3956
+ <div class="pf-v6-c-page__dock pf-m-text-expanded">
3957
+ <div class="pf-v6-c-page__dock-main">
3958
+ <header
3959
+ class="pf-v6-c-masthead pf-m-docked"
3960
+ id="nav-docked-example-masthead"
3961
+ >
3962
+ <div class="pf-v6-c-masthead__main">
3963
+ <span class="pf-v6-c-masthead__toggle">
3964
+ <button
3965
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3966
+ type="button"
3967
+ aria-label="Global navigation"
3968
+ >
3969
+ <span class="pf-v6-c-button__icon">
3970
+ <svg
3971
+ viewBox="0 0 10 10"
3972
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3973
+ width="1em"
3974
+ height="1em"
3975
+ >
3976
+ <path
3977
+ class="pf-v6-c-button--hamburger-icon--top"
3978
+ d="M1,1 L9,1"
3979
+ />
3980
+ <path
3981
+ class="pf-v6-c-button--hamburger-icon--middle"
3982
+ d="M1,5 L9,5"
3983
+ />
3984
+ <path
3985
+ class="pf-v6-c-button--hamburger-icon--arrow"
3986
+ d="M1,5 L1,5 L1,5"
3987
+ />
3988
+ <path
3989
+ class="pf-v6-c-button--hamburger-icon--bottom"
3990
+ d="M9,9 L1,9"
3991
+ />
3992
+ </svg>
3993
+ </span>
3994
+ </button>
3995
+ </span>
3996
+ <div class="pf-v6-c-masthead__brand">
3997
+ <a class="pf-v6-c-masthead__logo" href="#">
3998
+ <svg height="37px" viewBox="0 0 679 158">
3999
+ <title>PF-HorizontalLogo-Color</title>
4000
+ <defs>
4001
+ <linearGradient
4002
+ x1="68%"
4003
+ y1="2.25860997e-13%"
4004
+ x2="32%"
4005
+ y2="100%"
4006
+ id="linearGradient-nav-docked-example-masthead"
4007
+ >
4008
+ <stop stop-color="#2B9AF3" offset="0%" />
4009
+ <stop
4010
+ stop-color="#73BCF7"
4011
+ stop-opacity="0.502212631"
4012
+ offset="100%"
4013
+ />
4014
+ </linearGradient>
4015
+ </defs>
4016
+ <g
4017
+ stroke="none"
4018
+ stroke-width="1"
4019
+ fill="none"
4020
+ fill-rule="evenodd"
4021
+ >
4022
+ <g
4023
+ transform="translate(206.000000, 45.750000)"
4024
+ fill="var(--pf-t--global--text--color--regular)"
4025
+ fill-rule="nonzero"
4026
+ >
4027
+ <path
4028
+ 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"
4029
+ />
4030
+ <path
4031
+ 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"
4032
+ />
4033
+ <path
4034
+ 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"
4035
+ />
4036
+ <path
4037
+ 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"
4038
+ />
4039
+ <path
4040
+ 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"
4041
+ />
4042
+ <path
4043
+ 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"
4044
+ />
4045
+ <path
4046
+ 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"
4047
+ />
4048
+ <polygon
4049
+ 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"
4050
+ />
4051
+ <polygon
4052
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4053
+ />
4054
+ <path
4055
+ 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"
4056
+ />
4057
+ </g>
4058
+ <g transform="translate(0.000000, 0.000000)">
4059
+ <path
4060
+ 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"
4061
+ fill="#0066CC"
4062
+ />
4063
+ <path
4064
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4065
+ fill="url(#linearGradient-nav-docked-example-masthead)"
4066
+ />
4067
+ <path
4068
+ 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"
4069
+ fill="url(#linearGradient-nav-docked-example-masthead)"
4070
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4071
+ />
4072
+ </g>
4073
+ </g>
4074
+ </svg>
4075
+ </a>
4076
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
4077
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
4078
+ <title>PF-HorizontalLogo-Color</title>
4079
+ <defs>
4080
+ <linearGradient
4081
+ x1="68%"
4082
+ y1="2.25860997e-13%"
4083
+ x2="32%"
4084
+ y2="100%"
4085
+ id="linearGradient-1"
4086
+ >
4087
+ <stop stop-color="#2B9AF3" offset="0%" />
4088
+ <stop
4089
+ stop-color="#73BCF7"
4090
+ stop-opacity="0.502212631"
4091
+ offset="100%"
4092
+ />
4093
+ </linearGradient>
4094
+ </defs>
4095
+ <g
4096
+ id="PF-IconLogo-color"
4097
+ stroke="none"
4098
+ stroke-width="1"
4099
+ fill="none"
4100
+ fill-rule="evenodd"
4101
+ >
4102
+ <g id="Logo">
4103
+ <path
4104
+ 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"
4105
+ id="Rectangle-Copy-17"
4106
+ fill="#0066CC"
4107
+ />
4108
+ <path
4109
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4110
+ id="Path-2"
4111
+ fill="url(#linearGradient-1)"
4112
+ />
4113
+ <path
4114
+ 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"
4115
+ id="Path-2"
4116
+ fill="url(#linearGradient-1)"
4117
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4118
+ />
4119
+ </g>
4120
+ </g>
4121
+ </svg>
4122
+ </a>
4123
+ </div>
4124
+ </div>
4125
+ <hr class="pf-v6-c-divider" />
4126
+ <div class="pf-v6-c-masthead__content">
4127
+ <div
4128
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
4129
+ id="nav-docked-example-masthead-toolbar"
4130
+ >
4131
+ <div class="pf-v6-c-toolbar__content">
4132
+ <div class="pf-v6-c-toolbar__content-section">
4133
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
4134
+ <ul class="pf-v6-c-nav__list" role="list">
4135
+ <li class="pf-v6-c-nav__item">
4136
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cubes">
4137
+ <span class="pf-v6-c-nav__link-icon">
4138
+ <svg
4139
+ class="pf-v6-svg"
4140
+ viewBox="0 0 32 32"
4141
+ fill="currentColor"
4142
+ aria-hidden="true"
4143
+ role="img"
4144
+ width="1em"
4145
+ height="1em"
4146
+ >
4147
+ <path
4148
+ d="M12.5 12h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5v7c0 .827.673 1.5 1.5 1.5Zm.5-8h6v6h-6V4ZM5.5 25h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5v7c0 .827.673 1.5 1.5 1.5Zm.5-8h6v6H6v-6Zm24 12a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1ZM18 16.5v7c0 .827.673 1.5 1.5 1.5h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5Zm2 .5h6v6h-6v-6Z"
4149
+ />
4150
+ </svg>
4151
+ </span>
4152
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4153
+ </a>
4154
+ </li>
4155
+ <li class="pf-v6-c-nav__item">
4156
+ <a
4157
+ href="#"
4158
+ class="pf-v6-c-nav__link pf-m-current"
4159
+ aria-current="page"
4160
+ aria-label="Folder"
4161
+ >
4162
+ <span class="pf-v6-c-nav__link-icon">
4163
+ <svg
4164
+ class="pf-v6-svg"
4165
+ viewBox="0 0 32 32"
4166
+ fill="currentColor"
4167
+ aria-hidden="true"
4168
+ role="img"
4169
+ width="1em"
4170
+ height="1em"
4171
+ >
4172
+ <path
4173
+ d="M29.5 8H17.81l-.681-3.208A1 1 0 0 0 16.15 4h-9.3a1 1 0 0 0-.979.792L5.19 8H2.5C1.673 8 1 8.673 1 9.5v17c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-17c0-.827-.673-1.5-1.5-1.5ZM29 26H3V10h3a1 1 0 0 0 .979-.792L7.66 6h7.682l.681 3.208a1 1 0 0 0 .979.792h12v16Z"
4174
+ />
4175
+ </svg>
4176
+ </span>
4177
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4178
+ </a>
4179
+ </li>
4180
+ <li class="pf-v6-c-nav__item">
4181
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
4182
+ <span class="pf-v6-c-nav__link-icon">
4183
+ <svg
4184
+ class="pf-v6-svg"
4185
+ viewBox="0 0 32 32"
4186
+ fill="currentColor"
4187
+ aria-hidden="true"
4188
+ role="img"
4189
+ width="1em"
4190
+ height="1em"
4191
+ >
4192
+ <path
4193
+ d="M26.996 14.228c.003-.077.004-.153.004-.228 0-4.962-4.037-9-9-9-3.899 0-7.333 2.532-8.54 6.156A6.891 6.891 0 0 0 8 11c-3.859 0-7 3.14-7 7s3.141 7 7 7h17.5c3.032 0 5.5-2.467 5.5-5.5a5.456 5.456 0 0 0-4.004-5.272ZM25.5 23H8c-2.757 0-5-2.243-5-5s2.243-5 5-5a4.97 4.97 0 0 1 1.799.34 1.003 1.003 0 0 0 1.341-.735C11.796 9.357 14.682 7 18 7c3.859 0 7 3.14 7 7 0 .311-.028.615-.067.916a1.004 1.004 0 0 0 .898 1.123 3.473 3.473 0 0 1 3.17 3.461c0 1.93-1.57 3.5-3.5 3.5Z"
4194
+ />
4195
+ </svg>
4196
+ </span>
4197
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4198
+ </a>
4199
+ </li>
4200
+ <li class="pf-v6-c-nav__item">
4201
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
4202
+ <span class="pf-v6-c-nav__link-icon">
4203
+ <svg
4204
+ class="pf-v6-svg"
4205
+ viewBox="0 0 32 32"
4206
+ fill="currentColor"
4207
+ aria-hidden="true"
4208
+ role="img"
4209
+ width="1em"
4210
+ height="1em"
4211
+ >
4212
+ <path
4213
+ d="M9.707 9.707 3.414 16l6.293 6.293a.999.999 0 1 1-1.414 1.414l-6.646-6.646a1.501 1.501 0 0 1 0-2.121l6.646-6.646a.999.999 0 1 1 1.414 1.414Zm20.647 5.232-6.646-6.646a.999.999 0 1 0-1.414 1.414L28.587 16l-6.293 6.293a.999.999 0 1 0 1.414 1.414l6.646-6.646a1.501 1.501 0 0 0 0-2.121ZM18.121 6.022a.997.997 0 0 0-1.186.77l-3.826 18a1 1 0 1 0 1.956.416l3.826-18a1 1 0 0 0-.77-1.186Z"
4214
+ />
4215
+ </svg>
4216
+ </span>
4217
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4218
+ </a>
4219
+ </li>
4220
+ </ul>
4221
+ </nav>
4222
+
4223
+ <div
4224
+ 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"
4225
+ >
4226
+ <div class="pf-v6-c-toolbar__item">
4227
+ <button
4228
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
4229
+ type="button"
4230
+ aria-expanded="false"
4231
+ aria-label="Applications"
4232
+ >
4233
+ <span class="pf-v6-c-menu-toggle__icon">
4234
+ <svg
4235
+ class="pf-v6-svg"
4236
+ viewBox="0 0 32 32"
4237
+ fill="currentColor"
4238
+ aria-hidden="true"
4239
+ role="img"
4240
+ width="1em"
4241
+ height="1em"
4242
+ >
4243
+ <path
4244
+ d="M13.75 2H3.25C2.561 2 2 2.561 2 3.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25V3.25C15 2.561 14.439 2 13.75 2ZM13 13H4V4h9v9ZM28.75 2h-10.5C17.561 2 17 2.561 17 3.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25V3.25C30 2.561 29.439 2 28.75 2ZM28 13h-9V4h9v9Zm-14.25 4H3.25C2.561 17 2 17.561 2 18.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25v-10.5c0-.689-.561-1.25-1.25-1.25ZM13 28H4v-9h9v9Zm15.75-11h-10.5c-.689 0-1.25.561-1.25 1.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25v-10.5c0-.689-.561-1.25-1.25-1.25ZM28 28h-9v-9h9v9Z"
4245
+ />
4246
+ </svg>
4247
+ </span>
4248
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
4249
+ </button>
4250
+ </div>
4251
+ <div class="pf-v6-c-toolbar__item">
4252
+ <button
4253
+ class="pf-v6-c-button pf-m-docked pf-m-settings pf-m-plain"
4254
+ type="button"
4255
+ aria-label="Settings"
4256
+ >
4257
+ <span class="pf-v6-c-button__icon pf-m-start">
4258
+ <svg
4259
+ class="pf-v6-svg"
4260
+ viewBox="0 0 32 32"
4261
+ fill="currentColor"
4262
+ aria-hidden="true"
4263
+ role="img"
4264
+ width="1em"
4265
+ height="1em"
4266
+ >
4267
+ <path
4268
+ 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"
4269
+ />
4270
+ </svg>
4271
+ </span>
4272
+ <span class="pf-v6-c-button__text">Settings</span>
4273
+ </button>
4274
+ </div>
4275
+ <div class="pf-v6-c-toolbar__item">
4276
+ <button
4277
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
4278
+ type="button"
4279
+ aria-expanded="false"
4280
+ aria-label="Help"
4281
+ >
4282
+ <span class="pf-v6-c-menu-toggle__icon">
4283
+ <svg
4284
+ class="pf-v6-svg"
4285
+ viewBox="0 0 32 32"
4286
+ fill="currentColor"
4287
+ aria-hidden="true"
4288
+ role="img"
4289
+ width="1em"
4290
+ height="1em"
4291
+ >
4292
+ <path
4293
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
4294
+ />
4295
+ </svg>
4296
+ </span>
4297
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
4298
+ </button>
4299
+ </div>
4300
+ </div>
4301
+ </div>
4302
+ </div>
4303
+ </div>
4304
+ </div>
4305
+ </header>
4306
+ </div>
4307
+ </div>
4308
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4309
+ <main
4310
+ class="pf-v6-c-page__main"
4311
+ tabindex="-1"
4312
+ id="main-content-nav-docked-example"
4313
+ >
4314
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4315
+ <div class="pf-v6-c-page__main-body">
4316
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4317
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4318
+ <li class="pf-v6-c-breadcrumb__item">
4319
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4320
+ </li>
4321
+ <li class="pf-v6-c-breadcrumb__item">
4322
+ <span class="pf-v6-c-breadcrumb__item-divider">
4323
+ <svg
4324
+ class="pf-v6-svg"
4325
+ viewBox="0 0 20 20"
4326
+ fill="currentColor"
4327
+ aria-hidden="true"
4328
+ role="img"
4329
+ width="1em"
4330
+ height="1em"
4331
+ >
4332
+ <path
4333
+ 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"
4334
+ />
4335
+ </svg>
4336
+ </span>
4337
+
4338
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4339
+ </li>
4340
+ <li class="pf-v6-c-breadcrumb__item">
4341
+ <span class="pf-v6-c-breadcrumb__item-divider">
4342
+ <svg
4343
+ class="pf-v6-svg"
4344
+ viewBox="0 0 20 20"
4345
+ fill="currentColor"
4346
+ aria-hidden="true"
4347
+ role="img"
4348
+ width="1em"
4349
+ height="1em"
4350
+ >
4351
+ <path
4352
+ 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"
4353
+ />
4354
+ </svg>
4355
+ </span>
4356
+
4357
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4358
+ </li>
4359
+ <li class="pf-v6-c-breadcrumb__item">
4360
+ <span class="pf-v6-c-breadcrumb__item-divider">
4361
+ <svg
4362
+ class="pf-v6-svg"
4363
+ viewBox="0 0 20 20"
4364
+ fill="currentColor"
4365
+ aria-hidden="true"
4366
+ role="img"
4367
+ width="1em"
4368
+ height="1em"
4369
+ >
4370
+ <path
4371
+ 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"
4372
+ />
4373
+ </svg>
4374
+ </span>
4375
+
4376
+ <a
4377
+ href="#"
4378
+ class="pf-v6-c-breadcrumb__link pf-m-current"
4379
+ aria-current="page"
4380
+ >Section landing</a>
4381
+ </li>
4382
+ </ol>
4383
+ </nav>
4384
+ </div>
4385
+ </section>
4386
+ <section
4387
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4388
+ aria-labelledby="main-title"
4389
+ >
4390
+ <div class="pf-v6-c-page__main-body">
4391
+ <h1
4392
+ class="pf-v6-c-content--h1 pf-m-page-title"
4393
+ id="main-title"
4394
+ >Main title</h1>
4395
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
4396
+ </div>
4397
+ </section>
4398
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
4399
+ <div class="pf-v6-c-page__main-body">
4400
+ <div class="pf-v6-l-gallery pf-m-gutter">
4401
+ <div class="pf-v6-c-card">
4402
+ <div class="pf-v6-c-card__body">This is a card</div>
4403
+ </div>
4404
+ <div class="pf-v6-c-card">
4405
+ <div class="pf-v6-c-card__body">This is a card</div>
4406
+ </div>
4407
+ <div class="pf-v6-c-card">
4408
+ <div class="pf-v6-c-card__body">This is a card</div>
4409
+ </div>
4410
+ <div class="pf-v6-c-card">
4411
+ <div class="pf-v6-c-card__body">This is a card</div>
4412
+ </div>
4413
+ <div class="pf-v6-c-card">
4414
+ <div class="pf-v6-c-card__body">This is a card</div>
4415
+ </div>
4416
+ <div class="pf-v6-c-card">
4417
+ <div class="pf-v6-c-card__body">This is a card</div>
4418
+ </div>
4419
+ <div class="pf-v6-c-card">
4420
+ <div class="pf-v6-c-card__body">This is a card</div>
4421
+ </div>
4422
+ <div class="pf-v6-c-card">
4423
+ <div class="pf-v6-c-card__body">This is a card</div>
4424
+ </div>
4425
+ <div class="pf-v6-c-card">
4426
+ <div class="pf-v6-c-card__body">This is a card</div>
4427
+ </div>
4428
+ <div class="pf-v6-c-card">
4429
+ <div class="pf-v6-c-card__body">This is a card</div>
4430
+ </div>
4431
+ </div>
4432
+ </div>
4433
+ </section>
4434
+ </main>
4435
+ </div>
4436
+ </div>
4437
+
4438
+ ```
4439
+
4440
+ ### Docked nav text expanded - expanded on mobile
4441
+
4442
+ ```html isFullscreen isBeta
4443
+ <div class="pf-v6-c-page pf-m-docked" id="nav-docked-expanded-example">
4444
+ <div class="pf-v6-c-skip-to-content">
4445
+ <a
4446
+ class="pf-v6-c-button pf-m-primary"
4447
+ href="#main-content-nav-docked-expanded-example"
4448
+ >
4449
+ <span class="pf-v6-c-button__text">Skip to content</span>
4450
+ </a>
4451
+ </div>
4452
+ <header class="pf-v6-c-masthead pf-m-display-inline">
4453
+ <div class="pf-v6-c-masthead__main">
4454
+ <span class="pf-v6-c-masthead__toggle">
4455
+ <button
4456
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4457
+ type="button"
4458
+ aria-label="Global navigation"
4459
+ >
4460
+ <span class="pf-v6-c-button__icon">
4461
+ <svg
4462
+ viewBox="0 0 10 10"
4463
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4464
+ width="1em"
4465
+ height="1em"
4466
+ >
4467
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4468
+ <path
4469
+ class="pf-v6-c-button--hamburger-icon--middle"
4470
+ d="M1,5 L9,5"
4471
+ />
4472
+ <path
4473
+ class="pf-v6-c-button--hamburger-icon--arrow"
4474
+ d="M1,5 L1,5 L1,5"
4475
+ />
4476
+ <path
4477
+ class="pf-v6-c-button--hamburger-icon--bottom"
4478
+ d="M9,9 L1,9"
4479
+ />
4480
+ </svg>
4481
+ </span>
4482
+ </button>
4483
+ </span>
4484
+ <div class="pf-v6-c-masthead__brand">
4485
+ <a class="pf-v6-c-masthead__logo" href="#">
4486
+ <svg height="37px" viewBox="0 0 679 158">
4487
+ <title>PF-HorizontalLogo-Color</title>
4488
+ <defs>
4489
+ <linearGradient
4490
+ x1="68%"
4491
+ y1="2.25860997e-13%"
4492
+ x2="32%"
4493
+ y2="100%"
4494
+ id="linearGradient-"
4495
+ >
4496
+ <stop stop-color="#2B9AF3" offset="0%" />
4497
+ <stop
4498
+ stop-color="#73BCF7"
4499
+ stop-opacity="0.502212631"
4500
+ offset="100%"
4501
+ />
4502
+ </linearGradient>
4503
+ </defs>
4504
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4505
+ <g
4506
+ transform="translate(206.000000, 45.750000)"
4507
+ fill="var(--pf-t--global--text--color--regular)"
4508
+ fill-rule="nonzero"
4509
+ >
4510
+ <path
4511
+ 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"
4512
+ />
4513
+ <path
4514
+ 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"
4515
+ />
4516
+ <path
4517
+ 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"
4518
+ />
4519
+ <path
4520
+ 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"
4521
+ />
4522
+ <path
4523
+ 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"
4524
+ />
4525
+ <path
4526
+ 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"
4527
+ />
4528
+ <path
4529
+ 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"
4530
+ />
4531
+ <polygon
4532
+ 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"
4533
+ />
4534
+ <polygon
4535
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4536
+ />
4537
+ <path
4538
+ 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"
4539
+ />
4540
+ </g>
4541
+ <g transform="translate(0.000000, 0.000000)">
4542
+ <path
4543
+ 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"
4544
+ fill="#0066CC"
4545
+ />
4546
+ <path
4547
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4548
+ fill="url(#linearGradient-)"
4549
+ />
4550
+ <path
4551
+ 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"
4552
+ fill="url(#linearGradient-)"
4553
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4554
+ />
4555
+ </g>
4556
+ </g>
4557
+ </svg>
4558
+ </a>
4559
+ </div>
4560
+ </div>
4561
+ <div class="pf-v6-c-masthead__content">
4562
+ <div class="pf-v6-c-toolbar pf-m-static">
4563
+ <div class="pf-v6-c-toolbar__content">
4564
+ <div class="pf-v6-c-toolbar__content-section">
4565
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
4566
+ <button
4567
+ class="pf-v6-c-button pf-m-plain"
4568
+ type="button"
4569
+ aria-label="Search"
4570
+ >
4571
+ <span class="pf-v6-c-button__icon">
4572
+ <svg
4573
+ class="pf-v6-svg"
4574
+ viewBox="0 0 32 32"
4575
+ fill="currentColor"
4576
+ aria-hidden="true"
4577
+ role="img"
4578
+ width="1em"
4579
+ height="1em"
4580
+ >
4581
+ <path
4582
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
4583
+ />
4584
+ </svg>
4585
+ </span>
4586
+ </button>
4587
+ </div>
4588
+ </div>
4589
+ </div>
4590
+ </div>
4591
+ </div>
4592
+ </header>
4593
+ <div class="pf-v6-c-page__dock pf-m-text-expanded pf-m-expanded">
4594
+ <div class="pf-v6-c-page__dock-main">
4595
+ <header
4596
+ class="pf-v6-c-masthead pf-m-docked"
4597
+ id="nav-docked-expanded-example-masthead"
4598
+ >
4599
+ <div class="pf-v6-c-masthead__main">
4600
+ <span class="pf-v6-c-masthead__toggle">
4601
+ <button
4602
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4603
+ type="button"
4604
+ aria-label="Global navigation"
4605
+ >
4606
+ <span class="pf-v6-c-button__icon">
4607
+ <svg
4608
+ viewBox="0 0 10 10"
4609
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4610
+ width="1em"
4611
+ height="1em"
4612
+ >
4613
+ <path
4614
+ class="pf-v6-c-button--hamburger-icon--top"
4615
+ d="M1,1 L9,1"
4616
+ />
4617
+ <path
4618
+ class="pf-v6-c-button--hamburger-icon--middle"
4619
+ d="M1,5 L9,5"
4620
+ />
4621
+ <path
4622
+ class="pf-v6-c-button--hamburger-icon--arrow"
4623
+ d="M1,5 L1,5 L1,5"
4624
+ />
4625
+ <path
4626
+ class="pf-v6-c-button--hamburger-icon--bottom"
4627
+ d="M9,9 L1,9"
4628
+ />
4629
+ </svg>
4630
+ </span>
4631
+ </button>
4632
+ </span>
4633
+ <div class="pf-v6-c-masthead__brand">
4634
+ <a class="pf-v6-c-masthead__logo" href="#">
4635
+ <svg height="37px" viewBox="0 0 679 158">
4636
+ <title>PF-HorizontalLogo-Color</title>
4637
+ <defs>
4638
+ <linearGradient
4639
+ x1="68%"
4640
+ y1="2.25860997e-13%"
4641
+ x2="32%"
4642
+ y2="100%"
4643
+ id="linearGradient-nav-docked-expanded-example-masthead"
4644
+ >
4645
+ <stop stop-color="#2B9AF3" offset="0%" />
4646
+ <stop
4647
+ stop-color="#73BCF7"
4648
+ stop-opacity="0.502212631"
4649
+ offset="100%"
4650
+ />
4651
+ </linearGradient>
4652
+ </defs>
4653
+ <g
4654
+ stroke="none"
4655
+ stroke-width="1"
4656
+ fill="none"
4657
+ fill-rule="evenodd"
4658
+ >
4659
+ <g
4660
+ transform="translate(206.000000, 45.750000)"
4661
+ fill="var(--pf-t--global--text--color--regular)"
4662
+ fill-rule="nonzero"
4663
+ >
4664
+ <path
4665
+ 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"
4666
+ />
4667
+ <path
4668
+ 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"
4669
+ />
4670
+ <path
4671
+ 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"
4672
+ />
4673
+ <path
4674
+ 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"
4675
+ />
4676
+ <path
4677
+ 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"
4678
+ />
4679
+ <path
4680
+ 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"
4681
+ />
4682
+ <path
4683
+ 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"
4684
+ />
4685
+ <polygon
4686
+ 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"
4687
+ />
4688
+ <polygon
4689
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4690
+ />
4691
+ <path
4692
+ 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"
4693
+ />
4694
+ </g>
4695
+ <g transform="translate(0.000000, 0.000000)">
4696
+ <path
4697
+ 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"
4698
+ fill="#0066CC"
4699
+ />
4700
+ <path
4701
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4702
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
4703
+ />
4704
+ <path
4705
+ 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"
4706
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
4707
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4708
+ />
4709
+ </g>
4710
+ </g>
4711
+ </svg>
4712
+ </a>
4713
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
4714
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
4715
+ <title>PF-HorizontalLogo-Color</title>
4716
+ <defs>
4717
+ <linearGradient
4718
+ x1="68%"
4719
+ y1="2.25860997e-13%"
4720
+ x2="32%"
4721
+ y2="100%"
4722
+ id="linearGradient-1"
4723
+ >
4724
+ <stop stop-color="#2B9AF3" offset="0%" />
4725
+ <stop
4726
+ stop-color="#73BCF7"
4727
+ stop-opacity="0.502212631"
4728
+ offset="100%"
4729
+ />
4730
+ </linearGradient>
4731
+ </defs>
4732
+ <g
4733
+ id="PF-IconLogo-color"
4734
+ stroke="none"
4735
+ stroke-width="1"
4736
+ fill="none"
4737
+ fill-rule="evenodd"
4738
+ >
4739
+ <g id="Logo">
4740
+ <path
4741
+ 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"
4742
+ id="Rectangle-Copy-17"
4743
+ fill="#0066CC"
4744
+ />
4745
+ <path
4746
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4747
+ id="Path-2"
4748
+ fill="url(#linearGradient-1)"
4749
+ />
4750
+ <path
4751
+ 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"
4752
+ id="Path-2"
4753
+ fill="url(#linearGradient-1)"
4754
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4755
+ />
4756
+ </g>
4757
+ </g>
4758
+ </svg>
4759
+ </a>
4760
+ </div>
4761
+ </div>
4762
+ <hr class="pf-v6-c-divider" />
4763
+ <div class="pf-v6-c-masthead__content">
4764
+ <div
4765
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
4766
+ id="nav-docked-expanded-example-masthead-toolbar"
4767
+ >
4768
+ <div class="pf-v6-c-toolbar__content">
4769
+ <div class="pf-v6-c-toolbar__content-section">
4770
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
4771
+ <ul class="pf-v6-c-nav__list" role="list">
4772
+ <li class="pf-v6-c-nav__item">
4773
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cubes">
4774
+ <span class="pf-v6-c-nav__link-icon">
4775
+ <svg
4776
+ class="pf-v6-svg"
4777
+ viewBox="0 0 32 32"
4778
+ fill="currentColor"
4779
+ aria-hidden="true"
4780
+ role="img"
4781
+ width="1em"
4782
+ height="1em"
4783
+ >
4784
+ <path
4785
+ d="M12.5 12h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5v7c0 .827.673 1.5 1.5 1.5Zm.5-8h6v6h-6V4ZM5.5 25h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5v7c0 .827.673 1.5 1.5 1.5Zm.5-8h6v6H6v-6Zm24 12a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1ZM18 16.5v7c0 .827.673 1.5 1.5 1.5h7c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5Zm2 .5h6v6h-6v-6Z"
4786
+ />
4787
+ </svg>
4788
+ </span>
4789
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4790
+ </a>
4791
+ </li>
4792
+ <li class="pf-v6-c-nav__item">
4793
+ <a
4794
+ href="#"
4795
+ class="pf-v6-c-nav__link pf-m-current"
4796
+ aria-current="page"
4797
+ aria-label="Folder"
4798
+ >
4799
+ <span class="pf-v6-c-nav__link-icon">
4800
+ <svg
4801
+ class="pf-v6-svg"
4802
+ viewBox="0 0 32 32"
4803
+ fill="currentColor"
4804
+ aria-hidden="true"
4805
+ role="img"
4806
+ width="1em"
4807
+ height="1em"
4808
+ >
4809
+ <path
4810
+ d="M29.5 8H17.81l-.681-3.208A1 1 0 0 0 16.15 4h-9.3a1 1 0 0 0-.979.792L5.19 8H2.5C1.673 8 1 8.673 1 9.5v17c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-17c0-.827-.673-1.5-1.5-1.5ZM29 26H3V10h3a1 1 0 0 0 .979-.792L7.66 6h7.682l.681 3.208a1 1 0 0 0 .979.792h12v16Z"
4811
+ />
4812
+ </svg>
4813
+ </span>
4814
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4815
+ </a>
4816
+ </li>
4817
+ <li class="pf-v6-c-nav__item">
4818
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
4819
+ <span class="pf-v6-c-nav__link-icon">
4820
+ <svg
4821
+ class="pf-v6-svg"
4822
+ viewBox="0 0 32 32"
4823
+ fill="currentColor"
4824
+ aria-hidden="true"
4825
+ role="img"
4826
+ width="1em"
4827
+ height="1em"
4828
+ >
4829
+ <path
4830
+ d="M26.996 14.228c.003-.077.004-.153.004-.228 0-4.962-4.037-9-9-9-3.899 0-7.333 2.532-8.54 6.156A6.891 6.891 0 0 0 8 11c-3.859 0-7 3.14-7 7s3.141 7 7 7h17.5c3.032 0 5.5-2.467 5.5-5.5a5.456 5.456 0 0 0-4.004-5.272ZM25.5 23H8c-2.757 0-5-2.243-5-5s2.243-5 5-5a4.97 4.97 0 0 1 1.799.34 1.003 1.003 0 0 0 1.341-.735C11.796 9.357 14.682 7 18 7c3.859 0 7 3.14 7 7 0 .311-.028.615-.067.916a1.004 1.004 0 0 0 .898 1.123 3.473 3.473 0 0 1 3.17 3.461c0 1.93-1.57 3.5-3.5 3.5Z"
4831
+ />
4832
+ </svg>
4833
+ </span>
4834
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4835
+ </a>
4836
+ </li>
4837
+ <li class="pf-v6-c-nav__item">
4838
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
4839
+ <span class="pf-v6-c-nav__link-icon">
4840
+ <svg
4841
+ class="pf-v6-svg"
4842
+ viewBox="0 0 32 32"
4843
+ fill="currentColor"
4844
+ aria-hidden="true"
4845
+ role="img"
4846
+ width="1em"
4847
+ height="1em"
4848
+ >
4849
+ <path
4850
+ d="M9.707 9.707 3.414 16l6.293 6.293a.999.999 0 1 1-1.414 1.414l-6.646-6.646a1.501 1.501 0 0 1 0-2.121l6.646-6.646a.999.999 0 1 1 1.414 1.414Zm20.647 5.232-6.646-6.646a.999.999 0 1 0-1.414 1.414L28.587 16l-6.293 6.293a.999.999 0 1 0 1.414 1.414l6.646-6.646a1.501 1.501 0 0 0 0-2.121ZM18.121 6.022a.997.997 0 0 0-1.186.77l-3.826 18a1 1 0 1 0 1.956.416l3.826-18a1 1 0 0 0-.77-1.186Z"
4851
+ />
4852
+ </svg>
4853
+ </span>
4854
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4855
+ </a>
4856
+ </li>
4857
+ </ul>
4858
+ </nav>
4859
+
4860
+ <div
4861
+ 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"
4862
+ >
4863
+ <div class="pf-v6-c-toolbar__item">
4864
+ <button
4865
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
4866
+ type="button"
4867
+ aria-expanded="false"
4868
+ aria-label="Applications"
4869
+ >
4870
+ <span class="pf-v6-c-menu-toggle__icon">
4871
+ <svg
4872
+ class="pf-v6-svg"
4873
+ viewBox="0 0 32 32"
4874
+ fill="currentColor"
4875
+ aria-hidden="true"
4876
+ role="img"
4877
+ width="1em"
4878
+ height="1em"
4879
+ >
4880
+ <path
4881
+ d="M13.75 2H3.25C2.561 2 2 2.561 2 3.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25V3.25C15 2.561 14.439 2 13.75 2ZM13 13H4V4h9v9ZM28.75 2h-10.5C17.561 2 17 2.561 17 3.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25V3.25C30 2.561 29.439 2 28.75 2ZM28 13h-9V4h9v9Zm-14.25 4H3.25C2.561 17 2 17.561 2 18.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25v-10.5c0-.689-.561-1.25-1.25-1.25ZM13 28H4v-9h9v9Zm15.75-11h-10.5c-.689 0-1.25.561-1.25 1.25v10.5c0 .689.561 1.25 1.25 1.25h10.5c.689 0 1.25-.561 1.25-1.25v-10.5c0-.689-.561-1.25-1.25-1.25ZM28 28h-9v-9h9v9Z"
4882
+ />
4883
+ </svg>
4884
+ </span>
4885
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
4886
+ </button>
4887
+ </div>
4888
+ <div class="pf-v6-c-toolbar__item">
4889
+ <button
4890
+ class="pf-v6-c-button pf-m-docked pf-m-settings pf-m-plain"
4891
+ type="button"
4892
+ aria-label="Settings"
4893
+ >
4894
+ <span class="pf-v6-c-button__icon pf-m-start">
4895
+ <svg
4896
+ class="pf-v6-svg"
4897
+ viewBox="0 0 32 32"
4898
+ fill="currentColor"
4899
+ aria-hidden="true"
4900
+ role="img"
4901
+ width="1em"
4902
+ height="1em"
4903
+ >
4904
+ <path
4905
+ 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"
4906
+ />
4907
+ </svg>
4908
+ </span>
4909
+ <span class="pf-v6-c-button__text">Settings</span>
4910
+ </button>
4911
+ </div>
4912
+ <div class="pf-v6-c-toolbar__item">
4913
+ <button
4914
+ class="pf-v6-c-menu-toggle pf-m-docked pf-m-text pf-m-plain"
4915
+ type="button"
4916
+ aria-expanded="false"
4917
+ aria-label="Help"
4918
+ >
4919
+ <span class="pf-v6-c-menu-toggle__icon">
4920
+ <svg
4921
+ class="pf-v6-svg"
4922
+ viewBox="0 0 32 32"
4923
+ fill="currentColor"
4924
+ aria-hidden="true"
4925
+ role="img"
4926
+ width="1em"
4927
+ height="1em"
4928
+ >
4929
+ <path
4930
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
4931
+ />
4932
+ </svg>
4933
+ </span>
4934
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
4935
+ </button>
4936
+ </div>
4937
+ </div>
4938
+ </div>
4939
+ </div>
4940
+ </div>
4941
+ </div>
4942
+ </header>
4943
+ </div>
4944
+ </div>
4945
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4946
+ <main
4947
+ class="pf-v6-c-page__main"
4948
+ tabindex="-1"
4949
+ id="main-content-nav-docked-expanded-example"
4950
+ >
4951
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4952
+ <div class="pf-v6-c-page__main-body">
4953
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4954
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4955
+ <li class="pf-v6-c-breadcrumb__item">
4956
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4957
+ </li>
4958
+ <li class="pf-v6-c-breadcrumb__item">
4959
+ <span class="pf-v6-c-breadcrumb__item-divider">
4960
+ <svg
4961
+ class="pf-v6-svg"
4962
+ viewBox="0 0 20 20"
4963
+ fill="currentColor"
4964
+ aria-hidden="true"
4965
+ role="img"
4966
+ width="1em"
4967
+ height="1em"
4968
+ >
4969
+ <path
4970
+ 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"
4971
+ />
4972
+ </svg>
4973
+ </span>
4974
+
4975
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4976
+ </li>
4977
+ <li class="pf-v6-c-breadcrumb__item">
4978
+ <span class="pf-v6-c-breadcrumb__item-divider">
4979
+ <svg
4980
+ class="pf-v6-svg"
4981
+ viewBox="0 0 20 20"
4982
+ fill="currentColor"
4983
+ aria-hidden="true"
4984
+ role="img"
4985
+ width="1em"
4986
+ height="1em"
4987
+ >
4988
+ <path
4989
+ 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"
4990
+ />
4991
+ </svg>
4992
+ </span>
4993
+
4994
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4995
+ </li>
4996
+ <li class="pf-v6-c-breadcrumb__item">
4997
+ <span class="pf-v6-c-breadcrumb__item-divider">
4998
+ <svg
4999
+ class="pf-v6-svg"
5000
+ viewBox="0 0 20 20"
5001
+ fill="currentColor"
5002
+ aria-hidden="true"
5003
+ role="img"
5004
+ width="1em"
5005
+ height="1em"
5006
+ >
5007
+ <path
5008
+ 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"
5009
+ />
5010
+ </svg>
5011
+ </span>
5012
+
5013
+ <a
5014
+ href="#"
5015
+ class="pf-v6-c-breadcrumb__link pf-m-current"
5016
+ aria-current="page"
5017
+ >Section landing</a>
5018
+ </li>
5019
+ </ol>
5020
+ </nav>
5021
+ </div>
5022
+ </section>
5023
+ <section
5024
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5025
+ aria-labelledby="main-title"
5026
+ >
5027
+ <div class="pf-v6-c-page__main-body">
5028
+ <h1
5029
+ class="pf-v6-c-content--h1 pf-m-page-title"
5030
+ id="main-title"
5031
+ >Main title</h1>
2082
5032
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2083
5033
  </div>
2084
5034
  </section>