@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

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 (334) 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 +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  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 +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  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 +56 -48
  84. package/components/DualListSelector/dual-list-selector.scss +57 -50
  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 +68 -114
  92. package/components/Form/form.scss +65 -126
  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 +380 -355
  110. package/components/Label/label.scss +434 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +70 -97
  114. package/components/Login/login.scss +56 -64
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +3 -0
  118. package/components/Menu/menu.scss +7 -3
  119. package/components/MenuToggle/menu-toggle.css +8 -8
  120. package/components/MenuToggle/menu-toggle.scss +8 -10
  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 +56 -81
  128. package/components/NotificationBadge/notification-badge.scss +60 -97
  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 +35 -52
  152. package/components/SimpleList/simple-list.scss +41 -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 +29 -45
  166. package/components/Table/table-grid.scss +40 -53
  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 +76 -74
  170. package/components/Table/table-tree-view.scss +44 -39
  171. package/components/Table/table.css +67 -93
  172. package/components/Table/table.scss +83 -105
  173. package/components/Tabs/tabs.css +143 -175
  174. package/components/Tabs/tabs.scss +159 -217
  175. package/components/Tile/tile.css +40 -81
  176. package/components/Tile/tile.scss +38 -84
  177. package/components/Timestamp/timestamp.css +12 -9
  178. package/components/Timestamp/timestamp.scss +11 -10
  179. package/components/Title/title.css +70 -19
  180. package/components/Title/title.scss +90 -20
  181. package/components/ToggleGroup/toggle-group.css +54 -48
  182. package/components/ToggleGroup/toggle-group.scss +62 -50
  183. package/components/Toolbar/toolbar.css +2527 -1031
  184. package/components/Toolbar/toolbar.scss +233 -520
  185. package/components/Tooltip/tooltip.css +16 -18
  186. package/components/Tooltip/tooltip.scss +20 -24
  187. package/components/TreeView/tree-view.css +76 -97
  188. package/components/TreeView/tree-view.scss +82 -113
  189. package/components/Truncate/truncate.css +4 -0
  190. package/components/Truncate/truncate.scss +3 -0
  191. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  192. package/docs/components/Accordion/examples/Accordion.md +614 -416
  193. package/docs/components/ActionList/examples/ActionList.md +73 -22
  194. package/docs/components/Alert/examples/Alert.md +3 -3
  195. package/docs/components/Avatar/examples/Avatar.md +5 -19
  196. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  197. package/docs/components/Badge/examples/Badge.md +21 -0
  198. package/docs/components/Banner/examples/Banner.md +48 -25
  199. package/docs/components/Brand/examples/Brand.css +12 -0
  200. package/docs/components/Brand/examples/Brand.md +51 -32
  201. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  202. package/docs/components/Button/examples/Button.css +4 -0
  203. package/docs/components/Button/examples/Button.md +1419 -93
  204. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  205. package/docs/components/Card/examples/Card.md +550 -133
  206. package/docs/components/Check/examples/Check.md +1 -0
  207. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  208. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  209. package/docs/components/Content/examples/Content.md +5 -5
  210. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  211. package/docs/components/Divider/examples/Divider.css +3 -1
  212. package/docs/components/Divider/examples/Divider.md +30 -5
  213. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  214. package/docs/components/Drawer/examples/Drawer.md +294 -256
  215. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  216. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  217. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  218. package/docs/components/Form/examples/Form.md +134 -89
  219. package/docs/components/Icon/examples/Icon.md +82 -11
  220. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  221. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  222. package/docs/components/Label/examples/Label.css +4 -0
  223. package/docs/components/Label/examples/Label.md +3090 -703
  224. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  225. package/docs/components/Login/examples/Login.md +10 -5
  226. package/docs/components/Masthead/examples/masthead.md +443 -65
  227. package/docs/components/Menu/examples/Menu.md +507 -473
  228. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  229. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  230. package/docs/components/Nav/examples/Navigation.css +1 -23
  231. package/docs/components/Nav/examples/Navigation.md +209 -356
  232. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  233. package/docs/components/Page/examples/Page.css +0 -8
  234. package/docs/components/Page/examples/Page.md +22 -21
  235. package/docs/components/Pagination/examples/Pagination.md +663 -637
  236. package/docs/components/Panel/examples/Panel.md +12 -0
  237. package/docs/components/Popover/examples/Popover.md +1 -1
  238. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  239. package/docs/components/Radio/examples/Radio.md +1 -1
  240. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  241. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  242. package/docs/components/TabContent/examples/TabContent.md +10 -10
  243. package/docs/components/Table/examples/Table.md +8 -8
  244. package/docs/components/Tabs/examples/Tabs.css +1 -1
  245. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  246. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  247. package/docs/components/Tile/examples/Tile.md +264 -144
  248. package/docs/components/Title/examples/Title.md +18 -0
  249. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  250. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  251. package/docs/components/TreeView/examples/TreeView.md +7 -57
  252. package/docs/components/Truncate/examples/Truncate.css +2 -2
  253. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  254. package/docs/demos/Alert/examples/Alert.md +330 -87
  255. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  256. package/docs/demos/Banner/examples/Banner.md +211 -60
  257. package/docs/demos/Card/examples/Card.md +2 -2
  258. package/docs/demos/CardView/examples/CardView.md +241 -187
  259. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  260. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  261. package/docs/demos/DataList/examples/DataList.md +999 -938
  262. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  263. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  264. package/docs/demos/Form/examples/BasicForms.md +138 -84
  265. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  266. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  267. package/docs/demos/Modal/examples/Modal.md +645 -198
  268. package/docs/demos/Nav/examples/Nav.md +691 -902
  269. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  270. package/docs/demos/Page/examples/Page.md +942 -273
  271. package/docs/demos/Page/examples/Penta.md +66 -26
  272. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  273. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  274. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  275. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  276. package/docs/demos/Table/examples/Table.md +3811 -3456
  277. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  278. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  279. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  280. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  281. package/docs/layouts/Flex/examples/Flex.md +11 -11
  282. package/package.json +32 -32
  283. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  284. package/patternfly-base-no-globals.css +897 -880
  285. package/patternfly-base-theme-dark-unversioned.css +890 -872
  286. package/patternfly-base.css +890 -872
  287. package/patternfly-no-globals.css +8107 -8027
  288. package/patternfly-theme-dark-unversioned.css +8111 -8030
  289. package/patternfly.css +8111 -8030
  290. package/patternfly.min.css +1 -1
  291. package/patternfly.min.css.map +1 -1
  292. package/sass-utilities/mixins.scss +18 -0
  293. package/base/themes/dark/_variables.scss +0 -102
  294. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  295. package/components/Accordion/themes/dark/accordion.scss +0 -9
  296. package/components/Alert/themes/dark/alert.scss +0 -17
  297. package/components/Badge/themes/dark/badge.scss +0 -9
  298. package/components/Banner/themes/dark/banner.scss +0 -14
  299. package/components/Button/themes/dark/button.scss +0 -51
  300. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  301. package/components/Card/themes/dark/card.scss +0 -20
  302. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  303. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  304. package/components/DataList/themes/dark/data-list.scss +0 -10
  305. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  306. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  307. package/components/Drawer/themes/dark/drawer.scss +0 -13
  308. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  309. package/components/Form/themes/dark/form.scss +0 -7
  310. package/components/FormControl/themes/dark/form-control.scss +0 -24
  311. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  314. package/components/Label/themes/dark/label.scss +0 -53
  315. package/components/Login/themes/dark/login.scss +0 -12
  316. package/components/Masthead/themes/dark/masthead.scss +0 -14
  317. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  318. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  319. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  320. package/components/Page/themes/dark/page.scss +0 -69
  321. package/components/Pagination/themes/dark/pagination.scss +0 -7
  322. package/components/Panel/themes/dark/panel.scss +0 -7
  323. package/components/Popover/themes/dark/popover.scss +0 -11
  324. package/components/Progress/themes/dark/progress.scss +0 -9
  325. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  326. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  327. package/components/Switch/themes/dark/switch.scss +0 -11
  328. package/components/Tabs/themes/dark/tabs.scss +0 -10
  329. package/components/Tile/themes/dark/tile.scss +0 -10
  330. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  331. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  332. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  333. package/docs/components/Avatar/examples/Avatar.css +0 -3
  334. package/docs/components/NotificationBadge/examples/NotificationBadge.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-angle-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-angle-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"
@@ -89,27 +183,6 @@ wrapperTag: div
89
183
  </button>
90
184
  </div>
91
185
  </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
186
  </div>
114
187
  </div>
115
188
  </div>
@@ -471,23 +544,117 @@ wrapperTag: div
471
544
  </span>
472
545
  <div class="pf-v5-c-masthead__main">
473
546
  <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
- />
547
+ <svg height="40px" viewBox="0 0 679 158">
548
+ <title>PF-HorizontalLogo-Color</title>
549
+ <defs>
550
+ <linearGradient
551
+ x1="68%"
552
+ y1="2.25860997e-13%"
553
+ x2="32%"
554
+ y2="100%"
555
+ id="linearGradient-drawer-expanded-example-masthead"
556
+ >
557
+ <stop stop-color="#2B9AF3" offset="0%" />
558
+ <stop
559
+ stop-color="#73BCF7"
560
+ stop-opacity="0.502212631"
561
+ offset="100%"
562
+ />
563
+ </linearGradient>
564
+ </defs>
565
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
566
+ <g
567
+ transform="translate(206.000000, 45.750000)"
568
+ fill="var(--pf-t--global--text--color--regular)"
569
+ fill-rule="nonzero"
570
+ >
571
+ <path
572
+ 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"
573
+ />
574
+ <path
575
+ 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"
576
+ />
577
+ <path
578
+ 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"
579
+ />
580
+ <path
581
+ 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"
582
+ />
583
+ <path
584
+ 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"
585
+ />
586
+ <path
587
+ 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"
588
+ />
589
+ <path
590
+ 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"
591
+ />
592
+ <polygon
593
+ 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"
594
+ />
595
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
596
+ <path
597
+ 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"
598
+ />
599
+ </g>
600
+ <g transform="translate(0.000000, 0.000000)">
601
+ <path
602
+ 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"
603
+ fill="#0066CC"
604
+ />
605
+ <path
606
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
607
+ fill="url(#linearGradient-drawer-expanded-example-masthead)"
608
+ />
609
+ <path
610
+ 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"
611
+ fill="url(#linearGradient-drawer-expanded-example-masthead)"
612
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
613
+ />
614
+ </g>
615
+ </g>
616
+ </svg>
480
617
  </a>
481
618
  </div>
482
619
  <div class="pf-v5-c-masthead__content">
483
620
  <div
484
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
621
+ class="pf-v5-c-toolbar pf-m-static"
485
622
  id="drawer-expanded-example-masthead-toolbar"
486
623
  >
487
624
  <div class="pf-v5-c-toolbar__content">
488
625
  <div class="pf-v5-c-toolbar__content-section">
626
+ <div class="pf-v5-c-toolbar__item">
627
+ <button
628
+ class="pf-v5-c-menu-toggle"
629
+ type="button"
630
+ aria-expanded="false"
631
+ >
632
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
633
+ <span class="pf-v5-c-menu-toggle__controls">
634
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
635
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
636
+ </span>
637
+ </span>
638
+ </button>
639
+ </div>
640
+
641
+ <div class="pf-v5-c-toolbar__item">
642
+ <button
643
+ class="pf-v5-c-menu-toggle"
644
+ type="button"
645
+ aria-expanded="false"
646
+ >
647
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
648
+ <span class="pf-v5-c-menu-toggle__controls">
649
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
650
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
651
+ </span>
652
+ </span>
653
+ </button>
654
+ </div>
655
+
489
656
  <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"
657
+ 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
658
  >
492
659
  <div
493
660
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -534,27 +701,6 @@ wrapperTag: div
534
701
  </button>
535
702
  </div>
536
703
  </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
704
  </div>
559
705
  </div>
560
706
  </div>
@@ -727,23 +873,117 @@ wrapperTag: div
727
873
  </span>
728
874
  <div class="pf-v5-c-masthead__main">
729
875
  <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
- />
876
+ <svg height="40px" viewBox="0 0 679 158">
877
+ <title>PF-HorizontalLogo-Color</title>
878
+ <defs>
879
+ <linearGradient
880
+ x1="68%"
881
+ y1="2.25860997e-13%"
882
+ x2="32%"
883
+ y2="100%"
884
+ id="linearGradient-drawer-expanded-bottom-example-masthead"
885
+ >
886
+ <stop stop-color="#2B9AF3" offset="0%" />
887
+ <stop
888
+ stop-color="#73BCF7"
889
+ stop-opacity="0.502212631"
890
+ offset="100%"
891
+ />
892
+ </linearGradient>
893
+ </defs>
894
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
895
+ <g
896
+ transform="translate(206.000000, 45.750000)"
897
+ fill="var(--pf-t--global--text--color--regular)"
898
+ fill-rule="nonzero"
899
+ >
900
+ <path
901
+ 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"
902
+ />
903
+ <path
904
+ 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"
905
+ />
906
+ <path
907
+ 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"
908
+ />
909
+ <path
910
+ 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"
911
+ />
912
+ <path
913
+ 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"
914
+ />
915
+ <path
916
+ 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"
917
+ />
918
+ <path
919
+ 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"
920
+ />
921
+ <polygon
922
+ 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"
923
+ />
924
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
925
+ <path
926
+ 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"
927
+ />
928
+ </g>
929
+ <g transform="translate(0.000000, 0.000000)">
930
+ <path
931
+ 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"
932
+ fill="#0066CC"
933
+ />
934
+ <path
935
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
936
+ fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
937
+ />
938
+ <path
939
+ 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"
940
+ fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
941
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
942
+ />
943
+ </g>
944
+ </g>
945
+ </svg>
736
946
  </a>
737
947
  </div>
738
948
  <div class="pf-v5-c-masthead__content">
739
949
  <div
740
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
950
+ class="pf-v5-c-toolbar pf-m-static"
741
951
  id="drawer-expanded-bottom-example-masthead-toolbar"
742
952
  >
743
953
  <div class="pf-v5-c-toolbar__content">
744
954
  <div class="pf-v5-c-toolbar__content-section">
955
+ <div class="pf-v5-c-toolbar__item">
956
+ <button
957
+ class="pf-v5-c-menu-toggle"
958
+ type="button"
959
+ aria-expanded="false"
960
+ >
961
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
962
+ <span class="pf-v5-c-menu-toggle__controls">
963
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
964
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
965
+ </span>
966
+ </span>
967
+ </button>
968
+ </div>
969
+
970
+ <div class="pf-v5-c-toolbar__item">
971
+ <button
972
+ class="pf-v5-c-menu-toggle"
973
+ type="button"
974
+ aria-expanded="false"
975
+ >
976
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
977
+ <span class="pf-v5-c-menu-toggle__controls">
978
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
979
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
980
+ </span>
981
+ </span>
982
+ </button>
983
+ </div>
984
+
745
985
  <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"
986
+ 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
987
  >
748
988
  <div
749
989
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -790,27 +1030,6 @@ wrapperTag: div
790
1030
  </button>
791
1031
  </div>
792
1032
  </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
1033
  </div>
815
1034
  </div>
816
1035
  </div>
@@ -983,23 +1202,117 @@ wrapperTag: div
983
1202
  </span>
984
1203
  <div class="pf-v5-c-masthead__main">
985
1204
  <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
- />
1205
+ <svg height="40px" viewBox="0 0 679 158">
1206
+ <title>PF-HorizontalLogo-Color</title>
1207
+ <defs>
1208
+ <linearGradient
1209
+ x1="68%"
1210
+ y1="2.25860997e-13%"
1211
+ x2="32%"
1212
+ y2="100%"
1213
+ id="linearGradient-drawer-jump-links-masthead"
1214
+ >
1215
+ <stop stop-color="#2B9AF3" offset="0%" />
1216
+ <stop
1217
+ stop-color="#73BCF7"
1218
+ stop-opacity="0.502212631"
1219
+ offset="100%"
1220
+ />
1221
+ </linearGradient>
1222
+ </defs>
1223
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1224
+ <g
1225
+ transform="translate(206.000000, 45.750000)"
1226
+ fill="var(--pf-t--global--text--color--regular)"
1227
+ fill-rule="nonzero"
1228
+ >
1229
+ <path
1230
+ 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"
1231
+ />
1232
+ <path
1233
+ 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"
1234
+ />
1235
+ <path
1236
+ 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"
1237
+ />
1238
+ <path
1239
+ 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"
1240
+ />
1241
+ <path
1242
+ 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"
1243
+ />
1244
+ <path
1245
+ 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"
1246
+ />
1247
+ <path
1248
+ 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"
1249
+ />
1250
+ <polygon
1251
+ 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"
1252
+ />
1253
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1254
+ <path
1255
+ 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"
1256
+ />
1257
+ </g>
1258
+ <g transform="translate(0.000000, 0.000000)">
1259
+ <path
1260
+ 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"
1261
+ fill="#0066CC"
1262
+ />
1263
+ <path
1264
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1265
+ fill="url(#linearGradient-drawer-jump-links-masthead)"
1266
+ />
1267
+ <path
1268
+ 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"
1269
+ fill="url(#linearGradient-drawer-jump-links-masthead)"
1270
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1271
+ />
1272
+ </g>
1273
+ </g>
1274
+ </svg>
992
1275
  </a>
993
1276
  </div>
994
1277
  <div class="pf-v5-c-masthead__content">
995
1278
  <div
996
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1279
+ class="pf-v5-c-toolbar pf-m-static"
997
1280
  id="drawer-jump-links-masthead-toolbar"
998
1281
  >
999
1282
  <div class="pf-v5-c-toolbar__content">
1000
1283
  <div class="pf-v5-c-toolbar__content-section">
1284
+ <div class="pf-v5-c-toolbar__item">
1285
+ <button
1286
+ class="pf-v5-c-menu-toggle"
1287
+ type="button"
1288
+ aria-expanded="false"
1289
+ >
1290
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1291
+ <span class="pf-v5-c-menu-toggle__controls">
1292
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1293
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1294
+ </span>
1295
+ </span>
1296
+ </button>
1297
+ </div>
1298
+
1299
+ <div class="pf-v5-c-toolbar__item">
1300
+ <button
1301
+ class="pf-v5-c-menu-toggle"
1302
+ type="button"
1303
+ aria-expanded="false"
1304
+ >
1305
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1306
+ <span class="pf-v5-c-menu-toggle__controls">
1307
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1308
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1309
+ </span>
1310
+ </span>
1311
+ </button>
1312
+ </div>
1313
+
1001
1314
  <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"
1315
+ 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
1316
  >
1004
1317
  <div
1005
1318
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1046,27 +1359,6 @@ wrapperTag: div
1046
1359
  </button>
1047
1360
  </div>
1048
1361
  </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
1362
  </div>
1071
1363
  </div>
1072
1364
  </div>
@@ -1125,54 +1417,64 @@ wrapperTag: div
1125
1417
  <div class="pf-v5-c-jump-links__label">Jump to section</div>
1126
1418
  <ul class="pf-v5-c-jump-links__list" role="list">
1127
1419
  <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>
1420
+ <span class="pf-v5-c-jump-links__link">
1421
+ <a
1422
+ class="pf-v5-c-button pf-m-link"
1423
+ href="#drawer-jump-links-jump-links-first"
1424
+ >
1425
+ <span
1426
+ class="pf-v5-c-jump-links__link-text"
1427
+ >First section</span>
1428
+ </a>
1429
+ </span>
1136
1430
  </li>
1137
1431
  <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>
1432
+ <span class="pf-v5-c-jump-links__link">
1433
+ <a
1434
+ class="pf-v5-c-button pf-m-link"
1435
+ href="#drawer-jump-links-jump-links-second"
1436
+ >
1437
+ <span
1438
+ class="pf-v5-c-jump-links__link-text"
1439
+ >Second section</span>
1440
+ </a>
1441
+ </span>
1146
1442
  </li>
1147
1443
  <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>
1444
+ <span class="pf-v5-c-jump-links__link">
1445
+ <a
1446
+ class="pf-v5-c-button pf-m-link"
1447
+ href="#drawer-jump-links-jump-links-third"
1448
+ >
1449
+ <span
1450
+ class="pf-v5-c-jump-links__link-text"
1451
+ >Third section</span>
1452
+ </a>
1453
+ </span>
1156
1454
  </li>
1157
1455
  <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>
1456
+ <span class="pf-v5-c-jump-links__link">
1457
+ <a
1458
+ class="pf-v5-c-button pf-m-link"
1459
+ href="#drawer-jump-links-jump-links-fourth"
1460
+ >
1461
+ <span
1462
+ class="pf-v5-c-jump-links__link-text"
1463
+ >Fourth section</span>
1464
+ </a>
1465
+ </span>
1166
1466
  </li>
1167
1467
  <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>
1468
+ <span class="pf-v5-c-jump-links__link">
1469
+ <a
1470
+ class="pf-v5-c-button pf-m-link"
1471
+ href="#drawer-jump-links-jump-links-fifth"
1472
+ >
1473
+ <span
1474
+ class="pf-v5-c-jump-links__link-text"
1475
+ >Fifth section</span>
1476
+ </a>
1477
+ </span>
1176
1478
  </li>
1177
1479
  </ul>
1178
1480
  </nav>
@@ -1211,22 +1513,24 @@ wrapperTag: div
1211
1513
  </div>
1212
1514
  </div>
1213
1515
  <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>
1516
+ <div class="pf-v5-c-drawer__head">
1517
+ <span>Drawer panel header content</span>
1518
+ <div class="pf-v5-c-drawer__actions">
1519
+ <div class="pf-v5-c-drawer__close">
1520
+ <button
1521
+ class="pf-v5-c-button pf-m-plain"
1522
+ type="button"
1523
+ aria-label="Close drawer panel"
1524
+ >
1525
+ <i class="fas fa-times" aria-hidden="true"></i>
1526
+ </button>
1227
1527
  </div>
1228
1528
  </div>
1229
1529
  </div>
1530
+ <div
1531
+ class="pf-v5-c-drawer__description"
1532
+ >This is a helpful description of the drawer panel.</div>
1533
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1230
1534
  </div>
1231
1535
  </div>
1232
1536
  </div>
@@ -1257,23 +1561,117 @@ wrapperTag: div
1257
1561
  </span>
1258
1562
  <div class="pf-v5-c-masthead__main">
1259
1563
  <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
- />
1564
+ <svg height="40px" viewBox="0 0 679 158">
1565
+ <title>PF-HorizontalLogo-Color</title>
1566
+ <defs>
1567
+ <linearGradient
1568
+ x1="68%"
1569
+ y1="2.25860997e-13%"
1570
+ x2="32%"
1571
+ y2="100%"
1572
+ id="linearGradient-drawer-expanded-jump-links-masthead"
1573
+ >
1574
+ <stop stop-color="#2B9AF3" offset="0%" />
1575
+ <stop
1576
+ stop-color="#73BCF7"
1577
+ stop-opacity="0.502212631"
1578
+ offset="100%"
1579
+ />
1580
+ </linearGradient>
1581
+ </defs>
1582
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1583
+ <g
1584
+ transform="translate(206.000000, 45.750000)"
1585
+ fill="var(--pf-t--global--text--color--regular)"
1586
+ fill-rule="nonzero"
1587
+ >
1588
+ <path
1589
+ 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"
1590
+ />
1591
+ <path
1592
+ 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"
1593
+ />
1594
+ <path
1595
+ 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"
1596
+ />
1597
+ <path
1598
+ 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"
1599
+ />
1600
+ <path
1601
+ 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"
1602
+ />
1603
+ <path
1604
+ 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"
1605
+ />
1606
+ <path
1607
+ 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"
1608
+ />
1609
+ <polygon
1610
+ 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"
1611
+ />
1612
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1613
+ <path
1614
+ 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"
1615
+ />
1616
+ </g>
1617
+ <g transform="translate(0.000000, 0.000000)">
1618
+ <path
1619
+ 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"
1620
+ fill="#0066CC"
1621
+ />
1622
+ <path
1623
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1624
+ fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1625
+ />
1626
+ <path
1627
+ 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"
1628
+ fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1629
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1630
+ />
1631
+ </g>
1632
+ </g>
1633
+ </svg>
1266
1634
  </a>
1267
1635
  </div>
1268
1636
  <div class="pf-v5-c-masthead__content">
1269
1637
  <div
1270
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1638
+ class="pf-v5-c-toolbar pf-m-static"
1271
1639
  id="drawer-expanded-jump-links-masthead-toolbar"
1272
1640
  >
1273
1641
  <div class="pf-v5-c-toolbar__content">
1274
1642
  <div class="pf-v5-c-toolbar__content-section">
1643
+ <div class="pf-v5-c-toolbar__item">
1644
+ <button
1645
+ class="pf-v5-c-menu-toggle"
1646
+ type="button"
1647
+ aria-expanded="false"
1648
+ >
1649
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1650
+ <span class="pf-v5-c-menu-toggle__controls">
1651
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1652
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1653
+ </span>
1654
+ </span>
1655
+ </button>
1656
+ </div>
1657
+
1658
+ <div class="pf-v5-c-toolbar__item">
1659
+ <button
1660
+ class="pf-v5-c-menu-toggle"
1661
+ type="button"
1662
+ aria-expanded="false"
1663
+ >
1664
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1665
+ <span class="pf-v5-c-menu-toggle__controls">
1666
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1667
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1668
+ </span>
1669
+ </span>
1670
+ </button>
1671
+ </div>
1672
+
1275
1673
  <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"
1674
+ 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
1675
  >
1278
1676
  <div
1279
1677
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1320,27 +1718,6 @@ wrapperTag: div
1320
1718
  </button>
1321
1719
  </div>
1322
1720
  </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
1721
  </div>
1345
1722
  </div>
1346
1723
  </div>
@@ -1399,54 +1776,64 @@ wrapperTag: div
1399
1776
  <div class="pf-v5-c-jump-links__label">Jump to section</div>
1400
1777
  <ul class="pf-v5-c-jump-links__list" role="list">
1401
1778
  <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>
1779
+ <span class="pf-v5-c-jump-links__link">
1780
+ <a
1781
+ class="pf-v5-c-button pf-m-link"
1782
+ href="#drawer-expanded-jump-links-jump-links-first"
1783
+ >
1784
+ <span
1785
+ class="pf-v5-c-jump-links__link-text"
1786
+ >First section</span>
1787
+ </a>
1788
+ </span>
1410
1789
  </li>
1411
1790
  <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>
1791
+ <span class="pf-v5-c-jump-links__link">
1792
+ <a
1793
+ class="pf-v5-c-button pf-m-link"
1794
+ href="#drawer-expanded-jump-links-jump-links-second"
1795
+ >
1796
+ <span
1797
+ class="pf-v5-c-jump-links__link-text"
1798
+ >Second section</span>
1799
+ </a>
1800
+ </span>
1420
1801
  </li>
1421
1802
  <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>
1803
+ <span class="pf-v5-c-jump-links__link">
1804
+ <a
1805
+ class="pf-v5-c-button pf-m-link"
1806
+ href="#drawer-expanded-jump-links-jump-links-third"
1807
+ >
1808
+ <span
1809
+ class="pf-v5-c-jump-links__link-text"
1810
+ >Third section</span>
1811
+ </a>
1812
+ </span>
1430
1813
  </li>
1431
1814
  <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>
1815
+ <span class="pf-v5-c-jump-links__link">
1816
+ <a
1817
+ class="pf-v5-c-button pf-m-link"
1818
+ href="#drawer-expanded-jump-links-jump-links-fourth"
1819
+ >
1820
+ <span
1821
+ class="pf-v5-c-jump-links__link-text"
1822
+ >Fourth section</span>
1823
+ </a>
1824
+ </span>
1440
1825
  </li>
1441
1826
  <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>
1827
+ <span class="pf-v5-c-jump-links__link">
1828
+ <a
1829
+ class="pf-v5-c-button pf-m-link"
1830
+ href="#drawer-expanded-jump-links-jump-links-fifth"
1831
+ >
1832
+ <span
1833
+ class="pf-v5-c-jump-links__link-text"
1834
+ >Fifth section</span>
1835
+ </a>
1836
+ </span>
1450
1837
  </li>
1451
1838
  </ul>
1452
1839
  </nav>
@@ -1491,22 +1878,24 @@ wrapperTag: div
1491
1878
  </div>
1492
1879
  </div>
1493
1880
  <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>
1881
+ <div class="pf-v5-c-drawer__head">
1882
+ <span>Drawer panel header content</span>
1883
+ <div class="pf-v5-c-drawer__actions">
1884
+ <div class="pf-v5-c-drawer__close">
1885
+ <button
1886
+ class="pf-v5-c-button pf-m-plain"
1887
+ type="button"
1888
+ aria-label="Close drawer panel"
1889
+ >
1890
+ <i class="fas fa-times" aria-hidden="true"></i>
1891
+ </button>
1507
1892
  </div>
1508
1893
  </div>
1509
1894
  </div>
1895
+ <div
1896
+ class="pf-v5-c-drawer__description"
1897
+ >This is a helpful description of the drawer panel.</div>
1898
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1510
1899
  </div>
1511
1900
  </div>
1512
1901
  </div>