@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/Tabs/examples/Tabs.md CHANGED
@@ -25,23 +25,117 @@ section: components
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
27
  <a class="pf-v5-c-masthead__brand" href="#">
28
- <img
29
- class="pf-v5-c-brand"
30
- src="/assets/images/pf-logo.svg"
31
- alt="PatternFly logo"
32
- style="--pf-v5-c-brand--Height:36px"
33
- />
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
30
+ <defs>
31
+ <linearGradient
32
+ x1="68%"
33
+ y1="2.25860997e-13%"
34
+ x2="32%"
35
+ y2="100%"
36
+ id="linearGradient-tabs-tables-and-tabs-example-masthead"
37
+ >
38
+ <stop stop-color="#2B9AF3" offset="0%" />
39
+ <stop
40
+ stop-color="#73BCF7"
41
+ stop-opacity="0.502212631"
42
+ offset="100%"
43
+ />
44
+ </linearGradient>
45
+ </defs>
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
+ <g
48
+ transform="translate(206.000000, 45.750000)"
49
+ fill="var(--pf-t--global--text--color--regular)"
50
+ fill-rule="nonzero"
51
+ >
52
+ <path
53
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
54
+ />
55
+ <path
56
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
57
+ />
58
+ <path
59
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
60
+ />
61
+ <path
62
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
63
+ />
64
+ <path
65
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
66
+ />
67
+ <path
68
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
69
+ />
70
+ <path
71
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
72
+ />
73
+ <polygon
74
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
75
+ />
76
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
+ <path
78
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
79
+ />
80
+ </g>
81
+ <g transform="translate(0.000000, 0.000000)">
82
+ <path
83
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
84
+ fill="#0066CC"
85
+ />
86
+ <path
87
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
89
+ />
90
+ <path
91
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
92
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
93
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
+ />
95
+ </g>
96
+ </g>
97
+ </svg>
34
98
  </a>
35
99
  </div>
36
100
  <div class="pf-v5-c-masthead__content">
37
101
  <div
38
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
102
+ class="pf-v5-c-toolbar pf-m-static"
39
103
  id="tabs-tables-and-tabs-example-masthead-toolbar"
40
104
  >
41
105
  <div class="pf-v5-c-toolbar__content">
42
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
43
137
  <div
44
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
138
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
45
139
  >
46
140
  <div
47
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -53,7 +147,9 @@ section: components
53
147
  aria-expanded="false"
54
148
  aria-label="Application launcher"
55
149
  >
56
- <i class="fas fa-th" aria-hidden="true"></i>
150
+ <span class="pf-v5-c-menu-toggle__icon">
151
+ <i class="fas fa-th" aria-hidden="true"></i>
152
+ </span>
57
153
  </button>
58
154
  </div>
59
155
  <div class="pf-v5-c-toolbar__item">
@@ -63,7 +159,9 @@ section: components
63
159
  aria-expanded="false"
64
160
  aria-label="Settings"
65
161
  >
66
- <i class="fas fa-cog" aria-hidden="true"></i>
162
+ <span class="pf-v5-c-menu-toggle__icon">
163
+ <i class="fas fa-cog" aria-hidden="true"></i>
164
+ </span>
67
165
  </button>
68
166
  </div>
69
167
  <div class="pf-v5-c-toolbar__item">
@@ -73,7 +171,9 @@ section: components
73
171
  aria-expanded="false"
74
172
  aria-label="Help"
75
173
  >
76
- <i class="fas fa-question-circle" aria-hidden="true"></i>
174
+ <span class="pf-v5-c-menu-toggle__icon">
175
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
176
+ </span>
77
177
  </button>
78
178
  </div>
79
179
  </div>
@@ -84,31 +184,12 @@ section: components
84
184
  aria-expanded="false"
85
185
  aria-label="Actions"
86
186
  >
87
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
187
+ <span class="pf-v5-c-menu-toggle__icon">
188
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
189
+ </span>
88
190
  </button>
89
191
  </div>
90
192
  </div>
91
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
92
- <button
93
- class="pf-v5-c-menu-toggle pf-m-full-height"
94
- type="button"
95
- aria-expanded="false"
96
- >
97
- <span class="pf-v5-c-menu-toggle__icon">
98
- <img
99
- class="pf-v5-c-avatar"
100
- alt="Avatar image"
101
- src="/assets/images/img_avatar-light.svg"
102
- />
103
- </span>
104
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
105
- <span class="pf-v5-c-menu-toggle__controls">
106
- <span class="pf-v5-c-menu-toggle__toggle-icon">
107
- <i class="fas fa-angle-down" aria-hidden="true"></i>
108
- </span>
109
- </span>
110
- </button>
111
- </div>
112
193
  </div>
113
194
  </div>
114
195
  </div>
@@ -517,23 +598,117 @@ section: components
517
598
  </span>
518
599
  <div class="pf-v5-c-masthead__main">
519
600
  <a class="pf-v5-c-masthead__brand" href="#">
520
- <img
521
- class="pf-v5-c-brand"
522
- src="/assets/images/pf-logo.svg"
523
- alt="PatternFly logo"
524
- style="--pf-v5-c-brand--Height:36px"
525
- />
601
+ <svg height="40px" viewBox="0 0 679 158">
602
+ <title>PF-HorizontalLogo-Color</title>
603
+ <defs>
604
+ <linearGradient
605
+ x1="68%"
606
+ y1="2.25860997e-13%"
607
+ x2="32%"
608
+ y2="100%"
609
+ id="linearGradient-tabs-tables-and-tabs-example-masthead"
610
+ >
611
+ <stop stop-color="#2B9AF3" offset="0%" />
612
+ <stop
613
+ stop-color="#73BCF7"
614
+ stop-opacity="0.502212631"
615
+ offset="100%"
616
+ />
617
+ </linearGradient>
618
+ </defs>
619
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
620
+ <g
621
+ transform="translate(206.000000, 45.750000)"
622
+ fill="var(--pf-t--global--text--color--regular)"
623
+ fill-rule="nonzero"
624
+ >
625
+ <path
626
+ 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"
627
+ />
628
+ <path
629
+ 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"
630
+ />
631
+ <path
632
+ 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"
633
+ />
634
+ <path
635
+ 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"
636
+ />
637
+ <path
638
+ 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"
639
+ />
640
+ <path
641
+ 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"
642
+ />
643
+ <path
644
+ 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"
645
+ />
646
+ <polygon
647
+ 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"
648
+ />
649
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
650
+ <path
651
+ 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"
652
+ />
653
+ </g>
654
+ <g transform="translate(0.000000, 0.000000)">
655
+ <path
656
+ 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"
657
+ fill="#0066CC"
658
+ />
659
+ <path
660
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
661
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
662
+ />
663
+ <path
664
+ 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"
665
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
666
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
667
+ />
668
+ </g>
669
+ </g>
670
+ </svg>
526
671
  </a>
527
672
  </div>
528
673
  <div class="pf-v5-c-masthead__content">
529
674
  <div
530
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
675
+ class="pf-v5-c-toolbar pf-m-static"
531
676
  id="tabs-tables-and-tabs-example-masthead-toolbar"
532
677
  >
533
678
  <div class="pf-v5-c-toolbar__content">
534
679
  <div class="pf-v5-c-toolbar__content-section">
680
+ <div class="pf-v5-c-toolbar__item">
681
+ <button
682
+ class="pf-v5-c-menu-toggle"
683
+ type="button"
684
+ aria-expanded="false"
685
+ >
686
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
687
+ <span class="pf-v5-c-menu-toggle__controls">
688
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
689
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
690
+ </span>
691
+ </span>
692
+ </button>
693
+ </div>
694
+
695
+ <div class="pf-v5-c-toolbar__item">
696
+ <button
697
+ class="pf-v5-c-menu-toggle"
698
+ type="button"
699
+ aria-expanded="false"
700
+ >
701
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
702
+ <span class="pf-v5-c-menu-toggle__controls">
703
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
704
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
705
+ </span>
706
+ </span>
707
+ </button>
708
+ </div>
709
+
535
710
  <div
536
- 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"
711
+ 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"
537
712
  >
538
713
  <div
539
714
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -545,7 +720,9 @@ section: components
545
720
  aria-expanded="false"
546
721
  aria-label="Application launcher"
547
722
  >
548
- <i class="fas fa-th" aria-hidden="true"></i>
723
+ <span class="pf-v5-c-menu-toggle__icon">
724
+ <i class="fas fa-th" aria-hidden="true"></i>
725
+ </span>
549
726
  </button>
550
727
  </div>
551
728
  <div class="pf-v5-c-toolbar__item">
@@ -555,7 +732,9 @@ section: components
555
732
  aria-expanded="false"
556
733
  aria-label="Settings"
557
734
  >
558
- <i class="fas fa-cog" aria-hidden="true"></i>
735
+ <span class="pf-v5-c-menu-toggle__icon">
736
+ <i class="fas fa-cog" aria-hidden="true"></i>
737
+ </span>
559
738
  </button>
560
739
  </div>
561
740
  <div class="pf-v5-c-toolbar__item">
@@ -565,7 +744,9 @@ section: components
565
744
  aria-expanded="false"
566
745
  aria-label="Help"
567
746
  >
568
- <i class="fas fa-question-circle" aria-hidden="true"></i>
747
+ <span class="pf-v5-c-menu-toggle__icon">
748
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
749
+ </span>
569
750
  </button>
570
751
  </div>
571
752
  </div>
@@ -576,31 +757,12 @@ section: components
576
757
  aria-expanded="false"
577
758
  aria-label="Actions"
578
759
  >
579
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
760
+ <span class="pf-v5-c-menu-toggle__icon">
761
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
762
+ </span>
580
763
  </button>
581
764
  </div>
582
765
  </div>
583
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
584
- <button
585
- class="pf-v5-c-menu-toggle pf-m-full-height"
586
- type="button"
587
- aria-expanded="false"
588
- >
589
- <span class="pf-v5-c-menu-toggle__icon">
590
- <img
591
- class="pf-v5-c-avatar"
592
- alt="Avatar image"
593
- src="/assets/images/img_avatar-light.svg"
594
- />
595
- </span>
596
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
597
- <span class="pf-v5-c-menu-toggle__controls">
598
- <span class="pf-v5-c-menu-toggle__toggle-icon">
599
- <i class="fas fa-angle-down" aria-hidden="true"></i>
600
- </span>
601
- </span>
602
- </button>
603
- </div>
604
766
  </div>
605
767
  </div>
606
768
  </div>
@@ -1014,23 +1176,117 @@ section: components
1014
1176
  </span>
1015
1177
  <div class="pf-v5-c-masthead__main">
1016
1178
  <a class="pf-v5-c-masthead__brand" href="#">
1017
- <img
1018
- class="pf-v5-c-brand"
1019
- src="/assets/images/pf-logo.svg"
1020
- alt="PatternFly logo"
1021
- style="--pf-v5-c-brand--Height:36px"
1022
- />
1179
+ <svg height="40px" viewBox="0 0 679 158">
1180
+ <title>PF-HorizontalLogo-Color</title>
1181
+ <defs>
1182
+ <linearGradient
1183
+ x1="68%"
1184
+ y1="2.25860997e-13%"
1185
+ x2="32%"
1186
+ y2="100%"
1187
+ id="linearGradient-nested-tabs-example-masthead"
1188
+ >
1189
+ <stop stop-color="#2B9AF3" offset="0%" />
1190
+ <stop
1191
+ stop-color="#73BCF7"
1192
+ stop-opacity="0.502212631"
1193
+ offset="100%"
1194
+ />
1195
+ </linearGradient>
1196
+ </defs>
1197
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1198
+ <g
1199
+ transform="translate(206.000000, 45.750000)"
1200
+ fill="var(--pf-t--global--text--color--regular)"
1201
+ fill-rule="nonzero"
1202
+ >
1203
+ <path
1204
+ 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"
1205
+ />
1206
+ <path
1207
+ 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"
1208
+ />
1209
+ <path
1210
+ 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"
1211
+ />
1212
+ <path
1213
+ 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"
1214
+ />
1215
+ <path
1216
+ 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"
1217
+ />
1218
+ <path
1219
+ 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"
1220
+ />
1221
+ <path
1222
+ 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"
1223
+ />
1224
+ <polygon
1225
+ 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"
1226
+ />
1227
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1228
+ <path
1229
+ 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"
1230
+ />
1231
+ </g>
1232
+ <g transform="translate(0.000000, 0.000000)">
1233
+ <path
1234
+ 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"
1235
+ fill="#0066CC"
1236
+ />
1237
+ <path
1238
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1239
+ fill="url(#linearGradient-nested-tabs-example-masthead)"
1240
+ />
1241
+ <path
1242
+ 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"
1243
+ fill="url(#linearGradient-nested-tabs-example-masthead)"
1244
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1245
+ />
1246
+ </g>
1247
+ </g>
1248
+ </svg>
1023
1249
  </a>
1024
1250
  </div>
1025
1251
  <div class="pf-v5-c-masthead__content">
1026
1252
  <div
1027
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1253
+ class="pf-v5-c-toolbar pf-m-static"
1028
1254
  id="nested-tabs-example-masthead-toolbar"
1029
1255
  >
1030
1256
  <div class="pf-v5-c-toolbar__content">
1031
1257
  <div class="pf-v5-c-toolbar__content-section">
1258
+ <div class="pf-v5-c-toolbar__item">
1259
+ <button
1260
+ class="pf-v5-c-menu-toggle"
1261
+ type="button"
1262
+ aria-expanded="false"
1263
+ >
1264
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1265
+ <span class="pf-v5-c-menu-toggle__controls">
1266
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1267
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1268
+ </span>
1269
+ </span>
1270
+ </button>
1271
+ </div>
1272
+
1273
+ <div class="pf-v5-c-toolbar__item">
1274
+ <button
1275
+ class="pf-v5-c-menu-toggle"
1276
+ type="button"
1277
+ aria-expanded="false"
1278
+ >
1279
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1280
+ <span class="pf-v5-c-menu-toggle__controls">
1281
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1282
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1283
+ </span>
1284
+ </span>
1285
+ </button>
1286
+ </div>
1287
+
1032
1288
  <div
1033
- 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"
1289
+ 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"
1034
1290
  >
1035
1291
  <div
1036
1292
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1042,7 +1298,9 @@ section: components
1042
1298
  aria-expanded="false"
1043
1299
  aria-label="Application launcher"
1044
1300
  >
1045
- <i class="fas fa-th" aria-hidden="true"></i>
1301
+ <span class="pf-v5-c-menu-toggle__icon">
1302
+ <i class="fas fa-th" aria-hidden="true"></i>
1303
+ </span>
1046
1304
  </button>
1047
1305
  </div>
1048
1306
  <div class="pf-v5-c-toolbar__item">
@@ -1052,7 +1310,9 @@ section: components
1052
1310
  aria-expanded="false"
1053
1311
  aria-label="Settings"
1054
1312
  >
1055
- <i class="fas fa-cog" aria-hidden="true"></i>
1313
+ <span class="pf-v5-c-menu-toggle__icon">
1314
+ <i class="fas fa-cog" aria-hidden="true"></i>
1315
+ </span>
1056
1316
  </button>
1057
1317
  </div>
1058
1318
  <div class="pf-v5-c-toolbar__item">
@@ -1062,7 +1322,9 @@ section: components
1062
1322
  aria-expanded="false"
1063
1323
  aria-label="Help"
1064
1324
  >
1065
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1325
+ <span class="pf-v5-c-menu-toggle__icon">
1326
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1327
+ </span>
1066
1328
  </button>
1067
1329
  </div>
1068
1330
  </div>
@@ -1073,31 +1335,12 @@ section: components
1073
1335
  aria-expanded="false"
1074
1336
  aria-label="Actions"
1075
1337
  >
1076
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1338
+ <span class="pf-v5-c-menu-toggle__icon">
1339
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1340
+ </span>
1077
1341
  </button>
1078
1342
  </div>
1079
1343
  </div>
1080
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1081
- <button
1082
- class="pf-v5-c-menu-toggle pf-m-full-height"
1083
- type="button"
1084
- aria-expanded="false"
1085
- >
1086
- <span class="pf-v5-c-menu-toggle__icon">
1087
- <img
1088
- class="pf-v5-c-avatar"
1089
- alt="Avatar image"
1090
- src="/assets/images/img_avatar-light.svg"
1091
- />
1092
- </span>
1093
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1094
- <span class="pf-v5-c-menu-toggle__controls">
1095
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1096
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1097
- </span>
1098
- </span>
1099
- </button>
1100
- </div>
1101
1344
  </div>
1102
1345
  </div>
1103
1346
  </div>
@@ -1237,7 +1480,7 @@ section: components
1237
1480
  <div class="pf-v5-l-flex pf-m-column">
1238
1481
  <div class="pf-v5-l-flex__item">
1239
1482
  <div
1240
- class="pf-v5-c-tabs pf-m-secondary"
1483
+ class="pf-v5-c-tabs"
1241
1484
  role="region"
1242
1485
  id="nested-tabs-example-tabs-tabs-subtabs"
1243
1486
  >
@@ -1415,23 +1658,117 @@ section: components
1415
1658
  </span>
1416
1659
  <div class="pf-v5-c-masthead__main">
1417
1660
  <a class="pf-v5-c-masthead__brand" href="#">
1418
- <img
1419
- class="pf-v5-c-brand"
1420
- src="/assets/images/pf-logo.svg"
1421
- alt="PatternFly logo"
1422
- style="--pf-v5-c-brand--Height:36px"
1423
- />
1661
+ <svg height="40px" viewBox="0 0 679 158">
1662
+ <title>PF-HorizontalLogo-Color</title>
1663
+ <defs>
1664
+ <linearGradient
1665
+ x1="68%"
1666
+ y1="2.25860997e-13%"
1667
+ x2="32%"
1668
+ y2="100%"
1669
+ id="linearGradient-table-tabs-example-masthead"
1670
+ >
1671
+ <stop stop-color="#2B9AF3" offset="0%" />
1672
+ <stop
1673
+ stop-color="#73BCF7"
1674
+ stop-opacity="0.502212631"
1675
+ offset="100%"
1676
+ />
1677
+ </linearGradient>
1678
+ </defs>
1679
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1680
+ <g
1681
+ transform="translate(206.000000, 45.750000)"
1682
+ fill="var(--pf-t--global--text--color--regular)"
1683
+ fill-rule="nonzero"
1684
+ >
1685
+ <path
1686
+ 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"
1687
+ />
1688
+ <path
1689
+ 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"
1690
+ />
1691
+ <path
1692
+ 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"
1693
+ />
1694
+ <path
1695
+ 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"
1696
+ />
1697
+ <path
1698
+ 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"
1699
+ />
1700
+ <path
1701
+ 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"
1702
+ />
1703
+ <path
1704
+ 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"
1705
+ />
1706
+ <polygon
1707
+ 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"
1708
+ />
1709
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1710
+ <path
1711
+ 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"
1712
+ />
1713
+ </g>
1714
+ <g transform="translate(0.000000, 0.000000)">
1715
+ <path
1716
+ 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"
1717
+ fill="#0066CC"
1718
+ />
1719
+ <path
1720
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1721
+ fill="url(#linearGradient-table-tabs-example-masthead)"
1722
+ />
1723
+ <path
1724
+ 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"
1725
+ fill="url(#linearGradient-table-tabs-example-masthead)"
1726
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1727
+ />
1728
+ </g>
1729
+ </g>
1730
+ </svg>
1424
1731
  </a>
1425
1732
  </div>
1426
1733
  <div class="pf-v5-c-masthead__content">
1427
1734
  <div
1428
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1735
+ class="pf-v5-c-toolbar pf-m-static"
1429
1736
  id="table-tabs-example-masthead-toolbar"
1430
1737
  >
1431
1738
  <div class="pf-v5-c-toolbar__content">
1432
1739
  <div class="pf-v5-c-toolbar__content-section">
1740
+ <div class="pf-v5-c-toolbar__item">
1741
+ <button
1742
+ class="pf-v5-c-menu-toggle"
1743
+ type="button"
1744
+ aria-expanded="false"
1745
+ >
1746
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1747
+ <span class="pf-v5-c-menu-toggle__controls">
1748
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1749
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1750
+ </span>
1751
+ </span>
1752
+ </button>
1753
+ </div>
1754
+
1755
+ <div class="pf-v5-c-toolbar__item">
1756
+ <button
1757
+ class="pf-v5-c-menu-toggle"
1758
+ type="button"
1759
+ aria-expanded="false"
1760
+ >
1761
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1762
+ <span class="pf-v5-c-menu-toggle__controls">
1763
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1764
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1765
+ </span>
1766
+ </span>
1767
+ </button>
1768
+ </div>
1769
+
1433
1770
  <div
1434
- 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"
1771
+ 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"
1435
1772
  >
1436
1773
  <div
1437
1774
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1443,7 +1780,9 @@ section: components
1443
1780
  aria-expanded="false"
1444
1781
  aria-label="Application launcher"
1445
1782
  >
1446
- <i class="fas fa-th" aria-hidden="true"></i>
1783
+ <span class="pf-v5-c-menu-toggle__icon">
1784
+ <i class="fas fa-th" aria-hidden="true"></i>
1785
+ </span>
1447
1786
  </button>
1448
1787
  </div>
1449
1788
  <div class="pf-v5-c-toolbar__item">
@@ -1453,7 +1792,9 @@ section: components
1453
1792
  aria-expanded="false"
1454
1793
  aria-label="Settings"
1455
1794
  >
1456
- <i class="fas fa-cog" aria-hidden="true"></i>
1795
+ <span class="pf-v5-c-menu-toggle__icon">
1796
+ <i class="fas fa-cog" aria-hidden="true"></i>
1797
+ </span>
1457
1798
  </button>
1458
1799
  </div>
1459
1800
  <div class="pf-v5-c-toolbar__item">
@@ -1463,7 +1804,9 @@ section: components
1463
1804
  aria-expanded="false"
1464
1805
  aria-label="Help"
1465
1806
  >
1466
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1807
+ <span class="pf-v5-c-menu-toggle__icon">
1808
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1809
+ </span>
1467
1810
  </button>
1468
1811
  </div>
1469
1812
  </div>
@@ -1474,31 +1817,12 @@ section: components
1474
1817
  aria-expanded="false"
1475
1818
  aria-label="Actions"
1476
1819
  >
1477
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1820
+ <span class="pf-v5-c-menu-toggle__icon">
1821
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1822
+ </span>
1478
1823
  </button>
1479
1824
  </div>
1480
1825
  </div>
1481
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1482
- <button
1483
- class="pf-v5-c-menu-toggle pf-m-full-height"
1484
- type="button"
1485
- aria-expanded="false"
1486
- >
1487
- <span class="pf-v5-c-menu-toggle__icon">
1488
- <img
1489
- class="pf-v5-c-avatar"
1490
- alt="Avatar image"
1491
- src="/assets/images/img_avatar-light.svg"
1492
- />
1493
- </span>
1494
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1495
- <span class="pf-v5-c-menu-toggle__controls">
1496
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1497
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1498
- </span>
1499
- </span>
1500
- </button>
1501
- </div>
1502
1826
  </div>
1503
1827
  </div>
1504
1828
  </div>
@@ -1594,15 +1918,17 @@ section: components
1594
1918
  <div
1595
1919
  class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
1596
1920
  >
1597
- <div class="pf-v5-c-toolbar__toggle">
1921
+ <div class="pf-v5-c-toolbar__toggle pf-m-show">
1598
1922
  <button
1599
- class="pf-v5-c-button pf-m-plain"
1923
+ class="pf-v5-c-menu-toggle pf-m-plain"
1600
1924
  type="button"
1601
- aria-label="Show filters"
1602
1925
  aria-expanded="false"
1926
+ aria-label="Show filters"
1603
1927
  aria-controls="table-tabs-example-tabs-toolbar-expandable-content"
1604
1928
  >
1605
- <i class="fas fa-filter" aria-hidden="true"></i>
1929
+ <span class="pf-v5-c-menu-toggle__icon">
1930
+ <i class="fas fa-filter" aria-hidden="true"></i>
1931
+ </span>
1606
1932
  </button>
1607
1933
  </div>
1608
1934
 
@@ -2394,13 +2720,15 @@ section: components
2394
2720
  role="region"
2395
2721
  id="-tabs"
2396
2722
  >
2397
- <button
2398
- class="pf-v5-c-tabs__scroll-button"
2399
- type="button"
2400
- aria-label="Scroll left"
2401
- >
2402
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2403
- </button>
2723
+ <div class="pf-v5-c-tabs__scroll-button">
2724
+ <button
2725
+ class="pf-v5-c-button pf-m-plain"
2726
+ type="button"
2727
+ aria-label="Scroll left"
2728
+ >
2729
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2730
+ </button>
2731
+ </div>
2404
2732
  <ul class="pf-v5-c-tabs__list" role="tablist">
2405
2733
  <li
2406
2734
  class="pf-v5-c-tabs__item pf-m-current"
@@ -2428,13 +2756,15 @@ section: components
2428
2756
  </button>
2429
2757
  </li>
2430
2758
  </ul>
2431
- <button
2432
- class="pf-v5-c-tabs__scroll-button"
2433
- type="button"
2434
- aria-label="Scroll right"
2435
- >
2436
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2437
- </button>
2759
+ <div class="pf-v5-c-tabs__scroll-button">
2760
+ <button
2761
+ class="pf-v5-c-button pf-m-plain"
2762
+ type="button"
2763
+ aria-label="Scroll right"
2764
+ >
2765
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2766
+ </button>
2767
+ </div>
2438
2768
  </div>
2439
2769
  </div>
2440
2770
  <div class="pf-v5-c-drawer__body">
@@ -2617,7 +2947,7 @@ section: components
2617
2947
  <div class="pf-v5-l-grid pf-m-gutter">
2618
2948
  <div class="pf-v5-l-grid__item">
2619
2949
  <div
2620
- class="pf-v5-c-tabs pf-m-secondary pf-m-inset-none"
2950
+ class="pf-v5-c-tabs pf-m-inset-none"
2621
2951
  role="region"
2622
2952
  id="modal-tabs-example-tabs"
2623
2953
  >
@@ -2707,23 +3037,117 @@ section: components
2707
3037
  </span>
2708
3038
  <div class="pf-v5-c-masthead__main">
2709
3039
  <a class="pf-v5-c-masthead__brand" href="#">
2710
- <img
2711
- class="pf-v5-c-brand"
2712
- src="/assets/images/pf-logo.svg"
2713
- alt="PatternFly logo"
2714
- style="--pf-v5-c-brand--Height:36px"
2715
- />
3040
+ <svg height="40px" viewBox="0 0 679 158">
3041
+ <title>PF-HorizontalLogo-Color</title>
3042
+ <defs>
3043
+ <linearGradient
3044
+ x1="68%"
3045
+ y1="2.25860997e-13%"
3046
+ x2="32%"
3047
+ y2="100%"
3048
+ id="linearGradient-modal-tabs-example-masthead"
3049
+ >
3050
+ <stop stop-color="#2B9AF3" offset="0%" />
3051
+ <stop
3052
+ stop-color="#73BCF7"
3053
+ stop-opacity="0.502212631"
3054
+ offset="100%"
3055
+ />
3056
+ </linearGradient>
3057
+ </defs>
3058
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3059
+ <g
3060
+ transform="translate(206.000000, 45.750000)"
3061
+ fill="var(--pf-t--global--text--color--regular)"
3062
+ fill-rule="nonzero"
3063
+ >
3064
+ <path
3065
+ 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"
3066
+ />
3067
+ <path
3068
+ 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"
3069
+ />
3070
+ <path
3071
+ 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"
3072
+ />
3073
+ <path
3074
+ 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"
3075
+ />
3076
+ <path
3077
+ 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"
3078
+ />
3079
+ <path
3080
+ 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"
3081
+ />
3082
+ <path
3083
+ 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"
3084
+ />
3085
+ <polygon
3086
+ 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"
3087
+ />
3088
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3089
+ <path
3090
+ 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"
3091
+ />
3092
+ </g>
3093
+ <g transform="translate(0.000000, 0.000000)">
3094
+ <path
3095
+ 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"
3096
+ fill="#0066CC"
3097
+ />
3098
+ <path
3099
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3100
+ fill="url(#linearGradient-modal-tabs-example-masthead)"
3101
+ />
3102
+ <path
3103
+ 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"
3104
+ fill="url(#linearGradient-modal-tabs-example-masthead)"
3105
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3106
+ />
3107
+ </g>
3108
+ </g>
3109
+ </svg>
2716
3110
  </a>
2717
3111
  </div>
2718
3112
  <div class="pf-v5-c-masthead__content">
2719
3113
  <div
2720
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3114
+ class="pf-v5-c-toolbar pf-m-static"
2721
3115
  id="modal-tabs-example-masthead-toolbar"
2722
3116
  >
2723
3117
  <div class="pf-v5-c-toolbar__content">
2724
3118
  <div class="pf-v5-c-toolbar__content-section">
3119
+ <div class="pf-v5-c-toolbar__item">
3120
+ <button
3121
+ class="pf-v5-c-menu-toggle"
3122
+ type="button"
3123
+ aria-expanded="false"
3124
+ >
3125
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3126
+ <span class="pf-v5-c-menu-toggle__controls">
3127
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3128
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3129
+ </span>
3130
+ </span>
3131
+ </button>
3132
+ </div>
3133
+
3134
+ <div class="pf-v5-c-toolbar__item">
3135
+ <button
3136
+ class="pf-v5-c-menu-toggle"
3137
+ type="button"
3138
+ aria-expanded="false"
3139
+ >
3140
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3141
+ <span class="pf-v5-c-menu-toggle__controls">
3142
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3143
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3144
+ </span>
3145
+ </span>
3146
+ </button>
3147
+ </div>
3148
+
2725
3149
  <div
2726
- 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"
3150
+ 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"
2727
3151
  >
2728
3152
  <div
2729
3153
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2735,7 +3159,9 @@ section: components
2735
3159
  aria-expanded="false"
2736
3160
  aria-label="Application launcher"
2737
3161
  >
2738
- <i class="fas fa-th" aria-hidden="true"></i>
3162
+ <span class="pf-v5-c-menu-toggle__icon">
3163
+ <i class="fas fa-th" aria-hidden="true"></i>
3164
+ </span>
2739
3165
  </button>
2740
3166
  </div>
2741
3167
  <div class="pf-v5-c-toolbar__item">
@@ -2745,7 +3171,9 @@ section: components
2745
3171
  aria-expanded="false"
2746
3172
  aria-label="Settings"
2747
3173
  >
2748
- <i class="fas fa-cog" aria-hidden="true"></i>
3174
+ <span class="pf-v5-c-menu-toggle__icon">
3175
+ <i class="fas fa-cog" aria-hidden="true"></i>
3176
+ </span>
2749
3177
  </button>
2750
3178
  </div>
2751
3179
  <div class="pf-v5-c-toolbar__item">
@@ -2755,7 +3183,9 @@ section: components
2755
3183
  aria-expanded="false"
2756
3184
  aria-label="Help"
2757
3185
  >
2758
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3186
+ <span class="pf-v5-c-menu-toggle__icon">
3187
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3188
+ </span>
2759
3189
  </button>
2760
3190
  </div>
2761
3191
  </div>
@@ -2766,31 +3196,12 @@ section: components
2766
3196
  aria-expanded="false"
2767
3197
  aria-label="Actions"
2768
3198
  >
2769
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3199
+ <span class="pf-v5-c-menu-toggle__icon">
3200
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3201
+ </span>
2770
3202
  </button>
2771
3203
  </div>
2772
3204
  </div>
2773
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2774
- <button
2775
- class="pf-v5-c-menu-toggle pf-m-full-height"
2776
- type="button"
2777
- aria-expanded="false"
2778
- >
2779
- <span class="pf-v5-c-menu-toggle__icon">
2780
- <img
2781
- class="pf-v5-c-avatar"
2782
- alt="Avatar image"
2783
- src="/assets/images/img_avatar-light.svg"
2784
- />
2785
- </span>
2786
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2787
- <span class="pf-v5-c-menu-toggle__controls">
2788
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2789
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2790
- </span>
2791
- </span>
2792
- </button>
2793
- </div>
2794
3205
  </div>
2795
3206
  </div>
2796
3207
  </div>
@@ -2940,23 +3351,117 @@ section: components
2940
3351
  </span>
2941
3352
  <div class="pf-v5-c-masthead__main">
2942
3353
  <a class="pf-v5-c-masthead__brand" href="#">
2943
- <img
2944
- class="pf-v5-c-brand"
2945
- src="/assets/images/pf-logo.svg"
2946
- alt="PatternFly logo"
2947
- style="--pf-v5-c-brand--Height:36px"
2948
- />
3354
+ <svg height="40px" viewBox="0 0 679 158">
3355
+ <title>PF-HorizontalLogo-Color</title>
3356
+ <defs>
3357
+ <linearGradient
3358
+ x1="68%"
3359
+ y1="2.25860997e-13%"
3360
+ x2="32%"
3361
+ y2="100%"
3362
+ id="linearGradient-gray-tabs-example-masthead"
3363
+ >
3364
+ <stop stop-color="#2B9AF3" offset="0%" />
3365
+ <stop
3366
+ stop-color="#73BCF7"
3367
+ stop-opacity="0.502212631"
3368
+ offset="100%"
3369
+ />
3370
+ </linearGradient>
3371
+ </defs>
3372
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3373
+ <g
3374
+ transform="translate(206.000000, 45.750000)"
3375
+ fill="var(--pf-t--global--text--color--regular)"
3376
+ fill-rule="nonzero"
3377
+ >
3378
+ <path
3379
+ 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"
3380
+ />
3381
+ <path
3382
+ 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"
3383
+ />
3384
+ <path
3385
+ 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"
3386
+ />
3387
+ <path
3388
+ 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"
3389
+ />
3390
+ <path
3391
+ 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"
3392
+ />
3393
+ <path
3394
+ 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"
3395
+ />
3396
+ <path
3397
+ 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"
3398
+ />
3399
+ <polygon
3400
+ 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"
3401
+ />
3402
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3403
+ <path
3404
+ 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"
3405
+ />
3406
+ </g>
3407
+ <g transform="translate(0.000000, 0.000000)">
3408
+ <path
3409
+ 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"
3410
+ fill="#0066CC"
3411
+ />
3412
+ <path
3413
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3414
+ fill="url(#linearGradient-gray-tabs-example-masthead)"
3415
+ />
3416
+ <path
3417
+ 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"
3418
+ fill="url(#linearGradient-gray-tabs-example-masthead)"
3419
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3420
+ />
3421
+ </g>
3422
+ </g>
3423
+ </svg>
2949
3424
  </a>
2950
3425
  </div>
2951
3426
  <div class="pf-v5-c-masthead__content">
2952
3427
  <div
2953
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3428
+ class="pf-v5-c-toolbar pf-m-static"
2954
3429
  id="gray-tabs-example-masthead-toolbar"
2955
3430
  >
2956
3431
  <div class="pf-v5-c-toolbar__content">
2957
3432
  <div class="pf-v5-c-toolbar__content-section">
3433
+ <div class="pf-v5-c-toolbar__item">
3434
+ <button
3435
+ class="pf-v5-c-menu-toggle"
3436
+ type="button"
3437
+ aria-expanded="false"
3438
+ >
3439
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3440
+ <span class="pf-v5-c-menu-toggle__controls">
3441
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3442
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3443
+ </span>
3444
+ </span>
3445
+ </button>
3446
+ </div>
3447
+
3448
+ <div class="pf-v5-c-toolbar__item">
3449
+ <button
3450
+ class="pf-v5-c-menu-toggle"
3451
+ type="button"
3452
+ aria-expanded="false"
3453
+ >
3454
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3455
+ <span class="pf-v5-c-menu-toggle__controls">
3456
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3457
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3458
+ </span>
3459
+ </span>
3460
+ </button>
3461
+ </div>
3462
+
2958
3463
  <div
2959
- 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"
3464
+ 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"
2960
3465
  >
2961
3466
  <div
2962
3467
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2968,7 +3473,9 @@ section: components
2968
3473
  aria-expanded="false"
2969
3474
  aria-label="Application launcher"
2970
3475
  >
2971
- <i class="fas fa-th" aria-hidden="true"></i>
3476
+ <span class="pf-v5-c-menu-toggle__icon">
3477
+ <i class="fas fa-th" aria-hidden="true"></i>
3478
+ </span>
2972
3479
  </button>
2973
3480
  </div>
2974
3481
  <div class="pf-v5-c-toolbar__item">
@@ -2978,7 +3485,9 @@ section: components
2978
3485
  aria-expanded="false"
2979
3486
  aria-label="Settings"
2980
3487
  >
2981
- <i class="fas fa-cog" aria-hidden="true"></i>
3488
+ <span class="pf-v5-c-menu-toggle__icon">
3489
+ <i class="fas fa-cog" aria-hidden="true"></i>
3490
+ </span>
2982
3491
  </button>
2983
3492
  </div>
2984
3493
  <div class="pf-v5-c-toolbar__item">
@@ -2988,7 +3497,9 @@ section: components
2988
3497
  aria-expanded="false"
2989
3498
  aria-label="Help"
2990
3499
  >
2991
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3500
+ <span class="pf-v5-c-menu-toggle__icon">
3501
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3502
+ </span>
2992
3503
  </button>
2993
3504
  </div>
2994
3505
  </div>
@@ -2999,31 +3510,12 @@ section: components
2999
3510
  aria-expanded="false"
3000
3511
  aria-label="Actions"
3001
3512
  >
3002
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3513
+ <span class="pf-v5-c-menu-toggle__icon">
3514
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3515
+ </span>
3003
3516
  </button>
3004
3517
  </div>
3005
3518
  </div>
3006
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3007
- <button
3008
- class="pf-v5-c-menu-toggle pf-m-full-height"
3009
- type="button"
3010
- aria-expanded="false"
3011
- >
3012
- <span class="pf-v5-c-menu-toggle__icon">
3013
- <img
3014
- class="pf-v5-c-avatar"
3015
- alt="Avatar image"
3016
- src="/assets/images/img_avatar-light.svg"
3017
- />
3018
- </span>
3019
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3020
- <span class="pf-v5-c-menu-toggle__controls">
3021
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3022
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3023
- </span>
3024
- </span>
3025
- </button>
3026
- </div>
3027
3519
  </div>
3028
3520
  </div>
3029
3521
  </div>
@@ -3193,7 +3685,7 @@ section: components
3193
3685
  </div>
3194
3686
  <div class="pf-v5-l-grid__item">
3195
3687
  <div
3196
- class="pf-v5-c-tabs pf-m-secondary pf-m-inset-none"
3688
+ class="pf-v5-c-tabs pf-m-inset-none"
3197
3689
  role="region"
3198
3690
  id="gray-tabs-example-tabs-subtabs"
3199
3691
  >