@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/Drawer/examples/Drawer.md CHANGED
@@ -26,23 +26,117 @@ wrapperTag: div
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <img
30
- class="pf-v5-c-brand"
31
- src="/assets/images/pf-logo.svg"
32
- alt="PatternFly logo"
33
- style="--pf-v5-c-brand--Height:36px"
34
- />
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
31
+ <defs>
32
+ <linearGradient
33
+ x1="68%"
34
+ y1="2.25860997e-13%"
35
+ x2="32%"
36
+ y2="100%"
37
+ id="linearGradient-drawer-collapsed-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-drawer-collapsed-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-drawer-collapsed-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="drawer-collapsed-example-masthead-toolbar"
41
105
  >
42
106
  <div class="pf-v5-c-toolbar__content">
43
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
44
138
  <div
45
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
139
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
46
140
  >
47
141
  <div
48
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -54,7 +148,9 @@ wrapperTag: div
54
148
  aria-expanded="false"
55
149
  aria-label="Application launcher"
56
150
  >
57
- <i class="fas fa-th" aria-hidden="true"></i>
151
+ <span class="pf-v5-c-menu-toggle__icon">
152
+ <i class="fas fa-th" aria-hidden="true"></i>
153
+ </span>
58
154
  </button>
59
155
  </div>
60
156
  <div class="pf-v5-c-toolbar__item">
@@ -64,7 +160,9 @@ wrapperTag: div
64
160
  aria-expanded="false"
65
161
  aria-label="Settings"
66
162
  >
67
- <i class="fas fa-cog" aria-hidden="true"></i>
163
+ <span class="pf-v5-c-menu-toggle__icon">
164
+ <i class="fas fa-cog" aria-hidden="true"></i>
165
+ </span>
68
166
  </button>
69
167
  </div>
70
168
  <div class="pf-v5-c-toolbar__item">
@@ -74,7 +172,9 @@ wrapperTag: div
74
172
  aria-expanded="false"
75
173
  aria-label="Help"
76
174
  >
77
- <i class="fas fa-question-circle" aria-hidden="true"></i>
175
+ <span class="pf-v5-c-menu-toggle__icon">
176
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
177
+ </span>
78
178
  </button>
79
179
  </div>
80
180
  </div>
@@ -85,31 +185,12 @@ wrapperTag: div
85
185
  aria-expanded="false"
86
186
  aria-label="Actions"
87
187
  >
88
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
188
+ <span class="pf-v5-c-menu-toggle__icon">
189
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
190
+ </span>
89
191
  </button>
90
192
  </div>
91
193
  </div>
92
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
93
- <button
94
- class="pf-v5-c-menu-toggle pf-m-full-height"
95
- type="button"
96
- aria-expanded="false"
97
- >
98
- <span class="pf-v5-c-menu-toggle__icon">
99
- <img
100
- class="pf-v5-c-avatar"
101
- alt="Avatar image"
102
- src="/assets/images/img_avatar-light.svg"
103
- />
104
- </span>
105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
106
- <span class="pf-v5-c-menu-toggle__controls">
107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
108
- <i class="fas fa-angle-down" aria-hidden="true"></i>
109
- </span>
110
- </span>
111
- </button>
112
- </div>
113
194
  </div>
114
195
  </div>
115
196
  </div>
@@ -471,23 +552,117 @@ wrapperTag: div
471
552
  </span>
472
553
  <div class="pf-v5-c-masthead__main">
473
554
  <a class="pf-v5-c-masthead__brand" href="#">
474
- <img
475
- class="pf-v5-c-brand"
476
- src="/assets/images/pf-logo.svg"
477
- alt="PatternFly logo"
478
- style="--pf-v5-c-brand--Height:36px"
479
- />
555
+ <svg height="40px" viewBox="0 0 679 158">
556
+ <title>PF-HorizontalLogo-Color</title>
557
+ <defs>
558
+ <linearGradient
559
+ x1="68%"
560
+ y1="2.25860997e-13%"
561
+ x2="32%"
562
+ y2="100%"
563
+ id="linearGradient-drawer-expanded-example-masthead"
564
+ >
565
+ <stop stop-color="#2B9AF3" offset="0%" />
566
+ <stop
567
+ stop-color="#73BCF7"
568
+ stop-opacity="0.502212631"
569
+ offset="100%"
570
+ />
571
+ </linearGradient>
572
+ </defs>
573
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
574
+ <g
575
+ transform="translate(206.000000, 45.750000)"
576
+ fill="var(--pf-t--global--text--color--regular)"
577
+ fill-rule="nonzero"
578
+ >
579
+ <path
580
+ 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"
581
+ />
582
+ <path
583
+ 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"
584
+ />
585
+ <path
586
+ 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"
587
+ />
588
+ <path
589
+ 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"
590
+ />
591
+ <path
592
+ 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"
593
+ />
594
+ <path
595
+ 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"
596
+ />
597
+ <path
598
+ 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"
599
+ />
600
+ <polygon
601
+ 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"
602
+ />
603
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
604
+ <path
605
+ 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"
606
+ />
607
+ </g>
608
+ <g transform="translate(0.000000, 0.000000)">
609
+ <path
610
+ 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"
611
+ fill="#0066CC"
612
+ />
613
+ <path
614
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
615
+ fill="url(#linearGradient-drawer-expanded-example-masthead)"
616
+ />
617
+ <path
618
+ 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"
619
+ fill="url(#linearGradient-drawer-expanded-example-masthead)"
620
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
621
+ />
622
+ </g>
623
+ </g>
624
+ </svg>
480
625
  </a>
481
626
  </div>
482
627
  <div class="pf-v5-c-masthead__content">
483
628
  <div
484
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
629
+ class="pf-v5-c-toolbar pf-m-static"
485
630
  id="drawer-expanded-example-masthead-toolbar"
486
631
  >
487
632
  <div class="pf-v5-c-toolbar__content">
488
633
  <div class="pf-v5-c-toolbar__content-section">
634
+ <div class="pf-v5-c-toolbar__item">
635
+ <button
636
+ class="pf-v5-c-menu-toggle"
637
+ type="button"
638
+ aria-expanded="false"
639
+ >
640
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
641
+ <span class="pf-v5-c-menu-toggle__controls">
642
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
643
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
644
+ </span>
645
+ </span>
646
+ </button>
647
+ </div>
648
+
649
+ <div class="pf-v5-c-toolbar__item">
650
+ <button
651
+ class="pf-v5-c-menu-toggle"
652
+ type="button"
653
+ aria-expanded="false"
654
+ >
655
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
656
+ <span class="pf-v5-c-menu-toggle__controls">
657
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
658
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
659
+ </span>
660
+ </span>
661
+ </button>
662
+ </div>
663
+
489
664
  <div
490
- 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"
665
+ 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"
491
666
  >
492
667
  <div
493
668
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -499,7 +674,9 @@ wrapperTag: div
499
674
  aria-expanded="false"
500
675
  aria-label="Application launcher"
501
676
  >
502
- <i class="fas fa-th" aria-hidden="true"></i>
677
+ <span class="pf-v5-c-menu-toggle__icon">
678
+ <i class="fas fa-th" aria-hidden="true"></i>
679
+ </span>
503
680
  </button>
504
681
  </div>
505
682
  <div class="pf-v5-c-toolbar__item">
@@ -509,7 +686,9 @@ wrapperTag: div
509
686
  aria-expanded="false"
510
687
  aria-label="Settings"
511
688
  >
512
- <i class="fas fa-cog" aria-hidden="true"></i>
689
+ <span class="pf-v5-c-menu-toggle__icon">
690
+ <i class="fas fa-cog" aria-hidden="true"></i>
691
+ </span>
513
692
  </button>
514
693
  </div>
515
694
  <div class="pf-v5-c-toolbar__item">
@@ -519,7 +698,9 @@ wrapperTag: div
519
698
  aria-expanded="false"
520
699
  aria-label="Help"
521
700
  >
522
- <i class="fas fa-question-circle" aria-hidden="true"></i>
701
+ <span class="pf-v5-c-menu-toggle__icon">
702
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
703
+ </span>
523
704
  </button>
524
705
  </div>
525
706
  </div>
@@ -530,31 +711,12 @@ wrapperTag: div
530
711
  aria-expanded="false"
531
712
  aria-label="Actions"
532
713
  >
533
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
714
+ <span class="pf-v5-c-menu-toggle__icon">
715
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
716
+ </span>
534
717
  </button>
535
718
  </div>
536
719
  </div>
537
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
538
- <button
539
- class="pf-v5-c-menu-toggle pf-m-full-height"
540
- type="button"
541
- aria-expanded="false"
542
- >
543
- <span class="pf-v5-c-menu-toggle__icon">
544
- <img
545
- class="pf-v5-c-avatar"
546
- alt="Avatar image"
547
- src="/assets/images/img_avatar-light.svg"
548
- />
549
- </span>
550
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
551
- <span class="pf-v5-c-menu-toggle__controls">
552
- <span class="pf-v5-c-menu-toggle__toggle-icon">
553
- <i class="fas fa-angle-down" aria-hidden="true"></i>
554
- </span>
555
- </span>
556
- </button>
557
- </div>
558
720
  </div>
559
721
  </div>
560
722
  </div>
@@ -727,23 +889,117 @@ wrapperTag: div
727
889
  </span>
728
890
  <div class="pf-v5-c-masthead__main">
729
891
  <a class="pf-v5-c-masthead__brand" href="#">
730
- <img
731
- class="pf-v5-c-brand"
732
- src="/assets/images/pf-logo.svg"
733
- alt="PatternFly logo"
734
- style="--pf-v5-c-brand--Height:36px"
735
- />
892
+ <svg height="40px" viewBox="0 0 679 158">
893
+ <title>PF-HorizontalLogo-Color</title>
894
+ <defs>
895
+ <linearGradient
896
+ x1="68%"
897
+ y1="2.25860997e-13%"
898
+ x2="32%"
899
+ y2="100%"
900
+ id="linearGradient-drawer-expanded-bottom-example-masthead"
901
+ >
902
+ <stop stop-color="#2B9AF3" offset="0%" />
903
+ <stop
904
+ stop-color="#73BCF7"
905
+ stop-opacity="0.502212631"
906
+ offset="100%"
907
+ />
908
+ </linearGradient>
909
+ </defs>
910
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
911
+ <g
912
+ transform="translate(206.000000, 45.750000)"
913
+ fill="var(--pf-t--global--text--color--regular)"
914
+ fill-rule="nonzero"
915
+ >
916
+ <path
917
+ 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"
918
+ />
919
+ <path
920
+ 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"
921
+ />
922
+ <path
923
+ 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"
924
+ />
925
+ <path
926
+ 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"
927
+ />
928
+ <path
929
+ 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"
930
+ />
931
+ <path
932
+ 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"
933
+ />
934
+ <path
935
+ 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"
936
+ />
937
+ <polygon
938
+ 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"
939
+ />
940
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
941
+ <path
942
+ 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"
943
+ />
944
+ </g>
945
+ <g transform="translate(0.000000, 0.000000)">
946
+ <path
947
+ 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"
948
+ fill="#0066CC"
949
+ />
950
+ <path
951
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
952
+ fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
953
+ />
954
+ <path
955
+ 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"
956
+ fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
957
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
958
+ />
959
+ </g>
960
+ </g>
961
+ </svg>
736
962
  </a>
737
963
  </div>
738
964
  <div class="pf-v5-c-masthead__content">
739
965
  <div
740
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
966
+ class="pf-v5-c-toolbar pf-m-static"
741
967
  id="drawer-expanded-bottom-example-masthead-toolbar"
742
968
  >
743
969
  <div class="pf-v5-c-toolbar__content">
744
970
  <div class="pf-v5-c-toolbar__content-section">
971
+ <div class="pf-v5-c-toolbar__item">
972
+ <button
973
+ class="pf-v5-c-menu-toggle"
974
+ type="button"
975
+ aria-expanded="false"
976
+ >
977
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
978
+ <span class="pf-v5-c-menu-toggle__controls">
979
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
980
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
981
+ </span>
982
+ </span>
983
+ </button>
984
+ </div>
985
+
986
+ <div class="pf-v5-c-toolbar__item">
987
+ <button
988
+ class="pf-v5-c-menu-toggle"
989
+ type="button"
990
+ aria-expanded="false"
991
+ >
992
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
993
+ <span class="pf-v5-c-menu-toggle__controls">
994
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
995
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
996
+ </span>
997
+ </span>
998
+ </button>
999
+ </div>
1000
+
745
1001
  <div
746
- 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"
1002
+ 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"
747
1003
  >
748
1004
  <div
749
1005
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -755,7 +1011,9 @@ wrapperTag: div
755
1011
  aria-expanded="false"
756
1012
  aria-label="Application launcher"
757
1013
  >
758
- <i class="fas fa-th" aria-hidden="true"></i>
1014
+ <span class="pf-v5-c-menu-toggle__icon">
1015
+ <i class="fas fa-th" aria-hidden="true"></i>
1016
+ </span>
759
1017
  </button>
760
1018
  </div>
761
1019
  <div class="pf-v5-c-toolbar__item">
@@ -765,7 +1023,9 @@ wrapperTag: div
765
1023
  aria-expanded="false"
766
1024
  aria-label="Settings"
767
1025
  >
768
- <i class="fas fa-cog" aria-hidden="true"></i>
1026
+ <span class="pf-v5-c-menu-toggle__icon">
1027
+ <i class="fas fa-cog" aria-hidden="true"></i>
1028
+ </span>
769
1029
  </button>
770
1030
  </div>
771
1031
  <div class="pf-v5-c-toolbar__item">
@@ -775,7 +1035,9 @@ wrapperTag: div
775
1035
  aria-expanded="false"
776
1036
  aria-label="Help"
777
1037
  >
778
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1038
+ <span class="pf-v5-c-menu-toggle__icon">
1039
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1040
+ </span>
779
1041
  </button>
780
1042
  </div>
781
1043
  </div>
@@ -786,31 +1048,12 @@ wrapperTag: div
786
1048
  aria-expanded="false"
787
1049
  aria-label="Actions"
788
1050
  >
789
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1051
+ <span class="pf-v5-c-menu-toggle__icon">
1052
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1053
+ </span>
790
1054
  </button>
791
1055
  </div>
792
1056
  </div>
793
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
794
- <button
795
- class="pf-v5-c-menu-toggle pf-m-full-height"
796
- type="button"
797
- aria-expanded="false"
798
- >
799
- <span class="pf-v5-c-menu-toggle__icon">
800
- <img
801
- class="pf-v5-c-avatar"
802
- alt="Avatar image"
803
- src="/assets/images/img_avatar-light.svg"
804
- />
805
- </span>
806
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
807
- <span class="pf-v5-c-menu-toggle__controls">
808
- <span class="pf-v5-c-menu-toggle__toggle-icon">
809
- <i class="fas fa-angle-down" aria-hidden="true"></i>
810
- </span>
811
- </span>
812
- </button>
813
- </div>
814
1057
  </div>
815
1058
  </div>
816
1059
  </div>
@@ -983,23 +1226,117 @@ wrapperTag: div
983
1226
  </span>
984
1227
  <div class="pf-v5-c-masthead__main">
985
1228
  <a class="pf-v5-c-masthead__brand" href="#">
986
- <img
987
- class="pf-v5-c-brand"
988
- src="/assets/images/pf-logo.svg"
989
- alt="PatternFly logo"
990
- style="--pf-v5-c-brand--Height:36px"
991
- />
1229
+ <svg height="40px" viewBox="0 0 679 158">
1230
+ <title>PF-HorizontalLogo-Color</title>
1231
+ <defs>
1232
+ <linearGradient
1233
+ x1="68%"
1234
+ y1="2.25860997e-13%"
1235
+ x2="32%"
1236
+ y2="100%"
1237
+ id="linearGradient-drawer-jump-links-masthead"
1238
+ >
1239
+ <stop stop-color="#2B9AF3" offset="0%" />
1240
+ <stop
1241
+ stop-color="#73BCF7"
1242
+ stop-opacity="0.502212631"
1243
+ offset="100%"
1244
+ />
1245
+ </linearGradient>
1246
+ </defs>
1247
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1248
+ <g
1249
+ transform="translate(206.000000, 45.750000)"
1250
+ fill="var(--pf-t--global--text--color--regular)"
1251
+ fill-rule="nonzero"
1252
+ >
1253
+ <path
1254
+ 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"
1255
+ />
1256
+ <path
1257
+ 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"
1258
+ />
1259
+ <path
1260
+ 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"
1261
+ />
1262
+ <path
1263
+ 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"
1264
+ />
1265
+ <path
1266
+ 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"
1267
+ />
1268
+ <path
1269
+ 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"
1270
+ />
1271
+ <path
1272
+ 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"
1273
+ />
1274
+ <polygon
1275
+ 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"
1276
+ />
1277
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1278
+ <path
1279
+ 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"
1280
+ />
1281
+ </g>
1282
+ <g transform="translate(0.000000, 0.000000)">
1283
+ <path
1284
+ 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"
1285
+ fill="#0066CC"
1286
+ />
1287
+ <path
1288
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1289
+ fill="url(#linearGradient-drawer-jump-links-masthead)"
1290
+ />
1291
+ <path
1292
+ 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"
1293
+ fill="url(#linearGradient-drawer-jump-links-masthead)"
1294
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1295
+ />
1296
+ </g>
1297
+ </g>
1298
+ </svg>
992
1299
  </a>
993
1300
  </div>
994
1301
  <div class="pf-v5-c-masthead__content">
995
1302
  <div
996
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1303
+ class="pf-v5-c-toolbar pf-m-static"
997
1304
  id="drawer-jump-links-masthead-toolbar"
998
1305
  >
999
1306
  <div class="pf-v5-c-toolbar__content">
1000
1307
  <div class="pf-v5-c-toolbar__content-section">
1308
+ <div class="pf-v5-c-toolbar__item">
1309
+ <button
1310
+ class="pf-v5-c-menu-toggle"
1311
+ type="button"
1312
+ aria-expanded="false"
1313
+ >
1314
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1315
+ <span class="pf-v5-c-menu-toggle__controls">
1316
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1317
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1318
+ </span>
1319
+ </span>
1320
+ </button>
1321
+ </div>
1322
+
1323
+ <div class="pf-v5-c-toolbar__item">
1324
+ <button
1325
+ class="pf-v5-c-menu-toggle"
1326
+ type="button"
1327
+ aria-expanded="false"
1328
+ >
1329
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1330
+ <span class="pf-v5-c-menu-toggle__controls">
1331
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1332
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1333
+ </span>
1334
+ </span>
1335
+ </button>
1336
+ </div>
1337
+
1001
1338
  <div
1002
- 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"
1339
+ 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"
1003
1340
  >
1004
1341
  <div
1005
1342
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1011,7 +1348,9 @@ wrapperTag: div
1011
1348
  aria-expanded="false"
1012
1349
  aria-label="Application launcher"
1013
1350
  >
1014
- <i class="fas fa-th" aria-hidden="true"></i>
1351
+ <span class="pf-v5-c-menu-toggle__icon">
1352
+ <i class="fas fa-th" aria-hidden="true"></i>
1353
+ </span>
1015
1354
  </button>
1016
1355
  </div>
1017
1356
  <div class="pf-v5-c-toolbar__item">
@@ -1021,7 +1360,9 @@ wrapperTag: div
1021
1360
  aria-expanded="false"
1022
1361
  aria-label="Settings"
1023
1362
  >
1024
- <i class="fas fa-cog" aria-hidden="true"></i>
1363
+ <span class="pf-v5-c-menu-toggle__icon">
1364
+ <i class="fas fa-cog" aria-hidden="true"></i>
1365
+ </span>
1025
1366
  </button>
1026
1367
  </div>
1027
1368
  <div class="pf-v5-c-toolbar__item">
@@ -1031,7 +1372,9 @@ wrapperTag: div
1031
1372
  aria-expanded="false"
1032
1373
  aria-label="Help"
1033
1374
  >
1034
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1375
+ <span class="pf-v5-c-menu-toggle__icon">
1376
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1377
+ </span>
1035
1378
  </button>
1036
1379
  </div>
1037
1380
  </div>
@@ -1042,31 +1385,12 @@ wrapperTag: div
1042
1385
  aria-expanded="false"
1043
1386
  aria-label="Actions"
1044
1387
  >
1045
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1388
+ <span class="pf-v5-c-menu-toggle__icon">
1389
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1390
+ </span>
1046
1391
  </button>
1047
1392
  </div>
1048
1393
  </div>
1049
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1050
- <button
1051
- class="pf-v5-c-menu-toggle pf-m-full-height"
1052
- type="button"
1053
- aria-expanded="false"
1054
- >
1055
- <span class="pf-v5-c-menu-toggle__icon">
1056
- <img
1057
- class="pf-v5-c-avatar"
1058
- alt="Avatar image"
1059
- src="/assets/images/img_avatar-light.svg"
1060
- />
1061
- </span>
1062
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1063
- <span class="pf-v5-c-menu-toggle__controls">
1064
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1065
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1066
- </span>
1067
- </span>
1068
- </button>
1069
- </div>
1070
1394
  </div>
1071
1395
  </div>
1072
1396
  </div>
@@ -1125,54 +1449,64 @@ wrapperTag: div
1125
1449
  <div class="pf-v5-c-jump-links__label">Jump to section</div>
1126
1450
  <ul class="pf-v5-c-jump-links__list" role="list">
1127
1451
  <li class="pf-v5-c-jump-links__item pf-m-current">
1128
- <a
1129
- class="pf-v5-c-jump-links__link"
1130
- href="#drawer-jump-links-jump-links-first"
1131
- >
1132
- <span
1133
- class="pf-v5-c-jump-links__link-text"
1134
- >First section</span>
1135
- </a>
1452
+ <span class="pf-v5-c-jump-links__link">
1453
+ <a
1454
+ class="pf-v5-c-button pf-m-link"
1455
+ href="#drawer-jump-links-jump-links-first"
1456
+ >
1457
+ <span
1458
+ class="pf-v5-c-jump-links__link-text"
1459
+ >First section</span>
1460
+ </a>
1461
+ </span>
1136
1462
  </li>
1137
1463
  <li class="pf-v5-c-jump-links__item">
1138
- <a
1139
- class="pf-v5-c-jump-links__link"
1140
- href="#drawer-jump-links-jump-links-second"
1141
- >
1142
- <span
1143
- class="pf-v5-c-jump-links__link-text"
1144
- >Second section</span>
1145
- </a>
1464
+ <span class="pf-v5-c-jump-links__link">
1465
+ <a
1466
+ class="pf-v5-c-button pf-m-link"
1467
+ href="#drawer-jump-links-jump-links-second"
1468
+ >
1469
+ <span
1470
+ class="pf-v5-c-jump-links__link-text"
1471
+ >Second section</span>
1472
+ </a>
1473
+ </span>
1146
1474
  </li>
1147
1475
  <li class="pf-v5-c-jump-links__item">
1148
- <a
1149
- class="pf-v5-c-jump-links__link"
1150
- href="#drawer-jump-links-jump-links-third"
1151
- >
1152
- <span
1153
- class="pf-v5-c-jump-links__link-text"
1154
- >Third section</span>
1155
- </a>
1476
+ <span class="pf-v5-c-jump-links__link">
1477
+ <a
1478
+ class="pf-v5-c-button pf-m-link"
1479
+ href="#drawer-jump-links-jump-links-third"
1480
+ >
1481
+ <span
1482
+ class="pf-v5-c-jump-links__link-text"
1483
+ >Third section</span>
1484
+ </a>
1485
+ </span>
1156
1486
  </li>
1157
1487
  <li class="pf-v5-c-jump-links__item">
1158
- <a
1159
- class="pf-v5-c-jump-links__link"
1160
- href="#drawer-jump-links-jump-links-fourth"
1161
- >
1162
- <span
1163
- class="pf-v5-c-jump-links__link-text"
1164
- >Fourth section</span>
1165
- </a>
1488
+ <span class="pf-v5-c-jump-links__link">
1489
+ <a
1490
+ class="pf-v5-c-button pf-m-link"
1491
+ href="#drawer-jump-links-jump-links-fourth"
1492
+ >
1493
+ <span
1494
+ class="pf-v5-c-jump-links__link-text"
1495
+ >Fourth section</span>
1496
+ </a>
1497
+ </span>
1166
1498
  </li>
1167
1499
  <li class="pf-v5-c-jump-links__item">
1168
- <a
1169
- class="pf-v5-c-jump-links__link"
1170
- href="#drawer-jump-links-jump-links-fifth"
1171
- >
1172
- <span
1173
- class="pf-v5-c-jump-links__link-text"
1174
- >Fifth section</span>
1175
- </a>
1500
+ <span class="pf-v5-c-jump-links__link">
1501
+ <a
1502
+ class="pf-v5-c-button pf-m-link"
1503
+ href="#drawer-jump-links-jump-links-fifth"
1504
+ >
1505
+ <span
1506
+ class="pf-v5-c-jump-links__link-text"
1507
+ >Fifth section</span>
1508
+ </a>
1509
+ </span>
1176
1510
  </li>
1177
1511
  </ul>
1178
1512
  </nav>
@@ -1211,22 +1545,24 @@ wrapperTag: div
1211
1545
  </div>
1212
1546
  </div>
1213
1547
  <div class="pf-v5-c-drawer__panel" hidden>
1214
- <div class="pf-v5-c-drawer__body">
1215
- <div class="pf-v5-c-drawer__head">
1216
- <span>drawer-panel</span>
1217
- <div class="pf-v5-c-drawer__actions">
1218
- <div class="pf-v5-c-drawer__close">
1219
- <button
1220
- class="pf-v5-c-button pf-m-plain"
1221
- type="button"
1222
- aria-label="Close drawer panel"
1223
- >
1224
- <i class="fas fa-times" aria-hidden="true"></i>
1225
- </button>
1226
- </div>
1548
+ <div class="pf-v5-c-drawer__head">
1549
+ <span>Drawer panel header content</span>
1550
+ <div class="pf-v5-c-drawer__actions">
1551
+ <div class="pf-v5-c-drawer__close">
1552
+ <button
1553
+ class="pf-v5-c-button pf-m-plain"
1554
+ type="button"
1555
+ aria-label="Close drawer panel"
1556
+ >
1557
+ <i class="fas fa-times" aria-hidden="true"></i>
1558
+ </button>
1227
1559
  </div>
1228
1560
  </div>
1229
1561
  </div>
1562
+ <div
1563
+ class="pf-v5-c-drawer__description"
1564
+ >This is a helpful description of the drawer panel.</div>
1565
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1230
1566
  </div>
1231
1567
  </div>
1232
1568
  </div>
@@ -1257,23 +1593,117 @@ wrapperTag: div
1257
1593
  </span>
1258
1594
  <div class="pf-v5-c-masthead__main">
1259
1595
  <a class="pf-v5-c-masthead__brand" href="#">
1260
- <img
1261
- class="pf-v5-c-brand"
1262
- src="/assets/images/pf-logo.svg"
1263
- alt="PatternFly logo"
1264
- style="--pf-v5-c-brand--Height:36px"
1265
- />
1596
+ <svg height="40px" viewBox="0 0 679 158">
1597
+ <title>PF-HorizontalLogo-Color</title>
1598
+ <defs>
1599
+ <linearGradient
1600
+ x1="68%"
1601
+ y1="2.25860997e-13%"
1602
+ x2="32%"
1603
+ y2="100%"
1604
+ id="linearGradient-drawer-expanded-jump-links-masthead"
1605
+ >
1606
+ <stop stop-color="#2B9AF3" offset="0%" />
1607
+ <stop
1608
+ stop-color="#73BCF7"
1609
+ stop-opacity="0.502212631"
1610
+ offset="100%"
1611
+ />
1612
+ </linearGradient>
1613
+ </defs>
1614
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1615
+ <g
1616
+ transform="translate(206.000000, 45.750000)"
1617
+ fill="var(--pf-t--global--text--color--regular)"
1618
+ fill-rule="nonzero"
1619
+ >
1620
+ <path
1621
+ 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"
1622
+ />
1623
+ <path
1624
+ 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"
1625
+ />
1626
+ <path
1627
+ 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"
1628
+ />
1629
+ <path
1630
+ 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"
1631
+ />
1632
+ <path
1633
+ 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"
1634
+ />
1635
+ <path
1636
+ 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"
1637
+ />
1638
+ <path
1639
+ 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"
1640
+ />
1641
+ <polygon
1642
+ 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"
1643
+ />
1644
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1645
+ <path
1646
+ 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"
1647
+ />
1648
+ </g>
1649
+ <g transform="translate(0.000000, 0.000000)">
1650
+ <path
1651
+ 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"
1652
+ fill="#0066CC"
1653
+ />
1654
+ <path
1655
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1656
+ fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1657
+ />
1658
+ <path
1659
+ 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"
1660
+ fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1661
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1662
+ />
1663
+ </g>
1664
+ </g>
1665
+ </svg>
1266
1666
  </a>
1267
1667
  </div>
1268
1668
  <div class="pf-v5-c-masthead__content">
1269
1669
  <div
1270
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1670
+ class="pf-v5-c-toolbar pf-m-static"
1271
1671
  id="drawer-expanded-jump-links-masthead-toolbar"
1272
1672
  >
1273
1673
  <div class="pf-v5-c-toolbar__content">
1274
1674
  <div class="pf-v5-c-toolbar__content-section">
1675
+ <div class="pf-v5-c-toolbar__item">
1676
+ <button
1677
+ class="pf-v5-c-menu-toggle"
1678
+ type="button"
1679
+ aria-expanded="false"
1680
+ >
1681
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1682
+ <span class="pf-v5-c-menu-toggle__controls">
1683
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1684
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1685
+ </span>
1686
+ </span>
1687
+ </button>
1688
+ </div>
1689
+
1690
+ <div class="pf-v5-c-toolbar__item">
1691
+ <button
1692
+ class="pf-v5-c-menu-toggle"
1693
+ type="button"
1694
+ aria-expanded="false"
1695
+ >
1696
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1697
+ <span class="pf-v5-c-menu-toggle__controls">
1698
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1699
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1700
+ </span>
1701
+ </span>
1702
+ </button>
1703
+ </div>
1704
+
1275
1705
  <div
1276
- 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"
1706
+ 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"
1277
1707
  >
1278
1708
  <div
1279
1709
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1285,7 +1715,9 @@ wrapperTag: div
1285
1715
  aria-expanded="false"
1286
1716
  aria-label="Application launcher"
1287
1717
  >
1288
- <i class="fas fa-th" aria-hidden="true"></i>
1718
+ <span class="pf-v5-c-menu-toggle__icon">
1719
+ <i class="fas fa-th" aria-hidden="true"></i>
1720
+ </span>
1289
1721
  </button>
1290
1722
  </div>
1291
1723
  <div class="pf-v5-c-toolbar__item">
@@ -1295,7 +1727,9 @@ wrapperTag: div
1295
1727
  aria-expanded="false"
1296
1728
  aria-label="Settings"
1297
1729
  >
1298
- <i class="fas fa-cog" aria-hidden="true"></i>
1730
+ <span class="pf-v5-c-menu-toggle__icon">
1731
+ <i class="fas fa-cog" aria-hidden="true"></i>
1732
+ </span>
1299
1733
  </button>
1300
1734
  </div>
1301
1735
  <div class="pf-v5-c-toolbar__item">
@@ -1305,7 +1739,9 @@ wrapperTag: div
1305
1739
  aria-expanded="false"
1306
1740
  aria-label="Help"
1307
1741
  >
1308
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1742
+ <span class="pf-v5-c-menu-toggle__icon">
1743
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1744
+ </span>
1309
1745
  </button>
1310
1746
  </div>
1311
1747
  </div>
@@ -1316,31 +1752,12 @@ wrapperTag: div
1316
1752
  aria-expanded="false"
1317
1753
  aria-label="Actions"
1318
1754
  >
1319
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1755
+ <span class="pf-v5-c-menu-toggle__icon">
1756
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1757
+ </span>
1320
1758
  </button>
1321
1759
  </div>
1322
1760
  </div>
1323
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1324
- <button
1325
- class="pf-v5-c-menu-toggle pf-m-full-height"
1326
- type="button"
1327
- aria-expanded="false"
1328
- >
1329
- <span class="pf-v5-c-menu-toggle__icon">
1330
- <img
1331
- class="pf-v5-c-avatar"
1332
- alt="Avatar image"
1333
- src="/assets/images/img_avatar-light.svg"
1334
- />
1335
- </span>
1336
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1337
- <span class="pf-v5-c-menu-toggle__controls">
1338
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1339
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1340
- </span>
1341
- </span>
1342
- </button>
1343
- </div>
1344
1761
  </div>
1345
1762
  </div>
1346
1763
  </div>
@@ -1399,54 +1816,64 @@ wrapperTag: div
1399
1816
  <div class="pf-v5-c-jump-links__label">Jump to section</div>
1400
1817
  <ul class="pf-v5-c-jump-links__list" role="list">
1401
1818
  <li class="pf-v5-c-jump-links__item pf-m-current">
1402
- <a
1403
- class="pf-v5-c-jump-links__link"
1404
- href="#drawer-expanded-jump-links-jump-links-first"
1405
- >
1406
- <span
1407
- class="pf-v5-c-jump-links__link-text"
1408
- >First section</span>
1409
- </a>
1819
+ <span class="pf-v5-c-jump-links__link">
1820
+ <a
1821
+ class="pf-v5-c-button pf-m-link"
1822
+ href="#drawer-expanded-jump-links-jump-links-first"
1823
+ >
1824
+ <span
1825
+ class="pf-v5-c-jump-links__link-text"
1826
+ >First section</span>
1827
+ </a>
1828
+ </span>
1410
1829
  </li>
1411
1830
  <li class="pf-v5-c-jump-links__item">
1412
- <a
1413
- class="pf-v5-c-jump-links__link"
1414
- href="#drawer-expanded-jump-links-jump-links-second"
1415
- >
1416
- <span
1417
- class="pf-v5-c-jump-links__link-text"
1418
- >Second section</span>
1419
- </a>
1831
+ <span class="pf-v5-c-jump-links__link">
1832
+ <a
1833
+ class="pf-v5-c-button pf-m-link"
1834
+ href="#drawer-expanded-jump-links-jump-links-second"
1835
+ >
1836
+ <span
1837
+ class="pf-v5-c-jump-links__link-text"
1838
+ >Second section</span>
1839
+ </a>
1840
+ </span>
1420
1841
  </li>
1421
1842
  <li class="pf-v5-c-jump-links__item">
1422
- <a
1423
- class="pf-v5-c-jump-links__link"
1424
- href="#drawer-expanded-jump-links-jump-links-third"
1425
- >
1426
- <span
1427
- class="pf-v5-c-jump-links__link-text"
1428
- >Third section</span>
1429
- </a>
1843
+ <span class="pf-v5-c-jump-links__link">
1844
+ <a
1845
+ class="pf-v5-c-button pf-m-link"
1846
+ href="#drawer-expanded-jump-links-jump-links-third"
1847
+ >
1848
+ <span
1849
+ class="pf-v5-c-jump-links__link-text"
1850
+ >Third section</span>
1851
+ </a>
1852
+ </span>
1430
1853
  </li>
1431
1854
  <li class="pf-v5-c-jump-links__item">
1432
- <a
1433
- class="pf-v5-c-jump-links__link"
1434
- href="#drawer-expanded-jump-links-jump-links-fourth"
1435
- >
1436
- <span
1437
- class="pf-v5-c-jump-links__link-text"
1438
- >Fourth section</span>
1439
- </a>
1855
+ <span class="pf-v5-c-jump-links__link">
1856
+ <a
1857
+ class="pf-v5-c-button pf-m-link"
1858
+ href="#drawer-expanded-jump-links-jump-links-fourth"
1859
+ >
1860
+ <span
1861
+ class="pf-v5-c-jump-links__link-text"
1862
+ >Fourth section</span>
1863
+ </a>
1864
+ </span>
1440
1865
  </li>
1441
1866
  <li class="pf-v5-c-jump-links__item">
1442
- <a
1443
- class="pf-v5-c-jump-links__link"
1444
- href="#drawer-expanded-jump-links-jump-links-fifth"
1445
- >
1446
- <span
1447
- class="pf-v5-c-jump-links__link-text"
1448
- >Fifth section</span>
1449
- </a>
1867
+ <span class="pf-v5-c-jump-links__link">
1868
+ <a
1869
+ class="pf-v5-c-button pf-m-link"
1870
+ href="#drawer-expanded-jump-links-jump-links-fifth"
1871
+ >
1872
+ <span
1873
+ class="pf-v5-c-jump-links__link-text"
1874
+ >Fifth section</span>
1875
+ </a>
1876
+ </span>
1450
1877
  </li>
1451
1878
  </ul>
1452
1879
  </nav>
@@ -1491,22 +1918,24 @@ wrapperTag: div
1491
1918
  </div>
1492
1919
  </div>
1493
1920
  <div class="pf-v5-c-drawer__panel">
1494
- <div class="pf-v5-c-drawer__body">
1495
- <div class="pf-v5-c-drawer__head">
1496
- <span>drawer-panel</span>
1497
- <div class="pf-v5-c-drawer__actions">
1498
- <div class="pf-v5-c-drawer__close">
1499
- <button
1500
- class="pf-v5-c-button pf-m-plain"
1501
- type="button"
1502
- aria-label="Close drawer panel"
1503
- >
1504
- <i class="fas fa-times" aria-hidden="true"></i>
1505
- </button>
1506
- </div>
1921
+ <div class="pf-v5-c-drawer__head">
1922
+ <span>Drawer panel header content</span>
1923
+ <div class="pf-v5-c-drawer__actions">
1924
+ <div class="pf-v5-c-drawer__close">
1925
+ <button
1926
+ class="pf-v5-c-button pf-m-plain"
1927
+ type="button"
1928
+ aria-label="Close drawer panel"
1929
+ >
1930
+ <i class="fas fa-times" aria-hidden="true"></i>
1931
+ </button>
1507
1932
  </div>
1508
1933
  </div>
1509
1934
  </div>
1935
+ <div
1936
+ class="pf-v5-c-drawer__description"
1937
+ >This is a helpful description of the drawer panel.</div>
1938
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1510
1939
  </div>
1511
1940
  </div>
1512
1941
  </div>