@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

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 (341) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +66 -116
  92. package/components/Form/form.scss +63 -128
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/demos/Page/examples/Page.md CHANGED
@@ -26,23 +26,117 @@ wrapperTag: div
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <img
30
- class="pf-v5-c-brand"
31
- src="/assets/images/pf-logo.svg"
32
- alt="PatternFly logo"
33
- style="--pf-v5-c-brand--Height:36px"
34
- />
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
31
+ <defs>
32
+ <linearGradient
33
+ x1="68%"
34
+ y1="2.25860997e-13%"
35
+ x2="32%"
36
+ y2="100%"
37
+ id="linearGradient-page-demo-basic-masthead"
38
+ >
39
+ <stop stop-color="#2B9AF3" offset="0%" />
40
+ <stop
41
+ stop-color="#73BCF7"
42
+ stop-opacity="0.502212631"
43
+ offset="100%"
44
+ />
45
+ </linearGradient>
46
+ </defs>
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
48
+ <g
49
+ transform="translate(206.000000, 45.750000)"
50
+ fill="var(--pf-t--global--text--color--regular)"
51
+ fill-rule="nonzero"
52
+ >
53
+ <path
54
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
55
+ />
56
+ <path
57
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
58
+ />
59
+ <path
60
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
61
+ />
62
+ <path
63
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
64
+ />
65
+ <path
66
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
67
+ />
68
+ <path
69
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
70
+ />
71
+ <path
72
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
73
+ />
74
+ <polygon
75
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
76
+ />
77
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
78
+ <path
79
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
80
+ />
81
+ </g>
82
+ <g transform="translate(0.000000, 0.000000)">
83
+ <path
84
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
85
+ fill="#0066CC"
86
+ />
87
+ <path
88
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
89
+ fill="url(#linearGradient-page-demo-basic-masthead)"
90
+ />
91
+ <path
92
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
93
+ fill="url(#linearGradient-page-demo-basic-masthead)"
94
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
95
+ />
96
+ </g>
97
+ </g>
98
+ </svg>
35
99
  </a>
36
100
  </div>
37
101
  <div class="pf-v5-c-masthead__content">
38
102
  <div
39
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
103
+ class="pf-v5-c-toolbar pf-m-static"
40
104
  id="page-demo-basic-masthead-toolbar"
41
105
  >
42
106
  <div class="pf-v5-c-toolbar__content">
43
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
44
138
  <div
45
- 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"
139
+ 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"
46
140
  >
47
141
  <div
48
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -54,7 +148,9 @@ wrapperTag: div
54
148
  aria-expanded="false"
55
149
  aria-label="Application launcher"
56
150
  >
57
- <i class="fas fa-th" aria-hidden="true"></i>
151
+ <span class="pf-v5-c-menu-toggle__icon">
152
+ <i class="fas fa-th" aria-hidden="true"></i>
153
+ </span>
58
154
  </button>
59
155
  </div>
60
156
  <div class="pf-v5-c-toolbar__item">
@@ -64,7 +160,9 @@ wrapperTag: div
64
160
  aria-expanded="false"
65
161
  aria-label="Settings"
66
162
  >
67
- <i class="fas fa-cog" aria-hidden="true"></i>
163
+ <span class="pf-v5-c-menu-toggle__icon">
164
+ <i class="fas fa-cog" aria-hidden="true"></i>
165
+ </span>
68
166
  </button>
69
167
  </div>
70
168
  <div class="pf-v5-c-toolbar__item">
@@ -74,7 +172,9 @@ wrapperTag: div
74
172
  aria-expanded="false"
75
173
  aria-label="Help"
76
174
  >
77
- <i class="fas fa-question-circle" aria-hidden="true"></i>
175
+ <span class="pf-v5-c-menu-toggle__icon">
176
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
177
+ </span>
78
178
  </button>
79
179
  </div>
80
180
  </div>
@@ -85,31 +185,12 @@ wrapperTag: div
85
185
  aria-expanded="false"
86
186
  aria-label="Actions"
87
187
  >
88
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
188
+ <span class="pf-v5-c-menu-toggle__icon">
189
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
190
+ </span>
89
191
  </button>
90
192
  </div>
91
193
  </div>
92
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
93
- <button
94
- class="pf-v5-c-menu-toggle pf-m-full-height"
95
- type="button"
96
- aria-expanded="false"
97
- >
98
- <span class="pf-v5-c-menu-toggle__icon">
99
- <img
100
- class="pf-v5-c-avatar"
101
- alt="Avatar image"
102
- src="/assets/images/img_avatar-light.svg"
103
- />
104
- </span>
105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
106
- <span class="pf-v5-c-menu-toggle__controls">
107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
108
- <i class="fas fa-angle-down" aria-hidden="true"></i>
109
- </span>
110
- </span>
111
- </button>
112
- </div>
113
194
  </div>
114
195
  </div>
115
196
  </div>
@@ -261,23 +342,117 @@ wrapperTag: div
261
342
  </span>
262
343
  <div class="pf-v5-c-masthead__main">
263
344
  <a class="pf-v5-c-masthead__brand" href="#">
264
- <img
265
- class="pf-v5-c-brand"
266
- src="/assets/images/pf-logo.svg"
267
- alt="PatternFly logo"
268
- style="--pf-v5-c-brand--Height:36px"
269
- />
345
+ <svg height="40px" viewBox="0 0 679 158">
346
+ <title>PF-HorizontalLogo-Color</title>
347
+ <defs>
348
+ <linearGradient
349
+ x1="68%"
350
+ y1="2.25860997e-13%"
351
+ x2="32%"
352
+ y2="100%"
353
+ id="linearGradient-multiple-sidebar-body-elements-demo-masthead"
354
+ >
355
+ <stop stop-color="#2B9AF3" offset="0%" />
356
+ <stop
357
+ stop-color="#73BCF7"
358
+ stop-opacity="0.502212631"
359
+ offset="100%"
360
+ />
361
+ </linearGradient>
362
+ </defs>
363
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
364
+ <g
365
+ transform="translate(206.000000, 45.750000)"
366
+ fill="var(--pf-t--global--text--color--regular)"
367
+ fill-rule="nonzero"
368
+ >
369
+ <path
370
+ 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"
371
+ />
372
+ <path
373
+ 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"
374
+ />
375
+ <path
376
+ 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"
377
+ />
378
+ <path
379
+ 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"
380
+ />
381
+ <path
382
+ 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"
383
+ />
384
+ <path
385
+ 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"
386
+ />
387
+ <path
388
+ 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"
389
+ />
390
+ <polygon
391
+ 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"
392
+ />
393
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
394
+ <path
395
+ 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"
396
+ />
397
+ </g>
398
+ <g transform="translate(0.000000, 0.000000)">
399
+ <path
400
+ 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"
401
+ fill="#0066CC"
402
+ />
403
+ <path
404
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
405
+ fill="url(#linearGradient-multiple-sidebar-body-elements-demo-masthead)"
406
+ />
407
+ <path
408
+ 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"
409
+ fill="url(#linearGradient-multiple-sidebar-body-elements-demo-masthead)"
410
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
411
+ />
412
+ </g>
413
+ </g>
414
+ </svg>
270
415
  </a>
271
416
  </div>
272
417
  <div class="pf-v5-c-masthead__content">
273
418
  <div
274
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
419
+ class="pf-v5-c-toolbar pf-m-static"
275
420
  id="multiple-sidebar-body-elements-demo-masthead-toolbar"
276
421
  >
277
422
  <div class="pf-v5-c-toolbar__content">
278
423
  <div class="pf-v5-c-toolbar__content-section">
424
+ <div class="pf-v5-c-toolbar__item">
425
+ <button
426
+ class="pf-v5-c-menu-toggle"
427
+ type="button"
428
+ aria-expanded="false"
429
+ >
430
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
431
+ <span class="pf-v5-c-menu-toggle__controls">
432
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
433
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
434
+ </span>
435
+ </span>
436
+ </button>
437
+ </div>
438
+
439
+ <div class="pf-v5-c-toolbar__item">
440
+ <button
441
+ class="pf-v5-c-menu-toggle"
442
+ type="button"
443
+ aria-expanded="false"
444
+ >
445
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
446
+ <span class="pf-v5-c-menu-toggle__controls">
447
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
448
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
449
+ </span>
450
+ </span>
451
+ </button>
452
+ </div>
453
+
279
454
  <div
280
- 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"
455
+ 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"
281
456
  >
282
457
  <div
283
458
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -289,7 +464,9 @@ wrapperTag: div
289
464
  aria-expanded="false"
290
465
  aria-label="Application launcher"
291
466
  >
292
- <i class="fas fa-th" aria-hidden="true"></i>
467
+ <span class="pf-v5-c-menu-toggle__icon">
468
+ <i class="fas fa-th" aria-hidden="true"></i>
469
+ </span>
293
470
  </button>
294
471
  </div>
295
472
  <div class="pf-v5-c-toolbar__item">
@@ -299,7 +476,9 @@ wrapperTag: div
299
476
  aria-expanded="false"
300
477
  aria-label="Settings"
301
478
  >
302
- <i class="fas fa-cog" aria-hidden="true"></i>
479
+ <span class="pf-v5-c-menu-toggle__icon">
480
+ <i class="fas fa-cog" aria-hidden="true"></i>
481
+ </span>
303
482
  </button>
304
483
  </div>
305
484
  <div class="pf-v5-c-toolbar__item">
@@ -309,7 +488,9 @@ wrapperTag: div
309
488
  aria-expanded="false"
310
489
  aria-label="Help"
311
490
  >
312
- <i class="fas fa-question-circle" aria-hidden="true"></i>
491
+ <span class="pf-v5-c-menu-toggle__icon">
492
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
493
+ </span>
313
494
  </button>
314
495
  </div>
315
496
  </div>
@@ -320,31 +501,12 @@ wrapperTag: div
320
501
  aria-expanded="false"
321
502
  aria-label="Actions"
322
503
  >
323
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
504
+ <span class="pf-v5-c-menu-toggle__icon">
505
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
506
+ </span>
324
507
  </button>
325
508
  </div>
326
509
  </div>
327
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
328
- <button
329
- class="pf-v5-c-menu-toggle pf-m-full-height"
330
- type="button"
331
- aria-expanded="false"
332
- >
333
- <span class="pf-v5-c-menu-toggle__icon">
334
- <img
335
- class="pf-v5-c-avatar"
336
- alt="Avatar image"
337
- src="/assets/images/img_avatar-light.svg"
338
- />
339
- </span>
340
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
341
- <span class="pf-v5-c-menu-toggle__controls">
342
- <span class="pf-v5-c-menu-toggle__toggle-icon">
343
- <i class="fas fa-angle-down" aria-hidden="true"></i>
344
- </span>
345
- </span>
346
- </button>
347
- </div>
348
510
  </div>
349
511
  </div>
350
512
  </div>
@@ -511,23 +673,117 @@ wrapperTag: div
511
673
  </span>
512
674
  <div class="pf-v5-c-masthead__main">
513
675
  <a class="pf-v5-c-masthead__brand" href="#">
514
- <img
515
- class="pf-v5-c-brand"
516
- src="/assets/images/pf-logo.svg"
517
- alt="PatternFly logo"
518
- style="--pf-v5-c-brand--Height:36px"
519
- />
676
+ <svg height="40px" viewBox="0 0 679 158">
677
+ <title>PF-HorizontalLogo-Color</title>
678
+ <defs>
679
+ <linearGradient
680
+ x1="68%"
681
+ y1="2.25860997e-13%"
682
+ x2="32%"
683
+ y2="100%"
684
+ id="linearGradient-page-demo-sticky-top-horizontal-subnav-masthead"
685
+ >
686
+ <stop stop-color="#2B9AF3" offset="0%" />
687
+ <stop
688
+ stop-color="#73BCF7"
689
+ stop-opacity="0.502212631"
690
+ offset="100%"
691
+ />
692
+ </linearGradient>
693
+ </defs>
694
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
695
+ <g
696
+ transform="translate(206.000000, 45.750000)"
697
+ fill="var(--pf-t--global--text--color--regular)"
698
+ fill-rule="nonzero"
699
+ >
700
+ <path
701
+ 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"
702
+ />
703
+ <path
704
+ 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"
705
+ />
706
+ <path
707
+ 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"
708
+ />
709
+ <path
710
+ 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"
711
+ />
712
+ <path
713
+ 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"
714
+ />
715
+ <path
716
+ 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"
717
+ />
718
+ <path
719
+ 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"
720
+ />
721
+ <polygon
722
+ 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"
723
+ />
724
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
725
+ <path
726
+ 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"
727
+ />
728
+ </g>
729
+ <g transform="translate(0.000000, 0.000000)">
730
+ <path
731
+ 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"
732
+ fill="#0066CC"
733
+ />
734
+ <path
735
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
736
+ fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-masthead)"
737
+ />
738
+ <path
739
+ 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"
740
+ fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-masthead)"
741
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
742
+ />
743
+ </g>
744
+ </g>
745
+ </svg>
520
746
  </a>
521
747
  </div>
522
748
  <div class="pf-v5-c-masthead__content">
523
749
  <div
524
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
750
+ class="pf-v5-c-toolbar pf-m-static"
525
751
  id="page-demo-sticky-top-horizontal-subnav-masthead-toolbar"
526
752
  >
527
753
  <div class="pf-v5-c-toolbar__content">
528
754
  <div class="pf-v5-c-toolbar__content-section">
755
+ <div class="pf-v5-c-toolbar__item">
756
+ <button
757
+ class="pf-v5-c-menu-toggle"
758
+ type="button"
759
+ aria-expanded="false"
760
+ >
761
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
762
+ <span class="pf-v5-c-menu-toggle__controls">
763
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
764
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
765
+ </span>
766
+ </span>
767
+ </button>
768
+ </div>
769
+
770
+ <div class="pf-v5-c-toolbar__item">
771
+ <button
772
+ class="pf-v5-c-menu-toggle"
773
+ type="button"
774
+ aria-expanded="false"
775
+ >
776
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
777
+ <span class="pf-v5-c-menu-toggle__controls">
778
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
779
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
780
+ </span>
781
+ </span>
782
+ </button>
783
+ </div>
784
+
529
785
  <div
530
- 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"
786
+ 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"
531
787
  >
532
788
  <div
533
789
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -539,7 +795,9 @@ wrapperTag: div
539
795
  aria-expanded="false"
540
796
  aria-label="Application launcher"
541
797
  >
542
- <i class="fas fa-th" aria-hidden="true"></i>
798
+ <span class="pf-v5-c-menu-toggle__icon">
799
+ <i class="fas fa-th" aria-hidden="true"></i>
800
+ </span>
543
801
  </button>
544
802
  </div>
545
803
  <div class="pf-v5-c-toolbar__item">
@@ -549,7 +807,9 @@ wrapperTag: div
549
807
  aria-expanded="false"
550
808
  aria-label="Settings"
551
809
  >
552
- <i class="fas fa-cog" aria-hidden="true"></i>
810
+ <span class="pf-v5-c-menu-toggle__icon">
811
+ <i class="fas fa-cog" aria-hidden="true"></i>
812
+ </span>
553
813
  </button>
554
814
  </div>
555
815
  <div class="pf-v5-c-toolbar__item">
@@ -559,7 +819,9 @@ wrapperTag: div
559
819
  aria-expanded="false"
560
820
  aria-label="Help"
561
821
  >
562
- <i class="fas fa-question-circle" aria-hidden="true"></i>
822
+ <span class="pf-v5-c-menu-toggle__icon">
823
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
824
+ </span>
563
825
  </button>
564
826
  </div>
565
827
  </div>
@@ -570,31 +832,12 @@ wrapperTag: div
570
832
  aria-expanded="false"
571
833
  aria-label="Actions"
572
834
  >
573
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
835
+ <span class="pf-v5-c-menu-toggle__icon">
836
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
837
+ </span>
574
838
  </button>
575
839
  </div>
576
840
  </div>
577
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
578
- <button
579
- class="pf-v5-c-menu-toggle pf-m-full-height"
580
- type="button"
581
- aria-expanded="false"
582
- >
583
- <span class="pf-v5-c-menu-toggle__icon">
584
- <img
585
- class="pf-v5-c-avatar"
586
- alt="Avatar image"
587
- src="/assets/images/img_avatar-light.svg"
588
- />
589
- </span>
590
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
591
- <span class="pf-v5-c-menu-toggle__controls">
592
- <span class="pf-v5-c-menu-toggle__toggle-icon">
593
- <i class="fas fa-angle-down" aria-hidden="true"></i>
594
- </span>
595
- </span>
596
- </button>
597
- </div>
598
841
  </div>
599
842
  </div>
600
843
  </div>
@@ -636,19 +879,23 @@ wrapperTag: div
636
879
  tabindex="-1"
637
880
  id="main-content-page-demo-sticky-top-horizontal-subnav"
638
881
  >
639
- <section class="pf-v5-c-page__main-subnav pf-m-limit-width pf-m-sticky-top">
882
+ <section class="pf-v5-c-page__main-nav pf-m-limit-width pf-m-sticky-top">
640
883
  <div class="pf-v5-c-page__main-body">
641
884
  <nav
642
- class="pf-v5-c-nav pf-m-horizontal-subnav pf-m-scrollable"
885
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
643
886
  aria-label="Local"
644
887
  >
645
- <button
646
- class="pf-v5-c-nav__scroll-button"
647
- disabled
648
- aria-label="Scroll left"
649
- >
650
- <i class="fas fa-angle-left" aria-hidden="true"></i>
651
- </button>
888
+ <div class="pf-v5-c-nav__scroll-button">
889
+ <button
890
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
891
+ type="button"
892
+ aria-label="Scroll start"
893
+ >
894
+ <span class="pf-v5-c-button__icon">
895
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
896
+ </span>
897
+ </button>
898
+ </div>
652
899
  <ul class="pf-v5-c-nav__list" role="list">
653
900
  <li class="pf-v5-c-nav__item">
654
901
  <a
@@ -670,9 +917,17 @@ wrapperTag: div
670
917
  <a href="#" class="pf-v5-c-nav__link">Horizontal subnav item 5</a>
671
918
  </li>
672
919
  </ul>
673
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
674
- <i class="fas fa-angle-right" aria-hidden="true"></i>
675
- </button>
920
+ <div class="pf-v5-c-nav__scroll-button">
921
+ <button
922
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
923
+ type="button"
924
+ aria-label="Scroll end"
925
+ >
926
+ <span class="pf-v5-c-button__icon">
927
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
928
+ </span>
929
+ </button>
930
+ </div>
676
931
  </nav>
677
932
  </div>
678
933
  </section>
@@ -906,23 +1161,117 @@ wrapperTag: div
906
1161
  </span>
907
1162
  <div class="pf-v5-c-masthead__main">
908
1163
  <a class="pf-v5-c-masthead__brand" href="#">
909
- <img
910
- class="pf-v5-c-brand"
911
- src="/assets/images/pf-logo.svg"
912
- alt="PatternFly logo"
913
- style="--pf-v5-c-brand--Height:36px"
914
- />
1164
+ <svg height="40px" viewBox="0 0 679 158">
1165
+ <title>PF-HorizontalLogo-Color</title>
1166
+ <defs>
1167
+ <linearGradient
1168
+ x1="68%"
1169
+ y1="2.25860997e-13%"
1170
+ x2="32%"
1171
+ y2="100%"
1172
+ id="linearGradient-page-demo-sticky-top-breadcrumb-masthead"
1173
+ >
1174
+ <stop stop-color="#2B9AF3" offset="0%" />
1175
+ <stop
1176
+ stop-color="#73BCF7"
1177
+ stop-opacity="0.502212631"
1178
+ offset="100%"
1179
+ />
1180
+ </linearGradient>
1181
+ </defs>
1182
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1183
+ <g
1184
+ transform="translate(206.000000, 45.750000)"
1185
+ fill="var(--pf-t--global--text--color--regular)"
1186
+ fill-rule="nonzero"
1187
+ >
1188
+ <path
1189
+ 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"
1190
+ />
1191
+ <path
1192
+ 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"
1193
+ />
1194
+ <path
1195
+ 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"
1196
+ />
1197
+ <path
1198
+ 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"
1199
+ />
1200
+ <path
1201
+ 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"
1202
+ />
1203
+ <path
1204
+ 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"
1205
+ />
1206
+ <path
1207
+ 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"
1208
+ />
1209
+ <polygon
1210
+ 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"
1211
+ />
1212
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1213
+ <path
1214
+ 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"
1215
+ />
1216
+ </g>
1217
+ <g transform="translate(0.000000, 0.000000)">
1218
+ <path
1219
+ 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"
1220
+ fill="#0066CC"
1221
+ />
1222
+ <path
1223
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1224
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1225
+ />
1226
+ <path
1227
+ 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"
1228
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1229
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1230
+ />
1231
+ </g>
1232
+ </g>
1233
+ </svg>
915
1234
  </a>
916
1235
  </div>
917
1236
  <div class="pf-v5-c-masthead__content">
918
1237
  <div
919
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1238
+ class="pf-v5-c-toolbar pf-m-static"
920
1239
  id="page-demo-sticky-top-breadcrumb-masthead-toolbar"
921
1240
  >
922
1241
  <div class="pf-v5-c-toolbar__content">
923
1242
  <div class="pf-v5-c-toolbar__content-section">
1243
+ <div class="pf-v5-c-toolbar__item">
1244
+ <button
1245
+ class="pf-v5-c-menu-toggle"
1246
+ type="button"
1247
+ aria-expanded="false"
1248
+ >
1249
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1250
+ <span class="pf-v5-c-menu-toggle__controls">
1251
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1252
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1253
+ </span>
1254
+ </span>
1255
+ </button>
1256
+ </div>
1257
+
1258
+ <div class="pf-v5-c-toolbar__item">
1259
+ <button
1260
+ class="pf-v5-c-menu-toggle"
1261
+ type="button"
1262
+ aria-expanded="false"
1263
+ >
1264
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1265
+ <span class="pf-v5-c-menu-toggle__controls">
1266
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1267
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1268
+ </span>
1269
+ </span>
1270
+ </button>
1271
+ </div>
1272
+
924
1273
  <div
925
- 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"
1274
+ 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"
926
1275
  >
927
1276
  <div
928
1277
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -934,7 +1283,9 @@ wrapperTag: div
934
1283
  aria-expanded="false"
935
1284
  aria-label="Application launcher"
936
1285
  >
937
- <i class="fas fa-th" aria-hidden="true"></i>
1286
+ <span class="pf-v5-c-menu-toggle__icon">
1287
+ <i class="fas fa-th" aria-hidden="true"></i>
1288
+ </span>
938
1289
  </button>
939
1290
  </div>
940
1291
  <div class="pf-v5-c-toolbar__item">
@@ -944,7 +1295,9 @@ wrapperTag: div
944
1295
  aria-expanded="false"
945
1296
  aria-label="Settings"
946
1297
  >
947
- <i class="fas fa-cog" aria-hidden="true"></i>
1298
+ <span class="pf-v5-c-menu-toggle__icon">
1299
+ <i class="fas fa-cog" aria-hidden="true"></i>
1300
+ </span>
948
1301
  </button>
949
1302
  </div>
950
1303
  <div class="pf-v5-c-toolbar__item">
@@ -954,7 +1307,9 @@ wrapperTag: div
954
1307
  aria-expanded="false"
955
1308
  aria-label="Help"
956
1309
  >
957
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1310
+ <span class="pf-v5-c-menu-toggle__icon">
1311
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1312
+ </span>
958
1313
  </button>
959
1314
  </div>
960
1315
  </div>
@@ -965,31 +1320,12 @@ wrapperTag: div
965
1320
  aria-expanded="false"
966
1321
  aria-label="Actions"
967
1322
  >
968
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1323
+ <span class="pf-v5-c-menu-toggle__icon">
1324
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1325
+ </span>
969
1326
  </button>
970
1327
  </div>
971
1328
  </div>
972
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
973
- <button
974
- class="pf-v5-c-menu-toggle pf-m-full-height"
975
- type="button"
976
- aria-expanded="false"
977
- >
978
- <span class="pf-v5-c-menu-toggle__icon">
979
- <img
980
- class="pf-v5-c-avatar"
981
- alt="Avatar image"
982
- src="/assets/images/img_avatar-light.svg"
983
- />
984
- </span>
985
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
986
- <span class="pf-v5-c-menu-toggle__controls">
987
- <span class="pf-v5-c-menu-toggle__toggle-icon">
988
- <i class="fas fa-angle-down" aria-hidden="true"></i>
989
- </span>
990
- </span>
991
- </button>
992
- </div>
993
1329
  </div>
994
1330
  </div>
995
1331
  </div>
@@ -1263,23 +1599,117 @@ wrapperTag: div
1263
1599
  </span>
1264
1600
  <div class="pf-v5-c-masthead__main">
1265
1601
  <a class="pf-v5-c-masthead__brand" href="#">
1266
- <img
1267
- class="pf-v5-c-brand"
1268
- src="/assets/images/pf-logo.svg"
1269
- alt="PatternFly logo"
1270
- style="--pf-v5-c-brand--Height:36px"
1271
- />
1602
+ <svg height="40px" viewBox="0 0 679 158">
1603
+ <title>PF-HorizontalLogo-Color</title>
1604
+ <defs>
1605
+ <linearGradient
1606
+ x1="68%"
1607
+ y1="2.25860997e-13%"
1608
+ x2="32%"
1609
+ y2="100%"
1610
+ id="linearGradient-page-demo-sticky-top-breadcrumb-masthead"
1611
+ >
1612
+ <stop stop-color="#2B9AF3" offset="0%" />
1613
+ <stop
1614
+ stop-color="#73BCF7"
1615
+ stop-opacity="0.502212631"
1616
+ offset="100%"
1617
+ />
1618
+ </linearGradient>
1619
+ </defs>
1620
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1621
+ <g
1622
+ transform="translate(206.000000, 45.750000)"
1623
+ fill="var(--pf-t--global--text--color--regular)"
1624
+ fill-rule="nonzero"
1625
+ >
1626
+ <path
1627
+ 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"
1628
+ />
1629
+ <path
1630
+ 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"
1631
+ />
1632
+ <path
1633
+ 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"
1634
+ />
1635
+ <path
1636
+ 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"
1637
+ />
1638
+ <path
1639
+ 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"
1640
+ />
1641
+ <path
1642
+ 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"
1643
+ />
1644
+ <path
1645
+ 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"
1646
+ />
1647
+ <polygon
1648
+ 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"
1649
+ />
1650
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1651
+ <path
1652
+ 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"
1653
+ />
1654
+ </g>
1655
+ <g transform="translate(0.000000, 0.000000)">
1656
+ <path
1657
+ 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"
1658
+ fill="#0066CC"
1659
+ />
1660
+ <path
1661
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1662
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1663
+ />
1664
+ <path
1665
+ 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"
1666
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1667
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1668
+ />
1669
+ </g>
1670
+ </g>
1671
+ </svg>
1272
1672
  </a>
1273
1673
  </div>
1274
1674
  <div class="pf-v5-c-masthead__content">
1275
1675
  <div
1276
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1676
+ class="pf-v5-c-toolbar pf-m-static"
1277
1677
  id="page-demo-sticky-top-breadcrumb-masthead-toolbar"
1278
1678
  >
1279
1679
  <div class="pf-v5-c-toolbar__content">
1280
1680
  <div class="pf-v5-c-toolbar__content-section">
1681
+ <div class="pf-v5-c-toolbar__item">
1682
+ <button
1683
+ class="pf-v5-c-menu-toggle"
1684
+ type="button"
1685
+ aria-expanded="false"
1686
+ >
1687
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1688
+ <span class="pf-v5-c-menu-toggle__controls">
1689
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1690
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1691
+ </span>
1692
+ </span>
1693
+ </button>
1694
+ </div>
1695
+
1696
+ <div class="pf-v5-c-toolbar__item">
1697
+ <button
1698
+ class="pf-v5-c-menu-toggle"
1699
+ type="button"
1700
+ aria-expanded="false"
1701
+ >
1702
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1703
+ <span class="pf-v5-c-menu-toggle__controls">
1704
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1705
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1706
+ </span>
1707
+ </span>
1708
+ </button>
1709
+ </div>
1710
+
1281
1711
  <div
1282
- 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"
1712
+ 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"
1283
1713
  >
1284
1714
  <div
1285
1715
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1291,7 +1721,9 @@ wrapperTag: div
1291
1721
  aria-expanded="false"
1292
1722
  aria-label="Application launcher"
1293
1723
  >
1294
- <i class="fas fa-th" aria-hidden="true"></i>
1724
+ <span class="pf-v5-c-menu-toggle__icon">
1725
+ <i class="fas fa-th" aria-hidden="true"></i>
1726
+ </span>
1295
1727
  </button>
1296
1728
  </div>
1297
1729
  <div class="pf-v5-c-toolbar__item">
@@ -1301,7 +1733,9 @@ wrapperTag: div
1301
1733
  aria-expanded="false"
1302
1734
  aria-label="Settings"
1303
1735
  >
1304
- <i class="fas fa-cog" aria-hidden="true"></i>
1736
+ <span class="pf-v5-c-menu-toggle__icon">
1737
+ <i class="fas fa-cog" aria-hidden="true"></i>
1738
+ </span>
1305
1739
  </button>
1306
1740
  </div>
1307
1741
  <div class="pf-v5-c-toolbar__item">
@@ -1311,7 +1745,9 @@ wrapperTag: div
1311
1745
  aria-expanded="false"
1312
1746
  aria-label="Help"
1313
1747
  >
1314
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1748
+ <span class="pf-v5-c-menu-toggle__icon">
1749
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1750
+ </span>
1315
1751
  </button>
1316
1752
  </div>
1317
1753
  </div>
@@ -1322,31 +1758,12 @@ wrapperTag: div
1322
1758
  aria-expanded="false"
1323
1759
  aria-label="Actions"
1324
1760
  >
1325
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1761
+ <span class="pf-v5-c-menu-toggle__icon">
1762
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1763
+ </span>
1326
1764
  </button>
1327
1765
  </div>
1328
1766
  </div>
1329
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1330
- <button
1331
- class="pf-v5-c-menu-toggle pf-m-full-height"
1332
- type="button"
1333
- aria-expanded="false"
1334
- >
1335
- <span class="pf-v5-c-menu-toggle__icon">
1336
- <img
1337
- class="pf-v5-c-avatar"
1338
- alt="Avatar image"
1339
- src="/assets/images/img_avatar-light.svg"
1340
- />
1341
- </span>
1342
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1343
- <span class="pf-v5-c-menu-toggle__controls">
1344
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1345
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1346
- </span>
1347
- </span>
1348
- </button>
1349
- </div>
1350
1767
  </div>
1351
1768
  </div>
1352
1769
  </div>
@@ -1620,23 +2037,117 @@ wrapperTag: div
1620
2037
  </span>
1621
2038
  <div class="pf-v5-c-masthead__main">
1622
2039
  <a class="pf-v5-c-masthead__brand" href="#">
1623
- <img
1624
- class="pf-v5-c-brand"
1625
- src="/assets/images/pf-logo.svg"
1626
- alt="PatternFly logo"
1627
- style="--pf-v5-c-brand--Height:36px"
1628
- />
2040
+ <svg height="40px" viewBox="0 0 679 158">
2041
+ <title>PF-HorizontalLogo-Color</title>
2042
+ <defs>
2043
+ <linearGradient
2044
+ x1="68%"
2045
+ y1="2.25860997e-13%"
2046
+ x2="32%"
2047
+ y2="100%"
2048
+ id="linearGradient-page-demo-sticky-top-section-group-masthead"
2049
+ >
2050
+ <stop stop-color="#2B9AF3" offset="0%" />
2051
+ <stop
2052
+ stop-color="#73BCF7"
2053
+ stop-opacity="0.502212631"
2054
+ offset="100%"
2055
+ />
2056
+ </linearGradient>
2057
+ </defs>
2058
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2059
+ <g
2060
+ transform="translate(206.000000, 45.750000)"
2061
+ fill="var(--pf-t--global--text--color--regular)"
2062
+ fill-rule="nonzero"
2063
+ >
2064
+ <path
2065
+ 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"
2066
+ />
2067
+ <path
2068
+ 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"
2069
+ />
2070
+ <path
2071
+ 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"
2072
+ />
2073
+ <path
2074
+ 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"
2075
+ />
2076
+ <path
2077
+ 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"
2078
+ />
2079
+ <path
2080
+ 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"
2081
+ />
2082
+ <path
2083
+ 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"
2084
+ />
2085
+ <polygon
2086
+ 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"
2087
+ />
2088
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2089
+ <path
2090
+ 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"
2091
+ />
2092
+ </g>
2093
+ <g transform="translate(0.000000, 0.000000)">
2094
+ <path
2095
+ 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"
2096
+ fill="#0066CC"
2097
+ />
2098
+ <path
2099
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2100
+ fill="url(#linearGradient-page-demo-sticky-top-section-group-masthead)"
2101
+ />
2102
+ <path
2103
+ 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"
2104
+ fill="url(#linearGradient-page-demo-sticky-top-section-group-masthead)"
2105
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2106
+ />
2107
+ </g>
2108
+ </g>
2109
+ </svg>
1629
2110
  </a>
1630
2111
  </div>
1631
2112
  <div class="pf-v5-c-masthead__content">
1632
2113
  <div
1633
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2114
+ class="pf-v5-c-toolbar pf-m-static"
1634
2115
  id="page-demo-sticky-top-section-group-masthead-toolbar"
1635
2116
  >
1636
2117
  <div class="pf-v5-c-toolbar__content">
1637
2118
  <div class="pf-v5-c-toolbar__content-section">
2119
+ <div class="pf-v5-c-toolbar__item">
2120
+ <button
2121
+ class="pf-v5-c-menu-toggle"
2122
+ type="button"
2123
+ aria-expanded="false"
2124
+ >
2125
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2126
+ <span class="pf-v5-c-menu-toggle__controls">
2127
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2128
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2129
+ </span>
2130
+ </span>
2131
+ </button>
2132
+ </div>
2133
+
2134
+ <div class="pf-v5-c-toolbar__item">
2135
+ <button
2136
+ class="pf-v5-c-menu-toggle"
2137
+ type="button"
2138
+ aria-expanded="false"
2139
+ >
2140
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2141
+ <span class="pf-v5-c-menu-toggle__controls">
2142
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2143
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2144
+ </span>
2145
+ </span>
2146
+ </button>
2147
+ </div>
2148
+
1638
2149
  <div
1639
- 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"
2150
+ 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"
1640
2151
  >
1641
2152
  <div
1642
2153
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1648,7 +2159,9 @@ wrapperTag: div
1648
2159
  aria-expanded="false"
1649
2160
  aria-label="Application launcher"
1650
2161
  >
1651
- <i class="fas fa-th" aria-hidden="true"></i>
2162
+ <span class="pf-v5-c-menu-toggle__icon">
2163
+ <i class="fas fa-th" aria-hidden="true"></i>
2164
+ </span>
1652
2165
  </button>
1653
2166
  </div>
1654
2167
  <div class="pf-v5-c-toolbar__item">
@@ -1658,7 +2171,9 @@ wrapperTag: div
1658
2171
  aria-expanded="false"
1659
2172
  aria-label="Settings"
1660
2173
  >
1661
- <i class="fas fa-cog" aria-hidden="true"></i>
2174
+ <span class="pf-v5-c-menu-toggle__icon">
2175
+ <i class="fas fa-cog" aria-hidden="true"></i>
2176
+ </span>
1662
2177
  </button>
1663
2178
  </div>
1664
2179
  <div class="pf-v5-c-toolbar__item">
@@ -1668,7 +2183,9 @@ wrapperTag: div
1668
2183
  aria-expanded="false"
1669
2184
  aria-label="Help"
1670
2185
  >
1671
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2186
+ <span class="pf-v5-c-menu-toggle__icon">
2187
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2188
+ </span>
1672
2189
  </button>
1673
2190
  </div>
1674
2191
  </div>
@@ -1679,31 +2196,12 @@ wrapperTag: div
1679
2196
  aria-expanded="false"
1680
2197
  aria-label="Actions"
1681
2198
  >
1682
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2199
+ <span class="pf-v5-c-menu-toggle__icon">
2200
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2201
+ </span>
1683
2202
  </button>
1684
2203
  </div>
1685
2204
  </div>
1686
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1687
- <button
1688
- class="pf-v5-c-menu-toggle pf-m-full-height"
1689
- type="button"
1690
- aria-expanded="false"
1691
- >
1692
- <span class="pf-v5-c-menu-toggle__icon">
1693
- <img
1694
- class="pf-v5-c-avatar"
1695
- alt="Avatar image"
1696
- src="/assets/images/img_avatar-light.svg"
1697
- />
1698
- </span>
1699
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1700
- <span class="pf-v5-c-menu-toggle__controls">
1701
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1702
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1703
- </span>
1704
- </span>
1705
- </button>
1706
- </div>
1707
2205
  </div>
1708
2206
  </div>
1709
2207
  </div>
@@ -1977,23 +2475,117 @@ wrapperTag: div
1977
2475
  </span>
1978
2476
  <div class="pf-v5-c-masthead__main">
1979
2477
  <a class="pf-v5-c-masthead__brand" href="#">
1980
- <img
1981
- class="pf-v5-c-brand"
1982
- src="/assets/images/pf-logo.svg"
1983
- alt="PatternFly logo"
1984
- style="--pf-v5-c-brand--Height:36px"
1985
- />
2478
+ <svg height="40px" viewBox="0 0 679 158">
2479
+ <title>PF-HorizontalLogo-Color</title>
2480
+ <defs>
2481
+ <linearGradient
2482
+ x1="68%"
2483
+ y1="2.25860997e-13%"
2484
+ x2="32%"
2485
+ y2="100%"
2486
+ id="linearGradient-page-demo-sticky-section-bottom-masthead"
2487
+ >
2488
+ <stop stop-color="#2B9AF3" offset="0%" />
2489
+ <stop
2490
+ stop-color="#73BCF7"
2491
+ stop-opacity="0.502212631"
2492
+ offset="100%"
2493
+ />
2494
+ </linearGradient>
2495
+ </defs>
2496
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2497
+ <g
2498
+ transform="translate(206.000000, 45.750000)"
2499
+ fill="var(--pf-t--global--text--color--regular)"
2500
+ fill-rule="nonzero"
2501
+ >
2502
+ <path
2503
+ 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"
2504
+ />
2505
+ <path
2506
+ 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"
2507
+ />
2508
+ <path
2509
+ 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"
2510
+ />
2511
+ <path
2512
+ 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"
2513
+ />
2514
+ <path
2515
+ 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"
2516
+ />
2517
+ <path
2518
+ 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"
2519
+ />
2520
+ <path
2521
+ 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"
2522
+ />
2523
+ <polygon
2524
+ 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"
2525
+ />
2526
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2527
+ <path
2528
+ 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"
2529
+ />
2530
+ </g>
2531
+ <g transform="translate(0.000000, 0.000000)">
2532
+ <path
2533
+ 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"
2534
+ fill="#0066CC"
2535
+ />
2536
+ <path
2537
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2538
+ fill="url(#linearGradient-page-demo-sticky-section-bottom-masthead)"
2539
+ />
2540
+ <path
2541
+ 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"
2542
+ fill="url(#linearGradient-page-demo-sticky-section-bottom-masthead)"
2543
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2544
+ />
2545
+ </g>
2546
+ </g>
2547
+ </svg>
1986
2548
  </a>
1987
2549
  </div>
1988
2550
  <div class="pf-v5-c-masthead__content">
1989
2551
  <div
1990
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2552
+ class="pf-v5-c-toolbar pf-m-static"
1991
2553
  id="page-demo-sticky-section-bottom-masthead-toolbar"
1992
2554
  >
1993
2555
  <div class="pf-v5-c-toolbar__content">
1994
2556
  <div class="pf-v5-c-toolbar__content-section">
2557
+ <div class="pf-v5-c-toolbar__item">
2558
+ <button
2559
+ class="pf-v5-c-menu-toggle"
2560
+ type="button"
2561
+ aria-expanded="false"
2562
+ >
2563
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2564
+ <span class="pf-v5-c-menu-toggle__controls">
2565
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2566
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2567
+ </span>
2568
+ </span>
2569
+ </button>
2570
+ </div>
2571
+
2572
+ <div class="pf-v5-c-toolbar__item">
2573
+ <button
2574
+ class="pf-v5-c-menu-toggle"
2575
+ type="button"
2576
+ aria-expanded="false"
2577
+ >
2578
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2579
+ <span class="pf-v5-c-menu-toggle__controls">
2580
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2581
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2582
+ </span>
2583
+ </span>
2584
+ </button>
2585
+ </div>
2586
+
1995
2587
  <div
1996
- 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"
2588
+ 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"
1997
2589
  >
1998
2590
  <div
1999
2591
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2005,7 +2597,9 @@ wrapperTag: div
2005
2597
  aria-expanded="false"
2006
2598
  aria-label="Application launcher"
2007
2599
  >
2008
- <i class="fas fa-th" aria-hidden="true"></i>
2600
+ <span class="pf-v5-c-menu-toggle__icon">
2601
+ <i class="fas fa-th" aria-hidden="true"></i>
2602
+ </span>
2009
2603
  </button>
2010
2604
  </div>
2011
2605
  <div class="pf-v5-c-toolbar__item">
@@ -2015,7 +2609,9 @@ wrapperTag: div
2015
2609
  aria-expanded="false"
2016
2610
  aria-label="Settings"
2017
2611
  >
2018
- <i class="fas fa-cog" aria-hidden="true"></i>
2612
+ <span class="pf-v5-c-menu-toggle__icon">
2613
+ <i class="fas fa-cog" aria-hidden="true"></i>
2614
+ </span>
2019
2615
  </button>
2020
2616
  </div>
2021
2617
  <div class="pf-v5-c-toolbar__item">
@@ -2025,7 +2621,9 @@ wrapperTag: div
2025
2621
  aria-expanded="false"
2026
2622
  aria-label="Help"
2027
2623
  >
2028
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2624
+ <span class="pf-v5-c-menu-toggle__icon">
2625
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2626
+ </span>
2029
2627
  </button>
2030
2628
  </div>
2031
2629
  </div>
@@ -2036,31 +2634,12 @@ wrapperTag: div
2036
2634
  aria-expanded="false"
2037
2635
  aria-label="Actions"
2038
2636
  >
2039
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2637
+ <span class="pf-v5-c-menu-toggle__icon">
2638
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2639
+ </span>
2040
2640
  </button>
2041
2641
  </div>
2042
2642
  </div>
2043
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2044
- <button
2045
- class="pf-v5-c-menu-toggle pf-m-full-height"
2046
- type="button"
2047
- aria-expanded="false"
2048
- >
2049
- <span class="pf-v5-c-menu-toggle__icon">
2050
- <img
2051
- class="pf-v5-c-avatar"
2052
- alt="Avatar image"
2053
- src="/assets/images/img_avatar-light.svg"
2054
- />
2055
- </span>
2056
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2057
- <span class="pf-v5-c-menu-toggle__controls">
2058
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2059
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2060
- </span>
2061
- </span>
2062
- </button>
2063
- </div>
2064
2643
  </div>
2065
2644
  </div>
2066
2645
  </div>
@@ -2336,23 +2915,117 @@ wrapperTag: div
2336
2915
  </span>
2337
2916
  <div class="pf-v5-c-masthead__main">
2338
2917
  <a class="pf-v5-c-masthead__brand" href="#">
2339
- <img
2340
- class="pf-v5-c-brand"
2341
- src="/assets/images/pf-logo.svg"
2342
- alt="PatternFly logo"
2343
- style="--pf-v5-c-brand--Height:36px"
2344
- />
2918
+ <svg height="40px" viewBox="0 0 679 158">
2919
+ <title>PF-HorizontalLogo-Color</title>
2920
+ <defs>
2921
+ <linearGradient
2922
+ x1="68%"
2923
+ y1="2.25860997e-13%"
2924
+ x2="32%"
2925
+ y2="100%"
2926
+ id="linearGradient-page-demo-overflow-scroll-masthead"
2927
+ >
2928
+ <stop stop-color="#2B9AF3" offset="0%" />
2929
+ <stop
2930
+ stop-color="#73BCF7"
2931
+ stop-opacity="0.502212631"
2932
+ offset="100%"
2933
+ />
2934
+ </linearGradient>
2935
+ </defs>
2936
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2937
+ <g
2938
+ transform="translate(206.000000, 45.750000)"
2939
+ fill="var(--pf-t--global--text--color--regular)"
2940
+ fill-rule="nonzero"
2941
+ >
2942
+ <path
2943
+ 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"
2944
+ />
2945
+ <path
2946
+ 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"
2947
+ />
2948
+ <path
2949
+ 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"
2950
+ />
2951
+ <path
2952
+ 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"
2953
+ />
2954
+ <path
2955
+ 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"
2956
+ />
2957
+ <path
2958
+ 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"
2959
+ />
2960
+ <path
2961
+ 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"
2962
+ />
2963
+ <polygon
2964
+ 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"
2965
+ />
2966
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2967
+ <path
2968
+ 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"
2969
+ />
2970
+ </g>
2971
+ <g transform="translate(0.000000, 0.000000)">
2972
+ <path
2973
+ 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"
2974
+ fill="#0066CC"
2975
+ />
2976
+ <path
2977
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2978
+ fill="url(#linearGradient-page-demo-overflow-scroll-masthead)"
2979
+ />
2980
+ <path
2981
+ 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"
2982
+ fill="url(#linearGradient-page-demo-overflow-scroll-masthead)"
2983
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2984
+ />
2985
+ </g>
2986
+ </g>
2987
+ </svg>
2345
2988
  </a>
2346
2989
  </div>
2347
2990
  <div class="pf-v5-c-masthead__content">
2348
2991
  <div
2349
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2992
+ class="pf-v5-c-toolbar pf-m-static"
2350
2993
  id="page-demo-overflow-scroll-masthead-toolbar"
2351
2994
  >
2352
2995
  <div class="pf-v5-c-toolbar__content">
2353
2996
  <div class="pf-v5-c-toolbar__content-section">
2997
+ <div class="pf-v5-c-toolbar__item">
2998
+ <button
2999
+ class="pf-v5-c-menu-toggle"
3000
+ type="button"
3001
+ aria-expanded="false"
3002
+ >
3003
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3004
+ <span class="pf-v5-c-menu-toggle__controls">
3005
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3006
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3007
+ </span>
3008
+ </span>
3009
+ </button>
3010
+ </div>
3011
+
3012
+ <div class="pf-v5-c-toolbar__item">
3013
+ <button
3014
+ class="pf-v5-c-menu-toggle"
3015
+ type="button"
3016
+ aria-expanded="false"
3017
+ >
3018
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3019
+ <span class="pf-v5-c-menu-toggle__controls">
3020
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3021
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3022
+ </span>
3023
+ </span>
3024
+ </button>
3025
+ </div>
3026
+
2354
3027
  <div
2355
- 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"
3028
+ 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"
2356
3029
  >
2357
3030
  <div
2358
3031
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2364,7 +3037,9 @@ wrapperTag: div
2364
3037
  aria-expanded="false"
2365
3038
  aria-label="Application launcher"
2366
3039
  >
2367
- <i class="fas fa-th" aria-hidden="true"></i>
3040
+ <span class="pf-v5-c-menu-toggle__icon">
3041
+ <i class="fas fa-th" aria-hidden="true"></i>
3042
+ </span>
2368
3043
  </button>
2369
3044
  </div>
2370
3045
  <div class="pf-v5-c-toolbar__item">
@@ -2374,7 +3049,9 @@ wrapperTag: div
2374
3049
  aria-expanded="false"
2375
3050
  aria-label="Settings"
2376
3051
  >
2377
- <i class="fas fa-cog" aria-hidden="true"></i>
3052
+ <span class="pf-v5-c-menu-toggle__icon">
3053
+ <i class="fas fa-cog" aria-hidden="true"></i>
3054
+ </span>
2378
3055
  </button>
2379
3056
  </div>
2380
3057
  <div class="pf-v5-c-toolbar__item">
@@ -2384,7 +3061,9 @@ wrapperTag: div
2384
3061
  aria-expanded="false"
2385
3062
  aria-label="Help"
2386
3063
  >
2387
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3064
+ <span class="pf-v5-c-menu-toggle__icon">
3065
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3066
+ </span>
2388
3067
  </button>
2389
3068
  </div>
2390
3069
  </div>
@@ -2395,31 +3074,12 @@ wrapperTag: div
2395
3074
  aria-expanded="false"
2396
3075
  aria-label="Actions"
2397
3076
  >
2398
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3077
+ <span class="pf-v5-c-menu-toggle__icon">
3078
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3079
+ </span>
2399
3080
  </button>
2400
3081
  </div>
2401
3082
  </div>
2402
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2403
- <button
2404
- class="pf-v5-c-menu-toggle pf-m-full-height"
2405
- type="button"
2406
- aria-expanded="false"
2407
- >
2408
- <span class="pf-v5-c-menu-toggle__icon">
2409
- <img
2410
- class="pf-v5-c-avatar"
2411
- alt="Avatar image"
2412
- src="/assets/images/img_avatar-light.svg"
2413
- />
2414
- </span>
2415
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2416
- <span class="pf-v5-c-menu-toggle__controls">
2417
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2418
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2419
- </span>
2420
- </span>
2421
- </button>
2422
- </div>
2423
3083
  </div>
2424
3084
  </div>
2425
3085
  </div>
@@ -2700,23 +3360,117 @@ wrapperTag: div
2700
3360
  </span>
2701
3361
  <div class="pf-v5-c-masthead__main">
2702
3362
  <a class="pf-v5-c-masthead__brand" href="#">
2703
- <img
2704
- class="pf-v5-c-brand"
2705
- src="/assets/images/pf-logo.svg"
2706
- alt="PatternFly logo"
2707
- style="--pf-v5-c-brand--Height:36px"
2708
- />
3363
+ <svg height="40px" viewBox="0 0 679 158">
3364
+ <title>PF-HorizontalLogo-Color</title>
3365
+ <defs>
3366
+ <linearGradient
3367
+ x1="68%"
3368
+ y1="2.25860997e-13%"
3369
+ x2="32%"
3370
+ y2="100%"
3371
+ id="linearGradient-page-demo-centered-section-masthead"
3372
+ >
3373
+ <stop stop-color="#2B9AF3" offset="0%" />
3374
+ <stop
3375
+ stop-color="#73BCF7"
3376
+ stop-opacity="0.502212631"
3377
+ offset="100%"
3378
+ />
3379
+ </linearGradient>
3380
+ </defs>
3381
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3382
+ <g
3383
+ transform="translate(206.000000, 45.750000)"
3384
+ fill="var(--pf-t--global--text--color--regular)"
3385
+ fill-rule="nonzero"
3386
+ >
3387
+ <path
3388
+ 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"
3389
+ />
3390
+ <path
3391
+ 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"
3392
+ />
3393
+ <path
3394
+ 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"
3395
+ />
3396
+ <path
3397
+ 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"
3398
+ />
3399
+ <path
3400
+ 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"
3401
+ />
3402
+ <path
3403
+ 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"
3404
+ />
3405
+ <path
3406
+ 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"
3407
+ />
3408
+ <polygon
3409
+ 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"
3410
+ />
3411
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3412
+ <path
3413
+ 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"
3414
+ />
3415
+ </g>
3416
+ <g transform="translate(0.000000, 0.000000)">
3417
+ <path
3418
+ 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"
3419
+ fill="#0066CC"
3420
+ />
3421
+ <path
3422
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3423
+ fill="url(#linearGradient-page-demo-centered-section-masthead)"
3424
+ />
3425
+ <path
3426
+ 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"
3427
+ fill="url(#linearGradient-page-demo-centered-section-masthead)"
3428
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3429
+ />
3430
+ </g>
3431
+ </g>
3432
+ </svg>
2709
3433
  </a>
2710
3434
  </div>
2711
3435
  <div class="pf-v5-c-masthead__content">
2712
3436
  <div
2713
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3437
+ class="pf-v5-c-toolbar pf-m-static"
2714
3438
  id="page-demo-centered-section-masthead-toolbar"
2715
3439
  >
2716
3440
  <div class="pf-v5-c-toolbar__content">
2717
3441
  <div class="pf-v5-c-toolbar__content-section">
3442
+ <div class="pf-v5-c-toolbar__item">
3443
+ <button
3444
+ class="pf-v5-c-menu-toggle"
3445
+ type="button"
3446
+ aria-expanded="false"
3447
+ >
3448
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3449
+ <span class="pf-v5-c-menu-toggle__controls">
3450
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3451
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3452
+ </span>
3453
+ </span>
3454
+ </button>
3455
+ </div>
3456
+
3457
+ <div class="pf-v5-c-toolbar__item">
3458
+ <button
3459
+ class="pf-v5-c-menu-toggle"
3460
+ type="button"
3461
+ aria-expanded="false"
3462
+ >
3463
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3464
+ <span class="pf-v5-c-menu-toggle__controls">
3465
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3466
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3467
+ </span>
3468
+ </span>
3469
+ </button>
3470
+ </div>
3471
+
2718
3472
  <div
2719
- 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"
3473
+ 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"
2720
3474
  >
2721
3475
  <div
2722
3476
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2728,7 +3482,9 @@ wrapperTag: div
2728
3482
  aria-expanded="false"
2729
3483
  aria-label="Application launcher"
2730
3484
  >
2731
- <i class="fas fa-th" aria-hidden="true"></i>
3485
+ <span class="pf-v5-c-menu-toggle__icon">
3486
+ <i class="fas fa-th" aria-hidden="true"></i>
3487
+ </span>
2732
3488
  </button>
2733
3489
  </div>
2734
3490
  <div class="pf-v5-c-toolbar__item">
@@ -2738,7 +3494,9 @@ wrapperTag: div
2738
3494
  aria-expanded="false"
2739
3495
  aria-label="Settings"
2740
3496
  >
2741
- <i class="fas fa-cog" aria-hidden="true"></i>
3497
+ <span class="pf-v5-c-menu-toggle__icon">
3498
+ <i class="fas fa-cog" aria-hidden="true"></i>
3499
+ </span>
2742
3500
  </button>
2743
3501
  </div>
2744
3502
  <div class="pf-v5-c-toolbar__item">
@@ -2748,7 +3506,9 @@ wrapperTag: div
2748
3506
  aria-expanded="false"
2749
3507
  aria-label="Help"
2750
3508
  >
2751
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3509
+ <span class="pf-v5-c-menu-toggle__icon">
3510
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3511
+ </span>
2752
3512
  </button>
2753
3513
  </div>
2754
3514
  </div>
@@ -2759,31 +3519,12 @@ wrapperTag: div
2759
3519
  aria-expanded="false"
2760
3520
  aria-label="Actions"
2761
3521
  >
2762
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3522
+ <span class="pf-v5-c-menu-toggle__icon">
3523
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3524
+ </span>
2763
3525
  </button>
2764
3526
  </div>
2765
3527
  </div>
2766
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2767
- <button
2768
- class="pf-v5-c-menu-toggle pf-m-full-height"
2769
- type="button"
2770
- aria-expanded="false"
2771
- >
2772
- <span class="pf-v5-c-menu-toggle__icon">
2773
- <img
2774
- class="pf-v5-c-avatar"
2775
- alt="Avatar image"
2776
- src="/assets/images/img_avatar-light.svg"
2777
- />
2778
- </span>
2779
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2780
- <span class="pf-v5-c-menu-toggle__controls">
2781
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2782
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2783
- </span>
2784
- </span>
2785
- </button>
2786
- </div>
2787
3528
  </div>
2788
3529
  </div>
2789
3530
  </div>