@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/Masthead/examples/Masthead.md CHANGED
@@ -26,22 +26,86 @@ 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-masthead-basic-example-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-masthead-basic-example-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-masthead-basic-example-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="masthead-basic-example-masthead-toolbar"
41
105
  >
42
106
  <div class="pf-v5-c-toolbar__content">
43
107
  <div class="pf-v5-c-toolbar__content-section">
44
- <div class="pf-v5-c-toolbar__group pf-m-align-right">
108
+ <div class="pf-v5-c-toolbar__group pf-m-align-end">
45
109
  <div class="pf-v5-c-toolbar__item">
46
110
  <button
47
111
  class="pf-v5-c-menu-toggle pf-m-plain"
@@ -49,7 +113,9 @@ wrapperTag: div
49
113
  aria-expanded="false"
50
114
  aria-label="Actions"
51
115
  >
52
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
116
+ <span class="pf-v5-c-menu-toggle__icon">
117
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
118
+ </span>
53
119
  </button>
54
120
  </div>
55
121
  </div>
@@ -204,17 +270,81 @@ wrapperTag: div
204
270
  </span>
205
271
  <div class="pf-v5-c-masthead__main">
206
272
  <a class="pf-v5-c-masthead__brand" href="#">
207
- <img
208
- class="pf-v5-c-brand"
209
- src="/assets/images/pf-logo.svg"
210
- alt="PatternFly logo"
211
- style="--pf-v5-c-brand--Height:36px"
212
- />
273
+ <svg height="40px" viewBox="0 0 679 158">
274
+ <title>PF-HorizontalLogo-Color</title>
275
+ <defs>
276
+ <linearGradient
277
+ x1="68%"
278
+ y1="2.25860997e-13%"
279
+ x2="32%"
280
+ y2="100%"
281
+ id="linearGradient-masthead-context-selecton-drilldown-example-masthead"
282
+ >
283
+ <stop stop-color="#2B9AF3" offset="0%" />
284
+ <stop
285
+ stop-color="#73BCF7"
286
+ stop-opacity="0.502212631"
287
+ offset="100%"
288
+ />
289
+ </linearGradient>
290
+ </defs>
291
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
292
+ <g
293
+ transform="translate(206.000000, 45.750000)"
294
+ fill="var(--pf-t--global--text--color--regular)"
295
+ fill-rule="nonzero"
296
+ >
297
+ <path
298
+ 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"
299
+ />
300
+ <path
301
+ 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"
302
+ />
303
+ <path
304
+ 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"
305
+ />
306
+ <path
307
+ 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"
308
+ />
309
+ <path
310
+ 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"
311
+ />
312
+ <path
313
+ 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"
314
+ />
315
+ <path
316
+ 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"
317
+ />
318
+ <polygon
319
+ 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"
320
+ />
321
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
322
+ <path
323
+ 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"
324
+ />
325
+ </g>
326
+ <g transform="translate(0.000000, 0.000000)">
327
+ <path
328
+ 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"
329
+ fill="#0066CC"
330
+ />
331
+ <path
332
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
333
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
334
+ />
335
+ <path
336
+ 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"
337
+ fill="url(#linearGradient-masthead-context-selecton-drilldown-example-masthead)"
338
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
339
+ />
340
+ </g>
341
+ </g>
342
+ </svg>
213
343
  </a>
214
344
  </div>
215
345
  <div class="pf-v5-c-masthead__content">
216
346
  <div
217
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
347
+ class="pf-v5-c-toolbar pf-m-static"
218
348
  id="masthead-context-selecton-drilldown-example-masthead-toolbar"
219
349
  >
220
350
  <div class="pf-v5-c-toolbar__content">
@@ -229,7 +359,7 @@ wrapperTag: div
229
359
  <span class="pf-v5-c-menu-toggle__text">Context selector</span>
230
360
  <span class="pf-v5-c-menu-toggle__controls">
231
361
  <span class="pf-v5-c-menu-toggle__toggle-icon">
232
- <i class="fas fa-angle-down" aria-hidden="true"></i>
362
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
233
363
  </span>
234
364
  </span>
235
365
  </button>
@@ -243,20 +373,22 @@ wrapperTag: div
243
373
  <span class="pf-v5-c-menu-toggle__text">Dropdown</span>
244
374
  <span class="pf-v5-c-menu-toggle__controls">
245
375
  <span class="pf-v5-c-menu-toggle__toggle-icon">
246
- <i class="fas fa-angle-down" aria-hidden="true"></i>
376
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
247
377
  </span>
248
378
  </span>
249
379
  </button>
250
380
  </div>
251
381
  </div>
252
- <div class="pf-v5-c-toolbar__item pf-m-align-right">
382
+ <div class="pf-v5-c-toolbar__item pf-m-align-end">
253
383
  <button
254
384
  class="pf-v5-c-menu-toggle pf-m-plain"
255
385
  type="button"
256
386
  aria-expanded="false"
257
387
  aria-label="Actions"
258
388
  >
259
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
389
+ <span class="pf-v5-c-menu-toggle__icon">
390
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
391
+ </span>
260
392
  </button>
261
393
  </div>
262
394
  </div>
@@ -410,33 +542,99 @@ wrapperTag: div
410
542
  </span>
411
543
  <div class="pf-v5-c-masthead__main">
412
544
  <a class="pf-v5-c-masthead__brand" href="#">
413
- <img
414
- class="pf-v5-c-brand"
415
- src="/assets/images/pf-logo.svg"
416
- alt="PatternFly logo"
417
- style="--pf-v5-c-brand--Height:36px"
418
- />
545
+ <svg height="40px" viewBox="0 0 679 158">
546
+ <title>PF-HorizontalLogo-Color</title>
547
+ <defs>
548
+ <linearGradient
549
+ x1="68%"
550
+ y1="2.25860997e-13%"
551
+ x2="32%"
552
+ y2="100%"
553
+ id="linearGradient-masthead-toolbar-filters-example-masthead"
554
+ >
555
+ <stop stop-color="#2B9AF3" offset="0%" />
556
+ <stop
557
+ stop-color="#73BCF7"
558
+ stop-opacity="0.502212631"
559
+ offset="100%"
560
+ />
561
+ </linearGradient>
562
+ </defs>
563
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
564
+ <g
565
+ transform="translate(206.000000, 45.750000)"
566
+ fill="var(--pf-t--global--text--color--regular)"
567
+ fill-rule="nonzero"
568
+ >
569
+ <path
570
+ 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"
571
+ />
572
+ <path
573
+ 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"
574
+ />
575
+ <path
576
+ 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"
577
+ />
578
+ <path
579
+ 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"
580
+ />
581
+ <path
582
+ 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"
583
+ />
584
+ <path
585
+ 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"
586
+ />
587
+ <path
588
+ 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"
589
+ />
590
+ <polygon
591
+ 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"
592
+ />
593
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
594
+ <path
595
+ 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"
596
+ />
597
+ </g>
598
+ <g transform="translate(0.000000, 0.000000)">
599
+ <path
600
+ 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"
601
+ fill="#0066CC"
602
+ />
603
+ <path
604
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
605
+ fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
606
+ />
607
+ <path
608
+ 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"
609
+ fill="url(#linearGradient-masthead-toolbar-filters-example-masthead)"
610
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
611
+ />
612
+ </g>
613
+ </g>
614
+ </svg>
419
615
  </a>
420
616
  </div>
421
617
  <div class="pf-v5-c-masthead__content">
422
618
  <div
423
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
619
+ class="pf-v5-c-toolbar pf-m-static"
424
620
  id="masthead-toolbar-filters-example-masthead-toolbar"
425
621
  >
426
622
  <div class="pf-v5-c-toolbar__content">
427
623
  <div class="pf-v5-c-toolbar__content-section">
428
624
  <div
429
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-right"
625
+ class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-end"
430
626
  >
431
- <div class="pf-v5-c-toolbar__toggle">
627
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
432
628
  <button
433
- class="pf-v5-c-button pf-m-plain"
629
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
434
630
  type="button"
435
- aria-label="Show filters"
436
631
  aria-expanded="true"
632
+ aria-label="Show filters"
437
633
  aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
438
634
  >
439
- <i class="fas fa-filter" aria-hidden="true"></i>
635
+ <span class="pf-v5-c-menu-toggle__icon">
636
+ <i class="fas fa-filter" aria-hidden="true"></i>
637
+ </span>
440
638
  </button>
441
639
  </div>
442
640
  <div class="pf-v5-c-toolbar__item pf-m-search-filter">
@@ -446,75 +644,22 @@ wrapperTag: div
446
644
  role="group"
447
645
  >
448
646
  <div class="pf-v5-c-input-group__item">
449
- <div class="pf-v5-c-select" style="width: 124px">
450
- <span
451
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
452
- hidden
453
- >Choose one</span>
454
-
455
- <button
456
- class="pf-v5-c-select__toggle"
457
- type="button"
458
- id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
459
- aria-haspopup="true"
460
- aria-expanded="false"
461
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
462
- >
463
- <div class="pf-v5-c-select__toggle-wrapper">
464
- <span class="pf-v5-c-select__toggle-icon">
465
- <i class="fas fa-filter" aria-hidden="true"></i>
466
- </span>
467
- <span class="pf-v5-c-select__toggle-text">Name</span>
468
- </div>
469
- <span class="pf-v5-c-select__toggle-arrow">
647
+ <button
648
+ class="pf-v5-c-menu-toggle"
649
+ type="button"
650
+ aria-expanded="false"
651
+ id="masthead-toolbar-filters-example-masthead-toolbar-search-filter-menu"
652
+ >
653
+ <span class="pf-v5-c-menu-toggle__icon">
654
+ <i class="fas fa-filter" aria-hidden="true"></i>
655
+ </span>
656
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
657
+ <span class="pf-v5-c-menu-toggle__controls">
658
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
470
659
  <i class="fas fa-caret-down" aria-hidden="true"></i>
471
660
  </span>
472
- </button>
473
-
474
- <ul
475
- class="pf-v5-c-select__menu"
476
- role="listbox"
477
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
478
- hidden
479
- >
480
- <li role="presentation">
481
- <button
482
- class="pf-v5-c-select__menu-item"
483
- role="option"
484
- >Running</button>
485
- </li>
486
- <li role="presentation">
487
- <button
488
- class="pf-v5-c-select__menu-item pf-m-selected"
489
- role="option"
490
- aria-selected="true"
491
- >
492
- Stopped
493
- <span class="pf-v5-c-select__menu-item-icon">
494
- <i class="fas fa-check" aria-hidden="true"></i>
495
- </span>
496
- </button>
497
- </li>
498
- <li role="presentation">
499
- <button
500
- class="pf-v5-c-select__menu-item"
501
- role="option"
502
- >Down</button>
503
- </li>
504
- <li role="presentation">
505
- <button
506
- class="pf-v5-c-select__menu-item"
507
- role="option"
508
- >Degraded</button>
509
- </li>
510
- <li role="presentation">
511
- <button
512
- class="pf-v5-c-select__menu-item"
513
- role="option"
514
- >Needs maintenance</button>
515
- </li>
516
- </ul>
517
- </div>
661
+ </span>
662
+ </button>
518
663
  </div>
519
664
  <div class="pf-v5-c-input-group__item pf-m-fill">
520
665
  <div class="pf-v5-c-text-input-group">
@@ -544,7 +689,9 @@ wrapperTag: div
544
689
  aria-expanded="false"
545
690
  aria-label="Actions"
546
691
  >
547
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
692
+ <span class="pf-v5-c-menu-toggle__icon">
693
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
694
+ </span>
548
695
  </button>
549
696
  </div>
550
697
  </div>
@@ -703,33 +850,99 @@ wrapperTag: div
703
850
  </span>
704
851
  <div class="pf-v5-c-masthead__main">
705
852
  <a class="pf-v5-c-masthead__brand" href="#">
706
- <img
707
- class="pf-v5-c-brand"
708
- src="/assets/images/pf-logo.svg"
709
- alt="PatternFly logo"
710
- style="--pf-v5-c-brand--Height:36px"
711
- />
853
+ <svg height="40px" viewBox="0 0 679 158">
854
+ <title>PF-HorizontalLogo-Color</title>
855
+ <defs>
856
+ <linearGradient
857
+ x1="68%"
858
+ y1="2.25860997e-13%"
859
+ x2="32%"
860
+ y2="100%"
861
+ id="linearGradient-masthead-toggle-group-filters-example-masthead"
862
+ >
863
+ <stop stop-color="#2B9AF3" offset="0%" />
864
+ <stop
865
+ stop-color="#73BCF7"
866
+ stop-opacity="0.502212631"
867
+ offset="100%"
868
+ />
869
+ </linearGradient>
870
+ </defs>
871
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
872
+ <g
873
+ transform="translate(206.000000, 45.750000)"
874
+ fill="var(--pf-t--global--text--color--regular)"
875
+ fill-rule="nonzero"
876
+ >
877
+ <path
878
+ 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"
879
+ />
880
+ <path
881
+ 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"
882
+ />
883
+ <path
884
+ 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"
885
+ />
886
+ <path
887
+ 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"
888
+ />
889
+ <path
890
+ 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"
891
+ />
892
+ <path
893
+ 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"
894
+ />
895
+ <path
896
+ 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"
897
+ />
898
+ <polygon
899
+ 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"
900
+ />
901
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
902
+ <path
903
+ 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"
904
+ />
905
+ </g>
906
+ <g transform="translate(0.000000, 0.000000)">
907
+ <path
908
+ 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"
909
+ fill="#0066CC"
910
+ />
911
+ <path
912
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
913
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
914
+ />
915
+ <path
916
+ 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"
917
+ fill="url(#linearGradient-masthead-toggle-group-filters-example-masthead)"
918
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
919
+ />
920
+ </g>
921
+ </g>
922
+ </svg>
712
923
  </a>
713
924
  </div>
714
925
  <div class="pf-v5-c-masthead__content">
715
926
  <div
716
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
927
+ class="pf-v5-c-toolbar pf-m-static"
717
928
  id="masthead-toggle-group-filters-example-masthead-toolbar"
718
929
  >
719
930
  <div class="pf-v5-c-toolbar__content">
720
931
  <div class="pf-v5-c-toolbar__content-section">
721
932
  <div
722
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg pf-m-align-right"
933
+ class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg pf-m-align-end"
723
934
  >
724
- <div class="pf-v5-c-toolbar__toggle">
935
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
725
936
  <button
726
- class="pf-v5-c-button pf-m-plain"
937
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
727
938
  type="button"
728
- aria-label="Show filters"
729
939
  aria-expanded="true"
940
+ aria-label="Show filters"
730
941
  aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
731
942
  >
732
- <i class="fas fa-filter" aria-hidden="true"></i>
943
+ <span class="pf-v5-c-menu-toggle__icon">
944
+ <i class="fas fa-filter" aria-hidden="true"></i>
945
+ </span>
733
946
  </button>
734
947
  </div>
735
948
  <div class="pf-v5-c-toolbar__item pf-m-search-filter">
@@ -739,75 +952,22 @@ wrapperTag: div
739
952
  role="group"
740
953
  >
741
954
  <div class="pf-v5-c-input-group__item">
742
- <div class="pf-v5-c-select" style="width: 124px">
743
- <span
744
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
745
- hidden
746
- >Choose one</span>
747
-
748
- <button
749
- class="pf-v5-c-select__toggle"
750
- type="button"
751
- id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
752
- aria-haspopup="true"
753
- aria-expanded="false"
754
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
755
- >
756
- <div class="pf-v5-c-select__toggle-wrapper">
757
- <span class="pf-v5-c-select__toggle-icon">
758
- <i class="fas fa-filter" aria-hidden="true"></i>
759
- </span>
760
- <span class="pf-v5-c-select__toggle-text">Name</span>
761
- </div>
762
- <span class="pf-v5-c-select__toggle-arrow">
955
+ <button
956
+ class="pf-v5-c-menu-toggle"
957
+ type="button"
958
+ aria-expanded="false"
959
+ id="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-menu"
960
+ >
961
+ <span class="pf-v5-c-menu-toggle__icon">
962
+ <i class="fas fa-filter" aria-hidden="true"></i>
963
+ </span>
964
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
965
+ <span class="pf-v5-c-menu-toggle__controls">
966
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
763
967
  <i class="fas fa-caret-down" aria-hidden="true"></i>
764
968
  </span>
765
- </button>
766
-
767
- <ul
768
- class="pf-v5-c-select__menu"
769
- role="listbox"
770
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
771
- hidden
772
- >
773
- <li role="presentation">
774
- <button
775
- class="pf-v5-c-select__menu-item"
776
- role="option"
777
- >Running</button>
778
- </li>
779
- <li role="presentation">
780
- <button
781
- class="pf-v5-c-select__menu-item pf-m-selected"
782
- role="option"
783
- aria-selected="true"
784
- >
785
- Stopped
786
- <span class="pf-v5-c-select__menu-item-icon">
787
- <i class="fas fa-check" aria-hidden="true"></i>
788
- </span>
789
- </button>
790
- </li>
791
- <li role="presentation">
792
- <button
793
- class="pf-v5-c-select__menu-item"
794
- role="option"
795
- >Down</button>
796
- </li>
797
- <li role="presentation">
798
- <button
799
- class="pf-v5-c-select__menu-item"
800
- role="option"
801
- >Degraded</button>
802
- </li>
803
- <li role="presentation">
804
- <button
805
- class="pf-v5-c-select__menu-item"
806
- role="option"
807
- >Needs maintenance</button>
808
- </li>
809
- </ul>
810
- </div>
969
+ </span>
970
+ </button>
811
971
  </div>
812
972
  <div class="pf-v5-c-input-group__item pf-m-fill">
813
973
  <div class="pf-v5-c-text-input-group">
@@ -837,7 +997,9 @@ wrapperTag: div
837
997
  aria-expanded="false"
838
998
  aria-label="Actions"
839
999
  >
840
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1000
+ <span class="pf-v5-c-menu-toggle__icon">
1001
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1002
+ </span>
841
1003
  </button>
842
1004
  </div>
843
1005
  </div>
@@ -996,22 +1158,86 @@ wrapperTag: div
996
1158
  </span>
997
1159
  <div class="pf-v5-c-masthead__main">
998
1160
  <a class="pf-v5-c-masthead__brand" href="#">
999
- <img
1000
- class="pf-v5-c-brand"
1001
- src="/assets/images/pf-logo.svg"
1002
- alt="PatternFly logo"
1003
- style="--pf-v5-c-brand--Height:36px"
1004
- />
1161
+ <svg height="40px" viewBox="0 0 679 158">
1162
+ <title>PF-HorizontalLogo-Color</title>
1163
+ <defs>
1164
+ <linearGradient
1165
+ x1="68%"
1166
+ y1="2.25860997e-13%"
1167
+ x2="32%"
1168
+ y2="100%"
1169
+ id="linearGradient-masthead-expandable-search-example-masthead"
1170
+ >
1171
+ <stop stop-color="#2B9AF3" offset="0%" />
1172
+ <stop
1173
+ stop-color="#73BCF7"
1174
+ stop-opacity="0.502212631"
1175
+ offset="100%"
1176
+ />
1177
+ </linearGradient>
1178
+ </defs>
1179
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1180
+ <g
1181
+ transform="translate(206.000000, 45.750000)"
1182
+ fill="var(--pf-t--global--text--color--regular)"
1183
+ fill-rule="nonzero"
1184
+ >
1185
+ <path
1186
+ 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"
1187
+ />
1188
+ <path
1189
+ 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"
1190
+ />
1191
+ <path
1192
+ 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"
1193
+ />
1194
+ <path
1195
+ 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"
1196
+ />
1197
+ <path
1198
+ 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"
1199
+ />
1200
+ <path
1201
+ 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"
1202
+ />
1203
+ <path
1204
+ 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"
1205
+ />
1206
+ <polygon
1207
+ 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"
1208
+ />
1209
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1210
+ <path
1211
+ 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"
1212
+ />
1213
+ </g>
1214
+ <g transform="translate(0.000000, 0.000000)">
1215
+ <path
1216
+ 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"
1217
+ fill="#0066CC"
1218
+ />
1219
+ <path
1220
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1221
+ fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1222
+ />
1223
+ <path
1224
+ 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"
1225
+ fill="url(#linearGradient-masthead-expandable-search-example-masthead)"
1226
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1227
+ />
1228
+ </g>
1229
+ </g>
1230
+ </svg>
1005
1231
  </a>
1006
1232
  </div>
1007
1233
  <div class="pf-v5-c-masthead__content">
1008
1234
  <div
1009
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1235
+ class="pf-v5-c-toolbar pf-m-static"
1010
1236
  id="masthead-expandable-search-example-masthead-toolbar"
1011
1237
  >
1012
1238
  <div class="pf-v5-c-toolbar__content">
1013
1239
  <div class="pf-v5-c-toolbar__content-section">
1014
- <div class="pf-v5-c-toolbar__group pf-m-align-right">
1240
+ <div class="pf-v5-c-toolbar__group pf-m-align-end">
1015
1241
  <div class="pf-v5-c-toolbar__item">
1016
1242
  <div class="pf-v5-c-input-group pf-m-plain">
1017
1243
  <div class="pf-v5-c-input-group__item pf-m-plain">
@@ -1177,22 +1403,86 @@ wrapperTag: div
1177
1403
  </span>
1178
1404
  <div class="pf-v5-c-masthead__main">
1179
1405
  <a class="pf-v5-c-masthead__brand" href="#">
1180
- <img
1181
- class="pf-v5-c-brand"
1182
- src="/assets/images/pf-logo.svg"
1183
- alt="PatternFly logo"
1184
- style="--pf-v5-c-brand--Height:36px"
1185
- />
1406
+ <svg height="40px" viewBox="0 0 679 158">
1407
+ <title>PF-HorizontalLogo-Color</title>
1408
+ <defs>
1409
+ <linearGradient
1410
+ x1="68%"
1411
+ y1="2.25860997e-13%"
1412
+ x2="32%"
1413
+ y2="100%"
1414
+ id="linearGradient-masthead-expandable-search-expanded-example-masthead"
1415
+ >
1416
+ <stop stop-color="#2B9AF3" offset="0%" />
1417
+ <stop
1418
+ stop-color="#73BCF7"
1419
+ stop-opacity="0.502212631"
1420
+ offset="100%"
1421
+ />
1422
+ </linearGradient>
1423
+ </defs>
1424
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1425
+ <g
1426
+ transform="translate(206.000000, 45.750000)"
1427
+ fill="var(--pf-t--global--text--color--regular)"
1428
+ fill-rule="nonzero"
1429
+ >
1430
+ <path
1431
+ 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"
1432
+ />
1433
+ <path
1434
+ 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"
1435
+ />
1436
+ <path
1437
+ 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"
1438
+ />
1439
+ <path
1440
+ 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"
1441
+ />
1442
+ <path
1443
+ 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"
1444
+ />
1445
+ <path
1446
+ 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"
1447
+ />
1448
+ <path
1449
+ 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"
1450
+ />
1451
+ <polygon
1452
+ 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"
1453
+ />
1454
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1455
+ <path
1456
+ 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"
1457
+ />
1458
+ </g>
1459
+ <g transform="translate(0.000000, 0.000000)">
1460
+ <path
1461
+ 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"
1462
+ fill="#0066CC"
1463
+ />
1464
+ <path
1465
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1466
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1467
+ />
1468
+ <path
1469
+ 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"
1470
+ fill="url(#linearGradient-masthead-expandable-search-expanded-example-masthead)"
1471
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1472
+ />
1473
+ </g>
1474
+ </g>
1475
+ </svg>
1186
1476
  </a>
1187
1477
  </div>
1188
1478
  <div class="pf-v5-c-masthead__content">
1189
1479
  <div
1190
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1480
+ class="pf-v5-c-toolbar pf-m-static"
1191
1481
  id="masthead-expandable-search-expanded-example-masthead-toolbar"
1192
1482
  >
1193
1483
  <div class="pf-v5-c-toolbar__content">
1194
1484
  <div class="pf-v5-c-toolbar__content-section">
1195
- <div class="pf-v5-c-toolbar__group pf-m-align-right">
1485
+ <div class="pf-v5-c-toolbar__group pf-m-align-end">
1196
1486
  <div class="pf-v5-c-toolbar__item">
1197
1487
  <div class="pf-v5-c-input-group pf-m-plain">
1198
1488
  <div class="pf-v5-c-input-group__item pf-m-fill">
@@ -1376,23 +1666,117 @@ wrapperTag: div
1376
1666
  </span>
1377
1667
  <div class="pf-v5-c-masthead__main">
1378
1668
  <a class="pf-v5-c-masthead__brand" href="#">
1379
- <img
1380
- class="pf-v5-c-brand"
1381
- src="/assets/images/pf-logo.svg"
1382
- alt="PatternFly logo"
1383
- style="--pf-v5-c-brand--Height:36px"
1384
- />
1669
+ <svg height="40px" viewBox="0 0 679 158">
1670
+ <title>PF-HorizontalLogo-Color</title>
1671
+ <defs>
1672
+ <linearGradient
1673
+ x1="68%"
1674
+ y1="2.25860997e-13%"
1675
+ x2="32%"
1676
+ y2="100%"
1677
+ id="linearGradient-masthead-advanced-with-menu-example-masthead"
1678
+ >
1679
+ <stop stop-color="#2B9AF3" offset="0%" />
1680
+ <stop
1681
+ stop-color="#73BCF7"
1682
+ stop-opacity="0.502212631"
1683
+ offset="100%"
1684
+ />
1685
+ </linearGradient>
1686
+ </defs>
1687
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1688
+ <g
1689
+ transform="translate(206.000000, 45.750000)"
1690
+ fill="var(--pf-t--global--text--color--regular)"
1691
+ fill-rule="nonzero"
1692
+ >
1693
+ <path
1694
+ 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"
1695
+ />
1696
+ <path
1697
+ 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"
1698
+ />
1699
+ <path
1700
+ 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"
1701
+ />
1702
+ <path
1703
+ 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"
1704
+ />
1705
+ <path
1706
+ 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"
1707
+ />
1708
+ <path
1709
+ 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"
1710
+ />
1711
+ <path
1712
+ 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"
1713
+ />
1714
+ <polygon
1715
+ 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"
1716
+ />
1717
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1718
+ <path
1719
+ 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"
1720
+ />
1721
+ </g>
1722
+ <g transform="translate(0.000000, 0.000000)">
1723
+ <path
1724
+ 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"
1725
+ fill="#0066CC"
1726
+ />
1727
+ <path
1728
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1729
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
1730
+ />
1731
+ <path
1732
+ 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"
1733
+ fill="url(#linearGradient-masthead-advanced-with-menu-example-masthead)"
1734
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1735
+ />
1736
+ </g>
1737
+ </g>
1738
+ </svg>
1385
1739
  </a>
1386
1740
  </div>
1387
1741
  <div class="pf-v5-c-masthead__content">
1388
1742
  <div
1389
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1743
+ class="pf-v5-c-toolbar pf-m-static"
1390
1744
  id="masthead-advanced-with-menu-example-masthead-toolbar"
1391
1745
  >
1392
1746
  <div class="pf-v5-c-toolbar__content">
1393
1747
  <div class="pf-v5-c-toolbar__content-section">
1748
+ <div class="pf-v5-c-toolbar__item">
1749
+ <button
1750
+ class="pf-v5-c-menu-toggle"
1751
+ type="button"
1752
+ aria-expanded="false"
1753
+ >
1754
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1755
+ <span class="pf-v5-c-menu-toggle__controls">
1756
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1757
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1758
+ </span>
1759
+ </span>
1760
+ </button>
1761
+ </div>
1762
+
1763
+ <div class="pf-v5-c-toolbar__item">
1764
+ <button
1765
+ class="pf-v5-c-menu-toggle"
1766
+ type="button"
1767
+ aria-expanded="false"
1768
+ >
1769
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1770
+ <span class="pf-v5-c-menu-toggle__controls">
1771
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1772
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1773
+ </span>
1774
+ </span>
1775
+ </button>
1776
+ </div>
1777
+
1394
1778
  <div
1395
- 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"
1779
+ 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"
1396
1780
  >
1397
1781
  <div
1398
1782
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1404,7 +1788,9 @@ wrapperTag: div
1404
1788
  aria-expanded="false"
1405
1789
  aria-label="Application launcher"
1406
1790
  >
1407
- <i class="fas fa-th" aria-hidden="true"></i>
1791
+ <span class="pf-v5-c-menu-toggle__icon">
1792
+ <i class="fas fa-th" aria-hidden="true"></i>
1793
+ </span>
1408
1794
  </button>
1409
1795
  </div>
1410
1796
  <div class="pf-v5-c-toolbar__item">
@@ -1414,7 +1800,9 @@ wrapperTag: div
1414
1800
  aria-expanded="false"
1415
1801
  aria-label="Settings"
1416
1802
  >
1417
- <i class="fas fa-cog" aria-hidden="true"></i>
1803
+ <span class="pf-v5-c-menu-toggle__icon">
1804
+ <i class="fas fa-cog" aria-hidden="true"></i>
1805
+ </span>
1418
1806
  </button>
1419
1807
  </div>
1420
1808
  <div class="pf-v5-c-toolbar__item">
@@ -1424,7 +1812,9 @@ wrapperTag: div
1424
1812
  aria-expanded="false"
1425
1813
  aria-label="Help"
1426
1814
  >
1427
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1815
+ <span class="pf-v5-c-menu-toggle__icon">
1816
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1817
+ </span>
1428
1818
  </button>
1429
1819
  </div>
1430
1820
  </div>
@@ -1435,31 +1825,12 @@ wrapperTag: div
1435
1825
  aria-expanded="false"
1436
1826
  aria-label="Actions"
1437
1827
  >
1438
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1828
+ <span class="pf-v5-c-menu-toggle__icon">
1829
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1830
+ </span>
1439
1831
  </button>
1440
1832
  </div>
1441
1833
  </div>
1442
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1443
- <button
1444
- class="pf-v5-c-menu-toggle pf-m-full-height"
1445
- type="button"
1446
- aria-expanded="false"
1447
- >
1448
- <span class="pf-v5-c-menu-toggle__icon">
1449
- <img
1450
- class="pf-v5-c-avatar"
1451
- alt="Avatar image"
1452
- src="/assets/images/img_avatar-light.svg"
1453
- />
1454
- </span>
1455
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1456
- <span class="pf-v5-c-menu-toggle__controls">
1457
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1458
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1459
- </span>
1460
- </span>
1461
- </button>
1462
- </div>
1463
1834
  </div>
1464
1835
  </div>
1465
1836
  </div>
@@ -1599,37 +1970,135 @@ wrapperTag: div
1599
1970
  <header class="pf-v5-c-masthead" id="masthead-horizontal-nav-masthead">
1600
1971
  <div class="pf-v5-c-masthead__main">
1601
1972
  <a class="pf-v5-c-masthead__brand" href="#">
1602
- <img
1603
- class="pf-v5-c-brand"
1604
- src="/assets/images/pf-logo.svg"
1605
- alt="PatternFly logo"
1606
- style="--pf-v5-c-brand--Height:36px"
1607
- />
1973
+ <svg height="40px" viewBox="0 0 679 158">
1974
+ <title>PF-HorizontalLogo-Color</title>
1975
+ <defs>
1976
+ <linearGradient
1977
+ x1="68%"
1978
+ y1="2.25860997e-13%"
1979
+ x2="32%"
1980
+ y2="100%"
1981
+ id="linearGradient-masthead-horizontal-nav-masthead"
1982
+ >
1983
+ <stop stop-color="#2B9AF3" offset="0%" />
1984
+ <stop
1985
+ stop-color="#73BCF7"
1986
+ stop-opacity="0.502212631"
1987
+ offset="100%"
1988
+ />
1989
+ </linearGradient>
1990
+ </defs>
1991
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1992
+ <g
1993
+ transform="translate(206.000000, 45.750000)"
1994
+ fill="var(--pf-t--global--text--color--regular)"
1995
+ fill-rule="nonzero"
1996
+ >
1997
+ <path
1998
+ 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"
1999
+ />
2000
+ <path
2001
+ 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"
2002
+ />
2003
+ <path
2004
+ 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"
2005
+ />
2006
+ <path
2007
+ 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"
2008
+ />
2009
+ <path
2010
+ 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"
2011
+ />
2012
+ <path
2013
+ 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"
2014
+ />
2015
+ <path
2016
+ 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"
2017
+ />
2018
+ <polygon
2019
+ 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"
2020
+ />
2021
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2022
+ <path
2023
+ 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"
2024
+ />
2025
+ </g>
2026
+ <g transform="translate(0.000000, 0.000000)">
2027
+ <path
2028
+ 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"
2029
+ fill="#0066CC"
2030
+ />
2031
+ <path
2032
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2033
+ fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2034
+ />
2035
+ <path
2036
+ 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"
2037
+ fill="url(#linearGradient-masthead-horizontal-nav-masthead)"
2038
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2039
+ />
2040
+ </g>
2041
+ </g>
2042
+ </svg>
1608
2043
  </a>
1609
2044
  </div>
1610
2045
  <div class="pf-v5-c-masthead__content">
1611
2046
  <div
1612
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2047
+ class="pf-v5-c-toolbar pf-m-static"
1613
2048
  id="masthead-horizontal-nav-masthead-toolbar"
1614
2049
  >
1615
2050
  <div class="pf-v5-c-toolbar__content">
1616
2051
  <div class="pf-v5-c-toolbar__content-section">
2052
+ <div class="pf-v5-c-toolbar__item">
2053
+ <button
2054
+ class="pf-v5-c-menu-toggle"
2055
+ type="button"
2056
+ aria-expanded="false"
2057
+ >
2058
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2059
+ <span class="pf-v5-c-menu-toggle__controls">
2060
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2061
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2062
+ </span>
2063
+ </span>
2064
+ </button>
2065
+ </div>
2066
+
2067
+ <div class="pf-v5-c-toolbar__item">
2068
+ <button
2069
+ class="pf-v5-c-menu-toggle"
2070
+ type="button"
2071
+ aria-expanded="false"
2072
+ >
2073
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2074
+ <span class="pf-v5-c-menu-toggle__controls">
2075
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2076
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2077
+ </span>
2078
+ </span>
2079
+ </button>
2080
+ </div>
2081
+
1617
2082
  <div
1618
2083
  class="pf-v5-c-toolbar__item pf-m-overflow-container"
1619
2084
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
1620
2085
  >
1621
2086
  <nav
1622
- class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable"
1623
- id="-horizontal-nav"
2087
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
2088
+ id="masthead-horizontal-nav-masthead-horizontal-nav"
1624
2089
  aria-label="Global"
1625
2090
  >
1626
- <button
1627
- class="pf-v5-c-nav__scroll-button"
1628
- disabled
1629
- aria-label="Scroll left"
1630
- >
1631
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1632
- </button>
2091
+ <div class="pf-v5-c-nav__scroll-button">
2092
+ <button
2093
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
2094
+ type="button"
2095
+ aria-label="Scroll start"
2096
+ >
2097
+ <span class="pf-v5-c-button__icon">
2098
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2099
+ </span>
2100
+ </button>
2101
+ </div>
1633
2102
  <ul class="pf-v5-c-nav__list" role="list">
1634
2103
  <li class="pf-v5-c-nav__item">
1635
2104
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -1651,16 +2120,21 @@ wrapperTag: div
1651
2120
  >Horizontal nav item 5</a>
1652
2121
  </li>
1653
2122
  </ul>
1654
- <button
1655
- class="pf-v5-c-nav__scroll-button"
1656
- aria-label="Scroll right"
1657
- >
1658
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1659
- </button>
2123
+ <div class="pf-v5-c-nav__scroll-button">
2124
+ <button
2125
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
2126
+ type="button"
2127
+ aria-label="Scroll end"
2128
+ >
2129
+ <span class="pf-v5-c-button__icon">
2130
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2131
+ </span>
2132
+ </button>
2133
+ </div>
1660
2134
  </nav>
1661
2135
  </div>
1662
2136
  <div
1663
- 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"
2137
+ 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"
1664
2138
  >
1665
2139
  <div
1666
2140
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1672,7 +2146,9 @@ wrapperTag: div
1672
2146
  aria-expanded="false"
1673
2147
  aria-label="Application launcher"
1674
2148
  >
1675
- <i class="fas fa-th" aria-hidden="true"></i>
2149
+ <span class="pf-v5-c-menu-toggle__icon">
2150
+ <i class="fas fa-th" aria-hidden="true"></i>
2151
+ </span>
1676
2152
  </button>
1677
2153
  </div>
1678
2154
  <div class="pf-v5-c-toolbar__item">
@@ -1682,7 +2158,9 @@ wrapperTag: div
1682
2158
  aria-expanded="false"
1683
2159
  aria-label="Settings"
1684
2160
  >
1685
- <i class="fas fa-cog" aria-hidden="true"></i>
2161
+ <span class="pf-v5-c-menu-toggle__icon">
2162
+ <i class="fas fa-cog" aria-hidden="true"></i>
2163
+ </span>
1686
2164
  </button>
1687
2165
  </div>
1688
2166
  <div class="pf-v5-c-toolbar__item">
@@ -1692,7 +2170,9 @@ wrapperTag: div
1692
2170
  aria-expanded="false"
1693
2171
  aria-label="Help"
1694
2172
  >
1695
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2173
+ <span class="pf-v5-c-menu-toggle__icon">
2174
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2175
+ </span>
1696
2176
  </button>
1697
2177
  </div>
1698
2178
  </div>
@@ -1703,31 +2183,12 @@ wrapperTag: div
1703
2183
  aria-expanded="false"
1704
2184
  aria-label="Actions"
1705
2185
  >
1706
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2186
+ <span class="pf-v5-c-menu-toggle__icon">
2187
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2188
+ </span>
1707
2189
  </button>
1708
2190
  </div>
1709
2191
  </div>
1710
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1711
- <button
1712
- class="pf-v5-c-menu-toggle pf-m-full-height"
1713
- type="button"
1714
- aria-expanded="false"
1715
- >
1716
- <span class="pf-v5-c-menu-toggle__icon">
1717
- <img
1718
- class="pf-v5-c-avatar"
1719
- alt="Avatar image"
1720
- src="/assets/images/img_avatar-light.svg"
1721
- />
1722
- </span>
1723
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1724
- <span class="pf-v5-c-menu-toggle__controls">
1725
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1726
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1727
- </span>
1728
- </span>
1729
- </button>
1730
- </div>
1731
2192
  </div>
1732
2193
  </div>
1733
2194
  </div>
@@ -1853,33 +2314,99 @@ wrapperTag: div
1853
2314
  </span>
1854
2315
  <div class="pf-v5-c-masthead__main">
1855
2316
  <a class="pf-v5-c-masthead__brand" href="#">
1856
- <img
1857
- class="pf-v5-c-brand"
1858
- src="/assets/images/pf-logo.svg"
1859
- alt="PatternFly logo"
1860
- style="--pf-v5-c-brand--Height:36px"
1861
- />
2317
+ <svg height="40px" viewBox="0 0 679 158">
2318
+ <title>PF-HorizontalLogo-Color</title>
2319
+ <defs>
2320
+ <linearGradient
2321
+ x1="68%"
2322
+ y1="2.25860997e-13%"
2323
+ x2="32%"
2324
+ y2="100%"
2325
+ id="linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead"
2326
+ >
2327
+ <stop stop-color="#2B9AF3" offset="0%" />
2328
+ <stop
2329
+ stop-color="#73BCF7"
2330
+ stop-opacity="0.502212631"
2331
+ offset="100%"
2332
+ />
2333
+ </linearGradient>
2334
+ </defs>
2335
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2336
+ <g
2337
+ transform="translate(206.000000, 45.750000)"
2338
+ fill="var(--pf-t--global--text--color--regular)"
2339
+ fill-rule="nonzero"
2340
+ >
2341
+ <path
2342
+ 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"
2343
+ />
2344
+ <path
2345
+ 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"
2346
+ />
2347
+ <path
2348
+ 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"
2349
+ />
2350
+ <path
2351
+ 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"
2352
+ />
2353
+ <path
2354
+ 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"
2355
+ />
2356
+ <path
2357
+ 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"
2358
+ />
2359
+ <path
2360
+ 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"
2361
+ />
2362
+ <polygon
2363
+ 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"
2364
+ />
2365
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2366
+ <path
2367
+ 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"
2368
+ />
2369
+ </g>
2370
+ <g transform="translate(0.000000, 0.000000)">
2371
+ <path
2372
+ 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"
2373
+ fill="#0066CC"
2374
+ />
2375
+ <path
2376
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2377
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2378
+ />
2379
+ <path
2380
+ 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"
2381
+ fill="url(#linearGradient-masthead-toggle-group-filters-expanded-mobile-example-masthead)"
2382
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2383
+ />
2384
+ </g>
2385
+ </g>
2386
+ </svg>
1862
2387
  </a>
1863
2388
  </div>
1864
2389
  <div class="pf-v5-c-masthead__content">
1865
2390
  <div
1866
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2391
+ class="pf-v5-c-toolbar pf-m-static"
1867
2392
  id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar"
1868
2393
  >
1869
2394
  <div class="pf-v5-c-toolbar__content">
1870
2395
  <div class="pf-v5-c-toolbar__content-section">
1871
2396
  <div
1872
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-right"
2397
+ class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-end"
1873
2398
  >
1874
- <div class="pf-v5-c-toolbar__toggle">
2399
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1875
2400
  <button
1876
- class="pf-v5-c-button pf-m-plain"
2401
+ class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
1877
2402
  type="button"
1878
- aria-label="Show filters"
1879
2403
  aria-expanded="true"
2404
+ aria-label="Show filters"
1880
2405
  aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
1881
2406
  >
1882
- <i class="fas fa-filter" aria-hidden="true"></i>
2407
+ <span class="pf-v5-c-menu-toggle__icon">
2408
+ <i class="fas fa-filter" aria-hidden="true"></i>
2409
+ </span>
1883
2410
  </button>
1884
2411
  </div>
1885
2412
  </div>
@@ -1890,7 +2417,9 @@ wrapperTag: div
1890
2417
  aria-expanded="false"
1891
2418
  aria-label="Actions"
1892
2419
  >
1893
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2420
+ <span class="pf-v5-c-menu-toggle__icon">
2421
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2422
+ </span>
1894
2423
  </button>
1895
2424
  </div>
1896
2425
  </div>
@@ -1905,75 +2434,22 @@ wrapperTag: div
1905
2434
  role="group"
1906
2435
  >
1907
2436
  <div class="pf-v5-c-input-group__item">
1908
- <div class="pf-v5-c-select" style="width: 124px">
1909
- <span
1910
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
1911
- hidden
1912
- >Choose one</span>
1913
-
1914
- <button
1915
- class="pf-v5-c-select__toggle"
1916
- type="button"
1917
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
1918
- aria-haspopup="true"
1919
- aria-expanded="false"
1920
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
1921
- >
1922
- <div class="pf-v5-c-select__toggle-wrapper">
1923
- <span class="pf-v5-c-select__toggle-icon">
1924
- <i class="fas fa-filter" aria-hidden="true"></i>
1925
- </span>
1926
- <span class="pf-v5-c-select__toggle-text">Name</span>
1927
- </div>
1928
- <span class="pf-v5-c-select__toggle-arrow">
2437
+ <button
2438
+ class="pf-v5-c-menu-toggle"
2439
+ type="button"
2440
+ aria-expanded="false"
2441
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-menu"
2442
+ >
2443
+ <span class="pf-v5-c-menu-toggle__icon">
2444
+ <i class="fas fa-filter" aria-hidden="true"></i>
2445
+ </span>
2446
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
2447
+ <span class="pf-v5-c-menu-toggle__controls">
2448
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1929
2449
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1930
2450
  </span>
1931
- </button>
1932
-
1933
- <ul
1934
- class="pf-v5-c-select__menu"
1935
- role="listbox"
1936
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
1937
- hidden
1938
- >
1939
- <li role="presentation">
1940
- <button
1941
- class="pf-v5-c-select__menu-item"
1942
- role="option"
1943
- >Running</button>
1944
- </li>
1945
- <li role="presentation">
1946
- <button
1947
- class="pf-v5-c-select__menu-item pf-m-selected"
1948
- role="option"
1949
- aria-selected="true"
1950
- >
1951
- Stopped
1952
- <span class="pf-v5-c-select__menu-item-icon">
1953
- <i class="fas fa-check" aria-hidden="true"></i>
1954
- </span>
1955
- </button>
1956
- </li>
1957
- <li role="presentation">
1958
- <button
1959
- class="pf-v5-c-select__menu-item"
1960
- role="option"
1961
- >Down</button>
1962
- </li>
1963
- <li role="presentation">
1964
- <button
1965
- class="pf-v5-c-select__menu-item"
1966
- role="option"
1967
- >Degraded</button>
1968
- </li>
1969
- <li role="presentation">
1970
- <button
1971
- class="pf-v5-c-select__menu-item"
1972
- role="option"
1973
- >Needs maintenance</button>
1974
- </li>
1975
- </ul>
1976
- </div>
2451
+ </span>
2452
+ </button>
1977
2453
  </div>
1978
2454
  <div class="pf-v5-c-input-group__item pf-m-fill">
1979
2455
  <div class="pf-v5-c-text-input-group">