@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (382) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +859 -833
  29. package/base/tokens/_tokens-dark.scss +306 -284
  30. package/base/tokens/_tokens-default.scss +415 -329
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +68 -68
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +18 -17
  39. package/components/ActionList/action-list.scss +26 -16
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -16
  49. package/components/BackToTop/back-to-top.scss +14 -14
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +417 -359
  61. package/components/Button/button.scss +472 -484
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +117 -203
  65. package/components/Card/card.scss +137 -246
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  73. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  74. package/components/CodeBlock/code-block.css +24 -12
  75. package/components/CodeBlock/code-block.scss +24 -13
  76. package/components/CodeEditor/code-editor.css +31 -22
  77. package/components/CodeEditor/code-editor.scss +30 -21
  78. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  79. package/components/Content/content.css +40 -37
  80. package/components/Content/content.scss +40 -37
  81. package/components/ContextSelector/context-selector.css +41 -26
  82. package/components/ContextSelector/context-selector.scss +40 -25
  83. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  84. package/components/DataList/data-list-grid.css +21 -21
  85. package/components/DataList/data-list-grid.scss +3 -3
  86. package/components/DataList/data-list.css +165 -209
  87. package/components/DataList/data-list.scss +138 -185
  88. package/components/DatePicker/date-picker.css +8 -8
  89. package/components/DatePicker/date-picker.scss +8 -8
  90. package/components/DescriptionList/description-list.css +47 -39
  91. package/components/DescriptionList/description-list.scss +33 -30
  92. package/components/Divider/divider.css +97 -177
  93. package/components/Divider/divider.scss +60 -79
  94. package/components/DragDrop/drag-drop.css +26 -22
  95. package/components/DragDrop/drag-drop.scss +26 -25
  96. package/components/Drawer/drawer.css +216 -158
  97. package/components/Drawer/drawer.scss +199 -150
  98. package/components/Dropdown/dropdown.css +76 -69
  99. package/components/Dropdown/dropdown.scss +67 -62
  100. package/components/DualListSelector/dual-list-selector.css +29 -15
  101. package/components/DualListSelector/dual-list-selector.scss +30 -15
  102. package/components/EmptyState/empty-state.css +64 -38
  103. package/components/EmptyState/empty-state.scss +70 -38
  104. package/components/ExpandableSection/expandable-section.css +75 -66
  105. package/components/ExpandableSection/expandable-section.scss +82 -80
  106. package/components/FileUpload/file-upload.css +31 -43
  107. package/components/FileUpload/file-upload.scss +31 -49
  108. package/components/Form/form.css +111 -154
  109. package/components/Form/form.scss +101 -160
  110. package/components/FormControl/form-control.css +95 -111
  111. package/components/FormControl/form-control.scss +97 -92
  112. package/components/HelperText/helper-text.css +29 -35
  113. package/components/HelperText/helper-text.scss +31 -41
  114. package/components/Hint/hint.css +37 -27
  115. package/components/Hint/hint.scss +37 -30
  116. package/components/Icon/icon.css +155 -19
  117. package/components/Icon/icon.scss +188 -21
  118. package/components/InlineEdit/inline-edit.css +12 -11
  119. package/components/InlineEdit/inline-edit.scss +12 -11
  120. package/components/InputGroup/input-group.css +32 -42
  121. package/components/InputGroup/input-group.scss +31 -33
  122. package/components/JumpLinks/jump-links.css +61 -58
  123. package/components/JumpLinks/jump-links.scss +61 -60
  124. package/components/Label/label-group.css +48 -50
  125. package/components/Label/label-group.scss +48 -51
  126. package/components/Label/label.css +382 -363
  127. package/components/Label/label.scss +441 -356
  128. package/components/List/list.css +25 -25
  129. package/components/List/list.scss +26 -26
  130. package/components/LogViewer/log-viewer.css +14 -14
  131. package/components/LogViewer/log-viewer.scss +14 -14
  132. package/components/Login/login.css +104 -122
  133. package/components/Login/login.scss +92 -91
  134. package/components/Masthead/masthead.css +262 -506
  135. package/components/Masthead/masthead.scss +123 -289
  136. package/components/Menu/menu.css +82 -65
  137. package/components/Menu/menu.scss +85 -69
  138. package/components/MenuToggle/menu-toggle.css +37 -31
  139. package/components/MenuToggle/menu-toggle.scss +37 -33
  140. package/components/ModalBox/modal-box.css +76 -69
  141. package/components/ModalBox/modal-box.scss +74 -70
  142. package/components/MultipleFileUpload/multiple-file-upload.css +87 -57
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +92 -60
  144. package/components/Nav/nav.css +248 -899
  145. package/components/Nav/nav.scss +304 -1059
  146. package/components/Nav/themes/dark/nav.scss +2 -2
  147. package/components/NotificationBadge/notification-badge.css +66 -85
  148. package/components/NotificationBadge/notification-badge.scss +72 -103
  149. package/components/NotificationDrawer/notification-drawer.css +130 -128
  150. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  151. package/components/NumberInput/number-input.css +10 -10
  152. package/components/NumberInput/number-input.scss +9 -14
  153. package/components/OptionsMenu/options-menu.css +43 -31
  154. package/components/OptionsMenu/options-menu.scss +43 -31
  155. package/components/OverflowMenu/overflow-menu.css +17 -47
  156. package/components/OverflowMenu/overflow-menu.scss +27 -65
  157. package/components/Page/page.css +182 -232
  158. package/components/Page/page.scss +130 -195
  159. package/components/Pagination/pagination.css +74 -121
  160. package/components/Pagination/pagination.scss +55 -125
  161. package/components/Panel/panel.css +40 -30
  162. package/components/Panel/panel.scss +42 -33
  163. package/components/Popover/popover.css +108 -87
  164. package/components/Popover/popover.scss +120 -109
  165. package/components/Progress/progress.css +40 -52
  166. package/components/Progress/progress.scss +48 -62
  167. package/components/ProgressStepper/progress-stepper.css +98 -89
  168. package/components/ProgressStepper/progress-stepper.scss +90 -84
  169. package/components/Radio/radio.css +30 -23
  170. package/components/Radio/radio.scss +31 -25
  171. package/components/Select/select.css +56 -47
  172. package/components/Select/select.scss +56 -47
  173. package/components/Sidebar/sidebar.css +31 -14
  174. package/components/Sidebar/sidebar.scss +34 -16
  175. package/components/SimpleList/simple-list.css +45 -56
  176. package/components/SimpleList/simple-list.scss +51 -55
  177. package/components/Skeleton/skeleton.css +24 -25
  178. package/components/Skeleton/skeleton.scss +21 -26
  179. package/components/SkipToContent/skip-to-content.css +9 -6
  180. package/components/SkipToContent/skip-to-content.scss +8 -6
  181. package/components/Slider/slider.css +80 -55
  182. package/components/Slider/slider.scss +96 -65
  183. package/components/Spinner/spinner.css +17 -34
  184. package/components/Spinner/spinner.scss +19 -47
  185. package/components/Switch/switch.css +49 -41
  186. package/components/Switch/switch.scss +51 -42
  187. package/components/TabContent/tab-content.css +21 -12
  188. package/components/TabContent/tab-content.scss +22 -15
  189. package/components/Table/table-grid.css +256 -195
  190. package/components/Table/table-grid.scss +53 -39
  191. package/components/Table/table-scrollable.css +4 -4
  192. package/components/Table/table-scrollable.scss +6 -4
  193. package/components/Table/table-tree-view.css +112 -105
  194. package/components/Table/table-tree-view.scss +38 -33
  195. package/components/Table/table.css +105 -89
  196. package/components/Table/table.scss +105 -89
  197. package/components/Tabs/tabs.css +210 -214
  198. package/components/Tabs/tabs.scss +222 -254
  199. package/components/TextInputGroup/text-input-group.css +15 -15
  200. package/components/TextInputGroup/text-input-group.scss +15 -15
  201. package/components/Tile/tile.css +47 -88
  202. package/components/Tile/tile.scss +45 -91
  203. package/components/Timestamp/timestamp.css +12 -9
  204. package/components/Timestamp/timestamp.scss +11 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +68 -59
  208. package/components/ToggleGroup/toggle-group.scss +72 -57
  209. package/components/Toolbar/toolbar.css +2553 -1054
  210. package/components/Toolbar/toolbar.scss +234 -516
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/ActionList/examples/ActionList.md +73 -22
  222. package/docs/components/Alert/examples/Alert.md +3 -3
  223. package/docs/components/Avatar/examples/Avatar.md +5 -19
  224. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  225. package/docs/components/Badge/examples/Badge.md +21 -0
  226. package/docs/components/Banner/examples/Banner.md +48 -25
  227. package/docs/components/Brand/examples/Brand.css +12 -0
  228. package/docs/components/Brand/examples/Brand.md +51 -32
  229. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  230. package/docs/components/Button/examples/Button.css +6 -2
  231. package/docs/components/Button/examples/Button.md +1425 -87
  232. package/docs/components/Card/examples/Card.md +565 -148
  233. package/docs/components/Check/examples/Check.md +71 -58
  234. package/docs/components/Chip/examples/Chip.md +1 -1
  235. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  236. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  237. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  238. package/docs/components/Content/examples/Content.md +5 -5
  239. package/docs/components/Divider/examples/Divider.css +3 -1
  240. package/docs/components/Divider/examples/Divider.md +4 -5
  241. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  242. package/docs/components/Drawer/examples/Drawer.md +294 -256
  243. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  244. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  245. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  246. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  247. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  248. package/docs/components/Form/examples/Form.md +134 -89
  249. package/docs/components/Icon/examples/Icon.md +82 -11
  250. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  251. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  252. package/docs/components/Label/examples/Label.css +4 -0
  253. package/docs/components/Label/examples/Label.md +3091 -704
  254. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  255. package/docs/components/LogViewer/examples/LogViewer.md +300 -210
  256. package/docs/components/Login/examples/Login.md +10 -5
  257. package/docs/components/Masthead/examples/masthead.md +443 -65
  258. package/docs/components/Menu/examples/Menu.css +8 -0
  259. package/docs/components/Menu/examples/Menu.md +594 -543
  260. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  261. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  262. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  263. package/docs/components/Nav/examples/Navigation.css +3 -42
  264. package/docs/components/Nav/examples/Navigation.md +305 -353
  265. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  266. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  267. package/docs/components/Page/examples/Page.css +0 -8
  268. package/docs/components/Page/examples/Page.md +22 -21
  269. package/docs/components/Pagination/examples/Pagination.md +663 -637
  270. package/docs/components/Panel/examples/Panel.md +12 -0
  271. package/docs/components/Popover/examples/Popover.css +4 -9
  272. package/docs/components/Popover/examples/Popover.md +1 -1
  273. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  274. package/docs/components/Radio/examples/Radio.md +62 -54
  275. package/docs/components/Select/deprecated/Select.md +184 -177
  276. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  277. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  278. package/docs/components/TabContent/examples/TabContent.md +10 -10
  279. package/docs/components/Table/examples/Table.css +2 -2
  280. package/docs/components/Table/examples/Table.md +10 -10
  281. package/docs/components/Tabs/examples/Tabs.css +1 -1
  282. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  283. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  284. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  285. package/docs/components/Tile/examples/Tile.css +1 -1
  286. package/docs/components/Tile/examples/Tile.md +264 -144
  287. package/docs/components/Title/examples/Title.md +18 -0
  288. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  289. package/docs/components/Toolbar/examples/Toolbar.md +1211 -3487
  290. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  291. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  292. package/docs/components/Truncate/examples/Truncate.css +2 -2
  293. package/docs/components/Truncate/examples/Truncate.md +2 -2
  294. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  295. package/docs/demos/Alert/examples/Alert.md +330 -87
  296. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  297. package/docs/demos/Banner/examples/Banner.md +211 -60
  298. package/docs/demos/Card/examples/Card.css +3 -3
  299. package/docs/demos/Card/examples/Card.md +28 -12
  300. package/docs/demos/CardView/examples/CardView.md +265 -207
  301. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  302. package/docs/demos/Dashboard/examples/Dashboard.md +105 -32
  303. package/docs/demos/DataList/examples/DataList.md +1002 -935
  304. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  305. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  306. package/docs/demos/Form/examples/BasicForms.md +138 -84
  307. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  308. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  309. package/docs/demos/Modal/examples/Modal.md +645 -198
  310. package/docs/demos/Nav/examples/Nav.md +691 -902
  311. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  312. package/docs/demos/Page/examples/Page.md +942 -273
  313. package/docs/demos/Page/examples/Penta.md +66 -26
  314. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  315. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  316. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1333 -946
  317. package/docs/demos/Skeleton/examples/Skeleton.md +109 -64
  318. package/docs/demos/Table/examples/Table.md +3857 -3418
  319. package/docs/demos/Tabs/examples/Tabs.md +664 -215
  320. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  321. package/docs/demos/Toolbar/examples/Toolbar.md +1313 -1475
  322. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  323. package/docs/layouts/Flex/examples/Flex.md +16 -16
  324. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  325. package/icons/pficons.mjs +1 -0
  326. package/layouts/Flex/flex.css +115 -43
  327. package/layouts/Flex/flex.scss +20 -8
  328. package/package.json +36 -32
  329. package/patternfly-addons.css +732 -972
  330. package/patternfly-base-no-globals-theme-dark-unversioned.css +895 -847
  331. package/patternfly-base-no-globals.css +895 -847
  332. package/patternfly-base-theme-dark-unversioned.css +899 -850
  333. package/patternfly-base.css +899 -850
  334. package/patternfly-no-globals.css +9935 -8997
  335. package/patternfly-theme-dark-unversioned.css +9940 -9001
  336. package/patternfly.css +9940 -9001
  337. package/patternfly.min.css +1 -1
  338. package/patternfly.min.css.map +1 -1
  339. package/sass-utilities/functions.scss +6 -0
  340. package/sass-utilities/mixins.scss +80 -2
  341. package/sass-utilities/scss-variables.scss +8 -8
  342. package/sass-utilities/themes/dark/mixins.scss +3 -1
  343. package/utilities/Accessibility/accessibility.css +12 -12
  344. package/utilities/Spacing/spacing.css +720 -960
  345. package/utilities/Spacing/spacing.scss +4 -8
  346. package/base/themes/dark/_variables.scss +0 -102
  347. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  348. package/components/Accordion/themes/dark/accordion.scss +0 -9
  349. package/components/Alert/themes/dark/alert.scss +0 -17
  350. package/components/Badge/themes/dark/badge.scss +0 -9
  351. package/components/Banner/themes/dark/banner.scss +0 -14
  352. package/components/Button/themes/dark/button.scss +0 -51
  353. package/components/Card/themes/dark/card.scss +0 -20
  354. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  355. package/components/DataList/themes/dark/data-list.scss +0 -10
  356. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  357. package/components/Drawer/themes/dark/drawer.scss +0 -13
  358. package/components/Form/themes/dark/form.scss +0 -7
  359. package/components/FormControl/themes/dark/form-control.scss +0 -24
  360. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  361. package/components/Hint/themes/dark/hint.scss +0 -8
  362. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  363. package/components/Label/themes/dark/label.scss +0 -53
  364. package/components/Login/themes/dark/login.scss +0 -12
  365. package/components/Masthead/themes/dark/masthead.scss +0 -14
  366. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  367. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  368. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  369. package/components/Page/themes/dark/page.scss +0 -69
  370. package/components/Pagination/themes/dark/pagination.scss +0 -7
  371. package/components/Panel/themes/dark/panel.scss +0 -7
  372. package/components/Popover/themes/dark/popover.scss +0 -11
  373. package/components/Progress/themes/dark/progress.scss +0 -9
  374. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  375. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  376. package/components/Switch/themes/dark/switch.scss +0 -11
  377. package/components/Tabs/themes/dark/tabs.scss +0 -10
  378. package/components/Tile/themes/dark/tile.scss +0 -10
  379. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  380. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  381. package/docs/components/Avatar/examples/Avatar.css +0 -3
  382. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -25,23 +25,117 @@ section: components
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
27
  <a class="pf-v5-c-masthead__brand" href="#">
28
- <img
29
- class="pf-v5-c-brand"
30
- src="/assets/images/pf-logo.svg"
31
- alt="PatternFly logo"
32
- style="--pf-v5-c-brand--Height:36px"
33
- />
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
30
+ <defs>
31
+ <linearGradient
32
+ x1="68%"
33
+ y1="2.25860997e-13%"
34
+ x2="32%"
35
+ y2="100%"
36
+ id="linearGradient-nav-basic-example-masthead"
37
+ >
38
+ <stop stop-color="#2B9AF3" offset="0%" />
39
+ <stop
40
+ stop-color="#73BCF7"
41
+ stop-opacity="0.502212631"
42
+ offset="100%"
43
+ />
44
+ </linearGradient>
45
+ </defs>
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
+ <g
48
+ transform="translate(206.000000, 45.750000)"
49
+ fill="var(--pf-t--global--text--color--regular)"
50
+ fill-rule="nonzero"
51
+ >
52
+ <path
53
+ 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"
54
+ />
55
+ <path
56
+ 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"
57
+ />
58
+ <path
59
+ 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"
60
+ />
61
+ <path
62
+ 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"
63
+ />
64
+ <path
65
+ 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"
66
+ />
67
+ <path
68
+ 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"
69
+ />
70
+ <path
71
+ 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"
72
+ />
73
+ <polygon
74
+ 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"
75
+ />
76
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
+ <path
78
+ 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"
79
+ />
80
+ </g>
81
+ <g transform="translate(0.000000, 0.000000)">
82
+ <path
83
+ 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"
84
+ fill="#0066CC"
85
+ />
86
+ <path
87
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
+ fill="url(#linearGradient-nav-basic-example-masthead)"
89
+ />
90
+ <path
91
+ 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"
92
+ fill="url(#linearGradient-nav-basic-example-masthead)"
93
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
+ />
95
+ </g>
96
+ </g>
97
+ </svg>
34
98
  </a>
35
99
  </div>
36
100
  <div class="pf-v5-c-masthead__content">
37
101
  <div
38
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
102
+ class="pf-v5-c-toolbar pf-m-static"
39
103
  id="nav-basic-example-masthead-toolbar"
40
104
  >
41
105
  <div class="pf-v5-c-toolbar__content">
42
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
43
137
  <div
44
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
138
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
45
139
  >
46
140
  <div
47
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -88,27 +182,6 @@ section: components
88
182
  </button>
89
183
  </div>
90
184
  </div>
91
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
92
- <button
93
- class="pf-v5-c-menu-toggle pf-m-full-height"
94
- type="button"
95
- aria-expanded="false"
96
- >
97
- <span class="pf-v5-c-menu-toggle__icon">
98
- <img
99
- class="pf-v5-c-avatar"
100
- alt="Avatar image"
101
- src="/assets/images/img_avatar-light.svg"
102
- />
103
- </span>
104
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
105
- <span class="pf-v5-c-menu-toggle__controls">
106
- <span class="pf-v5-c-menu-toggle__toggle-icon">
107
- <i class="fas fa-angle-down" aria-hidden="true"></i>
108
- </span>
109
- </span>
110
- </button>
111
- </div>
112
185
  </div>
113
186
  </div>
114
187
  </div>
@@ -257,23 +330,117 @@ section: components
257
330
  </span>
258
331
  <div class="pf-v5-c-masthead__main">
259
332
  <a class="pf-v5-c-masthead__brand" href="#">
260
- <img
261
- class="pf-v5-c-brand"
262
- src="/assets/images/pf-logo.svg"
263
- alt="PatternFly logo"
264
- style="--pf-v5-c-brand--Height:36px"
265
- />
333
+ <svg height="40px" viewBox="0 0 679 158">
334
+ <title>PF-HorizontalLogo-Color</title>
335
+ <defs>
336
+ <linearGradient
337
+ x1="68%"
338
+ y1="2.25860997e-13%"
339
+ x2="32%"
340
+ y2="100%"
341
+ id="linearGradient-nav-grouped-nav-example-masthead"
342
+ >
343
+ <stop stop-color="#2B9AF3" offset="0%" />
344
+ <stop
345
+ stop-color="#73BCF7"
346
+ stop-opacity="0.502212631"
347
+ offset="100%"
348
+ />
349
+ </linearGradient>
350
+ </defs>
351
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
352
+ <g
353
+ transform="translate(206.000000, 45.750000)"
354
+ fill="var(--pf-t--global--text--color--regular)"
355
+ fill-rule="nonzero"
356
+ >
357
+ <path
358
+ 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"
359
+ />
360
+ <path
361
+ 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"
362
+ />
363
+ <path
364
+ 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"
365
+ />
366
+ <path
367
+ 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"
368
+ />
369
+ <path
370
+ 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"
371
+ />
372
+ <path
373
+ 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"
374
+ />
375
+ <path
376
+ 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"
377
+ />
378
+ <polygon
379
+ 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"
380
+ />
381
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
382
+ <path
383
+ 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"
384
+ />
385
+ </g>
386
+ <g transform="translate(0.000000, 0.000000)">
387
+ <path
388
+ 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"
389
+ fill="#0066CC"
390
+ />
391
+ <path
392
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
393
+ fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
394
+ />
395
+ <path
396
+ 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"
397
+ fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
398
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
399
+ />
400
+ </g>
401
+ </g>
402
+ </svg>
266
403
  </a>
267
404
  </div>
268
405
  <div class="pf-v5-c-masthead__content">
269
406
  <div
270
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
407
+ class="pf-v5-c-toolbar pf-m-static"
271
408
  id="nav-grouped-nav-example-masthead-toolbar"
272
409
  >
273
410
  <div class="pf-v5-c-toolbar__content">
274
411
  <div class="pf-v5-c-toolbar__content-section">
412
+ <div class="pf-v5-c-toolbar__item">
413
+ <button
414
+ class="pf-v5-c-menu-toggle"
415
+ type="button"
416
+ aria-expanded="false"
417
+ >
418
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
419
+ <span class="pf-v5-c-menu-toggle__controls">
420
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
421
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
422
+ </span>
423
+ </span>
424
+ </button>
425
+ </div>
426
+
427
+ <div class="pf-v5-c-toolbar__item">
428
+ <button
429
+ class="pf-v5-c-menu-toggle"
430
+ type="button"
431
+ aria-expanded="false"
432
+ >
433
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
434
+ <span class="pf-v5-c-menu-toggle__controls">
435
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
436
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
437
+ </span>
438
+ </span>
439
+ </button>
440
+ </div>
441
+
275
442
  <div
276
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
443
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
277
444
  >
278
445
  <div
279
446
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -320,27 +487,6 @@ section: components
320
487
  </button>
321
488
  </div>
322
489
  </div>
323
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
324
- <button
325
- class="pf-v5-c-menu-toggle pf-m-full-height"
326
- type="button"
327
- aria-expanded="false"
328
- >
329
- <span class="pf-v5-c-menu-toggle__icon">
330
- <img
331
- class="pf-v5-c-avatar"
332
- alt="Avatar image"
333
- src="/assets/images/img_avatar-light.svg"
334
- />
335
- </span>
336
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
337
- <span class="pf-v5-c-menu-toggle__controls">
338
- <span class="pf-v5-c-menu-toggle__toggle-icon">
339
- <i class="fas fa-angle-down" aria-hidden="true"></i>
340
- </span>
341
- </span>
342
- </button>
343
- </div>
344
490
  </div>
345
491
  </div>
346
492
  </div>
@@ -383,6 +529,7 @@ section: components
383
529
  </li>
384
530
  </ul>
385
531
  </section>
532
+
386
533
  <section class="pf-v5-c-nav__section" aria-labelledby="grouped-title2">
387
534
  <h2 class="pf-v5-c-nav__section-title" id="grouped-title2">Policy</h2>
388
535
  <ul class="pf-v5-c-nav__list" role="list">
@@ -512,23 +659,117 @@ section: components
512
659
  </span>
513
660
  <div class="pf-v5-c-masthead__main">
514
661
  <a class="pf-v5-c-masthead__brand" href="#">
515
- <img
516
- class="pf-v5-c-brand"
517
- src="/assets/images/pf-logo.svg"
518
- alt="PatternFly logo"
519
- style="--pf-v5-c-brand--Height:36px"
520
- />
662
+ <svg height="40px" viewBox="0 0 679 158">
663
+ <title>PF-HorizontalLogo-Color</title>
664
+ <defs>
665
+ <linearGradient
666
+ x1="68%"
667
+ y1="2.25860997e-13%"
668
+ x2="32%"
669
+ y2="100%"
670
+ id="linearGradient-nav-expandable-example-masthead"
671
+ >
672
+ <stop stop-color="#2B9AF3" offset="0%" />
673
+ <stop
674
+ stop-color="#73BCF7"
675
+ stop-opacity="0.502212631"
676
+ offset="100%"
677
+ />
678
+ </linearGradient>
679
+ </defs>
680
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
681
+ <g
682
+ transform="translate(206.000000, 45.750000)"
683
+ fill="var(--pf-t--global--text--color--regular)"
684
+ fill-rule="nonzero"
685
+ >
686
+ <path
687
+ 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"
688
+ />
689
+ <path
690
+ 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"
691
+ />
692
+ <path
693
+ 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"
694
+ />
695
+ <path
696
+ 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"
697
+ />
698
+ <path
699
+ 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"
700
+ />
701
+ <path
702
+ 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"
703
+ />
704
+ <path
705
+ 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"
706
+ />
707
+ <polygon
708
+ 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"
709
+ />
710
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
711
+ <path
712
+ 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"
713
+ />
714
+ </g>
715
+ <g transform="translate(0.000000, 0.000000)">
716
+ <path
717
+ 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"
718
+ fill="#0066CC"
719
+ />
720
+ <path
721
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
722
+ fill="url(#linearGradient-nav-expandable-example-masthead)"
723
+ />
724
+ <path
725
+ 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"
726
+ fill="url(#linearGradient-nav-expandable-example-masthead)"
727
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
728
+ />
729
+ </g>
730
+ </g>
731
+ </svg>
521
732
  </a>
522
733
  </div>
523
734
  <div class="pf-v5-c-masthead__content">
524
735
  <div
525
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
736
+ class="pf-v5-c-toolbar pf-m-static"
526
737
  id="nav-expandable-example-masthead-toolbar"
527
738
  >
528
739
  <div class="pf-v5-c-toolbar__content">
529
740
  <div class="pf-v5-c-toolbar__content-section">
741
+ <div class="pf-v5-c-toolbar__item">
742
+ <button
743
+ class="pf-v5-c-menu-toggle"
744
+ type="button"
745
+ aria-expanded="false"
746
+ >
747
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
748
+ <span class="pf-v5-c-menu-toggle__controls">
749
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
750
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
751
+ </span>
752
+ </span>
753
+ </button>
754
+ </div>
755
+
756
+ <div class="pf-v5-c-toolbar__item">
757
+ <button
758
+ class="pf-v5-c-menu-toggle"
759
+ type="button"
760
+ aria-expanded="false"
761
+ >
762
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
763
+ <span class="pf-v5-c-menu-toggle__controls">
764
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
765
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
766
+ </span>
767
+ </span>
768
+ </button>
769
+ </div>
770
+
530
771
  <div
531
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
772
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
532
773
  >
533
774
  <div
534
775
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -575,27 +816,6 @@ section: components
575
816
  </button>
576
817
  </div>
577
818
  </div>
578
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
579
- <button
580
- class="pf-v5-c-menu-toggle pf-m-full-height"
581
- type="button"
582
- aria-expanded="false"
583
- >
584
- <span class="pf-v5-c-menu-toggle__icon">
585
- <img
586
- class="pf-v5-c-avatar"
587
- alt="Avatar image"
588
- src="/assets/images/img_avatar-light.svg"
589
- />
590
- </span>
591
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
592
- <span class="pf-v5-c-menu-toggle__controls">
593
- <span class="pf-v5-c-menu-toggle__toggle-icon">
594
- <i class="fas fa-angle-down" aria-hidden="true"></i>
595
- </span>
596
- </span>
597
- </button>
598
- </div>
599
819
  </div>
600
820
  </div>
601
821
  </div>
@@ -609,13 +829,11 @@ section: components
609
829
  aria-label="Global"
610
830
  >
611
831
  <ul class="pf-v5-c-nav__list" role="list">
612
- <li
613
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
614
- >
832
+ <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
615
833
  <button
616
834
  class="pf-v5-c-nav__link"
617
- id="nav-expandable-example-expandable-nav-link1"
618
835
  aria-expanded="true"
836
+ id="nav-expandable-example-expandable-nav-link1"
619
837
  >
620
838
  System panel
621
839
  <span class="pf-v5-c-nav__toggle">
@@ -642,8 +860,6 @@ section: components
642
860
  <li class="pf-v5-c-nav__item">
643
861
  <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
644
862
  </li>
645
- <li class="pf-v5-c-divider" role="separator"></li>
646
-
647
863
  <li class="pf-v5-c-nav__item">
648
864
  <a href="#" class="pf-v5-c-nav__link">Instances</a>
649
865
  </li>
@@ -659,8 +875,8 @@ section: components
659
875
  <li class="pf-v5-c-nav__item pf-m-expandable">
660
876
  <button
661
877
  class="pf-v5-c-nav__link"
662
- id="nav-expandable-example-expandable-nav-link2"
663
878
  aria-expanded="false"
879
+ id="nav-expandable-example-expandable-nav-link2"
664
880
  >
665
881
  Policy
666
882
  <span class="pf-v5-c-nav__toggle">
@@ -687,8 +903,8 @@ section: components
687
903
  <li class="pf-v5-c-nav__item pf-m-expandable">
688
904
  <button
689
905
  class="pf-v5-c-nav__link"
690
- id="nav-expandable-example-expandable-nav-link3"
691
906
  aria-expanded="false"
907
+ id="nav-expandable-example-expandable-nav-link3"
692
908
  >
693
909
  Authentication
694
910
  <span class="pf-v5-c-nav__toggle">
@@ -819,37 +1035,135 @@ section: components
819
1035
  <header class="pf-v5-c-masthead" id="nav-horizontal-example-masthead">
820
1036
  <div class="pf-v5-c-masthead__main">
821
1037
  <a class="pf-v5-c-masthead__brand" href="#">
822
- <img
823
- class="pf-v5-c-brand"
824
- src="/assets/images/pf-logo.svg"
825
- alt="PatternFly logo"
826
- style="--pf-v5-c-brand--Height:36px"
827
- />
1038
+ <svg height="40px" viewBox="0 0 679 158">
1039
+ <title>PF-HorizontalLogo-Color</title>
1040
+ <defs>
1041
+ <linearGradient
1042
+ x1="68%"
1043
+ y1="2.25860997e-13%"
1044
+ x2="32%"
1045
+ y2="100%"
1046
+ id="linearGradient-nav-horizontal-example-masthead"
1047
+ >
1048
+ <stop stop-color="#2B9AF3" offset="0%" />
1049
+ <stop
1050
+ stop-color="#73BCF7"
1051
+ stop-opacity="0.502212631"
1052
+ offset="100%"
1053
+ />
1054
+ </linearGradient>
1055
+ </defs>
1056
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1057
+ <g
1058
+ transform="translate(206.000000, 45.750000)"
1059
+ fill="var(--pf-t--global--text--color--regular)"
1060
+ fill-rule="nonzero"
1061
+ >
1062
+ <path
1063
+ 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"
1064
+ />
1065
+ <path
1066
+ 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"
1067
+ />
1068
+ <path
1069
+ 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"
1070
+ />
1071
+ <path
1072
+ 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"
1073
+ />
1074
+ <path
1075
+ 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"
1076
+ />
1077
+ <path
1078
+ 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"
1079
+ />
1080
+ <path
1081
+ 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"
1082
+ />
1083
+ <polygon
1084
+ 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"
1085
+ />
1086
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1087
+ <path
1088
+ 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"
1089
+ />
1090
+ </g>
1091
+ <g transform="translate(0.000000, 0.000000)">
1092
+ <path
1093
+ 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"
1094
+ fill="#0066CC"
1095
+ />
1096
+ <path
1097
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1098
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1099
+ />
1100
+ <path
1101
+ 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"
1102
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1103
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1104
+ />
1105
+ </g>
1106
+ </g>
1107
+ </svg>
828
1108
  </a>
829
1109
  </div>
830
1110
  <div class="pf-v5-c-masthead__content">
831
1111
  <div
832
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1112
+ class="pf-v5-c-toolbar pf-m-static"
833
1113
  id="nav-horizontal-example-masthead-toolbar"
834
1114
  >
835
1115
  <div class="pf-v5-c-toolbar__content">
836
1116
  <div class="pf-v5-c-toolbar__content-section">
1117
+ <div class="pf-v5-c-toolbar__item">
1118
+ <button
1119
+ class="pf-v5-c-menu-toggle"
1120
+ type="button"
1121
+ aria-expanded="false"
1122
+ >
1123
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1124
+ <span class="pf-v5-c-menu-toggle__controls">
1125
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1126
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1127
+ </span>
1128
+ </span>
1129
+ </button>
1130
+ </div>
1131
+
1132
+ <div class="pf-v5-c-toolbar__item">
1133
+ <button
1134
+ class="pf-v5-c-menu-toggle"
1135
+ type="button"
1136
+ aria-expanded="false"
1137
+ >
1138
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1139
+ <span class="pf-v5-c-menu-toggle__controls">
1140
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1141
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1142
+ </span>
1143
+ </span>
1144
+ </button>
1145
+ </div>
1146
+
837
1147
  <div
838
1148
  class="pf-v5-c-toolbar__item pf-m-overflow-container"
839
1149
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
840
1150
  >
841
1151
  <nav
842
- class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable"
843
- id="-horizontal-nav"
1152
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
1153
+ id="nav-horizontal-example-masthead-horizontal-nav"
844
1154
  aria-label="Global"
845
1155
  >
846
- <button
847
- class="pf-v5-c-nav__scroll-button"
848
- disabled
849
- aria-label="Scroll left"
850
- >
851
- <i class="fas fa-angle-left" aria-hidden="true"></i>
852
- </button>
1156
+ <div class="pf-v5-c-nav__scroll-button">
1157
+ <button
1158
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1159
+ type="button"
1160
+ aria-label="Scroll start"
1161
+ >
1162
+ <span class="pf-v5-c-button__icon">
1163
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1164
+ </span>
1165
+ </button>
1166
+ </div>
853
1167
  <ul class="pf-v5-c-nav__list" role="list">
854
1168
  <li class="pf-v5-c-nav__item">
855
1169
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -871,16 +1185,21 @@ section: components
871
1185
  >Horizontal nav item 5</a>
872
1186
  </li>
873
1187
  </ul>
874
- <button
875
- class="pf-v5-c-nav__scroll-button"
876
- aria-label="Scroll right"
877
- >
878
- <i class="fas fa-angle-right" aria-hidden="true"></i>
879
- </button>
1188
+ <div class="pf-v5-c-nav__scroll-button">
1189
+ <button
1190
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1191
+ type="button"
1192
+ aria-label="Scroll end"
1193
+ >
1194
+ <span class="pf-v5-c-button__icon">
1195
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1196
+ </span>
1197
+ </button>
1198
+ </div>
880
1199
  </nav>
881
1200
  </div>
882
1201
  <div
883
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1202
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
884
1203
  >
885
1204
  <div
886
1205
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -927,27 +1246,6 @@ section: components
927
1246
  </button>
928
1247
  </div>
929
1248
  </div>
930
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
931
- <button
932
- class="pf-v5-c-menu-toggle pf-m-full-height"
933
- type="button"
934
- aria-expanded="false"
935
- >
936
- <span class="pf-v5-c-menu-toggle__icon">
937
- <img
938
- class="pf-v5-c-avatar"
939
- alt="Avatar image"
940
- src="/assets/images/img_avatar-light.svg"
941
- />
942
- </span>
943
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
944
- <span class="pf-v5-c-menu-toggle__controls">
945
- <span class="pf-v5-c-menu-toggle__toggle-icon">
946
- <i class="fas fa-angle-down" aria-hidden="true"></i>
947
- </span>
948
- </span>
949
- </button>
950
- </div>
951
1249
  </div>
952
1250
  </div>
953
1251
  </div>
@@ -1065,23 +1363,117 @@ section: components
1065
1363
  </span>
1066
1364
  <div class="pf-v5-c-masthead__main">
1067
1365
  <a class="pf-v5-c-masthead__brand" href="#">
1068
- <img
1069
- class="pf-v5-c-brand"
1070
- src="/assets/images/pf-logo.svg"
1071
- alt="PatternFly logo"
1072
- style="--pf-v5-c-brand--Height:36px"
1073
- />
1366
+ <svg height="40px" viewBox="0 0 679 158">
1367
+ <title>PF-HorizontalLogo-Color</title>
1368
+ <defs>
1369
+ <linearGradient
1370
+ x1="68%"
1371
+ y1="2.25860997e-13%"
1372
+ x2="32%"
1373
+ y2="100%"
1374
+ id="linearGradient-nav-horizontal-subnav-example-masthead"
1375
+ >
1376
+ <stop stop-color="#2B9AF3" offset="0%" />
1377
+ <stop
1378
+ stop-color="#73BCF7"
1379
+ stop-opacity="0.502212631"
1380
+ offset="100%"
1381
+ />
1382
+ </linearGradient>
1383
+ </defs>
1384
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1385
+ <g
1386
+ transform="translate(206.000000, 45.750000)"
1387
+ fill="var(--pf-t--global--text--color--regular)"
1388
+ fill-rule="nonzero"
1389
+ >
1390
+ <path
1391
+ 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"
1392
+ />
1393
+ <path
1394
+ 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"
1395
+ />
1396
+ <path
1397
+ 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"
1398
+ />
1399
+ <path
1400
+ 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"
1401
+ />
1402
+ <path
1403
+ 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"
1404
+ />
1405
+ <path
1406
+ 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"
1407
+ />
1408
+ <path
1409
+ 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"
1410
+ />
1411
+ <polygon
1412
+ 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"
1413
+ />
1414
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1415
+ <path
1416
+ 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"
1417
+ />
1418
+ </g>
1419
+ <g transform="translate(0.000000, 0.000000)">
1420
+ <path
1421
+ 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"
1422
+ fill="#0066CC"
1423
+ />
1424
+ <path
1425
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1426
+ fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1427
+ />
1428
+ <path
1429
+ 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"
1430
+ fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1431
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1432
+ />
1433
+ </g>
1434
+ </g>
1435
+ </svg>
1074
1436
  </a>
1075
1437
  </div>
1076
1438
  <div class="pf-v5-c-masthead__content">
1077
1439
  <div
1078
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1440
+ class="pf-v5-c-toolbar pf-m-static"
1079
1441
  id="nav-horizontal-subnav-example-masthead-toolbar"
1080
1442
  >
1081
1443
  <div class="pf-v5-c-toolbar__content">
1082
1444
  <div class="pf-v5-c-toolbar__content-section">
1445
+ <div class="pf-v5-c-toolbar__item">
1446
+ <button
1447
+ class="pf-v5-c-menu-toggle"
1448
+ type="button"
1449
+ aria-expanded="false"
1450
+ >
1451
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1452
+ <span class="pf-v5-c-menu-toggle__controls">
1453
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1454
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1455
+ </span>
1456
+ </span>
1457
+ </button>
1458
+ </div>
1459
+
1460
+ <div class="pf-v5-c-toolbar__item">
1461
+ <button
1462
+ class="pf-v5-c-menu-toggle"
1463
+ type="button"
1464
+ aria-expanded="false"
1465
+ >
1466
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1467
+ <span class="pf-v5-c-menu-toggle__controls">
1468
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1469
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1470
+ </span>
1471
+ </span>
1472
+ </button>
1473
+ </div>
1474
+
1083
1475
  <div
1084
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1476
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1085
1477
  >
1086
1478
  <div
1087
1479
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1128,27 +1520,6 @@ section: components
1128
1520
  </button>
1129
1521
  </div>
1130
1522
  </div>
1131
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1132
- <button
1133
- class="pf-v5-c-menu-toggle pf-m-full-height"
1134
- type="button"
1135
- aria-expanded="false"
1136
- >
1137
- <span class="pf-v5-c-menu-toggle__icon">
1138
- <img
1139
- class="pf-v5-c-avatar"
1140
- alt="Avatar image"
1141
- src="/assets/images/img_avatar-light.svg"
1142
- />
1143
- </span>
1144
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1145
- <span class="pf-v5-c-menu-toggle__controls">
1146
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1147
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1148
- </span>
1149
- </span>
1150
- </button>
1151
- </div>
1152
1523
  </div>
1153
1524
  </div>
1154
1525
  </div>
@@ -1162,13 +1533,11 @@ section: components
1162
1533
  aria-label="Global"
1163
1534
  >
1164
1535
  <ul class="pf-v5-c-nav__list" role="list">
1165
- <li
1166
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
1167
- >
1536
+ <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
1168
1537
  <button
1169
1538
  class="pf-v5-c-nav__link"
1170
- id="nav-horizontal-subnav-example-expandable-nav-link1"
1171
1539
  aria-expanded="true"
1540
+ id="nav-horizontal-subnav-example-expandable-nav-link1"
1172
1541
  >
1173
1542
  System panel
1174
1543
  <span class="pf-v5-c-nav__toggle">
@@ -1195,8 +1564,6 @@ section: components
1195
1564
  <li class="pf-v5-c-nav__item">
1196
1565
  <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
1197
1566
  </li>
1198
- <li class="pf-v5-c-divider" role="separator"></li>
1199
-
1200
1567
  <li class="pf-v5-c-nav__item">
1201
1568
  <a href="#" class="pf-v5-c-nav__link">Instances</a>
1202
1569
  </li>
@@ -1212,8 +1579,8 @@ section: components
1212
1579
  <li class="pf-v5-c-nav__item pf-m-expandable">
1213
1580
  <button
1214
1581
  class="pf-v5-c-nav__link"
1215
- id="nav-horizontal-subnav-example-expandable-nav-link2"
1216
1582
  aria-expanded="false"
1583
+ id="nav-horizontal-subnav-example-expandable-nav-link2"
1217
1584
  >
1218
1585
  Policy
1219
1586
  <span class="pf-v5-c-nav__toggle">
@@ -1240,8 +1607,8 @@ section: components
1240
1607
  <li class="pf-v5-c-nav__item pf-m-expandable">
1241
1608
  <button
1242
1609
  class="pf-v5-c-nav__link"
1243
- id="nav-horizontal-subnav-example-expandable-nav-link3"
1244
1610
  aria-expanded="false"
1611
+ id="nav-horizontal-subnav-example-expandable-nav-link3"
1245
1612
  >
1246
1613
  Authentication
1247
1614
  <span class="pf-v5-c-nav__toggle">
@@ -1384,37 +1751,135 @@ section: components
1384
1751
  </span>
1385
1752
  <div class="pf-v5-c-masthead__main">
1386
1753
  <a class="pf-v5-c-masthead__brand" href="#">
1387
- <img
1388
- class="pf-v5-c-brand"
1389
- src="/assets/images/pf-logo.svg"
1390
- alt="PatternFly logo"
1391
- style="--pf-v5-c-brand--Height:36px"
1392
- />
1754
+ <svg height="40px" viewBox="0 0 679 158">
1755
+ <title>PF-HorizontalLogo-Color</title>
1756
+ <defs>
1757
+ <linearGradient
1758
+ x1="68%"
1759
+ y1="2.25860997e-13%"
1760
+ x2="32%"
1761
+ y2="100%"
1762
+ id="linearGradient-nav-horizontal-example-masthead"
1763
+ >
1764
+ <stop stop-color="#2B9AF3" offset="0%" />
1765
+ <stop
1766
+ stop-color="#73BCF7"
1767
+ stop-opacity="0.502212631"
1768
+ offset="100%"
1769
+ />
1770
+ </linearGradient>
1771
+ </defs>
1772
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1773
+ <g
1774
+ transform="translate(206.000000, 45.750000)"
1775
+ fill="var(--pf-t--global--text--color--regular)"
1776
+ fill-rule="nonzero"
1777
+ >
1778
+ <path
1779
+ 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"
1780
+ />
1781
+ <path
1782
+ 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"
1783
+ />
1784
+ <path
1785
+ 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"
1786
+ />
1787
+ <path
1788
+ 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"
1789
+ />
1790
+ <path
1791
+ 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"
1792
+ />
1793
+ <path
1794
+ 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"
1795
+ />
1796
+ <path
1797
+ 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"
1798
+ />
1799
+ <polygon
1800
+ 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"
1801
+ />
1802
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1803
+ <path
1804
+ 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"
1805
+ />
1806
+ </g>
1807
+ <g transform="translate(0.000000, 0.000000)">
1808
+ <path
1809
+ 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"
1810
+ fill="#0066CC"
1811
+ />
1812
+ <path
1813
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1814
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1815
+ />
1816
+ <path
1817
+ 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"
1818
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1819
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1820
+ />
1821
+ </g>
1822
+ </g>
1823
+ </svg>
1393
1824
  </a>
1394
1825
  </div>
1395
1826
  <div class="pf-v5-c-masthead__content">
1396
1827
  <div
1397
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1828
+ class="pf-v5-c-toolbar pf-m-static"
1398
1829
  id="nav-horizontal-example-masthead-toolbar"
1399
1830
  >
1400
1831
  <div class="pf-v5-c-toolbar__content">
1401
1832
  <div class="pf-v5-c-toolbar__content-section">
1833
+ <div class="pf-v5-c-toolbar__item">
1834
+ <button
1835
+ class="pf-v5-c-menu-toggle"
1836
+ type="button"
1837
+ aria-expanded="false"
1838
+ >
1839
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1840
+ <span class="pf-v5-c-menu-toggle__controls">
1841
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1842
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1843
+ </span>
1844
+ </span>
1845
+ </button>
1846
+ </div>
1847
+
1848
+ <div class="pf-v5-c-toolbar__item">
1849
+ <button
1850
+ class="pf-v5-c-menu-toggle"
1851
+ type="button"
1852
+ aria-expanded="false"
1853
+ >
1854
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1855
+ <span class="pf-v5-c-menu-toggle__controls">
1856
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1857
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1858
+ </span>
1859
+ </span>
1860
+ </button>
1861
+ </div>
1862
+
1402
1863
  <div
1403
1864
  class="pf-v5-c-toolbar__item pf-m-overflow-container"
1404
1865
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
1405
1866
  >
1406
1867
  <nav
1407
- class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable"
1408
- id="-horizontal-nav"
1868
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
1869
+ id="nav-horizontal-example-masthead-horizontal-nav"
1409
1870
  aria-label="Global"
1410
1871
  >
1411
- <button
1412
- class="pf-v5-c-nav__scroll-button"
1413
- disabled
1414
- aria-label="Scroll left"
1415
- >
1416
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1417
- </button>
1872
+ <div class="pf-v5-c-nav__scroll-button">
1873
+ <button
1874
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1875
+ type="button"
1876
+ aria-label="Scroll start"
1877
+ >
1878
+ <span class="pf-v5-c-button__icon">
1879
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1880
+ </span>
1881
+ </button>
1882
+ </div>
1418
1883
  <ul class="pf-v5-c-nav__list" role="list">
1419
1884
  <li class="pf-v5-c-nav__item">
1420
1885
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -1436,16 +1901,21 @@ section: components
1436
1901
  >Horizontal nav item 5</a>
1437
1902
  </li>
1438
1903
  </ul>
1439
- <button
1440
- class="pf-v5-c-nav__scroll-button"
1441
- aria-label="Scroll right"
1442
- >
1443
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1444
- </button>
1904
+ <div class="pf-v5-c-nav__scroll-button">
1905
+ <button
1906
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1907
+ type="button"
1908
+ aria-label="Scroll end"
1909
+ >
1910
+ <span class="pf-v5-c-button__icon">
1911
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1912
+ </span>
1913
+ </button>
1914
+ </div>
1445
1915
  </nav>
1446
1916
  </div>
1447
1917
  <div
1448
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1918
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1449
1919
  >
1450
1920
  <div
1451
1921
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1492,27 +1962,6 @@ section: components
1492
1962
  </button>
1493
1963
  </div>
1494
1964
  </div>
1495
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1496
- <button
1497
- class="pf-v5-c-menu-toggle pf-m-full-height"
1498
- type="button"
1499
- aria-expanded="false"
1500
- >
1501
- <span class="pf-v5-c-menu-toggle__icon">
1502
- <img
1503
- class="pf-v5-c-avatar"
1504
- alt="Avatar image"
1505
- src="/assets/images/img_avatar-light.svg"
1506
- />
1507
- </span>
1508
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1509
- <span class="pf-v5-c-menu-toggle__controls">
1510
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1511
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1512
- </span>
1513
- </span>
1514
- </button>
1515
- </div>
1516
1965
  </div>
1517
1966
  </div>
1518
1967
  </div>
@@ -1523,19 +1972,23 @@ section: components
1523
1972
  tabindex="-1"
1524
1973
  id="main-content-nav-horizontal-example"
1525
1974
  >
1526
- <section class="pf-v5-c-page__main-subnav pf-m-limit-width">
1975
+ <section class="pf-v5-c-page__main-nav pf-m-limit-width">
1527
1976
  <div class="pf-v5-c-page__main-body">
1528
1977
  <nav
1529
- class="pf-v5-c-nav pf-m-horizontal-subnav pf-m-scrollable"
1978
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
1530
1979
  aria-label="Local"
1531
1980
  >
1532
- <button
1533
- class="pf-v5-c-nav__scroll-button"
1534
- disabled
1535
- aria-label="Scroll left"
1536
- >
1537
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1538
- </button>
1981
+ <div class="pf-v5-c-nav__scroll-button">
1982
+ <button
1983
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1984
+ type="button"
1985
+ aria-label="Scroll start"
1986
+ >
1987
+ <span class="pf-v5-c-button__icon">
1988
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1989
+ </span>
1990
+ </button>
1991
+ </div>
1539
1992
  <ul class="pf-v5-c-nav__list" role="list">
1540
1993
  <li class="pf-v5-c-nav__item">
1541
1994
  <a
@@ -1557,684 +2010,20 @@ section: components
1557
2010
  <a href="#" class="pf-v5-c-nav__link">Horizontal subnav item 5</a>
1558
2011
  </li>
1559
2012
  </ul>
1560
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
1561
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1562
- </button>
1563
- </nav>
1564
- </div>
1565
- </section>
1566
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1567
- <div class="pf-v5-c-page__main-body">
1568
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1569
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1570
- <li class="pf-v5-c-breadcrumb__item">
1571
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1572
- </li>
1573
- <li class="pf-v5-c-breadcrumb__item">
1574
- <span class="pf-v5-c-breadcrumb__item-divider">
1575
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1576
- </span>
1577
-
1578
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1579
- </li>
1580
- <li class="pf-v5-c-breadcrumb__item">
1581
- <span class="pf-v5-c-breadcrumb__item-divider">
1582
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1583
- </span>
1584
-
1585
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1586
- </li>
1587
- <li class="pf-v5-c-breadcrumb__item">
1588
- <span class="pf-v5-c-breadcrumb__item-divider">
2013
+ <div class="pf-v5-c-nav__scroll-button">
2014
+ <button
2015
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
2016
+ type="button"
2017
+ aria-label="Scroll end"
2018
+ >
2019
+ <span class="pf-v5-c-button__icon">
1589
2020
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1590
2021
  </span>
1591
-
1592
- <a
1593
- href="#"
1594
- class="pf-v5-c-breadcrumb__link pf-m-current"
1595
- aria-current="page"
1596
- >Section landing</a>
1597
- </li>
1598
- </ol>
1599
- </nav>
1600
- </div>
1601
- </section>
1602
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1603
- <div class="pf-v5-c-page__main-body">
1604
- <div class="pf-v5-c-content">
1605
- <h1>Main title</h1>
1606
- <p>This is a full page demo.</p>
1607
- </div>
1608
- </div>
1609
- </section>
1610
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
1611
- <div class="pf-v5-c-page__main-body">
1612
- <div class="pf-v5-l-gallery pf-m-gutter">
1613
- <div class="pf-v5-c-card">
1614
- <div class="pf-v5-c-card__body">This is a card</div>
1615
- </div>
1616
- <div class="pf-v5-c-card">
1617
- <div class="pf-v5-c-card__body">This is a card</div>
1618
- </div>
1619
- <div class="pf-v5-c-card">
1620
- <div class="pf-v5-c-card__body">This is a card</div>
1621
- </div>
1622
- <div class="pf-v5-c-card">
1623
- <div class="pf-v5-c-card__body">This is a card</div>
1624
- </div>
1625
- <div class="pf-v5-c-card">
1626
- <div class="pf-v5-c-card__body">This is a card</div>
1627
- </div>
1628
- <div class="pf-v5-c-card">
1629
- <div class="pf-v5-c-card__body">This is a card</div>
1630
- </div>
1631
- <div class="pf-v5-c-card">
1632
- <div class="pf-v5-c-card__body">This is a card</div>
1633
- </div>
1634
- <div class="pf-v5-c-card">
1635
- <div class="pf-v5-c-card__body">This is a card</div>
1636
- </div>
1637
- <div class="pf-v5-c-card">
1638
- <div class="pf-v5-c-card__body">This is a card</div>
1639
- </div>
1640
- <div class="pf-v5-c-card">
1641
- <div class="pf-v5-c-card__body">This is a card</div>
2022
+ </button>
1642
2023
  </div>
1643
- </div>
2024
+ </nav>
1644
2025
  </div>
1645
2026
  </section>
1646
- </main>
1647
- </div>
1648
-
1649
- ```
1650
-
1651
- ### Tertiary nav
1652
-
1653
- ```html isFullscreen isDeprecated
1654
- <div class="pf-v5-c-page" id="nav-legacy-teriary-example">
1655
- <div class="pf-v5-c-skip-to-content">
1656
- <a
1657
- class="pf-v5-c-button pf-m-primary"
1658
- href="#main-content-nav-legacy-teriary-example"
1659
- >Skip to content</a>
1660
- </div>
1661
- <header class="pf-v5-c-masthead" id="nav-legacy-teriary-example-masthead">
1662
- <span class="pf-v5-c-masthead__toggle">
1663
- <button
1664
- class="pf-v5-c-button pf-m-plain"
1665
- type="button"
1666
- aria-label="Global navigation"
1667
- >
1668
- <i class="fas fa-bars" aria-hidden="true"></i>
1669
- </button>
1670
- </span>
1671
- <div class="pf-v5-c-masthead__main">
1672
- <a class="pf-v5-c-masthead__brand" href="#">
1673
- <img
1674
- class="pf-v5-c-brand"
1675
- src="/assets/images/pf-logo.svg"
1676
- alt="PatternFly logo"
1677
- style="--pf-v5-c-brand--Height:36px"
1678
- />
1679
- </a>
1680
- </div>
1681
- <div class="pf-v5-c-masthead__content">
1682
- <div
1683
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1684
- id="nav-legacy-teriary-example-masthead-toolbar"
1685
- >
1686
- <div class="pf-v5-c-toolbar__content">
1687
- <div class="pf-v5-c-toolbar__content-section">
1688
- <div
1689
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1690
- >
1691
- <div
1692
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1693
- >
1694
- <div class="pf-v5-c-toolbar__item">
1695
- <button
1696
- class="pf-v5-c-menu-toggle pf-m-plain"
1697
- type="button"
1698
- aria-expanded="false"
1699
- aria-label="Application launcher"
1700
- >
1701
- <i class="fas fa-th" aria-hidden="true"></i>
1702
- </button>
1703
- </div>
1704
- <div class="pf-v5-c-toolbar__item">
1705
- <button
1706
- class="pf-v5-c-menu-toggle pf-m-plain"
1707
- type="button"
1708
- aria-expanded="false"
1709
- aria-label="Settings"
1710
- >
1711
- <i class="fas fa-cog" aria-hidden="true"></i>
1712
- </button>
1713
- </div>
1714
- <div class="pf-v5-c-toolbar__item">
1715
- <button
1716
- class="pf-v5-c-menu-toggle pf-m-plain"
1717
- type="button"
1718
- aria-expanded="false"
1719
- aria-label="Help"
1720
- >
1721
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1722
- </button>
1723
- </div>
1724
- </div>
1725
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1726
- <button
1727
- class="pf-v5-c-menu-toggle pf-m-plain"
1728
- type="button"
1729
- aria-expanded="false"
1730
- aria-label="Actions"
1731
- >
1732
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1733
- </button>
1734
- </div>
1735
- </div>
1736
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1737
- <button
1738
- class="pf-v5-c-menu-toggle pf-m-full-height"
1739
- type="button"
1740
- aria-expanded="false"
1741
- >
1742
- <span class="pf-v5-c-menu-toggle__icon">
1743
- <img
1744
- class="pf-v5-c-avatar"
1745
- alt="Avatar image"
1746
- src="/assets/images/img_avatar-light.svg"
1747
- />
1748
- </span>
1749
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1750
- <span class="pf-v5-c-menu-toggle__controls">
1751
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1752
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1753
- </span>
1754
- </span>
1755
- </button>
1756
- </div>
1757
- </div>
1758
- </div>
1759
- </div>
1760
- </div>
1761
- </header>
1762
- <div class="pf-v5-c-page__sidebar">
1763
- <div class="pf-v5-c-page__sidebar-body">
1764
- <nav
1765
- class="pf-v5-c-nav"
1766
- id="nav-legacy-teriary-example-expandable-nav"
1767
- aria-label="Global"
1768
- >
1769
- <ul class="pf-v5-c-nav__list" role="list">
1770
- <li
1771
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
1772
- >
1773
- <button
1774
- class="pf-v5-c-nav__link"
1775
- id="nav-legacy-teriary-example-expandable-nav-link1"
1776
- aria-expanded="true"
1777
- >
1778
- System panel
1779
- <span class="pf-v5-c-nav__toggle">
1780
- <span class="pf-v5-c-nav__toggle-icon">
1781
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1782
- </span>
1783
- </span>
1784
- </button>
1785
- <section
1786
- class="pf-v5-c-nav__subnav"
1787
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
1788
- >
1789
- <ul class="pf-v5-c-nav__list" role="list">
1790
- <li class="pf-v5-c-nav__item">
1791
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
1792
- </li>
1793
- <li class="pf-v5-c-nav__item">
1794
- <a
1795
- href="#"
1796
- class="pf-v5-c-nav__link pf-m-current"
1797
- aria-current="page"
1798
- >Resource usage</a>
1799
- </li>
1800
- <li class="pf-v5-c-nav__item">
1801
- <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
1802
- </li>
1803
- <li class="pf-v5-c-divider" role="separator"></li>
1804
-
1805
- <li class="pf-v5-c-nav__item">
1806
- <a href="#" class="pf-v5-c-nav__link">Instances</a>
1807
- </li>
1808
- <li class="pf-v5-c-nav__item">
1809
- <a href="#" class="pf-v5-c-nav__link">Volumes</a>
1810
- </li>
1811
- <li class="pf-v5-c-nav__item">
1812
- <a href="#" class="pf-v5-c-nav__link">Networks</a>
1813
- </li>
1814
- </ul>
1815
- </section>
1816
- </li>
1817
- <li class="pf-v5-c-nav__item pf-m-expandable">
1818
- <button
1819
- class="pf-v5-c-nav__link"
1820
- id="nav-legacy-teriary-example-expandable-nav-link2"
1821
- aria-expanded="false"
1822
- >
1823
- Policy
1824
- <span class="pf-v5-c-nav__toggle">
1825
- <span class="pf-v5-c-nav__toggle-icon">
1826
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1827
- </span>
1828
- </span>
1829
- </button>
1830
- <section
1831
- class="pf-v5-c-nav__subnav"
1832
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
1833
- hidden
1834
- >
1835
- <ul class="pf-v5-c-nav__list" role="list">
1836
- <li class="pf-v5-c-nav__item">
1837
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
1838
- </li>
1839
- <li class="pf-v5-c-nav__item">
1840
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
1841
- </li>
1842
- </ul>
1843
- </section>
1844
- </li>
1845
- <li class="pf-v5-c-nav__item pf-m-expandable">
1846
- <button
1847
- class="pf-v5-c-nav__link"
1848
- id="nav-legacy-teriary-example-expandable-nav-link3"
1849
- aria-expanded="false"
1850
- >
1851
- Authentication
1852
- <span class="pf-v5-c-nav__toggle">
1853
- <span class="pf-v5-c-nav__toggle-icon">
1854
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1855
- </span>
1856
- </span>
1857
- </button>
1858
- <section
1859
- class="pf-v5-c-nav__subnav"
1860
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
1861
- hidden
1862
- >
1863
- <ul class="pf-v5-c-nav__list" role="list">
1864
- <li class="pf-v5-c-nav__item">
1865
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
1866
- </li>
1867
- <li class="pf-v5-c-nav__item">
1868
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
1869
- </li>
1870
- </ul>
1871
- </section>
1872
- </li>
1873
- </ul>
1874
- </nav>
1875
- </div>
1876
- </div>
1877
- <main
1878
- class="pf-v5-c-page__main"
1879
- tabindex="-1"
1880
- id="main-content-nav-legacy-teriary-example"
1881
- >
1882
- <section class="pf-v5-c-page__main-nav pf-m-limit-width">
1883
- <div class="pf-v5-c-page__main-body">
1884
- <nav
1885
- class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary pf-m-scrollable"
1886
- aria-label="Local"
1887
- >
1888
- <button
1889
- class="pf-v5-c-nav__scroll-button"
1890
- disabled
1891
- aria-label="Scroll left"
1892
- >
1893
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1894
- </button>
1895
- <ul class="pf-v5-c-nav__list" role="list">
1896
- <li class="pf-v5-c-nav__item">
1897
- <a
1898
- href="#"
1899
- class="pf-v5-c-nav__link pf-m-current"
1900
- aria-current="page"
1901
- >Tertiary nav item 1</a>
1902
- </li>
1903
- <li class="pf-v5-c-nav__item">
1904
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 2</a>
1905
- </li>
1906
- <li class="pf-v5-c-nav__item">
1907
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 3</a>
1908
- </li>
1909
- <li class="pf-v5-c-nav__item">
1910
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 4</a>
1911
- </li>
1912
- <li class="pf-v5-c-nav__item">
1913
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 5</a>
1914
- </li>
1915
- </ul>
1916
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
1917
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1918
- </button>
1919
- </nav>
1920
- </div>
1921
- </section>
1922
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1923
- <div class="pf-v5-c-page__main-body">
1924
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1925
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1926
- <li class="pf-v5-c-breadcrumb__item">
1927
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1928
- </li>
1929
- <li class="pf-v5-c-breadcrumb__item">
1930
- <span class="pf-v5-c-breadcrumb__item-divider">
1931
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1932
- </span>
1933
-
1934
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1935
- </li>
1936
- <li class="pf-v5-c-breadcrumb__item">
1937
- <span class="pf-v5-c-breadcrumb__item-divider">
1938
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1939
- </span>
1940
-
1941
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1942
- </li>
1943
- <li class="pf-v5-c-breadcrumb__item">
1944
- <span class="pf-v5-c-breadcrumb__item-divider">
1945
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1946
- </span>
1947
-
1948
- <a
1949
- href="#"
1950
- class="pf-v5-c-breadcrumb__link pf-m-current"
1951
- aria-current="page"
1952
- >Section landing</a>
1953
- </li>
1954
- </ol>
1955
- </nav>
1956
- </div>
1957
- </section>
1958
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1959
- <div class="pf-v5-c-page__main-body">
1960
- <div class="pf-v5-c-content">
1961
- <h1>Main title</h1>
1962
- <p>This is a full page demo.</p>
1963
- </div>
1964
- </div>
1965
- </section>
1966
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
1967
- <div class="pf-v5-c-page__main-body">
1968
- <div class="pf-v5-l-gallery pf-m-gutter">
1969
- <div class="pf-v5-c-card">
1970
- <div class="pf-v5-c-card__body">This is a card</div>
1971
- </div>
1972
- <div class="pf-v5-c-card">
1973
- <div class="pf-v5-c-card__body">This is a card</div>
1974
- </div>
1975
- <div class="pf-v5-c-card">
1976
- <div class="pf-v5-c-card__body">This is a card</div>
1977
- </div>
1978
- <div class="pf-v5-c-card">
1979
- <div class="pf-v5-c-card__body">This is a card</div>
1980
- </div>
1981
- <div class="pf-v5-c-card">
1982
- <div class="pf-v5-c-card__body">This is a card</div>
1983
- </div>
1984
- <div class="pf-v5-c-card">
1985
- <div class="pf-v5-c-card__body">This is a card</div>
1986
- </div>
1987
- <div class="pf-v5-c-card">
1988
- <div class="pf-v5-c-card__body">This is a card</div>
1989
- </div>
1990
- <div class="pf-v5-c-card">
1991
- <div class="pf-v5-c-card__body">This is a card</div>
1992
- </div>
1993
- <div class="pf-v5-c-card">
1994
- <div class="pf-v5-c-card__body">This is a card</div>
1995
- </div>
1996
- <div class="pf-v5-c-card">
1997
- <div class="pf-v5-c-card__body">This is a card</div>
1998
- </div>
1999
- </div>
2000
- </div>
2001
- </section>
2002
- </main>
2003
- </div>
2004
-
2005
- ```
2006
-
2007
- ### Light theme sidebar and nav
2008
-
2009
- ```html isFullscreen isDeprecated
2010
- <div class="pf-v5-c-page" id="nav-light-theme-example">
2011
- <div class="pf-v5-c-skip-to-content">
2012
- <a
2013
- class="pf-v5-c-button pf-m-primary"
2014
- href="#main-content-nav-light-theme-example"
2015
- >Skip to content</a>
2016
- </div>
2017
- <header class="pf-v5-c-masthead" id="nav-light-theme-example-masthead">
2018
- <span class="pf-v5-c-masthead__toggle">
2019
- <button
2020
- class="pf-v5-c-button pf-m-plain"
2021
- type="button"
2022
- aria-label="Global navigation"
2023
- >
2024
- <i class="fas fa-bars" aria-hidden="true"></i>
2025
- </button>
2026
- </span>
2027
- <div class="pf-v5-c-masthead__main">
2028
- <a class="pf-v5-c-masthead__brand" href="#">
2029
- <img
2030
- class="pf-v5-c-brand"
2031
- src="/assets/images/pf-logo.svg"
2032
- alt="PatternFly logo"
2033
- style="--pf-v5-c-brand--Height:36px"
2034
- />
2035
- </a>
2036
- </div>
2037
- <div class="pf-v5-c-masthead__content">
2038
- <div
2039
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2040
- id="nav-light-theme-example-masthead-toolbar"
2041
- >
2042
- <div class="pf-v5-c-toolbar__content">
2043
- <div class="pf-v5-c-toolbar__content-section">
2044
- <div
2045
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2046
- >
2047
- <div
2048
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2049
- >
2050
- <div class="pf-v5-c-toolbar__item">
2051
- <button
2052
- class="pf-v5-c-menu-toggle pf-m-plain"
2053
- type="button"
2054
- aria-expanded="false"
2055
- aria-label="Application launcher"
2056
- >
2057
- <i class="fas fa-th" aria-hidden="true"></i>
2058
- </button>
2059
- </div>
2060
- <div class="pf-v5-c-toolbar__item">
2061
- <button
2062
- class="pf-v5-c-menu-toggle pf-m-plain"
2063
- type="button"
2064
- aria-expanded="false"
2065
- aria-label="Settings"
2066
- >
2067
- <i class="fas fa-cog" aria-hidden="true"></i>
2068
- </button>
2069
- </div>
2070
- <div class="pf-v5-c-toolbar__item">
2071
- <button
2072
- class="pf-v5-c-menu-toggle pf-m-plain"
2073
- type="button"
2074
- aria-expanded="false"
2075
- aria-label="Help"
2076
- >
2077
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2078
- </button>
2079
- </div>
2080
- </div>
2081
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2082
- <button
2083
- class="pf-v5-c-menu-toggle pf-m-plain"
2084
- type="button"
2085
- aria-expanded="false"
2086
- aria-label="Actions"
2087
- >
2088
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2089
- </button>
2090
- </div>
2091
- </div>
2092
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2093
- <button
2094
- class="pf-v5-c-menu-toggle pf-m-full-height"
2095
- type="button"
2096
- aria-expanded="false"
2097
- >
2098
- <span class="pf-v5-c-menu-toggle__icon">
2099
- <img
2100
- class="pf-v5-c-avatar"
2101
- alt="Avatar image"
2102
- src="/assets/images/img_avatar-light.svg"
2103
- />
2104
- </span>
2105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2106
- <span class="pf-v5-c-menu-toggle__controls">
2107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2108
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2109
- </span>
2110
- </span>
2111
- </button>
2112
- </div>
2113
- </div>
2114
- </div>
2115
- </div>
2116
- </div>
2117
- </header>
2118
- <div class="pf-v5-c-page__sidebar pf-m-light">
2119
- <div class="pf-v5-c-page__sidebar-body">
2120
- <nav
2121
- class="pf-v5-c-nav pf-m-light"
2122
- id="nav-light-theme-example-expandable-nav"
2123
- aria-label="Global"
2124
- >
2125
- <ul class="pf-v5-c-nav__list" role="list">
2126
- <li
2127
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
2128
- >
2129
- <button
2130
- class="pf-v5-c-nav__link"
2131
- id="nav-light-theme-example-expandable-nav-link1"
2132
- aria-expanded="true"
2133
- >
2134
- System panel
2135
- <span class="pf-v5-c-nav__toggle">
2136
- <span class="pf-v5-c-nav__toggle-icon">
2137
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2138
- </span>
2139
- </span>
2140
- </button>
2141
- <section
2142
- class="pf-v5-c-nav__subnav"
2143
- aria-labelledby="nav-light-theme-example-expandable-nav-link1"
2144
- >
2145
- <ul class="pf-v5-c-nav__list" role="list">
2146
- <li class="pf-v5-c-nav__item">
2147
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
2148
- </li>
2149
- <li class="pf-v5-c-nav__item">
2150
- <a
2151
- href="#"
2152
- class="pf-v5-c-nav__link pf-m-current"
2153
- aria-current="page"
2154
- >Resource usage</a>
2155
- </li>
2156
- <li class="pf-v5-c-nav__item">
2157
- <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
2158
- </li>
2159
- <li class="pf-v5-c-divider" role="separator"></li>
2160
-
2161
- <li class="pf-v5-c-nav__item">
2162
- <a href="#" class="pf-v5-c-nav__link">Instances</a>
2163
- </li>
2164
- <li class="pf-v5-c-nav__item">
2165
- <a href="#" class="pf-v5-c-nav__link">Volumes</a>
2166
- </li>
2167
- <li class="pf-v5-c-nav__item">
2168
- <a href="#" class="pf-v5-c-nav__link">Networks</a>
2169
- </li>
2170
- </ul>
2171
- </section>
2172
- </li>
2173
- <li class="pf-v5-c-nav__item pf-m-expandable">
2174
- <button
2175
- class="pf-v5-c-nav__link"
2176
- id="nav-light-theme-example-expandable-nav-link2"
2177
- aria-expanded="false"
2178
- >
2179
- Policy
2180
- <span class="pf-v5-c-nav__toggle">
2181
- <span class="pf-v5-c-nav__toggle-icon">
2182
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2183
- </span>
2184
- </span>
2185
- </button>
2186
- <section
2187
- class="pf-v5-c-nav__subnav"
2188
- aria-labelledby="nav-light-theme-example-expandable-nav-link2"
2189
- hidden
2190
- >
2191
- <ul class="pf-v5-c-nav__list" role="list">
2192
- <li class="pf-v5-c-nav__item">
2193
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2194
- </li>
2195
- <li class="pf-v5-c-nav__item">
2196
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
2197
- </li>
2198
- </ul>
2199
- </section>
2200
- </li>
2201
- <li class="pf-v5-c-nav__item pf-m-expandable">
2202
- <button
2203
- class="pf-v5-c-nav__link"
2204
- id="nav-light-theme-example-expandable-nav-link3"
2205
- aria-expanded="false"
2206
- >
2207
- Authentication
2208
- <span class="pf-v5-c-nav__toggle">
2209
- <span class="pf-v5-c-nav__toggle-icon">
2210
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2211
- </span>
2212
- </span>
2213
- </button>
2214
- <section
2215
- class="pf-v5-c-nav__subnav"
2216
- aria-labelledby="nav-light-theme-example-expandable-nav-link3"
2217
- hidden
2218
- >
2219
- <ul class="pf-v5-c-nav__list" role="list">
2220
- <li class="pf-v5-c-nav__item">
2221
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2222
- </li>
2223
- <li class="pf-v5-c-nav__item">
2224
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
2225
- </li>
2226
- </ul>
2227
- </section>
2228
- </li>
2229
- </ul>
2230
- </nav>
2231
- </div>
2232
- </div>
2233
- <main
2234
- class="pf-v5-c-page__main"
2235
- tabindex="-1"
2236
- id="main-content-nav-light-theme-example"
2237
- >
2238
2027
  <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
2239
2028
  <div class="pf-v5-c-page__main-body">
2240
2029
  <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">