@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/Modal/examples/Modal.md CHANGED
@@ -25,23 +25,117 @@ section: components
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
27
  <a class="pf-v5-c-masthead__brand" href="#">
28
- <img
29
- class="pf-v5-c-brand"
30
- src="/assets/images/pf-logo.svg"
31
- alt="PatternFly logo"
32
- style="--pf-v5-c-brand--Height:36px"
33
- />
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
30
+ <defs>
31
+ <linearGradient
32
+ x1="68%"
33
+ y1="2.25860997e-13%"
34
+ x2="32%"
35
+ y2="100%"
36
+ id="linearGradient-modal-basic-example-masthead"
37
+ >
38
+ <stop stop-color="#2B9AF3" offset="0%" />
39
+ <stop
40
+ stop-color="#73BCF7"
41
+ stop-opacity="0.502212631"
42
+ offset="100%"
43
+ />
44
+ </linearGradient>
45
+ </defs>
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
+ <g
48
+ transform="translate(206.000000, 45.750000)"
49
+ fill="var(--pf-t--global--text--color--regular)"
50
+ fill-rule="nonzero"
51
+ >
52
+ <path
53
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
54
+ />
55
+ <path
56
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
57
+ />
58
+ <path
59
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
60
+ />
61
+ <path
62
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
63
+ />
64
+ <path
65
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
66
+ />
67
+ <path
68
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
69
+ />
70
+ <path
71
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
72
+ />
73
+ <polygon
74
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
75
+ />
76
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
+ <path
78
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
79
+ />
80
+ </g>
81
+ <g transform="translate(0.000000, 0.000000)">
82
+ <path
83
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
84
+ fill="#0066CC"
85
+ />
86
+ <path
87
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
+ fill="url(#linearGradient-modal-basic-example-masthead)"
89
+ />
90
+ <path
91
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
92
+ fill="url(#linearGradient-modal-basic-example-masthead)"
93
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
+ />
95
+ </g>
96
+ </g>
97
+ </svg>
34
98
  </a>
35
99
  </div>
36
100
  <div class="pf-v5-c-masthead__content">
37
101
  <div
38
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
102
+ class="pf-v5-c-toolbar pf-m-static"
39
103
  id="modal-basic-example-masthead-toolbar"
40
104
  >
41
105
  <div class="pf-v5-c-toolbar__content">
42
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
43
137
  <div
44
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
138
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
45
139
  >
46
140
  <div
47
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -53,7 +147,9 @@ section: components
53
147
  aria-expanded="false"
54
148
  aria-label="Application launcher"
55
149
  >
56
- <i class="fas fa-th" aria-hidden="true"></i>
150
+ <span class="pf-v5-c-menu-toggle__icon">
151
+ <i class="fas fa-th" aria-hidden="true"></i>
152
+ </span>
57
153
  </button>
58
154
  </div>
59
155
  <div class="pf-v5-c-toolbar__item">
@@ -63,7 +159,9 @@ section: components
63
159
  aria-expanded="false"
64
160
  aria-label="Settings"
65
161
  >
66
- <i class="fas fa-cog" aria-hidden="true"></i>
162
+ <span class="pf-v5-c-menu-toggle__icon">
163
+ <i class="fas fa-cog" aria-hidden="true"></i>
164
+ </span>
67
165
  </button>
68
166
  </div>
69
167
  <div class="pf-v5-c-toolbar__item">
@@ -73,7 +171,9 @@ section: components
73
171
  aria-expanded="false"
74
172
  aria-label="Help"
75
173
  >
76
- <i class="fas fa-question-circle" aria-hidden="true"></i>
174
+ <span class="pf-v5-c-menu-toggle__icon">
175
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
176
+ </span>
77
177
  </button>
78
178
  </div>
79
179
  </div>
@@ -84,31 +184,12 @@ section: components
84
184
  aria-expanded="false"
85
185
  aria-label="Actions"
86
186
  >
87
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
187
+ <span class="pf-v5-c-menu-toggle__icon">
188
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
189
+ </span>
88
190
  </button>
89
191
  </div>
90
192
  </div>
91
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
92
- <button
93
- class="pf-v5-c-menu-toggle pf-m-full-height"
94
- type="button"
95
- aria-expanded="false"
96
- >
97
- <span class="pf-v5-c-menu-toggle__icon">
98
- <img
99
- class="pf-v5-c-avatar"
100
- alt="Avatar image"
101
- src="/assets/images/img_avatar-light.svg"
102
- />
103
- </span>
104
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
105
- <span class="pf-v5-c-menu-toggle__controls">
106
- <span class="pf-v5-c-menu-toggle__toggle-icon">
107
- <i class="fas fa-angle-down" aria-hidden="true"></i>
108
- </span>
109
- </span>
110
- </button>
111
- </div>
112
193
  </div>
113
194
  </div>
114
195
  </div>
@@ -298,23 +379,117 @@ section: components
298
379
  </span>
299
380
  <div class="pf-v5-c-masthead__main">
300
381
  <a class="pf-v5-c-masthead__brand" href="#">
301
- <img
302
- class="pf-v5-c-brand"
303
- src="/assets/images/pf-logo.svg"
304
- alt="PatternFly logo"
305
- style="--pf-v5-c-brand--Height:36px"
306
- />
382
+ <svg height="40px" viewBox="0 0 679 158">
383
+ <title>PF-HorizontalLogo-Color</title>
384
+ <defs>
385
+ <linearGradient
386
+ x1="68%"
387
+ y1="2.25860997e-13%"
388
+ x2="32%"
389
+ y2="100%"
390
+ id="linearGradient-modal-scrollable-content-example-masthead"
391
+ >
392
+ <stop stop-color="#2B9AF3" offset="0%" />
393
+ <stop
394
+ stop-color="#73BCF7"
395
+ stop-opacity="0.502212631"
396
+ offset="100%"
397
+ />
398
+ </linearGradient>
399
+ </defs>
400
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
401
+ <g
402
+ transform="translate(206.000000, 45.750000)"
403
+ fill="var(--pf-t--global--text--color--regular)"
404
+ fill-rule="nonzero"
405
+ >
406
+ <path
407
+ 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"
408
+ />
409
+ <path
410
+ 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"
411
+ />
412
+ <path
413
+ 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"
414
+ />
415
+ <path
416
+ 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"
417
+ />
418
+ <path
419
+ 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"
420
+ />
421
+ <path
422
+ 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"
423
+ />
424
+ <path
425
+ 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"
426
+ />
427
+ <polygon
428
+ 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"
429
+ />
430
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
431
+ <path
432
+ 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"
433
+ />
434
+ </g>
435
+ <g transform="translate(0.000000, 0.000000)">
436
+ <path
437
+ 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"
438
+ fill="#0066CC"
439
+ />
440
+ <path
441
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
442
+ fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
443
+ />
444
+ <path
445
+ 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"
446
+ fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
447
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
448
+ />
449
+ </g>
450
+ </g>
451
+ </svg>
307
452
  </a>
308
453
  </div>
309
454
  <div class="pf-v5-c-masthead__content">
310
455
  <div
311
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
456
+ class="pf-v5-c-toolbar pf-m-static"
312
457
  id="modal-scrollable-content-example-masthead-toolbar"
313
458
  >
314
459
  <div class="pf-v5-c-toolbar__content">
315
460
  <div class="pf-v5-c-toolbar__content-section">
461
+ <div class="pf-v5-c-toolbar__item">
462
+ <button
463
+ class="pf-v5-c-menu-toggle"
464
+ type="button"
465
+ aria-expanded="false"
466
+ >
467
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
468
+ <span class="pf-v5-c-menu-toggle__controls">
469
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
470
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
471
+ </span>
472
+ </span>
473
+ </button>
474
+ </div>
475
+
476
+ <div class="pf-v5-c-toolbar__item">
477
+ <button
478
+ class="pf-v5-c-menu-toggle"
479
+ type="button"
480
+ aria-expanded="false"
481
+ >
482
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
483
+ <span class="pf-v5-c-menu-toggle__controls">
484
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
485
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
486
+ </span>
487
+ </span>
488
+ </button>
489
+ </div>
490
+
316
491
  <div
317
- 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"
492
+ 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"
318
493
  >
319
494
  <div
320
495
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -326,7 +501,9 @@ section: components
326
501
  aria-expanded="false"
327
502
  aria-label="Application launcher"
328
503
  >
329
- <i class="fas fa-th" aria-hidden="true"></i>
504
+ <span class="pf-v5-c-menu-toggle__icon">
505
+ <i class="fas fa-th" aria-hidden="true"></i>
506
+ </span>
330
507
  </button>
331
508
  </div>
332
509
  <div class="pf-v5-c-toolbar__item">
@@ -336,7 +513,9 @@ section: components
336
513
  aria-expanded="false"
337
514
  aria-label="Settings"
338
515
  >
339
- <i class="fas fa-cog" aria-hidden="true"></i>
516
+ <span class="pf-v5-c-menu-toggle__icon">
517
+ <i class="fas fa-cog" aria-hidden="true"></i>
518
+ </span>
340
519
  </button>
341
520
  </div>
342
521
  <div class="pf-v5-c-toolbar__item">
@@ -346,7 +525,9 @@ section: components
346
525
  aria-expanded="false"
347
526
  aria-label="Help"
348
527
  >
349
- <i class="fas fa-question-circle" aria-hidden="true"></i>
528
+ <span class="pf-v5-c-menu-toggle__icon">
529
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
530
+ </span>
350
531
  </button>
351
532
  </div>
352
533
  </div>
@@ -357,31 +538,12 @@ section: components
357
538
  aria-expanded="false"
358
539
  aria-label="Actions"
359
540
  >
360
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
541
+ <span class="pf-v5-c-menu-toggle__icon">
542
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
543
+ </span>
361
544
  </button>
362
545
  </div>
363
546
  </div>
364
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
365
- <button
366
- class="pf-v5-c-menu-toggle pf-m-full-height"
367
- type="button"
368
- aria-expanded="false"
369
- >
370
- <span class="pf-v5-c-menu-toggle__icon">
371
- <img
372
- class="pf-v5-c-avatar"
373
- alt="Avatar image"
374
- src="/assets/images/img_avatar-light.svg"
375
- />
376
- </span>
377
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
378
- <span class="pf-v5-c-menu-toggle__controls">
379
- <span class="pf-v5-c-menu-toggle__toggle-icon">
380
- <i class="fas fa-angle-down" aria-hidden="true"></i>
381
- </span>
382
- </span>
383
- </button>
384
- </div>
385
547
  </div>
386
548
  </div>
387
549
  </div>
@@ -577,23 +739,117 @@ section: components
577
739
  </span>
578
740
  <div class="pf-v5-c-masthead__main">
579
741
  <a class="pf-v5-c-masthead__brand" href="#">
580
- <img
581
- class="pf-v5-c-brand"
582
- src="/assets/images/pf-logo.svg"
583
- alt="PatternFly logo"
584
- style="--pf-v5-c-brand--Height:36px"
585
- />
742
+ <svg height="40px" viewBox="0 0 679 158">
743
+ <title>PF-HorizontalLogo-Color</title>
744
+ <defs>
745
+ <linearGradient
746
+ x1="68%"
747
+ y1="2.25860997e-13%"
748
+ x2="32%"
749
+ y2="100%"
750
+ id="linearGradient-modal-medium-example-masthead"
751
+ >
752
+ <stop stop-color="#2B9AF3" offset="0%" />
753
+ <stop
754
+ stop-color="#73BCF7"
755
+ stop-opacity="0.502212631"
756
+ offset="100%"
757
+ />
758
+ </linearGradient>
759
+ </defs>
760
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
761
+ <g
762
+ transform="translate(206.000000, 45.750000)"
763
+ fill="var(--pf-t--global--text--color--regular)"
764
+ fill-rule="nonzero"
765
+ >
766
+ <path
767
+ 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"
768
+ />
769
+ <path
770
+ 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"
771
+ />
772
+ <path
773
+ 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"
774
+ />
775
+ <path
776
+ 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"
777
+ />
778
+ <path
779
+ 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"
780
+ />
781
+ <path
782
+ 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"
783
+ />
784
+ <path
785
+ 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"
786
+ />
787
+ <polygon
788
+ 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"
789
+ />
790
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
791
+ <path
792
+ 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"
793
+ />
794
+ </g>
795
+ <g transform="translate(0.000000, 0.000000)">
796
+ <path
797
+ 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"
798
+ fill="#0066CC"
799
+ />
800
+ <path
801
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
802
+ fill="url(#linearGradient-modal-medium-example-masthead)"
803
+ />
804
+ <path
805
+ 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"
806
+ fill="url(#linearGradient-modal-medium-example-masthead)"
807
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
808
+ />
809
+ </g>
810
+ </g>
811
+ </svg>
586
812
  </a>
587
813
  </div>
588
814
  <div class="pf-v5-c-masthead__content">
589
815
  <div
590
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
816
+ class="pf-v5-c-toolbar pf-m-static"
591
817
  id="modal-medium-example-masthead-toolbar"
592
818
  >
593
819
  <div class="pf-v5-c-toolbar__content">
594
820
  <div class="pf-v5-c-toolbar__content-section">
821
+ <div class="pf-v5-c-toolbar__item">
822
+ <button
823
+ class="pf-v5-c-menu-toggle"
824
+ type="button"
825
+ aria-expanded="false"
826
+ >
827
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
828
+ <span class="pf-v5-c-menu-toggle__controls">
829
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
830
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
831
+ </span>
832
+ </span>
833
+ </button>
834
+ </div>
835
+
836
+ <div class="pf-v5-c-toolbar__item">
837
+ <button
838
+ class="pf-v5-c-menu-toggle"
839
+ type="button"
840
+ aria-expanded="false"
841
+ >
842
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
843
+ <span class="pf-v5-c-menu-toggle__controls">
844
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
845
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
846
+ </span>
847
+ </span>
848
+ </button>
849
+ </div>
850
+
595
851
  <div
596
- 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"
852
+ 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"
597
853
  >
598
854
  <div
599
855
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -605,7 +861,9 @@ section: components
605
861
  aria-expanded="false"
606
862
  aria-label="Application launcher"
607
863
  >
608
- <i class="fas fa-th" aria-hidden="true"></i>
864
+ <span class="pf-v5-c-menu-toggle__icon">
865
+ <i class="fas fa-th" aria-hidden="true"></i>
866
+ </span>
609
867
  </button>
610
868
  </div>
611
869
  <div class="pf-v5-c-toolbar__item">
@@ -615,7 +873,9 @@ section: components
615
873
  aria-expanded="false"
616
874
  aria-label="Settings"
617
875
  >
618
- <i class="fas fa-cog" aria-hidden="true"></i>
876
+ <span class="pf-v5-c-menu-toggle__icon">
877
+ <i class="fas fa-cog" aria-hidden="true"></i>
878
+ </span>
619
879
  </button>
620
880
  </div>
621
881
  <div class="pf-v5-c-toolbar__item">
@@ -625,7 +885,9 @@ section: components
625
885
  aria-expanded="false"
626
886
  aria-label="Help"
627
887
  >
628
- <i class="fas fa-question-circle" aria-hidden="true"></i>
888
+ <span class="pf-v5-c-menu-toggle__icon">
889
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
890
+ </span>
629
891
  </button>
630
892
  </div>
631
893
  </div>
@@ -636,31 +898,12 @@ section: components
636
898
  aria-expanded="false"
637
899
  aria-label="Actions"
638
900
  >
639
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
901
+ <span class="pf-v5-c-menu-toggle__icon">
902
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
903
+ </span>
640
904
  </button>
641
905
  </div>
642
906
  </div>
643
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
644
- <button
645
- class="pf-v5-c-menu-toggle pf-m-full-height"
646
- type="button"
647
- aria-expanded="false"
648
- >
649
- <span class="pf-v5-c-menu-toggle__icon">
650
- <img
651
- class="pf-v5-c-avatar"
652
- alt="Avatar image"
653
- src="/assets/images/img_avatar-light.svg"
654
- />
655
- </span>
656
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
657
- <span class="pf-v5-c-menu-toggle__controls">
658
- <span class="pf-v5-c-menu-toggle__toggle-icon">
659
- <i class="fas fa-angle-down" aria-hidden="true"></i>
660
- </span>
661
- </span>
662
- </button>
663
- </div>
664
907
  </div>
665
908
  </div>
666
909
  </div>
@@ -846,23 +1089,117 @@ section: components
846
1089
  </span>
847
1090
  <div class="pf-v5-c-masthead__main">
848
1091
  <a class="pf-v5-c-masthead__brand" href="#">
849
- <img
850
- class="pf-v5-c-brand"
851
- src="/assets/images/pf-logo.svg"
852
- alt="PatternFly logo"
853
- style="--pf-v5-c-brand--Height:36px"
854
- />
1092
+ <svg height="40px" viewBox="0 0 679 158">
1093
+ <title>PF-HorizontalLogo-Color</title>
1094
+ <defs>
1095
+ <linearGradient
1096
+ x1="68%"
1097
+ y1="2.25860997e-13%"
1098
+ x2="32%"
1099
+ y2="100%"
1100
+ id="linearGradient-modal-large-example-masthead"
1101
+ >
1102
+ <stop stop-color="#2B9AF3" offset="0%" />
1103
+ <stop
1104
+ stop-color="#73BCF7"
1105
+ stop-opacity="0.502212631"
1106
+ offset="100%"
1107
+ />
1108
+ </linearGradient>
1109
+ </defs>
1110
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1111
+ <g
1112
+ transform="translate(206.000000, 45.750000)"
1113
+ fill="var(--pf-t--global--text--color--regular)"
1114
+ fill-rule="nonzero"
1115
+ >
1116
+ <path
1117
+ 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"
1118
+ />
1119
+ <path
1120
+ 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"
1121
+ />
1122
+ <path
1123
+ 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"
1124
+ />
1125
+ <path
1126
+ 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"
1127
+ />
1128
+ <path
1129
+ 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"
1130
+ />
1131
+ <path
1132
+ 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"
1133
+ />
1134
+ <path
1135
+ 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"
1136
+ />
1137
+ <polygon
1138
+ 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"
1139
+ />
1140
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1141
+ <path
1142
+ 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"
1143
+ />
1144
+ </g>
1145
+ <g transform="translate(0.000000, 0.000000)">
1146
+ <path
1147
+ 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"
1148
+ fill="#0066CC"
1149
+ />
1150
+ <path
1151
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1152
+ fill="url(#linearGradient-modal-large-example-masthead)"
1153
+ />
1154
+ <path
1155
+ 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"
1156
+ fill="url(#linearGradient-modal-large-example-masthead)"
1157
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1158
+ />
1159
+ </g>
1160
+ </g>
1161
+ </svg>
855
1162
  </a>
856
1163
  </div>
857
1164
  <div class="pf-v5-c-masthead__content">
858
1165
  <div
859
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1166
+ class="pf-v5-c-toolbar pf-m-static"
860
1167
  id="modal-large-example-masthead-toolbar"
861
1168
  >
862
1169
  <div class="pf-v5-c-toolbar__content">
863
1170
  <div class="pf-v5-c-toolbar__content-section">
1171
+ <div class="pf-v5-c-toolbar__item">
1172
+ <button
1173
+ class="pf-v5-c-menu-toggle"
1174
+ type="button"
1175
+ aria-expanded="false"
1176
+ >
1177
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1178
+ <span class="pf-v5-c-menu-toggle__controls">
1179
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1180
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1181
+ </span>
1182
+ </span>
1183
+ </button>
1184
+ </div>
1185
+
1186
+ <div class="pf-v5-c-toolbar__item">
1187
+ <button
1188
+ class="pf-v5-c-menu-toggle"
1189
+ type="button"
1190
+ aria-expanded="false"
1191
+ >
1192
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1193
+ <span class="pf-v5-c-menu-toggle__controls">
1194
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1195
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1196
+ </span>
1197
+ </span>
1198
+ </button>
1199
+ </div>
1200
+
864
1201
  <div
865
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1202
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
866
1203
  >
867
1204
  <div
868
1205
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -874,7 +1211,9 @@ section: components
874
1211
  aria-expanded="false"
875
1212
  aria-label="Application launcher"
876
1213
  >
877
- <i class="fas fa-th" aria-hidden="true"></i>
1214
+ <span class="pf-v5-c-menu-toggle__icon">
1215
+ <i class="fas fa-th" aria-hidden="true"></i>
1216
+ </span>
878
1217
  </button>
879
1218
  </div>
880
1219
  <div class="pf-v5-c-toolbar__item">
@@ -884,7 +1223,9 @@ section: components
884
1223
  aria-expanded="false"
885
1224
  aria-label="Settings"
886
1225
  >
887
- <i class="fas fa-cog" aria-hidden="true"></i>
1226
+ <span class="pf-v5-c-menu-toggle__icon">
1227
+ <i class="fas fa-cog" aria-hidden="true"></i>
1228
+ </span>
888
1229
  </button>
889
1230
  </div>
890
1231
  <div class="pf-v5-c-toolbar__item">
@@ -894,7 +1235,9 @@ section: components
894
1235
  aria-expanded="false"
895
1236
  aria-label="Help"
896
1237
  >
897
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1238
+ <span class="pf-v5-c-menu-toggle__icon">
1239
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1240
+ </span>
898
1241
  </button>
899
1242
  </div>
900
1243
  </div>
@@ -905,31 +1248,12 @@ section: components
905
1248
  aria-expanded="false"
906
1249
  aria-label="Actions"
907
1250
  >
908
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1251
+ <span class="pf-v5-c-menu-toggle__icon">
1252
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1253
+ </span>
909
1254
  </button>
910
1255
  </div>
911
1256
  </div>
912
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
913
- <button
914
- class="pf-v5-c-menu-toggle pf-m-full-height"
915
- type="button"
916
- aria-expanded="false"
917
- >
918
- <span class="pf-v5-c-menu-toggle__icon">
919
- <img
920
- class="pf-v5-c-avatar"
921
- alt="Avatar image"
922
- src="/assets/images/img_avatar-light.svg"
923
- />
924
- </span>
925
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
926
- <span class="pf-v5-c-menu-toggle__controls">
927
- <span class="pf-v5-c-menu-toggle__toggle-icon">
928
- <i class="fas fa-angle-down" aria-hidden="true"></i>
929
- </span>
930
- </span>
931
- </button>
932
- </div>
933
1257
  </div>
934
1258
  </div>
935
1259
  </div>
@@ -1115,23 +1439,117 @@ section: components
1115
1439
  </span>
1116
1440
  <div class="pf-v5-c-masthead__main">
1117
1441
  <a class="pf-v5-c-masthead__brand" href="#">
1118
- <img
1119
- class="pf-v5-c-brand"
1120
- src="/assets/images/pf-logo.svg"
1121
- alt="PatternFly logo"
1122
- style="--pf-v5-c-brand--Height:36px"
1123
- />
1442
+ <svg height="40px" viewBox="0 0 679 158">
1443
+ <title>PF-HorizontalLogo-Color</title>
1444
+ <defs>
1445
+ <linearGradient
1446
+ x1="68%"
1447
+ y1="2.25860997e-13%"
1448
+ x2="32%"
1449
+ y2="100%"
1450
+ id="linearGradient-modal-large-example-masthead"
1451
+ >
1452
+ <stop stop-color="#2B9AF3" offset="0%" />
1453
+ <stop
1454
+ stop-color="#73BCF7"
1455
+ stop-opacity="0.502212631"
1456
+ offset="100%"
1457
+ />
1458
+ </linearGradient>
1459
+ </defs>
1460
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1461
+ <g
1462
+ transform="translate(206.000000, 45.750000)"
1463
+ fill="var(--pf-t--global--text--color--regular)"
1464
+ fill-rule="nonzero"
1465
+ >
1466
+ <path
1467
+ 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"
1468
+ />
1469
+ <path
1470
+ 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"
1471
+ />
1472
+ <path
1473
+ 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"
1474
+ />
1475
+ <path
1476
+ 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"
1477
+ />
1478
+ <path
1479
+ 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"
1480
+ />
1481
+ <path
1482
+ 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"
1483
+ />
1484
+ <path
1485
+ 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"
1486
+ />
1487
+ <polygon
1488
+ 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"
1489
+ />
1490
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1491
+ <path
1492
+ 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"
1493
+ />
1494
+ </g>
1495
+ <g transform="translate(0.000000, 0.000000)">
1496
+ <path
1497
+ 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"
1498
+ fill="#0066CC"
1499
+ />
1500
+ <path
1501
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1502
+ fill="url(#linearGradient-modal-large-example-masthead)"
1503
+ />
1504
+ <path
1505
+ 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"
1506
+ fill="url(#linearGradient-modal-large-example-masthead)"
1507
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1508
+ />
1509
+ </g>
1510
+ </g>
1511
+ </svg>
1124
1512
  </a>
1125
1513
  </div>
1126
1514
  <div class="pf-v5-c-masthead__content">
1127
1515
  <div
1128
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1516
+ class="pf-v5-c-toolbar pf-m-static"
1129
1517
  id="modal-large-example-masthead-toolbar"
1130
1518
  >
1131
1519
  <div class="pf-v5-c-toolbar__content">
1132
1520
  <div class="pf-v5-c-toolbar__content-section">
1521
+ <div class="pf-v5-c-toolbar__item">
1522
+ <button
1523
+ class="pf-v5-c-menu-toggle"
1524
+ type="button"
1525
+ aria-expanded="false"
1526
+ >
1527
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1528
+ <span class="pf-v5-c-menu-toggle__controls">
1529
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1530
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1531
+ </span>
1532
+ </span>
1533
+ </button>
1534
+ </div>
1535
+
1536
+ <div class="pf-v5-c-toolbar__item">
1537
+ <button
1538
+ class="pf-v5-c-menu-toggle"
1539
+ type="button"
1540
+ aria-expanded="false"
1541
+ >
1542
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1543
+ <span class="pf-v5-c-menu-toggle__controls">
1544
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1545
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1546
+ </span>
1547
+ </span>
1548
+ </button>
1549
+ </div>
1550
+
1133
1551
  <div
1134
- 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"
1552
+ 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"
1135
1553
  >
1136
1554
  <div
1137
1555
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1143,7 +1561,9 @@ section: components
1143
1561
  aria-expanded="false"
1144
1562
  aria-label="Application launcher"
1145
1563
  >
1146
- <i class="fas fa-th" aria-hidden="true"></i>
1564
+ <span class="pf-v5-c-menu-toggle__icon">
1565
+ <i class="fas fa-th" aria-hidden="true"></i>
1566
+ </span>
1147
1567
  </button>
1148
1568
  </div>
1149
1569
  <div class="pf-v5-c-toolbar__item">
@@ -1153,7 +1573,9 @@ section: components
1153
1573
  aria-expanded="false"
1154
1574
  aria-label="Settings"
1155
1575
  >
1156
- <i class="fas fa-cog" aria-hidden="true"></i>
1576
+ <span class="pf-v5-c-menu-toggle__icon">
1577
+ <i class="fas fa-cog" aria-hidden="true"></i>
1578
+ </span>
1157
1579
  </button>
1158
1580
  </div>
1159
1581
  <div class="pf-v5-c-toolbar__item">
@@ -1163,7 +1585,9 @@ section: components
1163
1585
  aria-expanded="false"
1164
1586
  aria-label="Help"
1165
1587
  >
1166
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1588
+ <span class="pf-v5-c-menu-toggle__icon">
1589
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1590
+ </span>
1167
1591
  </button>
1168
1592
  </div>
1169
1593
  </div>
@@ -1174,31 +1598,12 @@ section: components
1174
1598
  aria-expanded="false"
1175
1599
  aria-label="Actions"
1176
1600
  >
1177
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1601
+ <span class="pf-v5-c-menu-toggle__icon">
1602
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1603
+ </span>
1178
1604
  </button>
1179
1605
  </div>
1180
1606
  </div>
1181
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1182
- <button
1183
- class="pf-v5-c-menu-toggle pf-m-full-height"
1184
- type="button"
1185
- aria-expanded="false"
1186
- >
1187
- <span class="pf-v5-c-menu-toggle__icon">
1188
- <img
1189
- class="pf-v5-c-avatar"
1190
- alt="Avatar image"
1191
- src="/assets/images/img_avatar-light.svg"
1192
- />
1193
- </span>
1194
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1195
- <span class="pf-v5-c-menu-toggle__controls">
1196
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1197
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1198
- </span>
1199
- </span>
1200
- </button>
1201
- </div>
1202
1607
  </div>
1203
1608
  </div>
1204
1609
  </div>
@@ -1384,23 +1789,117 @@ section: components
1384
1789
  </span>
1385
1790
  <div class="pf-v5-c-masthead__main">
1386
1791
  <a class="pf-v5-c-masthead__brand" href="#">
1387
- <img
1388
- class="pf-v5-c-brand"
1389
- src="/assets/images/pf-logo.svg"
1390
- alt="PatternFly logo"
1391
- style="--pf-v5-c-brand--Height:36px"
1392
- />
1792
+ <svg height="40px" viewBox="0 0 679 158">
1793
+ <title>PF-HorizontalLogo-Color</title>
1794
+ <defs>
1795
+ <linearGradient
1796
+ x1="68%"
1797
+ y1="2.25860997e-13%"
1798
+ x2="32%"
1799
+ y2="100%"
1800
+ id="linearGradient-modal-with-form-example-masthead"
1801
+ >
1802
+ <stop stop-color="#2B9AF3" offset="0%" />
1803
+ <stop
1804
+ stop-color="#73BCF7"
1805
+ stop-opacity="0.502212631"
1806
+ offset="100%"
1807
+ />
1808
+ </linearGradient>
1809
+ </defs>
1810
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1811
+ <g
1812
+ transform="translate(206.000000, 45.750000)"
1813
+ fill="var(--pf-t--global--text--color--regular)"
1814
+ fill-rule="nonzero"
1815
+ >
1816
+ <path
1817
+ 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"
1818
+ />
1819
+ <path
1820
+ 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"
1821
+ />
1822
+ <path
1823
+ 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"
1824
+ />
1825
+ <path
1826
+ 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"
1827
+ />
1828
+ <path
1829
+ 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"
1830
+ />
1831
+ <path
1832
+ 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"
1833
+ />
1834
+ <path
1835
+ 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"
1836
+ />
1837
+ <polygon
1838
+ 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"
1839
+ />
1840
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1841
+ <path
1842
+ 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"
1843
+ />
1844
+ </g>
1845
+ <g transform="translate(0.000000, 0.000000)">
1846
+ <path
1847
+ 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"
1848
+ fill="#0066CC"
1849
+ />
1850
+ <path
1851
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1852
+ fill="url(#linearGradient-modal-with-form-example-masthead)"
1853
+ />
1854
+ <path
1855
+ 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"
1856
+ fill="url(#linearGradient-modal-with-form-example-masthead)"
1857
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1858
+ />
1859
+ </g>
1860
+ </g>
1861
+ </svg>
1393
1862
  </a>
1394
1863
  </div>
1395
1864
  <div class="pf-v5-c-masthead__content">
1396
1865
  <div
1397
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1866
+ class="pf-v5-c-toolbar pf-m-static"
1398
1867
  id="modal-with-form-example-masthead-toolbar"
1399
1868
  >
1400
1869
  <div class="pf-v5-c-toolbar__content">
1401
1870
  <div class="pf-v5-c-toolbar__content-section">
1871
+ <div class="pf-v5-c-toolbar__item">
1872
+ <button
1873
+ class="pf-v5-c-menu-toggle"
1874
+ type="button"
1875
+ aria-expanded="false"
1876
+ >
1877
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1878
+ <span class="pf-v5-c-menu-toggle__controls">
1879
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1880
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1881
+ </span>
1882
+ </span>
1883
+ </button>
1884
+ </div>
1885
+
1886
+ <div class="pf-v5-c-toolbar__item">
1887
+ <button
1888
+ class="pf-v5-c-menu-toggle"
1889
+ type="button"
1890
+ aria-expanded="false"
1891
+ >
1892
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1893
+ <span class="pf-v5-c-menu-toggle__controls">
1894
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1895
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1896
+ </span>
1897
+ </span>
1898
+ </button>
1899
+ </div>
1900
+
1402
1901
  <div
1403
- 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"
1902
+ 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"
1404
1903
  >
1405
1904
  <div
1406
1905
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1412,7 +1911,9 @@ section: components
1412
1911
  aria-expanded="false"
1413
1912
  aria-label="Application launcher"
1414
1913
  >
1415
- <i class="fas fa-th" aria-hidden="true"></i>
1914
+ <span class="pf-v5-c-menu-toggle__icon">
1915
+ <i class="fas fa-th" aria-hidden="true"></i>
1916
+ </span>
1416
1917
  </button>
1417
1918
  </div>
1418
1919
  <div class="pf-v5-c-toolbar__item">
@@ -1422,7 +1923,9 @@ section: components
1422
1923
  aria-expanded="false"
1423
1924
  aria-label="Settings"
1424
1925
  >
1425
- <i class="fas fa-cog" aria-hidden="true"></i>
1926
+ <span class="pf-v5-c-menu-toggle__icon">
1927
+ <i class="fas fa-cog" aria-hidden="true"></i>
1928
+ </span>
1426
1929
  </button>
1427
1930
  </div>
1428
1931
  <div class="pf-v5-c-toolbar__item">
@@ -1432,7 +1935,9 @@ section: components
1432
1935
  aria-expanded="false"
1433
1936
  aria-label="Help"
1434
1937
  >
1435
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1938
+ <span class="pf-v5-c-menu-toggle__icon">
1939
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1940
+ </span>
1436
1941
  </button>
1437
1942
  </div>
1438
1943
  </div>
@@ -1443,31 +1948,12 @@ section: components
1443
1948
  aria-expanded="false"
1444
1949
  aria-label="Actions"
1445
1950
  >
1446
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1951
+ <span class="pf-v5-c-menu-toggle__icon">
1952
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1953
+ </span>
1447
1954
  </button>
1448
1955
  </div>
1449
1956
  </div>
1450
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1451
- <button
1452
- class="pf-v5-c-menu-toggle pf-m-full-height"
1453
- type="button"
1454
- aria-expanded="false"
1455
- >
1456
- <span class="pf-v5-c-menu-toggle__icon">
1457
- <img
1458
- class="pf-v5-c-avatar"
1459
- alt="Avatar image"
1460
- src="/assets/images/img_avatar-light.svg"
1461
- />
1462
- </span>
1463
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1464
- <span class="pf-v5-c-menu-toggle__controls">
1465
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1466
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1467
- </span>
1468
- </span>
1469
- </button>
1470
- </div>
1471
1957
  </div>
1472
1958
  </div>
1473
1959
  </div>
@@ -1622,14 +2108,17 @@ section: components
1622
2108
  <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span
1623
2109
  class="pf-v5-c-form__label-required"
1624
2110
  aria-hidden="true"
1625
- >&#42;</span></label>&nbsp;<span
1626
- class="pf-v5-c-form__group-label-help"
1627
- aria-label="More information for name field"
1628
- aria-describedby="-form-name"
1629
- role="button"
1630
- type="button"
1631
- tabindex="0"
1632
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
2111
+ >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
2112
+ <span
2113
+ class="pf-v5-c-button pf-m-no-padding pf-m-plain"
2114
+ type="button"
2115
+ role="button"
2116
+ tabindex="0"
2117
+ aria-label="More information for name field"
2118
+ aria-describedby="-form-name"
2119
+ >
2120
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2121
+ </span></span>
1633
2122
  </div>
1634
2123
  <div class="pf-v5-c-form__group-control">
1635
2124
  <span class="pf-v5-c-form-control pf-m-required">
@@ -1642,14 +2131,17 @@ section: components
1642
2131
  <span class="pf-v5-c-form__label-text">E-mail</span>&nbsp;<span
1643
2132
  class="pf-v5-c-form__label-required"
1644
2133
  aria-hidden="true"
1645
- >&#42;</span></label>&nbsp;<span
1646
- class="pf-v5-c-form__group-label-help"
1647
- aria-label="More information for email field"
1648
- aria-describedby="-form-email"
1649
- role="button"
1650
- type="button"
1651
- tabindex="0"
1652
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
2134
+ >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
2135
+ <span
2136
+ class="pf-v5-c-button pf-m-no-padding pf-m-plain"
2137
+ type="button"
2138
+ role="button"
2139
+ tabindex="0"
2140
+ aria-label="More information for email field"
2141
+ aria-describedby="-form-email"
2142
+ >
2143
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2144
+ </span></span>
1653
2145
  </div>
1654
2146
  <div class="pf-v5-c-form__group-control">
1655
2147
  <span class="pf-v5-c-form-control pf-m-required">
@@ -1662,14 +2154,17 @@ section: components
1662
2154
  <span class="pf-v5-c-form__label-text">Address</span>&nbsp;<span
1663
2155
  class="pf-v5-c-form__label-required"
1664
2156
  aria-hidden="true"
1665
- >&#42;</span></label>&nbsp;<span
1666
- class="pf-v5-c-form__group-label-help"
1667
- aria-label="More information for address field"
1668
- aria-describedby="-form-address"
1669
- role="button"
1670
- type="button"
1671
- tabindex="0"
1672
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
2157
+ >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
2158
+ <span
2159
+ class="pf-v5-c-button pf-m-no-padding pf-m-plain"
2160
+ type="button"
2161
+ role="button"
2162
+ tabindex="0"
2163
+ aria-label="More information for address field"
2164
+ aria-describedby="-form-address"
2165
+ >
2166
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2167
+ </span></span>
1673
2168
  </div>
1674
2169
  <div class="pf-v5-c-form__group-control">
1675
2170
  <span class="pf-v5-c-form-control pf-m-required">