@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.61

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 (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +222 -73
  66. package/components/Drawer/drawer.scss +191 -26
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +2047 -721
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2908 -1087
  385. package/patternfly.css +2915 -1087
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. 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">
@@ -194,44 +195,46 @@ section: components
194
195
  </div>
195
196
  </header>
196
197
  <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>
198
+ <div class="pf-v6-c-page__sidebar-main">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
+ <nav
201
+ class="pf-v6-c-nav"
202
+ id="nav-basic-example-primary-nav"
203
+ aria-label="Global"
204
+ >
205
+ <ul class="pf-v6-c-nav__list" role="list">
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">System panel</span>
209
+ </a>
210
+ </li>
211
+ <li class="pf-v6-c-nav__item">
212
+ <a
213
+ href="#"
214
+ class="pf-v6-c-nav__link pf-m-current"
215
+ aria-current="page"
216
+ >
217
+ <span class="pf-v6-c-nav__link-text">Policy</span>
218
+ </a>
219
+ </li>
220
+ <li class="pf-v6-c-nav__item">
221
+ <a href="#" class="pf-v6-c-nav__link">
222
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
223
+ </a>
224
+ </li>
225
+ <li class="pf-v6-c-nav__item">
226
+ <a href="#" class="pf-v6-c-nav__link">
227
+ <span class="pf-v6-c-nav__link-text">Network services</span>
228
+ </a>
229
+ </li>
230
+ <li class="pf-v6-c-nav__item">
231
+ <a href="#" class="pf-v6-c-nav__link">
232
+ <span class="pf-v6-c-nav__link-text">Server</span>
233
+ </a>
234
+ </li>
235
+ </ul>
236
+ </nav>
237
+ </div>
235
238
  </div>
236
239
  </div>
237
240
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +252,57 @@ section: components
249
252
  </li>
250
253
  <li class="pf-v6-c-breadcrumb__item">
251
254
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
255
+ <svg
256
+ class="pf-v6-svg"
257
+ viewBox="0 0 20 20"
258
+ fill="currentColor"
259
+ aria-hidden="true"
260
+ role="img"
261
+ width="1em"
262
+ height="1em"
263
+ >
264
+ <path
265
+ 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"
266
+ />
267
+ </svg>
253
268
  </span>
254
269
 
255
270
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
271
  </li>
257
272
  <li class="pf-v6-c-breadcrumb__item">
258
273
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 20 20"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ 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"
285
+ />
286
+ </svg>
260
287
  </span>
261
288
 
262
289
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
290
  </li>
264
291
  <li class="pf-v6-c-breadcrumb__item">
265
292
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
293
+ <svg
294
+ class="pf-v6-svg"
295
+ viewBox="0 0 20 20"
296
+ fill="currentColor"
297
+ aria-hidden="true"
298
+ role="img"
299
+ width="1em"
300
+ height="1em"
301
+ >
302
+ <path
303
+ 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"
304
+ />
305
+ </svg>
267
306
  </span>
268
307
 
269
308
  <a
@@ -336,7 +375,8 @@ section: components
336
375
  <span class="pf-v6-c-button__text">Skip to content</span>
337
376
  </a>
338
377
  </div>
339
- <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-masthead">
378
+
379
+ <header class="pf-v6-c-masthead" id="nav-grouped-nav-example-docked">
340
380
  <div class="pf-v6-c-masthead__main">
341
381
  <span class="pf-v6-c-masthead__toggle">
342
382
  <button
@@ -378,7 +418,7 @@ section: components
378
418
  y1="2.25860997e-13%"
379
419
  x2="32%"
380
420
  y2="100%"
381
- id="linearGradient-nav-grouped-nav-example-masthead"
421
+ id="linearGradient-nav-grouped-nav-example-docked"
382
422
  >
383
423
  <stop stop-color="#2B9AF3" offset="0%" />
384
424
  <stop
@@ -432,11 +472,11 @@ section: components
432
472
  />
433
473
  <path
434
474
  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)"
475
+ fill="url(#linearGradient-nav-grouped-nav-example-docked)"
436
476
  />
437
477
  <path
438
478
  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)"
479
+ fill="url(#linearGradient-nav-grouped-nav-example-docked)"
440
480
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
441
481
  />
442
482
  </g>
@@ -448,7 +488,7 @@ section: components
448
488
  <div class="pf-v6-c-masthead__content">
449
489
  <div
450
490
  class="pf-v6-c-toolbar pf-m-static"
451
- id="nav-grouped-nav-example-masthead-toolbar"
491
+ id="nav-grouped-nav-example-docked-toolbar"
452
492
  >
453
493
  <div class="pf-v6-c-toolbar__content">
454
494
  <div class="pf-v6-c-toolbar__content-section">
@@ -515,76 +555,84 @@ section: components
515
555
  </div>
516
556
  </header>
517
557
  <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>
558
+ <div class="pf-v6-c-page__sidebar-main">
559
+ <div class="pf-v6-c-page__sidebar-body">
560
+ <nav
561
+ class="pf-v6-c-nav"
562
+ id="nav-grouped-nav-example-grouped-nav"
563
+ aria-label="Global"
564
+ >
565
+ <section
566
+ class="pf-v6-c-nav__section"
567
+ aria-labelledby="grouped-title1"
568
+ >
569
+ <h2
570
+ class="pf-v6-c-nav__section-title"
571
+ id="grouped-title1"
572
+ >System panel</h2>
573
+ <ul class="pf-v6-c-nav__list" role="list">
574
+ <li class="pf-v6-c-nav__item">
575
+ <a href="#" class="pf-v6-c-nav__link">
576
+ <span class="pf-v6-c-nav__link-text">Overview</span>
577
+ </a>
578
+ </li>
579
+ <li class="pf-v6-c-nav__item">
580
+ <a href="#" class="pf-v6-c-nav__link">
581
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
582
+ </a>
583
+ </li>
584
+ <li class="pf-v6-c-nav__item">
585
+ <a
586
+ href="#"
587
+ class="pf-v6-c-nav__link pf-m-current"
588
+ aria-current="page"
589
+ >
590
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
591
+ </a>
592
+ </li>
593
+ <li class="pf-v6-c-nav__item">
594
+ <a href="#" class="pf-v6-c-nav__link">
595
+ <span class="pf-v6-c-nav__link-text">Instances</span>
596
+ </a>
597
+ </li>
598
+ <li class="pf-v6-c-nav__item">
599
+ <a href="#" class="pf-v6-c-nav__link">
600
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
601
+ </a>
602
+ </li>
603
+ <li class="pf-v6-c-nav__item">
604
+ <a href="#" class="pf-v6-c-nav__link">
605
+ <span class="pf-v6-c-nav__link-text">Networks</span>
606
+ </a>
607
+ </li>
608
+ </ul>
609
+ </section>
566
610
 
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>
611
+ <section
612
+ class="pf-v6-c-nav__section"
613
+ aria-labelledby="grouped-title2"
614
+ >
615
+ <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Policy</h2>
616
+ <ul class="pf-v6-c-nav__list" role="list">
617
+ <li class="pf-v6-c-nav__item">
618
+ <a href="#" class="pf-v6-c-nav__link">
619
+ <span class="pf-v6-c-nav__link-text">Hosts</span>
620
+ </a>
621
+ </li>
622
+ <li class="pf-v6-c-nav__item">
623
+ <a href="#" class="pf-v6-c-nav__link">
624
+ <span class="pf-v6-c-nav__link-text">Virtual machines</span>
625
+ </a>
626
+ </li>
627
+ <li class="pf-v6-c-nav__item">
628
+ <a href="#" class="pf-v6-c-nav__link">
629
+ <span class="pf-v6-c-nav__link-text">Storage</span>
630
+ </a>
631
+ </li>
632
+ </ul>
633
+ </section>
634
+ </nav>
635
+ </div>
588
636
  </div>
589
637
  </div>
590
638
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -602,21 +650,57 @@ section: components
602
650
  </li>
603
651
  <li class="pf-v6-c-breadcrumb__item">
604
652
  <span class="pf-v6-c-breadcrumb__item-divider">
605
- <i class="fas fa-angle-right" aria-hidden="true"></i>
653
+ <svg
654
+ class="pf-v6-svg"
655
+ viewBox="0 0 20 20"
656
+ fill="currentColor"
657
+ aria-hidden="true"
658
+ role="img"
659
+ width="1em"
660
+ height="1em"
661
+ >
662
+ <path
663
+ 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"
664
+ />
665
+ </svg>
606
666
  </span>
607
667
 
608
668
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
609
669
  </li>
610
670
  <li class="pf-v6-c-breadcrumb__item">
611
671
  <span class="pf-v6-c-breadcrumb__item-divider">
612
- <i class="fas fa-angle-right" aria-hidden="true"></i>
672
+ <svg
673
+ class="pf-v6-svg"
674
+ viewBox="0 0 20 20"
675
+ fill="currentColor"
676
+ aria-hidden="true"
677
+ role="img"
678
+ width="1em"
679
+ height="1em"
680
+ >
681
+ <path
682
+ 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"
683
+ />
684
+ </svg>
613
685
  </span>
614
686
 
615
687
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
616
688
  </li>
617
689
  <li class="pf-v6-c-breadcrumb__item">
618
690
  <span class="pf-v6-c-breadcrumb__item-divider">
619
- <i class="fas fa-angle-right" aria-hidden="true"></i>
691
+ <svg
692
+ class="pf-v6-svg"
693
+ viewBox="0 0 20 20"
694
+ fill="currentColor"
695
+ aria-hidden="true"
696
+ role="img"
697
+ width="1em"
698
+ height="1em"
699
+ >
700
+ <path
701
+ 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"
702
+ />
703
+ </svg>
620
704
  </span>
621
705
 
622
706
  <a
@@ -689,7 +773,8 @@ section: components
689
773
  <span class="pf-v6-c-button__text">Skip to content</span>
690
774
  </a>
691
775
  </div>
692
- <header class="pf-v6-c-masthead" id="nav-expandable-example-masthead">
776
+
777
+ <header class="pf-v6-c-masthead" id="nav-expandable-example-docked">
693
778
  <div class="pf-v6-c-masthead__main">
694
779
  <span class="pf-v6-c-masthead__toggle">
695
780
  <button
@@ -731,7 +816,7 @@ section: components
731
816
  y1="2.25860997e-13%"
732
817
  x2="32%"
733
818
  y2="100%"
734
- id="linearGradient-nav-expandable-example-masthead"
819
+ id="linearGradient-nav-expandable-example-docked"
735
820
  >
736
821
  <stop stop-color="#2B9AF3" offset="0%" />
737
822
  <stop
@@ -785,11 +870,11 @@ section: components
785
870
  />
786
871
  <path
787
872
  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)"
873
+ fill="url(#linearGradient-nav-expandable-example-docked)"
789
874
  />
790
875
  <path
791
876
  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)"
877
+ fill="url(#linearGradient-nav-expandable-example-docked)"
793
878
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
794
879
  />
795
880
  </g>
@@ -801,7 +886,7 @@ section: components
801
886
  <div class="pf-v6-c-masthead__content">
802
887
  <div
803
888
  class="pf-v6-c-toolbar pf-m-static"
804
- id="nav-expandable-example-masthead-toolbar"
889
+ id="nav-expandable-example-docked-toolbar"
805
890
  >
806
891
  <div class="pf-v6-c-toolbar__content">
807
892
  <div class="pf-v6-c-toolbar__content-section">
@@ -868,136 +953,174 @@ section: components
868
953
  </div>
869
954
  </header>
870
955
  <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>
956
+ <div class="pf-v6-c-page__sidebar-main">
957
+ <div class="pf-v6-c-page__sidebar-body">
958
+ <nav
959
+ class="pf-v6-c-nav"
960
+ id="nav-expandable-example-expandable-nav"
961
+ aria-label="Global"
962
+ >
963
+ <ul class="pf-v6-c-nav__list" role="list">
964
+ <li class="pf-v6-c-nav__item pf-m-expanded">
965
+ <button
966
+ class="pf-v6-c-nav__link"
967
+ aria-expanded="true"
968
+ id="nav-expandable-example-expandable-nav-link1"
969
+ >
970
+ <span class="pf-v6-c-nav__link-text">System panel</span>
971
+ <span class="pf-v6-c-nav__toggle">
972
+ <span class="pf-v6-c-nav__toggle-icon">
973
+ <svg
974
+ class="pf-v6-svg"
975
+ viewBox="0 0 20 20"
976
+ fill="currentColor"
977
+ aria-hidden="true"
978
+ role="img"
979
+ width="1em"
980
+ height="1em"
981
+ >
982
+ <path
983
+ 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"
984
+ />
985
+ </svg>
986
+ </span>
888
987
  </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>
988
+ </button>
989
+ <section
990
+ class="pf-v6-c-nav__subnav"
991
+ aria-labelledby="nav-expandable-example-expandable-nav-link1"
992
+ >
993
+ <ul class="pf-v6-c-nav__list" role="list">
994
+ <li class="pf-v6-c-nav__item">
995
+ <a href="#" class="pf-v6-c-nav__link">
996
+ <span class="pf-v6-c-nav__link-text">Overview</span>
997
+ </a>
998
+ </li>
999
+ <li class="pf-v6-c-nav__item">
1000
+ <a
1001
+ href="#"
1002
+ class="pf-v6-c-nav__link pf-m-current"
1003
+ aria-current="page"
1004
+ >
1005
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
1006
+ </a>
1007
+ </li>
1008
+ <li class="pf-v6-c-nav__item">
1009
+ <a href="#" class="pf-v6-c-nav__link">
1010
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
1011
+ </a>
1012
+ </li>
1013
+ <li class="pf-v6-c-nav__item">
1014
+ <a href="#" class="pf-v6-c-nav__link">
1015
+ <span class="pf-v6-c-nav__link-text">Instances</span>
1016
+ </a>
1017
+ </li>
1018
+ <li class="pf-v6-c-nav__item">
1019
+ <a href="#" class="pf-v6-c-nav__link">
1020
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
1021
+ </a>
1022
+ </li>
1023
+ <li class="pf-v6-c-nav__item">
1024
+ <a href="#" class="pf-v6-c-nav__link">
1025
+ <span class="pf-v6-c-nav__link-text">Networks</span>
1026
+ </a>
1027
+ </li>
1028
+ </ul>
1029
+ </section>
1030
+ </li>
1031
+ <li class="pf-v6-c-nav__item">
1032
+ <button
1033
+ class="pf-v6-c-nav__link"
1034
+ aria-expanded="false"
1035
+ id="nav-expandable-example-expandable-nav-link2"
1036
+ >
1037
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1038
+ <span class="pf-v6-c-nav__toggle">
1039
+ <span class="pf-v6-c-nav__toggle-icon">
1040
+ <svg
1041
+ class="pf-v6-svg"
1042
+ viewBox="0 0 20 20"
1043
+ fill="currentColor"
1044
+ aria-hidden="true"
1045
+ role="img"
1046
+ width="1em"
1047
+ height="1em"
1048
+ >
1049
+ <path
1050
+ 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"
1051
+ />
1052
+ </svg>
1053
+ </span>
943
1054
  </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>
1055
+ </button>
1056
+ <section
1057
+ class="pf-v6-c-nav__subnav"
1058
+ aria-labelledby="nav-expandable-example-expandable-nav-link2"
1059
+ hidden
1060
+ inert
1061
+ >
1062
+ <ul class="pf-v6-c-nav__list" role="list">
1063
+ <li class="pf-v6-c-nav__item">
1064
+ <a href="#" class="pf-v6-c-nav__link">
1065
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
1066
+ </a>
1067
+ </li>
1068
+ <li class="pf-v6-c-nav__item">
1069
+ <a href="#" class="pf-v6-c-nav__link">
1070
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1071
+ </a>
1072
+ </li>
1073
+ </ul>
1074
+ </section>
1075
+ </li>
1076
+ <li class="pf-v6-c-nav__item">
1077
+ <button
1078
+ class="pf-v6-c-nav__link"
1079
+ aria-expanded="false"
1080
+ id="nav-expandable-example-expandable-nav-link3"
1081
+ >
1082
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1083
+ <span class="pf-v6-c-nav__toggle">
1084
+ <span class="pf-v6-c-nav__toggle-icon">
1085
+ <svg
1086
+ class="pf-v6-svg"
1087
+ viewBox="0 0 20 20"
1088
+ fill="currentColor"
1089
+ aria-hidden="true"
1090
+ role="img"
1091
+ width="1em"
1092
+ height="1em"
1093
+ >
1094
+ <path
1095
+ 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"
1096
+ />
1097
+ </svg>
1098
+ </span>
976
1099
  </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>
1100
+ </button>
1101
+ <section
1102
+ class="pf-v6-c-nav__subnav"
1103
+ aria-labelledby="nav-expandable-example-expandable-nav-link3"
1104
+ hidden
1105
+ inert
1106
+ >
1107
+ <ul class="pf-v6-c-nav__list" role="list">
1108
+ <li class="pf-v6-c-nav__item">
1109
+ <a href="#" class="pf-v6-c-nav__link">
1110
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
1111
+ </a>
1112
+ </li>
1113
+ <li class="pf-v6-c-nav__item">
1114
+ <a href="#" class="pf-v6-c-nav__link">
1115
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1116
+ </a>
1117
+ </li>
1118
+ </ul>
1119
+ </section>
1120
+ </li>
1121
+ </ul>
1122
+ </nav>
1123
+ </div>
1001
1124
  </div>
1002
1125
  </div>
1003
1126
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1015,21 +1138,57 @@ section: components
1015
1138
  </li>
1016
1139
  <li class="pf-v6-c-breadcrumb__item">
1017
1140
  <span class="pf-v6-c-breadcrumb__item-divider">
1018
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1141
+ <svg
1142
+ class="pf-v6-svg"
1143
+ viewBox="0 0 20 20"
1144
+ fill="currentColor"
1145
+ aria-hidden="true"
1146
+ role="img"
1147
+ width="1em"
1148
+ height="1em"
1149
+ >
1150
+ <path
1151
+ 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"
1152
+ />
1153
+ </svg>
1019
1154
  </span>
1020
1155
 
1021
1156
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1022
1157
  </li>
1023
1158
  <li class="pf-v6-c-breadcrumb__item">
1024
1159
  <span class="pf-v6-c-breadcrumb__item-divider">
1025
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1160
+ <svg
1161
+ class="pf-v6-svg"
1162
+ viewBox="0 0 20 20"
1163
+ fill="currentColor"
1164
+ aria-hidden="true"
1165
+ role="img"
1166
+ width="1em"
1167
+ height="1em"
1168
+ >
1169
+ <path
1170
+ 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"
1171
+ />
1172
+ </svg>
1026
1173
  </span>
1027
1174
 
1028
1175
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1029
1176
  </li>
1030
1177
  <li class="pf-v6-c-breadcrumb__item">
1031
1178
  <span class="pf-v6-c-breadcrumb__item-divider">
1032
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1179
+ <svg
1180
+ class="pf-v6-svg"
1181
+ viewBox="0 0 20 20"
1182
+ fill="currentColor"
1183
+ aria-hidden="true"
1184
+ role="img"
1185
+ width="1em"
1186
+ height="1em"
1187
+ >
1188
+ <path
1189
+ 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"
1190
+ />
1191
+ </svg>
1033
1192
  </span>
1034
1193
 
1035
1194
  <a
@@ -1102,7 +1261,8 @@ section: components
1102
1261
  <span class="pf-v6-c-button__text">Skip to content</span>
1103
1262
  </a>
1104
1263
  </div>
1105
- <header class="pf-v6-c-masthead" id="nav-horizontal-example-masthead">
1264
+
1265
+ <header class="pf-v6-c-masthead" id="nav-horizontal-example-docked">
1106
1266
  <div class="pf-v6-c-masthead__main">
1107
1267
  <div class="pf-v6-c-masthead__brand">
1108
1268
  <a class="pf-v6-c-masthead__logo" href="#">
@@ -1114,7 +1274,7 @@ section: components
1114
1274
  y1="2.25860997e-13%"
1115
1275
  x2="32%"
1116
1276
  y2="100%"
1117
- id="linearGradient-nav-horizontal-example-masthead"
1277
+ id="linearGradient-nav-horizontal-example-docked"
1118
1278
  >
1119
1279
  <stop stop-color="#2B9AF3" offset="0%" />
1120
1280
  <stop
@@ -1168,11 +1328,11 @@ section: components
1168
1328
  />
1169
1329
  <path
1170
1330
  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)"
1331
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1172
1332
  />
1173
1333
  <path
1174
1334
  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)"
1335
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1176
1336
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1177
1337
  />
1178
1338
  </g>
@@ -1184,7 +1344,7 @@ section: components
1184
1344
  <div class="pf-v6-c-masthead__content">
1185
1345
  <div
1186
1346
  class="pf-v6-c-toolbar pf-m-static"
1187
- id="nav-horizontal-example-masthead-toolbar"
1347
+ id="nav-horizontal-example-docked-toolbar"
1188
1348
  >
1189
1349
  <div class="pf-v6-c-toolbar__content">
1190
1350
  <div class="pf-v6-c-toolbar__content-section">
@@ -1194,7 +1354,7 @@ section: components
1194
1354
  >
1195
1355
  <nav
1196
1356
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
1197
- id="nav-horizontal-example-masthead-horizontal-nav"
1357
+ id="nav-horizontal-example-docked-horizontal-nav"
1198
1358
  aria-label="Global"
1199
1359
  >
1200
1360
  <div class="pf-v6-c-nav__scroll-button">
@@ -1204,7 +1364,19 @@ section: components
1204
1364
  aria-label="Scroll start"
1205
1365
  >
1206
1366
  <span class="pf-v6-c-button__icon">
1207
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1367
+ <svg
1368
+ class="pf-v6-svg"
1369
+ viewBox="0 0 20 20"
1370
+ fill="currentColor"
1371
+ aria-hidden="true"
1372
+ role="img"
1373
+ width="1em"
1374
+ height="1em"
1375
+ >
1376
+ <path
1377
+ 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"
1378
+ />
1379
+ </svg>
1208
1380
  </span>
1209
1381
  </button>
1210
1382
  </div>
@@ -1246,105 +1418,95 @@ section: components
1246
1418
  aria-label="Scroll end"
1247
1419
  >
1248
1420
  <span class="pf-v6-c-button__icon">
1249
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1421
+ <svg
1422
+ class="pf-v6-svg"
1423
+ viewBox="0 0 20 20"
1424
+ fill="currentColor"
1425
+ aria-hidden="true"
1426
+ role="img"
1427
+ width="1em"
1428
+ height="1em"
1429
+ >
1430
+ <path
1431
+ 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"
1432
+ />
1433
+ </svg>
1250
1434
  </span>
1251
1435
  </button>
1252
1436
  </div>
1253
1437
  </nav>
1254
1438
  </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
- </div>
1314
- </div>
1315
- </div>
1316
- </div>
1317
- </header>
1318
- <div class="pf-v6-c-page__main-container" tabindex="-1">
1319
- <main
1320
- class="pf-v6-c-page__main"
1321
- tabindex="-1"
1322
- id="main-content-nav-horizontal-example"
1323
- >
1324
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1325
- <div class="pf-v6-c-page__main-body">
1326
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1327
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1328
- <li class="pf-v6-c-breadcrumb__item">
1329
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1330
- </li>
1331
- <li class="pf-v6-c-breadcrumb__item">
1332
- <span class="pf-v6-c-breadcrumb__item-divider">
1333
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1334
- </span>
1439
+ </div>
1440
+ </div>
1441
+ </div>
1442
+ </div>
1443
+ </header>
1444
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1445
+ <main
1446
+ class="pf-v6-c-page__main"
1447
+ tabindex="-1"
1448
+ id="main-content-nav-horizontal-example"
1449
+ >
1450
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1451
+ <div class="pf-v6-c-page__main-body">
1452
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1453
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1454
+ <li class="pf-v6-c-breadcrumb__item">
1455
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1456
+ </li>
1457
+ <li class="pf-v6-c-breadcrumb__item">
1458
+ <span class="pf-v6-c-breadcrumb__item-divider">
1459
+ <svg
1460
+ class="pf-v6-svg"
1461
+ viewBox="0 0 20 20"
1462
+ fill="currentColor"
1463
+ aria-hidden="true"
1464
+ role="img"
1465
+ width="1em"
1466
+ height="1em"
1467
+ >
1468
+ <path
1469
+ 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"
1470
+ />
1471
+ </svg>
1472
+ </span>
1335
1473
 
1336
1474
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1337
1475
  </li>
1338
1476
  <li class="pf-v6-c-breadcrumb__item">
1339
1477
  <span class="pf-v6-c-breadcrumb__item-divider">
1340
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1478
+ <svg
1479
+ class="pf-v6-svg"
1480
+ viewBox="0 0 20 20"
1481
+ fill="currentColor"
1482
+ aria-hidden="true"
1483
+ role="img"
1484
+ width="1em"
1485
+ height="1em"
1486
+ >
1487
+ <path
1488
+ 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"
1489
+ />
1490
+ </svg>
1341
1491
  </span>
1342
1492
 
1343
1493
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1344
1494
  </li>
1345
1495
  <li class="pf-v6-c-breadcrumb__item">
1346
1496
  <span class="pf-v6-c-breadcrumb__item-divider">
1347
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1497
+ <svg
1498
+ class="pf-v6-svg"
1499
+ viewBox="0 0 20 20"
1500
+ fill="currentColor"
1501
+ aria-hidden="true"
1502
+ role="img"
1503
+ width="1em"
1504
+ height="1em"
1505
+ >
1506
+ <path
1507
+ 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"
1508
+ />
1509
+ </svg>
1348
1510
  </span>
1349
1511
 
1350
1512
  <a
@@ -1417,7 +1579,8 @@ section: components
1417
1579
  <span class="pf-v6-c-button__text">Skip to content</span>
1418
1580
  </a>
1419
1581
  </div>
1420
- <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-masthead">
1582
+
1583
+ <header class="pf-v6-c-masthead" id="nav-horizontal-subnav-example-docked">
1421
1584
  <div class="pf-v6-c-masthead__main">
1422
1585
  <span class="pf-v6-c-masthead__toggle">
1423
1586
  <button
@@ -1459,7 +1622,7 @@ section: components
1459
1622
  y1="2.25860997e-13%"
1460
1623
  x2="32%"
1461
1624
  y2="100%"
1462
- id="linearGradient-nav-horizontal-subnav-example-masthead"
1625
+ id="linearGradient-nav-horizontal-subnav-example-docked"
1463
1626
  >
1464
1627
  <stop stop-color="#2B9AF3" offset="0%" />
1465
1628
  <stop
@@ -1513,11 +1676,11 @@ section: components
1513
1676
  />
1514
1677
  <path
1515
1678
  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)"
1679
+ fill="url(#linearGradient-nav-horizontal-subnav-example-docked)"
1517
1680
  />
1518
1681
  <path
1519
1682
  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)"
1683
+ fill="url(#linearGradient-nav-horizontal-subnav-example-docked)"
1521
1684
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1522
1685
  />
1523
1686
  </g>
@@ -1529,7 +1692,7 @@ section: components
1529
1692
  <div class="pf-v6-c-masthead__content">
1530
1693
  <div
1531
1694
  class="pf-v6-c-toolbar pf-m-static"
1532
- id="nav-horizontal-subnav-example-masthead-toolbar"
1695
+ id="nav-horizontal-subnav-example-docked-toolbar"
1533
1696
  >
1534
1697
  <div class="pf-v6-c-toolbar__content">
1535
1698
  <div class="pf-v6-c-toolbar__content-section">
@@ -1596,44 +1759,46 @@ section: components
1596
1759
  </div>
1597
1760
  </header>
1598
1761
  <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>
1762
+ <div class="pf-v6-c-page__sidebar-main">
1763
+ <div class="pf-v6-c-page__sidebar-body">
1764
+ <nav
1765
+ class="pf-v6-c-nav"
1766
+ id="nav-horizontal-subnav-example-primary-nav"
1767
+ aria-label="Global"
1768
+ >
1769
+ <ul class="pf-v6-c-nav__list" role="list">
1770
+ <li class="pf-v6-c-nav__item">
1771
+ <a href="#" class="pf-v6-c-nav__link">
1772
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1773
+ </a>
1774
+ </li>
1775
+ <li class="pf-v6-c-nav__item">
1776
+ <a
1777
+ href="#"
1778
+ class="pf-v6-c-nav__link pf-m-current"
1779
+ aria-current="page"
1780
+ >
1781
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1782
+ </a>
1783
+ </li>
1784
+ <li class="pf-v6-c-nav__item">
1785
+ <a href="#" class="pf-v6-c-nav__link">
1786
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1787
+ </a>
1788
+ </li>
1789
+ <li class="pf-v6-c-nav__item">
1790
+ <a href="#" class="pf-v6-c-nav__link">
1791
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1792
+ </a>
1793
+ </li>
1794
+ <li class="pf-v6-c-nav__item">
1795
+ <a href="#" class="pf-v6-c-nav__link">
1796
+ <span class="pf-v6-c-nav__link-text">Server</span>
1797
+ </a>
1798
+ </li>
1799
+ </ul>
1800
+ </nav>
1801
+ </div>
1637
1802
  </div>
1638
1803
  </div>
1639
1804
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1676,21 +1841,57 @@ section: components
1676
1841
  </li>
1677
1842
  <li class="pf-v6-c-breadcrumb__item">
1678
1843
  <span class="pf-v6-c-breadcrumb__item-divider">
1679
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1844
+ <svg
1845
+ class="pf-v6-svg"
1846
+ viewBox="0 0 20 20"
1847
+ fill="currentColor"
1848
+ aria-hidden="true"
1849
+ role="img"
1850
+ width="1em"
1851
+ height="1em"
1852
+ >
1853
+ <path
1854
+ 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"
1855
+ />
1856
+ </svg>
1680
1857
  </span>
1681
1858
 
1682
1859
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1683
1860
  </li>
1684
1861
  <li class="pf-v6-c-breadcrumb__item">
1685
1862
  <span class="pf-v6-c-breadcrumb__item-divider">
1686
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1863
+ <svg
1864
+ class="pf-v6-svg"
1865
+ viewBox="0 0 20 20"
1866
+ fill="currentColor"
1867
+ aria-hidden="true"
1868
+ role="img"
1869
+ width="1em"
1870
+ height="1em"
1871
+ >
1872
+ <path
1873
+ 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"
1874
+ />
1875
+ </svg>
1687
1876
  </span>
1688
1877
 
1689
1878
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1690
1879
  </li>
1691
1880
  <li class="pf-v6-c-breadcrumb__item">
1692
1881
  <span class="pf-v6-c-breadcrumb__item-divider">
1693
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1882
+ <svg
1883
+ class="pf-v6-svg"
1884
+ viewBox="0 0 20 20"
1885
+ fill="currentColor"
1886
+ aria-hidden="true"
1887
+ role="img"
1888
+ width="1em"
1889
+ height="1em"
1890
+ >
1891
+ <path
1892
+ 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"
1893
+ />
1894
+ </svg>
1694
1895
  </span>
1695
1896
 
1696
1897
  <a
@@ -1763,41 +1964,12 @@ section: components
1763
1964
  <span class="pf-v6-c-button__text">Skip to content</span>
1764
1965
  </a>
1765
1966
  </div>
1967
+
1766
1968
  <header
1767
1969
  class="pf-v6-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
1768
- id="nav-horizontal-example-masthead"
1970
+ id="nav-horizontal-example-docked"
1769
1971
  >
1770
1972
  <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
1973
  <div class="pf-v6-c-masthead__brand">
1802
1974
  <a class="pf-v6-c-masthead__logo" href="#">
1803
1975
  <svg height="37px" viewBox="0 0 679 158">
@@ -1808,7 +1980,7 @@ section: components
1808
1980
  y1="2.25860997e-13%"
1809
1981
  x2="32%"
1810
1982
  y2="100%"
1811
- id="linearGradient-nav-horizontal-example-masthead"
1983
+ id="linearGradient-nav-horizontal-example-docked"
1812
1984
  >
1813
1985
  <stop stop-color="#2B9AF3" offset="0%" />
1814
1986
  <stop
@@ -1862,11 +2034,11 @@ section: components
1862
2034
  />
1863
2035
  <path
1864
2036
  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)"
2037
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1866
2038
  />
1867
2039
  <path
1868
2040
  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)"
2041
+ fill="url(#linearGradient-nav-horizontal-example-docked)"
1870
2042
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1871
2043
  />
1872
2044
  </g>
@@ -1878,7 +2050,7 @@ section: components
1878
2050
  <div class="pf-v6-c-masthead__content">
1879
2051
  <div
1880
2052
  class="pf-v6-c-toolbar pf-m-static"
1881
- id="nav-horizontal-example-masthead-toolbar"
2053
+ id="nav-horizontal-example-docked-toolbar"
1882
2054
  >
1883
2055
  <div class="pf-v6-c-toolbar__content">
1884
2056
  <div class="pf-v6-c-toolbar__content-section">
@@ -1888,7 +2060,7 @@ section: components
1888
2060
  >
1889
2061
  <nav
1890
2062
  class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
1891
- id="nav-horizontal-example-masthead-horizontal-nav"
2063
+ id="nav-horizontal-example-docked-horizontal-nav"
1892
2064
  aria-label="Global"
1893
2065
  >
1894
2066
  <div class="pf-v6-c-nav__scroll-button">
@@ -1898,7 +2070,19 @@ section: components
1898
2070
  aria-label="Scroll start"
1899
2071
  >
1900
2072
  <span class="pf-v6-c-button__icon">
1901
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2073
+ <svg
2074
+ class="pf-v6-svg"
2075
+ viewBox="0 0 20 20"
2076
+ fill="currentColor"
2077
+ aria-hidden="true"
2078
+ role="img"
2079
+ width="1em"
2080
+ height="1em"
2081
+ >
2082
+ <path
2083
+ 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"
2084
+ />
2085
+ </svg>
1902
2086
  </span>
1903
2087
  </button>
1904
2088
  </div>
@@ -1940,70 +2124,24 @@ section: components
1940
2124
  aria-label="Scroll end"
1941
2125
  >
1942
2126
  <span class="pf-v6-c-button__icon">
1943
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2127
+ <svg
2128
+ class="pf-v6-svg"
2129
+ viewBox="0 0 20 20"
2130
+ fill="currentColor"
2131
+ aria-hidden="true"
2132
+ role="img"
2133
+ width="1em"
2134
+ height="1em"
2135
+ >
2136
+ <path
2137
+ 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"
2138
+ />
2139
+ </svg>
1944
2140
  </span>
1945
2141
  </button>
1946
2142
  </div>
1947
2143
  </nav>
1948
2144
  </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
2145
  </div>
2008
2146
  </div>
2009
2147
  </div>
@@ -2049,21 +2187,2303 @@ section: components
2049
2187
  </li>
2050
2188
  <li class="pf-v6-c-breadcrumb__item">
2051
2189
  <span class="pf-v6-c-breadcrumb__item-divider">
2052
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2190
+ <svg
2191
+ class="pf-v6-svg"
2192
+ viewBox="0 0 20 20"
2193
+ fill="currentColor"
2194
+ aria-hidden="true"
2195
+ role="img"
2196
+ width="1em"
2197
+ height="1em"
2198
+ >
2199
+ <path
2200
+ 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"
2201
+ />
2202
+ </svg>
2053
2203
  </span>
2054
2204
 
2055
2205
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2056
2206
  </li>
2057
2207
  <li class="pf-v6-c-breadcrumb__item">
2058
2208
  <span class="pf-v6-c-breadcrumb__item-divider">
2059
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2209
+ <svg
2210
+ class="pf-v6-svg"
2211
+ viewBox="0 0 20 20"
2212
+ fill="currentColor"
2213
+ aria-hidden="true"
2214
+ role="img"
2215
+ width="1em"
2216
+ height="1em"
2217
+ >
2218
+ <path
2219
+ 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"
2220
+ />
2221
+ </svg>
2060
2222
  </span>
2061
2223
 
2062
2224
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2063
2225
  </li>
2064
2226
  <li class="pf-v6-c-breadcrumb__item">
2065
2227
  <span class="pf-v6-c-breadcrumb__item-divider">
2066
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2228
+ <svg
2229
+ class="pf-v6-svg"
2230
+ viewBox="0 0 20 20"
2231
+ fill="currentColor"
2232
+ aria-hidden="true"
2233
+ role="img"
2234
+ width="1em"
2235
+ height="1em"
2236
+ >
2237
+ <path
2238
+ 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"
2239
+ />
2240
+ </svg>
2241
+ </span>
2242
+
2243
+ <a
2244
+ href="#"
2245
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2246
+ aria-current="page"
2247
+ >Section landing</a>
2248
+ </li>
2249
+ </ol>
2250
+ </nav>
2251
+ </div>
2252
+ </section>
2253
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2254
+ <div class="pf-v6-c-page__main-body">
2255
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2256
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2257
+ </div>
2258
+ </section>
2259
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2260
+ <div class="pf-v6-c-page__main-body">
2261
+ <div class="pf-v6-l-gallery pf-m-gutter">
2262
+ <div class="pf-v6-c-card">
2263
+ <div class="pf-v6-c-card__body">This is a card</div>
2264
+ </div>
2265
+ <div class="pf-v6-c-card">
2266
+ <div class="pf-v6-c-card__body">This is a card</div>
2267
+ </div>
2268
+ <div class="pf-v6-c-card">
2269
+ <div class="pf-v6-c-card__body">This is a card</div>
2270
+ </div>
2271
+ <div class="pf-v6-c-card">
2272
+ <div class="pf-v6-c-card__body">This is a card</div>
2273
+ </div>
2274
+ <div class="pf-v6-c-card">
2275
+ <div class="pf-v6-c-card__body">This is a card</div>
2276
+ </div>
2277
+ <div class="pf-v6-c-card">
2278
+ <div class="pf-v6-c-card__body">This is a card</div>
2279
+ </div>
2280
+ <div class="pf-v6-c-card">
2281
+ <div class="pf-v6-c-card__body">This is a card</div>
2282
+ </div>
2283
+ <div class="pf-v6-c-card">
2284
+ <div class="pf-v6-c-card__body">This is a card</div>
2285
+ </div>
2286
+ <div class="pf-v6-c-card">
2287
+ <div class="pf-v6-c-card__body">This is a card</div>
2288
+ </div>
2289
+ <div class="pf-v6-c-card">
2290
+ <div class="pf-v6-c-card__body">This is a card</div>
2291
+ </div>
2292
+ </div>
2293
+ </div>
2294
+ </section>
2295
+ </main>
2296
+ </div>
2297
+ </div>
2298
+
2299
+ ```
2300
+
2301
+ ### Docked nav
2302
+
2303
+ ```html isFullscreen isBeta
2304
+ <div class="pf-v6-c-page pf-m-dock pf-m-no-sidebar" id="nav-docked-example">
2305
+ <header class="pf-v6-c-masthead pf-m-display-inline">
2306
+ <div class="pf-v6-c-masthead__main">
2307
+ <span class="pf-v6-c-masthead__toggle">
2308
+ <button
2309
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2310
+ type="button"
2311
+ aria-label="Global navigation"
2312
+ >
2313
+ <span class="pf-v6-c-button__icon">
2314
+ <svg
2315
+ viewBox="0 0 10 10"
2316
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2317
+ width="1em"
2318
+ height="1em"
2319
+ >
2320
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2321
+ <path
2322
+ class="pf-v6-c-button--hamburger-icon--middle"
2323
+ d="M1,5 L9,5"
2324
+ />
2325
+ <path
2326
+ class="pf-v6-c-button--hamburger-icon--arrow"
2327
+ d="M1,5 L1,5 L1,5"
2328
+ />
2329
+ <path
2330
+ class="pf-v6-c-button--hamburger-icon--bottom"
2331
+ d="M9,9 L1,9"
2332
+ />
2333
+ </svg>
2334
+ </span>
2335
+ </button>
2336
+ </span>
2337
+ <div class="pf-v6-c-masthead__brand">
2338
+ <a class="pf-v6-c-masthead__logo" href="#">
2339
+ <svg height="37px" viewBox="0 0 679 158">
2340
+ <title>PF-HorizontalLogo-Color</title>
2341
+ <defs>
2342
+ <linearGradient
2343
+ x1="68%"
2344
+ y1="2.25860997e-13%"
2345
+ x2="32%"
2346
+ y2="100%"
2347
+ id="linearGradient-"
2348
+ >
2349
+ <stop stop-color="#2B9AF3" offset="0%" />
2350
+ <stop
2351
+ stop-color="#73BCF7"
2352
+ stop-opacity="0.502212631"
2353
+ offset="100%"
2354
+ />
2355
+ </linearGradient>
2356
+ </defs>
2357
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2358
+ <g
2359
+ transform="translate(206.000000, 45.750000)"
2360
+ fill="var(--pf-t--global--text--color--regular)"
2361
+ fill-rule="nonzero"
2362
+ >
2363
+ <path
2364
+ 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"
2365
+ />
2366
+ <path
2367
+ 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"
2368
+ />
2369
+ <path
2370
+ 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"
2371
+ />
2372
+ <path
2373
+ 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"
2374
+ />
2375
+ <path
2376
+ 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"
2377
+ />
2378
+ <path
2379
+ 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"
2380
+ />
2381
+ <path
2382
+ 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"
2383
+ />
2384
+ <polygon
2385
+ 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"
2386
+ />
2387
+ <polygon
2388
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2389
+ />
2390
+ <path
2391
+ 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"
2392
+ />
2393
+ </g>
2394
+ <g transform="translate(0.000000, 0.000000)">
2395
+ <path
2396
+ 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"
2397
+ fill="#0066CC"
2398
+ />
2399
+ <path
2400
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2401
+ fill="url(#linearGradient-)"
2402
+ />
2403
+ <path
2404
+ 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"
2405
+ fill="url(#linearGradient-)"
2406
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2407
+ />
2408
+ </g>
2409
+ </g>
2410
+ </svg>
2411
+ </a>
2412
+ </div>
2413
+ </div>
2414
+ <div class="pf-v6-c-masthead__content">
2415
+ <div class="pf-v6-c-toolbar pf-m-static">
2416
+ <div class="pf-v6-c-toolbar__content">
2417
+ <div class="pf-v6-c-toolbar__content-section">
2418
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
2419
+ <button
2420
+ class="pf-v6-c-button pf-m-plain"
2421
+ type="button"
2422
+ aria-label="Search"
2423
+ >
2424
+ <span class="pf-v6-c-button__icon">
2425
+ <svg
2426
+ class="pf-v6-svg"
2427
+ viewBox="0 0 512 512"
2428
+ fill="currentColor"
2429
+ aria-hidden="true"
2430
+ role="img"
2431
+ width="1em"
2432
+ height="1em"
2433
+ >
2434
+ <path
2435
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
2436
+ />
2437
+ </svg>
2438
+ </span>
2439
+ </button>
2440
+ </div>
2441
+ </div>
2442
+ </div>
2443
+ </div>
2444
+ </div>
2445
+ </header>
2446
+ <div class="pf-v6-c-page__dock">
2447
+ <div class="pf-v6-c-page__dock-main">
2448
+ <div class="pf-v6-c-skip-to-content">
2449
+ <a
2450
+ class="pf-v6-c-button pf-m-primary"
2451
+ href="#main-content-nav-docked-example"
2452
+ >
2453
+ <span class="pf-v6-c-button__text">Skip to content</span>
2454
+ </a>
2455
+ </div>
2456
+
2457
+ <header
2458
+ class="pf-v6-c-masthead pf-m-docked"
2459
+ id="nav-docked-example-masthead"
2460
+ >
2461
+ <div class="pf-v6-c-masthead__main">
2462
+ <span class="pf-v6-c-masthead__toggle">
2463
+ <button
2464
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2465
+ type="button"
2466
+ aria-label="Global navigation"
2467
+ >
2468
+ <span class="pf-v6-c-button__icon">
2469
+ <svg
2470
+ viewBox="0 0 10 10"
2471
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2472
+ width="1em"
2473
+ height="1em"
2474
+ >
2475
+ <path
2476
+ class="pf-v6-c-button--hamburger-icon--top"
2477
+ d="M1,1 L9,1"
2478
+ />
2479
+ <path
2480
+ class="pf-v6-c-button--hamburger-icon--middle"
2481
+ d="M1,5 L9,5"
2482
+ />
2483
+ <path
2484
+ class="pf-v6-c-button--hamburger-icon--arrow"
2485
+ d="M1,5 L1,5 L1,5"
2486
+ />
2487
+ <path
2488
+ class="pf-v6-c-button--hamburger-icon--bottom"
2489
+ d="M9,9 L1,9"
2490
+ />
2491
+ </svg>
2492
+ </span>
2493
+ </button>
2494
+ </span>
2495
+ <div class="pf-v6-c-masthead__brand">
2496
+ <a class="pf-v6-c-masthead__logo" href="#">
2497
+ <svg height="37px" viewBox="0 0 679 158">
2498
+ <title>PF-HorizontalLogo-Color</title>
2499
+ <defs>
2500
+ <linearGradient
2501
+ x1="68%"
2502
+ y1="2.25860997e-13%"
2503
+ x2="32%"
2504
+ y2="100%"
2505
+ id="linearGradient-nav-docked-example-masthead"
2506
+ >
2507
+ <stop stop-color="#2B9AF3" offset="0%" />
2508
+ <stop
2509
+ stop-color="#73BCF7"
2510
+ stop-opacity="0.502212631"
2511
+ offset="100%"
2512
+ />
2513
+ </linearGradient>
2514
+ </defs>
2515
+ <g
2516
+ stroke="none"
2517
+ stroke-width="1"
2518
+ fill="none"
2519
+ fill-rule="evenodd"
2520
+ >
2521
+ <g
2522
+ transform="translate(206.000000, 45.750000)"
2523
+ fill="var(--pf-t--global--text--color--regular)"
2524
+ fill-rule="nonzero"
2525
+ >
2526
+ <path
2527
+ 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"
2528
+ />
2529
+ <path
2530
+ 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"
2531
+ />
2532
+ <path
2533
+ 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"
2534
+ />
2535
+ <path
2536
+ 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"
2537
+ />
2538
+ <path
2539
+ 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"
2540
+ />
2541
+ <path
2542
+ 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"
2543
+ />
2544
+ <path
2545
+ 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"
2546
+ />
2547
+ <polygon
2548
+ 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"
2549
+ />
2550
+ <polygon
2551
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2552
+ />
2553
+ <path
2554
+ 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"
2555
+ />
2556
+ </g>
2557
+ <g transform="translate(0.000000, 0.000000)">
2558
+ <path
2559
+ 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"
2560
+ fill="#0066CC"
2561
+ />
2562
+ <path
2563
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2564
+ fill="url(#linearGradient-nav-docked-example-masthead)"
2565
+ />
2566
+ <path
2567
+ 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"
2568
+ fill="url(#linearGradient-nav-docked-example-masthead)"
2569
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2570
+ />
2571
+ </g>
2572
+ </g>
2573
+ </svg>
2574
+ </a>
2575
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
2576
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
2577
+ <title>PF-HorizontalLogo-Color</title>
2578
+ <defs>
2579
+ <linearGradient
2580
+ x1="68%"
2581
+ y1="2.25860997e-13%"
2582
+ x2="32%"
2583
+ y2="100%"
2584
+ id="linearGradient-1"
2585
+ >
2586
+ <stop stop-color="#2B9AF3" offset="0%" />
2587
+ <stop
2588
+ stop-color="#73BCF7"
2589
+ stop-opacity="0.502212631"
2590
+ offset="100%"
2591
+ />
2592
+ </linearGradient>
2593
+ </defs>
2594
+ <g
2595
+ id="PF-IconLogo-color"
2596
+ stroke="none"
2597
+ stroke-width="1"
2598
+ fill="none"
2599
+ fill-rule="evenodd"
2600
+ >
2601
+ <g id="Logo">
2602
+ <path
2603
+ 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"
2604
+ id="Rectangle-Copy-17"
2605
+ fill="#0066CC"
2606
+ />
2607
+ <path
2608
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2609
+ id="Path-2"
2610
+ fill="url(#linearGradient-1)"
2611
+ />
2612
+ <path
2613
+ 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"
2614
+ id="Path-2"
2615
+ fill="url(#linearGradient-1)"
2616
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2617
+ />
2618
+ </g>
2619
+ </g>
2620
+ </svg>
2621
+ </a>
2622
+ </div>
2623
+ </div>
2624
+ <hr class="pf-v6-c-divider" />
2625
+ <div class="pf-v6-c-masthead__content">
2626
+ <div
2627
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
2628
+ id="nav-docked-example-masthead-toolbar"
2629
+ >
2630
+ <div class="pf-v6-c-toolbar__content">
2631
+ <div class="pf-v6-c-toolbar__content-section">
2632
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
2633
+ <ul class="pf-v6-c-nav__list" role="list">
2634
+ <li class="pf-v6-c-nav__item">
2635
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
2636
+ <span class="pf-v6-c-nav__link-icon">
2637
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2638
+ </span>
2639
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2640
+ </a>
2641
+ </li>
2642
+ <li class="pf-v6-c-nav__item">
2643
+ <a
2644
+ href="#"
2645
+ class="pf-v6-c-nav__link pf-m-current"
2646
+ aria-current="page"
2647
+ aria-label="Folder"
2648
+ >
2649
+ <span class="pf-v6-c-nav__link-icon">
2650
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
2651
+ </span>
2652
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2653
+ </a>
2654
+ </li>
2655
+ <li class="pf-v6-c-nav__item">
2656
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
2657
+ <span class="pf-v6-c-nav__link-icon">
2658
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
2659
+ </span>
2660
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2661
+ </a>
2662
+ </li>
2663
+ <li class="pf-v6-c-nav__item">
2664
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
2665
+ <span class="pf-v6-c-nav__link-icon">
2666
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
2667
+ </span>
2668
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2669
+ </a>
2670
+ </li>
2671
+ </ul>
2672
+ </nav>
2673
+
2674
+ <div
2675
+ 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"
2676
+ >
2677
+ <div class="pf-v6-c-toolbar__item">
2678
+ <button
2679
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
2680
+ type="button"
2681
+ aria-expanded="false"
2682
+ aria-label="Applications"
2683
+ >
2684
+ <span class="pf-v6-c-menu-toggle__icon">
2685
+ <i class="fas fa-th" aria-hidden="true"></i>
2686
+ </span>
2687
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
2688
+ </button>
2689
+ </div>
2690
+ <div class="pf-v6-c-toolbar__item">
2691
+ <button
2692
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
2693
+ type="button"
2694
+ aria-label="Settings"
2695
+ >
2696
+ <span class="pf-v6-c-button__icon pf-m-start">
2697
+ <svg
2698
+ class="pf-v6-svg"
2699
+ viewBox="0 0 32 32"
2700
+ fill="currentColor"
2701
+ aria-hidden="true"
2702
+ role="img"
2703
+ width="1em"
2704
+ height="1em"
2705
+ >
2706
+ <path
2707
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
2708
+ />
2709
+ </svg>
2710
+ </span>
2711
+ <span class="pf-v6-c-button__text">Settings</span>
2712
+ </button>
2713
+ </div>
2714
+ <div class="pf-v6-c-toolbar__item">
2715
+ <button
2716
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
2717
+ type="button"
2718
+ aria-expanded="false"
2719
+ aria-label="Help"
2720
+ >
2721
+ <span class="pf-v6-c-menu-toggle__icon">
2722
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2723
+ </span>
2724
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
2725
+ </button>
2726
+ </div>
2727
+ </div>
2728
+ </div>
2729
+ </div>
2730
+ </div>
2731
+ </div>
2732
+ </header>
2733
+ </div>
2734
+ </div>
2735
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2736
+ <main
2737
+ class="pf-v6-c-page__main"
2738
+ tabindex="-1"
2739
+ id="main-content-nav-docked-example"
2740
+ >
2741
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2742
+ <div class="pf-v6-c-page__main-body">
2743
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2744
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2745
+ <li class="pf-v6-c-breadcrumb__item">
2746
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2747
+ </li>
2748
+ <li class="pf-v6-c-breadcrumb__item">
2749
+ <span class="pf-v6-c-breadcrumb__item-divider">
2750
+ <svg
2751
+ class="pf-v6-svg"
2752
+ viewBox="0 0 20 20"
2753
+ fill="currentColor"
2754
+ aria-hidden="true"
2755
+ role="img"
2756
+ width="1em"
2757
+ height="1em"
2758
+ >
2759
+ <path
2760
+ 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"
2761
+ />
2762
+ </svg>
2763
+ </span>
2764
+
2765
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2766
+ </li>
2767
+ <li class="pf-v6-c-breadcrumb__item">
2768
+ <span class="pf-v6-c-breadcrumb__item-divider">
2769
+ <svg
2770
+ class="pf-v6-svg"
2771
+ viewBox="0 0 20 20"
2772
+ fill="currentColor"
2773
+ aria-hidden="true"
2774
+ role="img"
2775
+ width="1em"
2776
+ height="1em"
2777
+ >
2778
+ <path
2779
+ 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"
2780
+ />
2781
+ </svg>
2782
+ </span>
2783
+
2784
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2785
+ </li>
2786
+ <li class="pf-v6-c-breadcrumb__item">
2787
+ <span class="pf-v6-c-breadcrumb__item-divider">
2788
+ <svg
2789
+ class="pf-v6-svg"
2790
+ viewBox="0 0 20 20"
2791
+ fill="currentColor"
2792
+ aria-hidden="true"
2793
+ role="img"
2794
+ width="1em"
2795
+ height="1em"
2796
+ >
2797
+ <path
2798
+ 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"
2799
+ />
2800
+ </svg>
2801
+ </span>
2802
+
2803
+ <a
2804
+ href="#"
2805
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2806
+ aria-current="page"
2807
+ >Section landing</a>
2808
+ </li>
2809
+ </ol>
2810
+ </nav>
2811
+ </div>
2812
+ </section>
2813
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2814
+ <div class="pf-v6-c-page__main-body">
2815
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2816
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2817
+ </div>
2818
+ </section>
2819
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2820
+ <div class="pf-v6-c-page__main-body">
2821
+ <div class="pf-v6-l-gallery pf-m-gutter">
2822
+ <div class="pf-v6-c-card">
2823
+ <div class="pf-v6-c-card__body">This is a card</div>
2824
+ </div>
2825
+ <div class="pf-v6-c-card">
2826
+ <div class="pf-v6-c-card__body">This is a card</div>
2827
+ </div>
2828
+ <div class="pf-v6-c-card">
2829
+ <div class="pf-v6-c-card__body">This is a card</div>
2830
+ </div>
2831
+ <div class="pf-v6-c-card">
2832
+ <div class="pf-v6-c-card__body">This is a card</div>
2833
+ </div>
2834
+ <div class="pf-v6-c-card">
2835
+ <div class="pf-v6-c-card__body">This is a card</div>
2836
+ </div>
2837
+ <div class="pf-v6-c-card">
2838
+ <div class="pf-v6-c-card__body">This is a card</div>
2839
+ </div>
2840
+ <div class="pf-v6-c-card">
2841
+ <div class="pf-v6-c-card__body">This is a card</div>
2842
+ </div>
2843
+ <div class="pf-v6-c-card">
2844
+ <div class="pf-v6-c-card__body">This is a card</div>
2845
+ </div>
2846
+ <div class="pf-v6-c-card">
2847
+ <div class="pf-v6-c-card__body">This is a card</div>
2848
+ </div>
2849
+ <div class="pf-v6-c-card">
2850
+ <div class="pf-v6-c-card__body">This is a card</div>
2851
+ </div>
2852
+ </div>
2853
+ </div>
2854
+ </section>
2855
+ </main>
2856
+ </div>
2857
+ </div>
2858
+
2859
+ ```
2860
+
2861
+ ### Docked nav - expanded on mobile
2862
+
2863
+ ```html isFullscreen isBeta
2864
+ <div
2865
+ class="pf-v6-c-page pf-m-dock pf-m-no-sidebar"
2866
+ id="nav-docked-expanded-example"
2867
+ >
2868
+ <header class="pf-v6-c-masthead pf-m-display-inline">
2869
+ <div class="pf-v6-c-masthead__main">
2870
+ <span class="pf-v6-c-masthead__toggle">
2871
+ <button
2872
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2873
+ type="button"
2874
+ aria-label="Global navigation"
2875
+ >
2876
+ <span class="pf-v6-c-button__icon">
2877
+ <svg
2878
+ viewBox="0 0 10 10"
2879
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2880
+ width="1em"
2881
+ height="1em"
2882
+ >
2883
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2884
+ <path
2885
+ class="pf-v6-c-button--hamburger-icon--middle"
2886
+ d="M1,5 L9,5"
2887
+ />
2888
+ <path
2889
+ class="pf-v6-c-button--hamburger-icon--arrow"
2890
+ d="M1,5 L1,5 L1,5"
2891
+ />
2892
+ <path
2893
+ class="pf-v6-c-button--hamburger-icon--bottom"
2894
+ d="M9,9 L1,9"
2895
+ />
2896
+ </svg>
2897
+ </span>
2898
+ </button>
2899
+ </span>
2900
+ <div class="pf-v6-c-masthead__brand">
2901
+ <a class="pf-v6-c-masthead__logo" href="#">
2902
+ <svg height="37px" viewBox="0 0 679 158">
2903
+ <title>PF-HorizontalLogo-Color</title>
2904
+ <defs>
2905
+ <linearGradient
2906
+ x1="68%"
2907
+ y1="2.25860997e-13%"
2908
+ x2="32%"
2909
+ y2="100%"
2910
+ id="linearGradient-"
2911
+ >
2912
+ <stop stop-color="#2B9AF3" offset="0%" />
2913
+ <stop
2914
+ stop-color="#73BCF7"
2915
+ stop-opacity="0.502212631"
2916
+ offset="100%"
2917
+ />
2918
+ </linearGradient>
2919
+ </defs>
2920
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2921
+ <g
2922
+ transform="translate(206.000000, 45.750000)"
2923
+ fill="var(--pf-t--global--text--color--regular)"
2924
+ fill-rule="nonzero"
2925
+ >
2926
+ <path
2927
+ 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"
2928
+ />
2929
+ <path
2930
+ 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"
2931
+ />
2932
+ <path
2933
+ 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"
2934
+ />
2935
+ <path
2936
+ 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"
2937
+ />
2938
+ <path
2939
+ 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"
2940
+ />
2941
+ <path
2942
+ 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"
2943
+ />
2944
+ <path
2945
+ 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"
2946
+ />
2947
+ <polygon
2948
+ 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"
2949
+ />
2950
+ <polygon
2951
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
2952
+ />
2953
+ <path
2954
+ 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"
2955
+ />
2956
+ </g>
2957
+ <g transform="translate(0.000000, 0.000000)">
2958
+ <path
2959
+ 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"
2960
+ fill="#0066CC"
2961
+ />
2962
+ <path
2963
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2964
+ fill="url(#linearGradient-)"
2965
+ />
2966
+ <path
2967
+ 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"
2968
+ fill="url(#linearGradient-)"
2969
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2970
+ />
2971
+ </g>
2972
+ </g>
2973
+ </svg>
2974
+ </a>
2975
+ </div>
2976
+ </div>
2977
+ <div class="pf-v6-c-masthead__content">
2978
+ <div class="pf-v6-c-toolbar pf-m-static">
2979
+ <div class="pf-v6-c-toolbar__content">
2980
+ <div class="pf-v6-c-toolbar__content-section">
2981
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
2982
+ <button
2983
+ class="pf-v6-c-button pf-m-plain"
2984
+ type="button"
2985
+ aria-label="Search"
2986
+ >
2987
+ <span class="pf-v6-c-button__icon">
2988
+ <svg
2989
+ class="pf-v6-svg"
2990
+ viewBox="0 0 512 512"
2991
+ fill="currentColor"
2992
+ aria-hidden="true"
2993
+ role="img"
2994
+ width="1em"
2995
+ height="1em"
2996
+ >
2997
+ <path
2998
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
2999
+ />
3000
+ </svg>
3001
+ </span>
3002
+ </button>
3003
+ </div>
3004
+ </div>
3005
+ </div>
3006
+ </div>
3007
+ </div>
3008
+ </header>
3009
+ <div class="pf-v6-c-page__dock pf-m-expanded">
3010
+ <div class="pf-v6-c-page__dock-main">
3011
+ <div class="pf-v6-c-skip-to-content">
3012
+ <a
3013
+ class="pf-v6-c-button pf-m-primary"
3014
+ href="#main-content-nav-docked-expanded-example"
3015
+ >
3016
+ <span class="pf-v6-c-button__text">Skip to content</span>
3017
+ </a>
3018
+ </div>
3019
+
3020
+ <header
3021
+ class="pf-v6-c-masthead pf-m-docked"
3022
+ id="nav-docked-expanded-example-masthead"
3023
+ >
3024
+ <div class="pf-v6-c-masthead__main">
3025
+ <span class="pf-v6-c-masthead__toggle">
3026
+ <button
3027
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3028
+ type="button"
3029
+ aria-label="Global navigation"
3030
+ >
3031
+ <span class="pf-v6-c-button__icon">
3032
+ <svg
3033
+ viewBox="0 0 10 10"
3034
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3035
+ width="1em"
3036
+ height="1em"
3037
+ >
3038
+ <path
3039
+ class="pf-v6-c-button--hamburger-icon--top"
3040
+ d="M1,1 L9,1"
3041
+ />
3042
+ <path
3043
+ class="pf-v6-c-button--hamburger-icon--middle"
3044
+ d="M1,5 L9,5"
3045
+ />
3046
+ <path
3047
+ class="pf-v6-c-button--hamburger-icon--arrow"
3048
+ d="M1,5 L1,5 L1,5"
3049
+ />
3050
+ <path
3051
+ class="pf-v6-c-button--hamburger-icon--bottom"
3052
+ d="M9,9 L1,9"
3053
+ />
3054
+ </svg>
3055
+ </span>
3056
+ </button>
3057
+ </span>
3058
+ <div class="pf-v6-c-masthead__brand">
3059
+ <a class="pf-v6-c-masthead__logo" href="#">
3060
+ <svg height="37px" viewBox="0 0 679 158">
3061
+ <title>PF-HorizontalLogo-Color</title>
3062
+ <defs>
3063
+ <linearGradient
3064
+ x1="68%"
3065
+ y1="2.25860997e-13%"
3066
+ x2="32%"
3067
+ y2="100%"
3068
+ id="linearGradient-nav-docked-expanded-example-masthead"
3069
+ >
3070
+ <stop stop-color="#2B9AF3" offset="0%" />
3071
+ <stop
3072
+ stop-color="#73BCF7"
3073
+ stop-opacity="0.502212631"
3074
+ offset="100%"
3075
+ />
3076
+ </linearGradient>
3077
+ </defs>
3078
+ <g
3079
+ stroke="none"
3080
+ stroke-width="1"
3081
+ fill="none"
3082
+ fill-rule="evenodd"
3083
+ >
3084
+ <g
3085
+ transform="translate(206.000000, 45.750000)"
3086
+ fill="var(--pf-t--global--text--color--regular)"
3087
+ fill-rule="nonzero"
3088
+ >
3089
+ <path
3090
+ 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"
3091
+ />
3092
+ <path
3093
+ 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"
3094
+ />
3095
+ <path
3096
+ 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"
3097
+ />
3098
+ <path
3099
+ 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"
3100
+ />
3101
+ <path
3102
+ 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"
3103
+ />
3104
+ <path
3105
+ 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"
3106
+ />
3107
+ <path
3108
+ 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"
3109
+ />
3110
+ <polygon
3111
+ 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"
3112
+ />
3113
+ <polygon
3114
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3115
+ />
3116
+ <path
3117
+ 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"
3118
+ />
3119
+ </g>
3120
+ <g transform="translate(0.000000, 0.000000)">
3121
+ <path
3122
+ 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"
3123
+ fill="#0066CC"
3124
+ />
3125
+ <path
3126
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3127
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
3128
+ />
3129
+ <path
3130
+ 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"
3131
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
3132
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3133
+ />
3134
+ </g>
3135
+ </g>
3136
+ </svg>
3137
+ </a>
3138
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
3139
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
3140
+ <title>PF-HorizontalLogo-Color</title>
3141
+ <defs>
3142
+ <linearGradient
3143
+ x1="68%"
3144
+ y1="2.25860997e-13%"
3145
+ x2="32%"
3146
+ y2="100%"
3147
+ id="linearGradient-1"
3148
+ >
3149
+ <stop stop-color="#2B9AF3" offset="0%" />
3150
+ <stop
3151
+ stop-color="#73BCF7"
3152
+ stop-opacity="0.502212631"
3153
+ offset="100%"
3154
+ />
3155
+ </linearGradient>
3156
+ </defs>
3157
+ <g
3158
+ id="PF-IconLogo-color"
3159
+ stroke="none"
3160
+ stroke-width="1"
3161
+ fill="none"
3162
+ fill-rule="evenodd"
3163
+ >
3164
+ <g id="Logo">
3165
+ <path
3166
+ 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"
3167
+ id="Rectangle-Copy-17"
3168
+ fill="#0066CC"
3169
+ />
3170
+ <path
3171
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3172
+ id="Path-2"
3173
+ fill="url(#linearGradient-1)"
3174
+ />
3175
+ <path
3176
+ 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"
3177
+ id="Path-2"
3178
+ fill="url(#linearGradient-1)"
3179
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3180
+ />
3181
+ </g>
3182
+ </g>
3183
+ </svg>
3184
+ </a>
3185
+ </div>
3186
+ </div>
3187
+ <hr class="pf-v6-c-divider" />
3188
+ <div class="pf-v6-c-masthead__content">
3189
+ <div
3190
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
3191
+ id="nav-docked-expanded-example-masthead-toolbar"
3192
+ >
3193
+ <div class="pf-v6-c-toolbar__content">
3194
+ <div class="pf-v6-c-toolbar__content-section">
3195
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
3196
+ <ul class="pf-v6-c-nav__list" role="list">
3197
+ <li class="pf-v6-c-nav__item">
3198
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
3199
+ <span class="pf-v6-c-nav__link-icon">
3200
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3201
+ </span>
3202
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3203
+ </a>
3204
+ </li>
3205
+ <li class="pf-v6-c-nav__item">
3206
+ <a
3207
+ href="#"
3208
+ class="pf-v6-c-nav__link pf-m-current"
3209
+ aria-current="page"
3210
+ aria-label="Folder"
3211
+ >
3212
+ <span class="pf-v6-c-nav__link-icon">
3213
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
3214
+ </span>
3215
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3216
+ </a>
3217
+ </li>
3218
+ <li class="pf-v6-c-nav__item">
3219
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
3220
+ <span class="pf-v6-c-nav__link-icon">
3221
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
3222
+ </span>
3223
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3224
+ </a>
3225
+ </li>
3226
+ <li class="pf-v6-c-nav__item">
3227
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
3228
+ <span class="pf-v6-c-nav__link-icon">
3229
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
3230
+ </span>
3231
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3232
+ </a>
3233
+ </li>
3234
+ </ul>
3235
+ </nav>
3236
+
3237
+ <div
3238
+ 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"
3239
+ >
3240
+ <div class="pf-v6-c-toolbar__item">
3241
+ <button
3242
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
3243
+ type="button"
3244
+ aria-expanded="false"
3245
+ aria-label="Applications"
3246
+ >
3247
+ <span class="pf-v6-c-menu-toggle__icon">
3248
+ <i class="fas fa-th" aria-hidden="true"></i>
3249
+ </span>
3250
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
3251
+ </button>
3252
+ </div>
3253
+ <div class="pf-v6-c-toolbar__item">
3254
+ <button
3255
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
3256
+ type="button"
3257
+ aria-label="Settings"
3258
+ >
3259
+ <span class="pf-v6-c-button__icon pf-m-start">
3260
+ <svg
3261
+ class="pf-v6-svg"
3262
+ viewBox="0 0 32 32"
3263
+ fill="currentColor"
3264
+ aria-hidden="true"
3265
+ role="img"
3266
+ width="1em"
3267
+ height="1em"
3268
+ >
3269
+ <path
3270
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
3271
+ />
3272
+ </svg>
3273
+ </span>
3274
+ <span class="pf-v6-c-button__text">Settings</span>
3275
+ </button>
3276
+ </div>
3277
+ <div class="pf-v6-c-toolbar__item">
3278
+ <button
3279
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
3280
+ type="button"
3281
+ aria-expanded="false"
3282
+ aria-label="Help"
3283
+ >
3284
+ <span class="pf-v6-c-menu-toggle__icon">
3285
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3286
+ </span>
3287
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
3288
+ </button>
3289
+ </div>
3290
+ </div>
3291
+ </div>
3292
+ </div>
3293
+ </div>
3294
+ </div>
3295
+ </header>
3296
+ </div>
3297
+ </div>
3298
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3299
+ <main
3300
+ class="pf-v6-c-page__main"
3301
+ tabindex="-1"
3302
+ id="main-content-nav-docked-expanded-example"
3303
+ >
3304
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3305
+ <div class="pf-v6-c-page__main-body">
3306
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3307
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3308
+ <li class="pf-v6-c-breadcrumb__item">
3309
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3310
+ </li>
3311
+ <li class="pf-v6-c-breadcrumb__item">
3312
+ <span class="pf-v6-c-breadcrumb__item-divider">
3313
+ <svg
3314
+ class="pf-v6-svg"
3315
+ viewBox="0 0 20 20"
3316
+ fill="currentColor"
3317
+ aria-hidden="true"
3318
+ role="img"
3319
+ width="1em"
3320
+ height="1em"
3321
+ >
3322
+ <path
3323
+ 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"
3324
+ />
3325
+ </svg>
3326
+ </span>
3327
+
3328
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3329
+ </li>
3330
+ <li class="pf-v6-c-breadcrumb__item">
3331
+ <span class="pf-v6-c-breadcrumb__item-divider">
3332
+ <svg
3333
+ class="pf-v6-svg"
3334
+ viewBox="0 0 20 20"
3335
+ fill="currentColor"
3336
+ aria-hidden="true"
3337
+ role="img"
3338
+ width="1em"
3339
+ height="1em"
3340
+ >
3341
+ <path
3342
+ 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"
3343
+ />
3344
+ </svg>
3345
+ </span>
3346
+
3347
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3348
+ </li>
3349
+ <li class="pf-v6-c-breadcrumb__item">
3350
+ <span class="pf-v6-c-breadcrumb__item-divider">
3351
+ <svg
3352
+ class="pf-v6-svg"
3353
+ viewBox="0 0 20 20"
3354
+ fill="currentColor"
3355
+ aria-hidden="true"
3356
+ role="img"
3357
+ width="1em"
3358
+ height="1em"
3359
+ >
3360
+ <path
3361
+ 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"
3362
+ />
3363
+ </svg>
3364
+ </span>
3365
+
3366
+ <a
3367
+ href="#"
3368
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3369
+ aria-current="page"
3370
+ >Section landing</a>
3371
+ </li>
3372
+ </ol>
3373
+ </nav>
3374
+ </div>
3375
+ </section>
3376
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3377
+ <div class="pf-v6-c-page__main-body">
3378
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3379
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3380
+ </div>
3381
+ </section>
3382
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3383
+ <div class="pf-v6-c-page__main-body">
3384
+ <div class="pf-v6-l-gallery pf-m-gutter">
3385
+ <div class="pf-v6-c-card">
3386
+ <div class="pf-v6-c-card__body">This is a card</div>
3387
+ </div>
3388
+ <div class="pf-v6-c-card">
3389
+ <div class="pf-v6-c-card__body">This is a card</div>
3390
+ </div>
3391
+ <div class="pf-v6-c-card">
3392
+ <div class="pf-v6-c-card__body">This is a card</div>
3393
+ </div>
3394
+ <div class="pf-v6-c-card">
3395
+ <div class="pf-v6-c-card__body">This is a card</div>
3396
+ </div>
3397
+ <div class="pf-v6-c-card">
3398
+ <div class="pf-v6-c-card__body">This is a card</div>
3399
+ </div>
3400
+ <div class="pf-v6-c-card">
3401
+ <div class="pf-v6-c-card__body">This is a card</div>
3402
+ </div>
3403
+ <div class="pf-v6-c-card">
3404
+ <div class="pf-v6-c-card__body">This is a card</div>
3405
+ </div>
3406
+ <div class="pf-v6-c-card">
3407
+ <div class="pf-v6-c-card__body">This is a card</div>
3408
+ </div>
3409
+ <div class="pf-v6-c-card">
3410
+ <div class="pf-v6-c-card__body">This is a card</div>
3411
+ </div>
3412
+ <div class="pf-v6-c-card">
3413
+ <div class="pf-v6-c-card__body">This is a card</div>
3414
+ </div>
3415
+ </div>
3416
+ </div>
3417
+ </section>
3418
+ </main>
3419
+ </div>
3420
+ </div>
3421
+
3422
+ ```
3423
+
3424
+ ### Docked nav text expanded
3425
+
3426
+ ```html isFullscreen isBeta
3427
+ <div class="pf-v6-c-page pf-m-dock pf-m-no-sidebar" id="nav-docked-example">
3428
+ <header class="pf-v6-c-masthead pf-m-display-inline">
3429
+ <div class="pf-v6-c-masthead__main">
3430
+ <span class="pf-v6-c-masthead__toggle">
3431
+ <button
3432
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3433
+ type="button"
3434
+ aria-label="Global navigation"
3435
+ >
3436
+ <span class="pf-v6-c-button__icon">
3437
+ <svg
3438
+ viewBox="0 0 10 10"
3439
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3440
+ width="1em"
3441
+ height="1em"
3442
+ >
3443
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3444
+ <path
3445
+ class="pf-v6-c-button--hamburger-icon--middle"
3446
+ d="M1,5 L9,5"
3447
+ />
3448
+ <path
3449
+ class="pf-v6-c-button--hamburger-icon--arrow"
3450
+ d="M1,5 L1,5 L1,5"
3451
+ />
3452
+ <path
3453
+ class="pf-v6-c-button--hamburger-icon--bottom"
3454
+ d="M9,9 L1,9"
3455
+ />
3456
+ </svg>
3457
+ </span>
3458
+ </button>
3459
+ </span>
3460
+ <div class="pf-v6-c-masthead__brand">
3461
+ <a class="pf-v6-c-masthead__logo" href="#">
3462
+ <svg height="37px" viewBox="0 0 679 158">
3463
+ <title>PF-HorizontalLogo-Color</title>
3464
+ <defs>
3465
+ <linearGradient
3466
+ x1="68%"
3467
+ y1="2.25860997e-13%"
3468
+ x2="32%"
3469
+ y2="100%"
3470
+ id="linearGradient-"
3471
+ >
3472
+ <stop stop-color="#2B9AF3" offset="0%" />
3473
+ <stop
3474
+ stop-color="#73BCF7"
3475
+ stop-opacity="0.502212631"
3476
+ offset="100%"
3477
+ />
3478
+ </linearGradient>
3479
+ </defs>
3480
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3481
+ <g
3482
+ transform="translate(206.000000, 45.750000)"
3483
+ fill="var(--pf-t--global--text--color--regular)"
3484
+ fill-rule="nonzero"
3485
+ >
3486
+ <path
3487
+ 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"
3488
+ />
3489
+ <path
3490
+ 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"
3491
+ />
3492
+ <path
3493
+ 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"
3494
+ />
3495
+ <path
3496
+ 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"
3497
+ />
3498
+ <path
3499
+ 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"
3500
+ />
3501
+ <path
3502
+ 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"
3503
+ />
3504
+ <path
3505
+ 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"
3506
+ />
3507
+ <polygon
3508
+ 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"
3509
+ />
3510
+ <polygon
3511
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3512
+ />
3513
+ <path
3514
+ 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"
3515
+ />
3516
+ </g>
3517
+ <g transform="translate(0.000000, 0.000000)">
3518
+ <path
3519
+ 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"
3520
+ fill="#0066CC"
3521
+ />
3522
+ <path
3523
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3524
+ fill="url(#linearGradient-)"
3525
+ />
3526
+ <path
3527
+ 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"
3528
+ fill="url(#linearGradient-)"
3529
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3530
+ />
3531
+ </g>
3532
+ </g>
3533
+ </svg>
3534
+ </a>
3535
+ </div>
3536
+ </div>
3537
+ <div class="pf-v6-c-masthead__content">
3538
+ <div class="pf-v6-c-toolbar pf-m-static">
3539
+ <div class="pf-v6-c-toolbar__content">
3540
+ <div class="pf-v6-c-toolbar__content-section">
3541
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
3542
+ <button
3543
+ class="pf-v6-c-button pf-m-plain"
3544
+ type="button"
3545
+ aria-label="Search"
3546
+ >
3547
+ <span class="pf-v6-c-button__icon">
3548
+ <svg
3549
+ class="pf-v6-svg"
3550
+ viewBox="0 0 512 512"
3551
+ fill="currentColor"
3552
+ aria-hidden="true"
3553
+ role="img"
3554
+ width="1em"
3555
+ height="1em"
3556
+ >
3557
+ <path
3558
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
3559
+ />
3560
+ </svg>
3561
+ </span>
3562
+ </button>
3563
+ </div>
3564
+ </div>
3565
+ </div>
3566
+ </div>
3567
+ </div>
3568
+ </header>
3569
+ <div class="pf-v6-c-page__dock pf-m-text-expanded">
3570
+ <div class="pf-v6-c-page__dock-main">
3571
+ <div class="pf-v6-c-skip-to-content">
3572
+ <a
3573
+ class="pf-v6-c-button pf-m-primary"
3574
+ href="#main-content-nav-docked-example"
3575
+ >
3576
+ <span class="pf-v6-c-button__text">Skip to content</span>
3577
+ </a>
3578
+ </div>
3579
+
3580
+ <header
3581
+ class="pf-v6-c-masthead pf-m-docked"
3582
+ id="nav-docked-example-masthead"
3583
+ >
3584
+ <div class="pf-v6-c-masthead__main">
3585
+ <span class="pf-v6-c-masthead__toggle">
3586
+ <button
3587
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3588
+ type="button"
3589
+ aria-label="Global navigation"
3590
+ >
3591
+ <span class="pf-v6-c-button__icon">
3592
+ <svg
3593
+ viewBox="0 0 10 10"
3594
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3595
+ width="1em"
3596
+ height="1em"
3597
+ >
3598
+ <path
3599
+ class="pf-v6-c-button--hamburger-icon--top"
3600
+ d="M1,1 L9,1"
3601
+ />
3602
+ <path
3603
+ class="pf-v6-c-button--hamburger-icon--middle"
3604
+ d="M1,5 L9,5"
3605
+ />
3606
+ <path
3607
+ class="pf-v6-c-button--hamburger-icon--arrow"
3608
+ d="M1,5 L1,5 L1,5"
3609
+ />
3610
+ <path
3611
+ class="pf-v6-c-button--hamburger-icon--bottom"
3612
+ d="M9,9 L1,9"
3613
+ />
3614
+ </svg>
3615
+ </span>
3616
+ </button>
3617
+ </span>
3618
+ <div class="pf-v6-c-masthead__brand">
3619
+ <a class="pf-v6-c-masthead__logo" href="#">
3620
+ <svg height="37px" viewBox="0 0 679 158">
3621
+ <title>PF-HorizontalLogo-Color</title>
3622
+ <defs>
3623
+ <linearGradient
3624
+ x1="68%"
3625
+ y1="2.25860997e-13%"
3626
+ x2="32%"
3627
+ y2="100%"
3628
+ id="linearGradient-nav-docked-example-masthead"
3629
+ >
3630
+ <stop stop-color="#2B9AF3" offset="0%" />
3631
+ <stop
3632
+ stop-color="#73BCF7"
3633
+ stop-opacity="0.502212631"
3634
+ offset="100%"
3635
+ />
3636
+ </linearGradient>
3637
+ </defs>
3638
+ <g
3639
+ stroke="none"
3640
+ stroke-width="1"
3641
+ fill="none"
3642
+ fill-rule="evenodd"
3643
+ >
3644
+ <g
3645
+ transform="translate(206.000000, 45.750000)"
3646
+ fill="var(--pf-t--global--text--color--regular)"
3647
+ fill-rule="nonzero"
3648
+ >
3649
+ <path
3650
+ 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"
3651
+ />
3652
+ <path
3653
+ 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"
3654
+ />
3655
+ <path
3656
+ 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"
3657
+ />
3658
+ <path
3659
+ 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"
3660
+ />
3661
+ <path
3662
+ 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"
3663
+ />
3664
+ <path
3665
+ 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"
3666
+ />
3667
+ <path
3668
+ 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"
3669
+ />
3670
+ <polygon
3671
+ 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"
3672
+ />
3673
+ <polygon
3674
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
3675
+ />
3676
+ <path
3677
+ 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"
3678
+ />
3679
+ </g>
3680
+ <g transform="translate(0.000000, 0.000000)">
3681
+ <path
3682
+ 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"
3683
+ fill="#0066CC"
3684
+ />
3685
+ <path
3686
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3687
+ fill="url(#linearGradient-nav-docked-example-masthead)"
3688
+ />
3689
+ <path
3690
+ 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"
3691
+ fill="url(#linearGradient-nav-docked-example-masthead)"
3692
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3693
+ />
3694
+ </g>
3695
+ </g>
3696
+ </svg>
3697
+ </a>
3698
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
3699
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
3700
+ <title>PF-HorizontalLogo-Color</title>
3701
+ <defs>
3702
+ <linearGradient
3703
+ x1="68%"
3704
+ y1="2.25860997e-13%"
3705
+ x2="32%"
3706
+ y2="100%"
3707
+ id="linearGradient-1"
3708
+ >
3709
+ <stop stop-color="#2B9AF3" offset="0%" />
3710
+ <stop
3711
+ stop-color="#73BCF7"
3712
+ stop-opacity="0.502212631"
3713
+ offset="100%"
3714
+ />
3715
+ </linearGradient>
3716
+ </defs>
3717
+ <g
3718
+ id="PF-IconLogo-color"
3719
+ stroke="none"
3720
+ stroke-width="1"
3721
+ fill="none"
3722
+ fill-rule="evenodd"
3723
+ >
3724
+ <g id="Logo">
3725
+ <path
3726
+ 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"
3727
+ id="Rectangle-Copy-17"
3728
+ fill="#0066CC"
3729
+ />
3730
+ <path
3731
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3732
+ id="Path-2"
3733
+ fill="url(#linearGradient-1)"
3734
+ />
3735
+ <path
3736
+ 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"
3737
+ id="Path-2"
3738
+ fill="url(#linearGradient-1)"
3739
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3740
+ />
3741
+ </g>
3742
+ </g>
3743
+ </svg>
3744
+ </a>
3745
+ </div>
3746
+ </div>
3747
+ <hr class="pf-v6-c-divider" />
3748
+ <div class="pf-v6-c-masthead__content">
3749
+ <div
3750
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
3751
+ id="nav-docked-example-masthead-toolbar"
3752
+ >
3753
+ <div class="pf-v6-c-toolbar__content">
3754
+ <div class="pf-v6-c-toolbar__content-section">
3755
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
3756
+ <ul class="pf-v6-c-nav__list" role="list">
3757
+ <li class="pf-v6-c-nav__item">
3758
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
3759
+ <span class="pf-v6-c-nav__link-icon">
3760
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
3761
+ </span>
3762
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3763
+ </a>
3764
+ </li>
3765
+ <li class="pf-v6-c-nav__item">
3766
+ <a
3767
+ href="#"
3768
+ class="pf-v6-c-nav__link pf-m-current"
3769
+ aria-current="page"
3770
+ aria-label="Folder"
3771
+ >
3772
+ <span class="pf-v6-c-nav__link-icon">
3773
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
3774
+ </span>
3775
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3776
+ </a>
3777
+ </li>
3778
+ <li class="pf-v6-c-nav__item">
3779
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
3780
+ <span class="pf-v6-c-nav__link-icon">
3781
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
3782
+ </span>
3783
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3784
+ </a>
3785
+ </li>
3786
+ <li class="pf-v6-c-nav__item">
3787
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
3788
+ <span class="pf-v6-c-nav__link-icon">
3789
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
3790
+ </span>
3791
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3792
+ </a>
3793
+ </li>
3794
+ </ul>
3795
+ </nav>
3796
+
3797
+ <div
3798
+ 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"
3799
+ >
3800
+ <div class="pf-v6-c-toolbar__item">
3801
+ <button
3802
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
3803
+ type="button"
3804
+ aria-expanded="false"
3805
+ aria-label="Applications"
3806
+ >
3807
+ <span class="pf-v6-c-menu-toggle__icon">
3808
+ <i class="fas fa-th" aria-hidden="true"></i>
3809
+ </span>
3810
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
3811
+ </button>
3812
+ </div>
3813
+ <div class="pf-v6-c-toolbar__item">
3814
+ <button
3815
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
3816
+ type="button"
3817
+ aria-label="Settings"
3818
+ >
3819
+ <span class="pf-v6-c-button__icon pf-m-start">
3820
+ <svg
3821
+ class="pf-v6-svg"
3822
+ viewBox="0 0 32 32"
3823
+ fill="currentColor"
3824
+ aria-hidden="true"
3825
+ role="img"
3826
+ width="1em"
3827
+ height="1em"
3828
+ >
3829
+ <path
3830
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
3831
+ />
3832
+ </svg>
3833
+ </span>
3834
+ <span class="pf-v6-c-button__text">Settings</span>
3835
+ </button>
3836
+ </div>
3837
+ <div class="pf-v6-c-toolbar__item">
3838
+ <button
3839
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
3840
+ type="button"
3841
+ aria-expanded="false"
3842
+ aria-label="Help"
3843
+ >
3844
+ <span class="pf-v6-c-menu-toggle__icon">
3845
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3846
+ </span>
3847
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
3848
+ </button>
3849
+ </div>
3850
+ </div>
3851
+ </div>
3852
+ </div>
3853
+ </div>
3854
+ </div>
3855
+ </header>
3856
+ </div>
3857
+ </div>
3858
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3859
+ <main
3860
+ class="pf-v6-c-page__main"
3861
+ tabindex="-1"
3862
+ id="main-content-nav-docked-example"
3863
+ >
3864
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3865
+ <div class="pf-v6-c-page__main-body">
3866
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3867
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3868
+ <li class="pf-v6-c-breadcrumb__item">
3869
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3870
+ </li>
3871
+ <li class="pf-v6-c-breadcrumb__item">
3872
+ <span class="pf-v6-c-breadcrumb__item-divider">
3873
+ <svg
3874
+ class="pf-v6-svg"
3875
+ viewBox="0 0 20 20"
3876
+ fill="currentColor"
3877
+ aria-hidden="true"
3878
+ role="img"
3879
+ width="1em"
3880
+ height="1em"
3881
+ >
3882
+ <path
3883
+ 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"
3884
+ />
3885
+ </svg>
3886
+ </span>
3887
+
3888
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3889
+ </li>
3890
+ <li class="pf-v6-c-breadcrumb__item">
3891
+ <span class="pf-v6-c-breadcrumb__item-divider">
3892
+ <svg
3893
+ class="pf-v6-svg"
3894
+ viewBox="0 0 20 20"
3895
+ fill="currentColor"
3896
+ aria-hidden="true"
3897
+ role="img"
3898
+ width="1em"
3899
+ height="1em"
3900
+ >
3901
+ <path
3902
+ 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"
3903
+ />
3904
+ </svg>
3905
+ </span>
3906
+
3907
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3908
+ </li>
3909
+ <li class="pf-v6-c-breadcrumb__item">
3910
+ <span class="pf-v6-c-breadcrumb__item-divider">
3911
+ <svg
3912
+ class="pf-v6-svg"
3913
+ viewBox="0 0 20 20"
3914
+ fill="currentColor"
3915
+ aria-hidden="true"
3916
+ role="img"
3917
+ width="1em"
3918
+ height="1em"
3919
+ >
3920
+ <path
3921
+ 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"
3922
+ />
3923
+ </svg>
3924
+ </span>
3925
+
3926
+ <a
3927
+ href="#"
3928
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3929
+ aria-current="page"
3930
+ >Section landing</a>
3931
+ </li>
3932
+ </ol>
3933
+ </nav>
3934
+ </div>
3935
+ </section>
3936
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3937
+ <div class="pf-v6-c-page__main-body">
3938
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3939
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3940
+ </div>
3941
+ </section>
3942
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3943
+ <div class="pf-v6-c-page__main-body">
3944
+ <div class="pf-v6-l-gallery pf-m-gutter">
3945
+ <div class="pf-v6-c-card">
3946
+ <div class="pf-v6-c-card__body">This is a card</div>
3947
+ </div>
3948
+ <div class="pf-v6-c-card">
3949
+ <div class="pf-v6-c-card__body">This is a card</div>
3950
+ </div>
3951
+ <div class="pf-v6-c-card">
3952
+ <div class="pf-v6-c-card__body">This is a card</div>
3953
+ </div>
3954
+ <div class="pf-v6-c-card">
3955
+ <div class="pf-v6-c-card__body">This is a card</div>
3956
+ </div>
3957
+ <div class="pf-v6-c-card">
3958
+ <div class="pf-v6-c-card__body">This is a card</div>
3959
+ </div>
3960
+ <div class="pf-v6-c-card">
3961
+ <div class="pf-v6-c-card__body">This is a card</div>
3962
+ </div>
3963
+ <div class="pf-v6-c-card">
3964
+ <div class="pf-v6-c-card__body">This is a card</div>
3965
+ </div>
3966
+ <div class="pf-v6-c-card">
3967
+ <div class="pf-v6-c-card__body">This is a card</div>
3968
+ </div>
3969
+ <div class="pf-v6-c-card">
3970
+ <div class="pf-v6-c-card__body">This is a card</div>
3971
+ </div>
3972
+ <div class="pf-v6-c-card">
3973
+ <div class="pf-v6-c-card__body">This is a card</div>
3974
+ </div>
3975
+ </div>
3976
+ </div>
3977
+ </section>
3978
+ </main>
3979
+ </div>
3980
+ </div>
3981
+
3982
+ ```
3983
+
3984
+ ### Docked nav text expanded - expanded on mobile
3985
+
3986
+ ```html isFullscreen isBeta
3987
+ <div
3988
+ class="pf-v6-c-page pf-m-dock pf-m-no-sidebar"
3989
+ id="nav-docked-expanded-example"
3990
+ >
3991
+ <header class="pf-v6-c-masthead pf-m-display-inline">
3992
+ <div class="pf-v6-c-masthead__main">
3993
+ <span class="pf-v6-c-masthead__toggle">
3994
+ <button
3995
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3996
+ type="button"
3997
+ aria-label="Global navigation"
3998
+ >
3999
+ <span class="pf-v6-c-button__icon">
4000
+ <svg
4001
+ viewBox="0 0 10 10"
4002
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4003
+ width="1em"
4004
+ height="1em"
4005
+ >
4006
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4007
+ <path
4008
+ class="pf-v6-c-button--hamburger-icon--middle"
4009
+ d="M1,5 L9,5"
4010
+ />
4011
+ <path
4012
+ class="pf-v6-c-button--hamburger-icon--arrow"
4013
+ d="M1,5 L1,5 L1,5"
4014
+ />
4015
+ <path
4016
+ class="pf-v6-c-button--hamburger-icon--bottom"
4017
+ d="M9,9 L1,9"
4018
+ />
4019
+ </svg>
4020
+ </span>
4021
+ </button>
4022
+ </span>
4023
+ <div class="pf-v6-c-masthead__brand">
4024
+ <a class="pf-v6-c-masthead__logo" href="#">
4025
+ <svg height="37px" viewBox="0 0 679 158">
4026
+ <title>PF-HorizontalLogo-Color</title>
4027
+ <defs>
4028
+ <linearGradient
4029
+ x1="68%"
4030
+ y1="2.25860997e-13%"
4031
+ x2="32%"
4032
+ y2="100%"
4033
+ id="linearGradient-"
4034
+ >
4035
+ <stop stop-color="#2B9AF3" offset="0%" />
4036
+ <stop
4037
+ stop-color="#73BCF7"
4038
+ stop-opacity="0.502212631"
4039
+ offset="100%"
4040
+ />
4041
+ </linearGradient>
4042
+ </defs>
4043
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4044
+ <g
4045
+ transform="translate(206.000000, 45.750000)"
4046
+ fill="var(--pf-t--global--text--color--regular)"
4047
+ fill-rule="nonzero"
4048
+ >
4049
+ <path
4050
+ 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"
4051
+ />
4052
+ <path
4053
+ 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"
4054
+ />
4055
+ <path
4056
+ 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"
4057
+ />
4058
+ <path
4059
+ 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"
4060
+ />
4061
+ <path
4062
+ 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"
4063
+ />
4064
+ <path
4065
+ 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"
4066
+ />
4067
+ <path
4068
+ 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"
4069
+ />
4070
+ <polygon
4071
+ 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"
4072
+ />
4073
+ <polygon
4074
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4075
+ />
4076
+ <path
4077
+ 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"
4078
+ />
4079
+ </g>
4080
+ <g transform="translate(0.000000, 0.000000)">
4081
+ <path
4082
+ 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"
4083
+ fill="#0066CC"
4084
+ />
4085
+ <path
4086
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4087
+ fill="url(#linearGradient-)"
4088
+ />
4089
+ <path
4090
+ 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"
4091
+ fill="url(#linearGradient-)"
4092
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4093
+ />
4094
+ </g>
4095
+ </g>
4096
+ </svg>
4097
+ </a>
4098
+ </div>
4099
+ </div>
4100
+ <div class="pf-v6-c-masthead__content">
4101
+ <div class="pf-v6-c-toolbar pf-m-static">
4102
+ <div class="pf-v6-c-toolbar__content">
4103
+ <div class="pf-v6-c-toolbar__content-section">
4104
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
4105
+ <button
4106
+ class="pf-v6-c-button pf-m-plain"
4107
+ type="button"
4108
+ aria-label="Search"
4109
+ >
4110
+ <span class="pf-v6-c-button__icon">
4111
+ <svg
4112
+ class="pf-v6-svg"
4113
+ viewBox="0 0 512 512"
4114
+ fill="currentColor"
4115
+ aria-hidden="true"
4116
+ role="img"
4117
+ width="1em"
4118
+ height="1em"
4119
+ >
4120
+ <path
4121
+ d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
4122
+ />
4123
+ </svg>
4124
+ </span>
4125
+ </button>
4126
+ </div>
4127
+ </div>
4128
+ </div>
4129
+ </div>
4130
+ </div>
4131
+ </header>
4132
+ <div class="pf-v6-c-page__dock pf-m-text-expanded pf-m-expanded">
4133
+ <div class="pf-v6-c-page__dock-main">
4134
+ <div class="pf-v6-c-skip-to-content">
4135
+ <a
4136
+ class="pf-v6-c-button pf-m-primary"
4137
+ href="#main-content-nav-docked-expanded-example"
4138
+ >
4139
+ <span class="pf-v6-c-button__text">Skip to content</span>
4140
+ </a>
4141
+ </div>
4142
+
4143
+ <header
4144
+ class="pf-v6-c-masthead pf-m-docked"
4145
+ id="nav-docked-expanded-example-masthead"
4146
+ >
4147
+ <div class="pf-v6-c-masthead__main">
4148
+ <span class="pf-v6-c-masthead__toggle">
4149
+ <button
4150
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4151
+ type="button"
4152
+ aria-label="Global navigation"
4153
+ >
4154
+ <span class="pf-v6-c-button__icon">
4155
+ <svg
4156
+ viewBox="0 0 10 10"
4157
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4158
+ width="1em"
4159
+ height="1em"
4160
+ >
4161
+ <path
4162
+ class="pf-v6-c-button--hamburger-icon--top"
4163
+ d="M1,1 L9,1"
4164
+ />
4165
+ <path
4166
+ class="pf-v6-c-button--hamburger-icon--middle"
4167
+ d="M1,5 L9,5"
4168
+ />
4169
+ <path
4170
+ class="pf-v6-c-button--hamburger-icon--arrow"
4171
+ d="M1,5 L1,5 L1,5"
4172
+ />
4173
+ <path
4174
+ class="pf-v6-c-button--hamburger-icon--bottom"
4175
+ d="M9,9 L1,9"
4176
+ />
4177
+ </svg>
4178
+ </span>
4179
+ </button>
4180
+ </span>
4181
+ <div class="pf-v6-c-masthead__brand">
4182
+ <a class="pf-v6-c-masthead__logo" href="#">
4183
+ <svg height="37px" viewBox="0 0 679 158">
4184
+ <title>PF-HorizontalLogo-Color</title>
4185
+ <defs>
4186
+ <linearGradient
4187
+ x1="68%"
4188
+ y1="2.25860997e-13%"
4189
+ x2="32%"
4190
+ y2="100%"
4191
+ id="linearGradient-nav-docked-expanded-example-masthead"
4192
+ >
4193
+ <stop stop-color="#2B9AF3" offset="0%" />
4194
+ <stop
4195
+ stop-color="#73BCF7"
4196
+ stop-opacity="0.502212631"
4197
+ offset="100%"
4198
+ />
4199
+ </linearGradient>
4200
+ </defs>
4201
+ <g
4202
+ stroke="none"
4203
+ stroke-width="1"
4204
+ fill="none"
4205
+ fill-rule="evenodd"
4206
+ >
4207
+ <g
4208
+ transform="translate(206.000000, 45.750000)"
4209
+ fill="var(--pf-t--global--text--color--regular)"
4210
+ fill-rule="nonzero"
4211
+ >
4212
+ <path
4213
+ 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"
4214
+ />
4215
+ <path
4216
+ 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"
4217
+ />
4218
+ <path
4219
+ 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"
4220
+ />
4221
+ <path
4222
+ 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"
4223
+ />
4224
+ <path
4225
+ 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"
4226
+ />
4227
+ <path
4228
+ 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"
4229
+ />
4230
+ <path
4231
+ 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"
4232
+ />
4233
+ <polygon
4234
+ 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"
4235
+ />
4236
+ <polygon
4237
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
4238
+ />
4239
+ <path
4240
+ 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"
4241
+ />
4242
+ </g>
4243
+ <g transform="translate(0.000000, 0.000000)">
4244
+ <path
4245
+ 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"
4246
+ fill="#0066CC"
4247
+ />
4248
+ <path
4249
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4250
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
4251
+ />
4252
+ <path
4253
+ 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"
4254
+ fill="url(#linearGradient-nav-docked-expanded-example-masthead)"
4255
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4256
+ />
4257
+ </g>
4258
+ </g>
4259
+ </svg>
4260
+ </a>
4261
+ <a class="pf-v6-c-masthead__logo pf-m-compact" href="#">
4262
+ <svg width="37px" height="37px" viewBox="0 0 158 158">
4263
+ <title>PF-HorizontalLogo-Color</title>
4264
+ <defs>
4265
+ <linearGradient
4266
+ x1="68%"
4267
+ y1="2.25860997e-13%"
4268
+ x2="32%"
4269
+ y2="100%"
4270
+ id="linearGradient-1"
4271
+ >
4272
+ <stop stop-color="#2B9AF3" offset="0%" />
4273
+ <stop
4274
+ stop-color="#73BCF7"
4275
+ stop-opacity="0.502212631"
4276
+ offset="100%"
4277
+ />
4278
+ </linearGradient>
4279
+ </defs>
4280
+ <g
4281
+ id="PF-IconLogo-color"
4282
+ stroke="none"
4283
+ stroke-width="1"
4284
+ fill="none"
4285
+ fill-rule="evenodd"
4286
+ >
4287
+ <g id="Logo">
4288
+ <path
4289
+ 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"
4290
+ id="Rectangle-Copy-17"
4291
+ fill="#0066CC"
4292
+ />
4293
+ <path
4294
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4295
+ id="Path-2"
4296
+ fill="url(#linearGradient-1)"
4297
+ />
4298
+ <path
4299
+ 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"
4300
+ id="Path-2"
4301
+ fill="url(#linearGradient-1)"
4302
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4303
+ />
4304
+ </g>
4305
+ </g>
4306
+ </svg>
4307
+ </a>
4308
+ </div>
4309
+ </div>
4310
+ <hr class="pf-v6-c-divider" />
4311
+ <div class="pf-v6-c-masthead__content">
4312
+ <div
4313
+ class="pf-v6-c-toolbar pf-m-vertical pf-m-static"
4314
+ id="nav-docked-expanded-example-masthead-toolbar"
4315
+ >
4316
+ <div class="pf-v6-c-toolbar__content">
4317
+ <div class="pf-v6-c-toolbar__content-section">
4318
+ <nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
4319
+ <ul class="pf-v6-c-nav__list" role="list">
4320
+ <li class="pf-v6-c-nav__item">
4321
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
4322
+ <span class="pf-v6-c-nav__link-icon">
4323
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4324
+ </span>
4325
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4326
+ </a>
4327
+ </li>
4328
+ <li class="pf-v6-c-nav__item">
4329
+ <a
4330
+ href="#"
4331
+ class="pf-v6-c-nav__link pf-m-current"
4332
+ aria-current="page"
4333
+ aria-label="Folder"
4334
+ >
4335
+ <span class="pf-v6-c-nav__link-icon">
4336
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
4337
+ </span>
4338
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4339
+ </a>
4340
+ </li>
4341
+ <li class="pf-v6-c-nav__item">
4342
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
4343
+ <span class="pf-v6-c-nav__link-icon">
4344
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
4345
+ </span>
4346
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4347
+ </a>
4348
+ </li>
4349
+ <li class="pf-v6-c-nav__item">
4350
+ <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
4351
+ <span class="pf-v6-c-nav__link-icon">
4352
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
4353
+ </span>
4354
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4355
+ </a>
4356
+ </li>
4357
+ </ul>
4358
+ </nav>
4359
+
4360
+ <div
4361
+ 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"
4362
+ >
4363
+ <div class="pf-v6-c-toolbar__item">
4364
+ <button
4365
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
4366
+ type="button"
4367
+ aria-expanded="false"
4368
+ aria-label="Applications"
4369
+ >
4370
+ <span class="pf-v6-c-menu-toggle__icon">
4371
+ <i class="fas fa-th" aria-hidden="true"></i>
4372
+ </span>
4373
+ <span class="pf-v6-c-menu-toggle__text">Applications</span>
4374
+ </button>
4375
+ </div>
4376
+ <div class="pf-v6-c-toolbar__item">
4377
+ <button
4378
+ class="pf-v6-c-button pf-m-dock pf-m-settings pf-m-plain"
4379
+ type="button"
4380
+ aria-label="Settings"
4381
+ >
4382
+ <span class="pf-v6-c-button__icon pf-m-start">
4383
+ <svg
4384
+ class="pf-v6-svg"
4385
+ viewBox="0 0 32 32"
4386
+ fill="currentColor"
4387
+ aria-hidden="true"
4388
+ role="img"
4389
+ width="1em"
4390
+ height="1em"
4391
+ >
4392
+ <path
4393
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
4394
+ />
4395
+ </svg>
4396
+ </span>
4397
+ <span class="pf-v6-c-button__text">Settings</span>
4398
+ </button>
4399
+ </div>
4400
+ <div class="pf-v6-c-toolbar__item">
4401
+ <button
4402
+ class="pf-v6-c-menu-toggle pf-m-dock pf-m-text pf-m-plain"
4403
+ type="button"
4404
+ aria-expanded="false"
4405
+ aria-label="Help"
4406
+ >
4407
+ <span class="pf-v6-c-menu-toggle__icon">
4408
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
4409
+ </span>
4410
+ <span class="pf-v6-c-menu-toggle__text">Help</span>
4411
+ </button>
4412
+ </div>
4413
+ </div>
4414
+ </div>
4415
+ </div>
4416
+ </div>
4417
+ </div>
4418
+ </header>
4419
+ </div>
4420
+ </div>
4421
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4422
+ <main
4423
+ class="pf-v6-c-page__main"
4424
+ tabindex="-1"
4425
+ id="main-content-nav-docked-expanded-example"
4426
+ >
4427
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4428
+ <div class="pf-v6-c-page__main-body">
4429
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4430
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4431
+ <li class="pf-v6-c-breadcrumb__item">
4432
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4433
+ </li>
4434
+ <li class="pf-v6-c-breadcrumb__item">
4435
+ <span class="pf-v6-c-breadcrumb__item-divider">
4436
+ <svg
4437
+ class="pf-v6-svg"
4438
+ viewBox="0 0 20 20"
4439
+ fill="currentColor"
4440
+ aria-hidden="true"
4441
+ role="img"
4442
+ width="1em"
4443
+ height="1em"
4444
+ >
4445
+ <path
4446
+ 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"
4447
+ />
4448
+ </svg>
4449
+ </span>
4450
+
4451
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4452
+ </li>
4453
+ <li class="pf-v6-c-breadcrumb__item">
4454
+ <span class="pf-v6-c-breadcrumb__item-divider">
4455
+ <svg
4456
+ class="pf-v6-svg"
4457
+ viewBox="0 0 20 20"
4458
+ fill="currentColor"
4459
+ aria-hidden="true"
4460
+ role="img"
4461
+ width="1em"
4462
+ height="1em"
4463
+ >
4464
+ <path
4465
+ 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"
4466
+ />
4467
+ </svg>
4468
+ </span>
4469
+
4470
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4471
+ </li>
4472
+ <li class="pf-v6-c-breadcrumb__item">
4473
+ <span class="pf-v6-c-breadcrumb__item-divider">
4474
+ <svg
4475
+ class="pf-v6-svg"
4476
+ viewBox="0 0 20 20"
4477
+ fill="currentColor"
4478
+ aria-hidden="true"
4479
+ role="img"
4480
+ width="1em"
4481
+ height="1em"
4482
+ >
4483
+ <path
4484
+ 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"
4485
+ />
4486
+ </svg>
2067
4487
  </span>
2068
4488
 
2069
4489
  <a