@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/JumpLinks/examples/JumpLinks.md CHANGED
@@ -28,23 +28,117 @@ section: components
28
28
  </span>
29
29
  <div class="pf-v5-c-masthead__main">
30
30
  <a class="pf-v5-c-masthead__brand" href="#">
31
- <img
32
- class="pf-v5-c-brand"
33
- src="/assets/images/pf-logo.svg"
34
- alt="PatternFly logo"
35
- style="--pf-v5-c-brand--Height:36px"
36
- />
31
+ <svg height="40px" viewBox="0 0 679 158">
32
+ <title>PF-HorizontalLogo-Color</title>
33
+ <defs>
34
+ <linearGradient
35
+ x1="68%"
36
+ y1="2.25860997e-13%"
37
+ x2="32%"
38
+ y2="100%"
39
+ id="linearGradient-jump-links-collapsed-mobile-example-masthead"
40
+ >
41
+ <stop stop-color="#2B9AF3" offset="0%" />
42
+ <stop
43
+ stop-color="#73BCF7"
44
+ stop-opacity="0.502212631"
45
+ offset="100%"
46
+ />
47
+ </linearGradient>
48
+ </defs>
49
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
50
+ <g
51
+ transform="translate(206.000000, 45.750000)"
52
+ fill="var(--pf-t--global--text--color--regular)"
53
+ fill-rule="nonzero"
54
+ >
55
+ <path
56
+ 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"
57
+ />
58
+ <path
59
+ 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"
60
+ />
61
+ <path
62
+ 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"
63
+ />
64
+ <path
65
+ 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"
66
+ />
67
+ <path
68
+ 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"
69
+ />
70
+ <path
71
+ 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"
72
+ />
73
+ <path
74
+ 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"
75
+ />
76
+ <polygon
77
+ 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"
78
+ />
79
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
80
+ <path
81
+ 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"
82
+ />
83
+ </g>
84
+ <g transform="translate(0.000000, 0.000000)">
85
+ <path
86
+ 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"
87
+ fill="#0066CC"
88
+ />
89
+ <path
90
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
91
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
92
+ />
93
+ <path
94
+ 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"
95
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
96
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
97
+ />
98
+ </g>
99
+ </g>
100
+ </svg>
37
101
  </a>
38
102
  </div>
39
103
  <div class="pf-v5-c-masthead__content">
40
104
  <div
41
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
105
+ class="pf-v5-c-toolbar pf-m-static"
42
106
  id="jump-links-collapsed-mobile-example-masthead-toolbar"
43
107
  >
44
108
  <div class="pf-v5-c-toolbar__content">
45
109
  <div class="pf-v5-c-toolbar__content-section">
110
+ <div class="pf-v5-c-toolbar__item">
111
+ <button
112
+ class="pf-v5-c-menu-toggle"
113
+ type="button"
114
+ aria-expanded="false"
115
+ >
116
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
117
+ <span class="pf-v5-c-menu-toggle__controls">
118
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
119
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
120
+ </span>
121
+ </span>
122
+ </button>
123
+ </div>
124
+
125
+ <div class="pf-v5-c-toolbar__item">
126
+ <button
127
+ class="pf-v5-c-menu-toggle"
128
+ type="button"
129
+ aria-expanded="false"
130
+ >
131
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
132
+ <span class="pf-v5-c-menu-toggle__controls">
133
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
134
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
135
+ </span>
136
+ </span>
137
+ </button>
138
+ </div>
139
+
46
140
  <div
47
- 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"
141
+ 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"
48
142
  >
49
143
  <div
50
144
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -56,7 +150,9 @@ section: components
56
150
  aria-expanded="false"
57
151
  aria-label="Application launcher"
58
152
  >
59
- <i class="fas fa-th" aria-hidden="true"></i>
153
+ <span class="pf-v5-c-menu-toggle__icon">
154
+ <i class="fas fa-th" aria-hidden="true"></i>
155
+ </span>
60
156
  </button>
61
157
  </div>
62
158
  <div class="pf-v5-c-toolbar__item">
@@ -66,7 +162,9 @@ section: components
66
162
  aria-expanded="false"
67
163
  aria-label="Settings"
68
164
  >
69
- <i class="fas fa-cog" aria-hidden="true"></i>
165
+ <span class="pf-v5-c-menu-toggle__icon">
166
+ <i class="fas fa-cog" aria-hidden="true"></i>
167
+ </span>
70
168
  </button>
71
169
  </div>
72
170
  <div class="pf-v5-c-toolbar__item">
@@ -76,7 +174,9 @@ section: components
76
174
  aria-expanded="false"
77
175
  aria-label="Help"
78
176
  >
79
- <i class="fas fa-question-circle" aria-hidden="true"></i>
177
+ <span class="pf-v5-c-menu-toggle__icon">
178
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
179
+ </span>
80
180
  </button>
81
181
  </div>
82
182
  </div>
@@ -87,31 +187,12 @@ section: components
87
187
  aria-expanded="false"
88
188
  aria-label="Actions"
89
189
  >
90
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
190
+ <span class="pf-v5-c-menu-toggle__icon">
191
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
192
+ </span>
91
193
  </button>
92
194
  </div>
93
195
  </div>
94
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
95
- <button
96
- class="pf-v5-c-menu-toggle pf-m-full-height"
97
- type="button"
98
- aria-expanded="false"
99
- >
100
- <span class="pf-v5-c-menu-toggle__icon">
101
- <img
102
- class="pf-v5-c-avatar"
103
- alt="Avatar image"
104
- src="/assets/images/img_avatar-light.svg"
105
- />
106
- </span>
107
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
108
- <span class="pf-v5-c-menu-toggle__controls">
109
- <span class="pf-v5-c-menu-toggle__toggle-icon">
110
- <i class="fas fa-angle-down" aria-hidden="true"></i>
111
- </span>
112
- </span>
113
- </button>
114
- </div>
115
196
  </div>
116
197
  </div>
117
198
  </div>
@@ -225,44 +306,64 @@ section: components
225
306
  </div>
226
307
  <ul class="pf-v5-c-jump-links__list" role="list">
227
308
  <li class="pf-v5-c-jump-links__item pf-m-current">
228
- <a
229
- class="pf-v5-c-jump-links__link"
230
- href="#jump-links-collapsed-mobile-example-jump-links-first"
231
- >
232
- <span class="pf-v5-c-jump-links__link-text">First section</span>
233
- </a>
309
+ <span class="pf-v5-c-jump-links__link">
310
+ <a
311
+ class="pf-v5-c-button pf-m-link"
312
+ href="#jump-links-collapsed-mobile-example-jump-links-first"
313
+ >
314
+ <span
315
+ class="pf-v5-c-jump-links__link-text"
316
+ >First section</span>
317
+ </a>
318
+ </span>
234
319
  </li>
235
320
  <li class="pf-v5-c-jump-links__item">
236
- <a
237
- class="pf-v5-c-jump-links__link"
238
- href="#jump-links-collapsed-mobile-example-jump-links-second"
239
- >
240
- <span class="pf-v5-c-jump-links__link-text">Second section</span>
241
- </a>
321
+ <span class="pf-v5-c-jump-links__link">
322
+ <a
323
+ class="pf-v5-c-button pf-m-link"
324
+ href="#jump-links-collapsed-mobile-example-jump-links-second"
325
+ >
326
+ <span
327
+ class="pf-v5-c-jump-links__link-text"
328
+ >Second section</span>
329
+ </a>
330
+ </span>
242
331
  </li>
243
332
  <li class="pf-v5-c-jump-links__item">
244
- <a
245
- class="pf-v5-c-jump-links__link"
246
- href="#jump-links-collapsed-mobile-example-jump-links-third"
247
- >
248
- <span class="pf-v5-c-jump-links__link-text">Third section</span>
249
- </a>
333
+ <span class="pf-v5-c-jump-links__link">
334
+ <a
335
+ class="pf-v5-c-button pf-m-link"
336
+ href="#jump-links-collapsed-mobile-example-jump-links-third"
337
+ >
338
+ <span
339
+ class="pf-v5-c-jump-links__link-text"
340
+ >Third section</span>
341
+ </a>
342
+ </span>
250
343
  </li>
251
344
  <li class="pf-v5-c-jump-links__item">
252
- <a
253
- class="pf-v5-c-jump-links__link"
254
- href="#jump-links-collapsed-mobile-example-jump-links-fourth"
255
- >
256
- <span class="pf-v5-c-jump-links__link-text">Fourth section</span>
257
- </a>
345
+ <span class="pf-v5-c-jump-links__link">
346
+ <a
347
+ class="pf-v5-c-button pf-m-link"
348
+ href="#jump-links-collapsed-mobile-example-jump-links-fourth"
349
+ >
350
+ <span
351
+ class="pf-v5-c-jump-links__link-text"
352
+ >Fourth section</span>
353
+ </a>
354
+ </span>
258
355
  </li>
259
356
  <li class="pf-v5-c-jump-links__item">
260
- <a
261
- class="pf-v5-c-jump-links__link"
262
- href="#jump-links-collapsed-mobile-example-jump-links-fifth"
263
- >
264
- <span class="pf-v5-c-jump-links__link-text">Fifth section</span>
265
- </a>
357
+ <span class="pf-v5-c-jump-links__link">
358
+ <a
359
+ class="pf-v5-c-button pf-m-link"
360
+ href="#jump-links-collapsed-mobile-example-jump-links-fifth"
361
+ >
362
+ <span
363
+ class="pf-v5-c-jump-links__link-text"
364
+ >Fifth section</span>
365
+ </a>
366
+ </span>
266
367
  </li>
267
368
  </ul>
268
369
  </nav>
@@ -335,23 +436,117 @@ section: components
335
436
  </span>
336
437
  <div class="pf-v5-c-masthead__main">
337
438
  <a class="pf-v5-c-masthead__brand" href="#">
338
- <img
339
- class="pf-v5-c-brand"
340
- src="/assets/images/pf-logo.svg"
341
- alt="PatternFly logo"
342
- style="--pf-v5-c-brand--Height:36px"
343
- />
439
+ <svg height="40px" viewBox="0 0 679 158">
440
+ <title>PF-HorizontalLogo-Color</title>
441
+ <defs>
442
+ <linearGradient
443
+ x1="68%"
444
+ y1="2.25860997e-13%"
445
+ x2="32%"
446
+ y2="100%"
447
+ id="linearGradient-jump-links-vertical-expanded-mobile-example-masthead"
448
+ >
449
+ <stop stop-color="#2B9AF3" offset="0%" />
450
+ <stop
451
+ stop-color="#73BCF7"
452
+ stop-opacity="0.502212631"
453
+ offset="100%"
454
+ />
455
+ </linearGradient>
456
+ </defs>
457
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
458
+ <g
459
+ transform="translate(206.000000, 45.750000)"
460
+ fill="var(--pf-t--global--text--color--regular)"
461
+ fill-rule="nonzero"
462
+ >
463
+ <path
464
+ 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"
465
+ />
466
+ <path
467
+ 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"
468
+ />
469
+ <path
470
+ 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"
471
+ />
472
+ <path
473
+ 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"
474
+ />
475
+ <path
476
+ 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"
477
+ />
478
+ <path
479
+ 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"
480
+ />
481
+ <path
482
+ 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"
483
+ />
484
+ <polygon
485
+ 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"
486
+ />
487
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
488
+ <path
489
+ 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"
490
+ />
491
+ </g>
492
+ <g transform="translate(0.000000, 0.000000)">
493
+ <path
494
+ 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"
495
+ fill="#0066CC"
496
+ />
497
+ <path
498
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
499
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
500
+ />
501
+ <path
502
+ 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"
503
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
504
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
505
+ />
506
+ </g>
507
+ </g>
508
+ </svg>
344
509
  </a>
345
510
  </div>
346
511
  <div class="pf-v5-c-masthead__content">
347
512
  <div
348
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
513
+ class="pf-v5-c-toolbar pf-m-static"
349
514
  id="jump-links-vertical-expanded-mobile-example-masthead-toolbar"
350
515
  >
351
516
  <div class="pf-v5-c-toolbar__content">
352
517
  <div class="pf-v5-c-toolbar__content-section">
518
+ <div class="pf-v5-c-toolbar__item">
519
+ <button
520
+ class="pf-v5-c-menu-toggle"
521
+ type="button"
522
+ aria-expanded="false"
523
+ >
524
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
525
+ <span class="pf-v5-c-menu-toggle__controls">
526
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
527
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
528
+ </span>
529
+ </span>
530
+ </button>
531
+ </div>
532
+
533
+ <div class="pf-v5-c-toolbar__item">
534
+ <button
535
+ class="pf-v5-c-menu-toggle"
536
+ type="button"
537
+ aria-expanded="false"
538
+ >
539
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
540
+ <span class="pf-v5-c-menu-toggle__controls">
541
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
542
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
543
+ </span>
544
+ </span>
545
+ </button>
546
+ </div>
547
+
353
548
  <div
354
- 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"
549
+ 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"
355
550
  >
356
551
  <div
357
552
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -363,7 +558,9 @@ section: components
363
558
  aria-expanded="false"
364
559
  aria-label="Application launcher"
365
560
  >
366
- <i class="fas fa-th" aria-hidden="true"></i>
561
+ <span class="pf-v5-c-menu-toggle__icon">
562
+ <i class="fas fa-th" aria-hidden="true"></i>
563
+ </span>
367
564
  </button>
368
565
  </div>
369
566
  <div class="pf-v5-c-toolbar__item">
@@ -373,7 +570,9 @@ section: components
373
570
  aria-expanded="false"
374
571
  aria-label="Settings"
375
572
  >
376
- <i class="fas fa-cog" aria-hidden="true"></i>
573
+ <span class="pf-v5-c-menu-toggle__icon">
574
+ <i class="fas fa-cog" aria-hidden="true"></i>
575
+ </span>
377
576
  </button>
378
577
  </div>
379
578
  <div class="pf-v5-c-toolbar__item">
@@ -383,7 +582,9 @@ section: components
383
582
  aria-expanded="false"
384
583
  aria-label="Help"
385
584
  >
386
- <i class="fas fa-question-circle" aria-hidden="true"></i>
585
+ <span class="pf-v5-c-menu-toggle__icon">
586
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
587
+ </span>
387
588
  </button>
388
589
  </div>
389
590
  </div>
@@ -394,31 +595,12 @@ section: components
394
595
  aria-expanded="false"
395
596
  aria-label="Actions"
396
597
  >
397
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
598
+ <span class="pf-v5-c-menu-toggle__icon">
599
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
600
+ </span>
398
601
  </button>
399
602
  </div>
400
603
  </div>
401
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
402
- <button
403
- class="pf-v5-c-menu-toggle pf-m-full-height"
404
- type="button"
405
- aria-expanded="false"
406
- >
407
- <span class="pf-v5-c-menu-toggle__icon">
408
- <img
409
- class="pf-v5-c-avatar"
410
- alt="Avatar image"
411
- src="/assets/images/img_avatar-light.svg"
412
- />
413
- </span>
414
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
415
- <span class="pf-v5-c-menu-toggle__controls">
416
- <span class="pf-v5-c-menu-toggle__toggle-icon">
417
- <i class="fas fa-angle-down" aria-hidden="true"></i>
418
- </span>
419
- </span>
420
- </button>
421
- </div>
422
604
  </div>
423
605
  </div>
424
606
  </div>
@@ -532,44 +714,64 @@ section: components
532
714
  </div>
533
715
  <ul class="pf-v5-c-jump-links__list" role="list">
534
716
  <li class="pf-v5-c-jump-links__item pf-m-current">
535
- <a
536
- class="pf-v5-c-jump-links__link"
537
- href="#jump-links-vertical-expanded-mobile-example-jump-links-first"
538
- >
539
- <span class="pf-v5-c-jump-links__link-text">First section</span>
540
- </a>
717
+ <span class="pf-v5-c-jump-links__link">
718
+ <a
719
+ class="pf-v5-c-button pf-m-link"
720
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-first"
721
+ >
722
+ <span
723
+ class="pf-v5-c-jump-links__link-text"
724
+ >First section</span>
725
+ </a>
726
+ </span>
541
727
  </li>
542
728
  <li class="pf-v5-c-jump-links__item">
543
- <a
544
- class="pf-v5-c-jump-links__link"
545
- href="#jump-links-vertical-expanded-mobile-example-jump-links-second"
546
- >
547
- <span class="pf-v5-c-jump-links__link-text">Second section</span>
548
- </a>
729
+ <span class="pf-v5-c-jump-links__link">
730
+ <a
731
+ class="pf-v5-c-button pf-m-link"
732
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-second"
733
+ >
734
+ <span
735
+ class="pf-v5-c-jump-links__link-text"
736
+ >Second section</span>
737
+ </a>
738
+ </span>
549
739
  </li>
550
740
  <li class="pf-v5-c-jump-links__item">
551
- <a
552
- class="pf-v5-c-jump-links__link"
553
- href="#jump-links-vertical-expanded-mobile-example-jump-links-third"
554
- >
555
- <span class="pf-v5-c-jump-links__link-text">Third section</span>
556
- </a>
741
+ <span class="pf-v5-c-jump-links__link">
742
+ <a
743
+ class="pf-v5-c-button pf-m-link"
744
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-third"
745
+ >
746
+ <span
747
+ class="pf-v5-c-jump-links__link-text"
748
+ >Third section</span>
749
+ </a>
750
+ </span>
557
751
  </li>
558
752
  <li class="pf-v5-c-jump-links__item">
559
- <a
560
- class="pf-v5-c-jump-links__link"
561
- href="#jump-links-vertical-expanded-mobile-example-jump-links-fourth"
562
- >
563
- <span class="pf-v5-c-jump-links__link-text">Fourth section</span>
564
- </a>
753
+ <span class="pf-v5-c-jump-links__link">
754
+ <a
755
+ class="pf-v5-c-button pf-m-link"
756
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-fourth"
757
+ >
758
+ <span
759
+ class="pf-v5-c-jump-links__link-text"
760
+ >Fourth section</span>
761
+ </a>
762
+ </span>
565
763
  </li>
566
764
  <li class="pf-v5-c-jump-links__item">
567
- <a
568
- class="pf-v5-c-jump-links__link"
569
- href="#jump-links-vertical-expanded-mobile-example-jump-links-fifth"
570
- >
571
- <span class="pf-v5-c-jump-links__link-text">Fifth section</span>
572
- </a>
765
+ <span class="pf-v5-c-jump-links__link">
766
+ <a
767
+ class="pf-v5-c-button pf-m-link"
768
+ href="#jump-links-vertical-expanded-mobile-example-jump-links-fifth"
769
+ >
770
+ <span
771
+ class="pf-v5-c-jump-links__link-text"
772
+ >Fifth section</span>
773
+ </a>
774
+ </span>
573
775
  </li>
574
776
  </ul>
575
777
  </nav>
@@ -642,23 +844,117 @@ section: components
642
844
  </span>
643
845
  <div class="pf-v5-c-masthead__main">
644
846
  <a class="pf-v5-c-masthead__brand" href="#">
645
- <img
646
- class="pf-v5-c-brand"
647
- src="/assets/images/pf-logo.svg"
648
- alt="PatternFly logo"
649
- style="--pf-v5-c-brand--Height:36px"
650
- />
847
+ <svg height="40px" viewBox="0 0 679 158">
848
+ <title>PF-HorizontalLogo-Color</title>
849
+ <defs>
850
+ <linearGradient
851
+ x1="68%"
852
+ y1="2.25860997e-13%"
853
+ x2="32%"
854
+ y2="100%"
855
+ id="linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead"
856
+ >
857
+ <stop stop-color="#2B9AF3" offset="0%" />
858
+ <stop
859
+ stop-color="#73BCF7"
860
+ stop-opacity="0.502212631"
861
+ offset="100%"
862
+ />
863
+ </linearGradient>
864
+ </defs>
865
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
866
+ <g
867
+ transform="translate(206.000000, 45.750000)"
868
+ fill="var(--pf-t--global--text--color--regular)"
869
+ fill-rule="nonzero"
870
+ >
871
+ <path
872
+ 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"
873
+ />
874
+ <path
875
+ 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"
876
+ />
877
+ <path
878
+ 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"
879
+ />
880
+ <path
881
+ 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"
882
+ />
883
+ <path
884
+ 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"
885
+ />
886
+ <path
887
+ 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"
888
+ />
889
+ <path
890
+ 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"
891
+ />
892
+ <polygon
893
+ 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"
894
+ />
895
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
896
+ <path
897
+ 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"
898
+ />
899
+ </g>
900
+ <g transform="translate(0.000000, 0.000000)">
901
+ <path
902
+ 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"
903
+ fill="#0066CC"
904
+ />
905
+ <path
906
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
907
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
908
+ />
909
+ <path
910
+ 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"
911
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
912
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
913
+ />
914
+ </g>
915
+ </g>
916
+ </svg>
651
917
  </a>
652
918
  </div>
653
919
  <div class="pf-v5-c-masthead__content">
654
920
  <div
655
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
921
+ class="pf-v5-c-toolbar pf-m-static"
656
922
  id="jump-links-vertical-toggle-text-mobile-example-masthead-toolbar"
657
923
  >
658
924
  <div class="pf-v5-c-toolbar__content">
659
925
  <div class="pf-v5-c-toolbar__content-section">
926
+ <div class="pf-v5-c-toolbar__item">
927
+ <button
928
+ class="pf-v5-c-menu-toggle"
929
+ type="button"
930
+ aria-expanded="false"
931
+ >
932
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
933
+ <span class="pf-v5-c-menu-toggle__controls">
934
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
935
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
936
+ </span>
937
+ </span>
938
+ </button>
939
+ </div>
940
+
941
+ <div class="pf-v5-c-toolbar__item">
942
+ <button
943
+ class="pf-v5-c-menu-toggle"
944
+ type="button"
945
+ aria-expanded="false"
946
+ >
947
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
948
+ <span class="pf-v5-c-menu-toggle__controls">
949
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
950
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
951
+ </span>
952
+ </span>
953
+ </button>
954
+ </div>
955
+
660
956
  <div
661
- 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"
957
+ 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"
662
958
  >
663
959
  <div
664
960
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -670,7 +966,9 @@ section: components
670
966
  aria-expanded="false"
671
967
  aria-label="Application launcher"
672
968
  >
673
- <i class="fas fa-th" aria-hidden="true"></i>
969
+ <span class="pf-v5-c-menu-toggle__icon">
970
+ <i class="fas fa-th" aria-hidden="true"></i>
971
+ </span>
674
972
  </button>
675
973
  </div>
676
974
  <div class="pf-v5-c-toolbar__item">
@@ -680,7 +978,9 @@ section: components
680
978
  aria-expanded="false"
681
979
  aria-label="Settings"
682
980
  >
683
- <i class="fas fa-cog" aria-hidden="true"></i>
981
+ <span class="pf-v5-c-menu-toggle__icon">
982
+ <i class="fas fa-cog" aria-hidden="true"></i>
983
+ </span>
684
984
  </button>
685
985
  </div>
686
986
  <div class="pf-v5-c-toolbar__item">
@@ -690,7 +990,9 @@ section: components
690
990
  aria-expanded="false"
691
991
  aria-label="Help"
692
992
  >
693
- <i class="fas fa-question-circle" aria-hidden="true"></i>
993
+ <span class="pf-v5-c-menu-toggle__icon">
994
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
995
+ </span>
694
996
  </button>
695
997
  </div>
696
998
  </div>
@@ -701,31 +1003,12 @@ section: components
701
1003
  aria-expanded="false"
702
1004
  aria-label="Actions"
703
1005
  >
704
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1006
+ <span class="pf-v5-c-menu-toggle__icon">
1007
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1008
+ </span>
705
1009
  </button>
706
1010
  </div>
707
1011
  </div>
708
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
709
- <button
710
- class="pf-v5-c-menu-toggle pf-m-full-height"
711
- type="button"
712
- aria-expanded="false"
713
- >
714
- <span class="pf-v5-c-menu-toggle__icon">
715
- <img
716
- class="pf-v5-c-avatar"
717
- alt="Avatar image"
718
- src="/assets/images/img_avatar-light.svg"
719
- />
720
- </span>
721
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
722
- <span class="pf-v5-c-menu-toggle__controls">
723
- <span class="pf-v5-c-menu-toggle__toggle-icon">
724
- <i class="fas fa-angle-down" aria-hidden="true"></i>
725
- </span>
726
- </span>
727
- </button>
728
- </div>
729
1012
  </div>
730
1013
  </div>
731
1014
  </div>
@@ -839,44 +1122,64 @@ section: components
839
1122
  </div>
840
1123
  <ul class="pf-v5-c-jump-links__list" role="list">
841
1124
  <li class="pf-v5-c-jump-links__item pf-m-current">
842
- <a
843
- class="pf-v5-c-jump-links__link"
844
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-first"
845
- >
846
- <span class="pf-v5-c-jump-links__link-text">First section</span>
847
- </a>
1125
+ <span class="pf-v5-c-jump-links__link">
1126
+ <a
1127
+ class="pf-v5-c-button pf-m-link"
1128
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-first"
1129
+ >
1130
+ <span
1131
+ class="pf-v5-c-jump-links__link-text"
1132
+ >First section</span>
1133
+ </a>
1134
+ </span>
848
1135
  </li>
849
1136
  <li class="pf-v5-c-jump-links__item">
850
- <a
851
- class="pf-v5-c-jump-links__link"
852
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-second"
853
- >
854
- <span class="pf-v5-c-jump-links__link-text">Second section</span>
855
- </a>
1137
+ <span class="pf-v5-c-jump-links__link">
1138
+ <a
1139
+ class="pf-v5-c-button pf-m-link"
1140
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-second"
1141
+ >
1142
+ <span
1143
+ class="pf-v5-c-jump-links__link-text"
1144
+ >Second section</span>
1145
+ </a>
1146
+ </span>
856
1147
  </li>
857
1148
  <li class="pf-v5-c-jump-links__item">
858
- <a
859
- class="pf-v5-c-jump-links__link"
860
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-third"
861
- >
862
- <span class="pf-v5-c-jump-links__link-text">Third section</span>
863
- </a>
1149
+ <span class="pf-v5-c-jump-links__link">
1150
+ <a
1151
+ class="pf-v5-c-button pf-m-link"
1152
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-third"
1153
+ >
1154
+ <span
1155
+ class="pf-v5-c-jump-links__link-text"
1156
+ >Third section</span>
1157
+ </a>
1158
+ </span>
864
1159
  </li>
865
1160
  <li class="pf-v5-c-jump-links__item">
866
- <a
867
- class="pf-v5-c-jump-links__link"
868
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
869
- >
870
- <span class="pf-v5-c-jump-links__link-text">Fourth section</span>
871
- </a>
1161
+ <span class="pf-v5-c-jump-links__link">
1162
+ <a
1163
+ class="pf-v5-c-button pf-m-link"
1164
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
1165
+ >
1166
+ <span
1167
+ class="pf-v5-c-jump-links__link-text"
1168
+ >Fourth section</span>
1169
+ </a>
1170
+ </span>
872
1171
  </li>
873
1172
  <li class="pf-v5-c-jump-links__item">
874
- <a
875
- class="pf-v5-c-jump-links__link"
876
- href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
877
- >
878
- <span class="pf-v5-c-jump-links__link-text">Fifth section</span>
879
- </a>
1173
+ <span class="pf-v5-c-jump-links__link">
1174
+ <a
1175
+ class="pf-v5-c-button pf-m-link"
1176
+ href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
1177
+ >
1178
+ <span
1179
+ class="pf-v5-c-jump-links__link-text"
1180
+ >Fifth section</span>
1181
+ </a>
1182
+ </span>
880
1183
  </li>
881
1184
  </ul>
882
1185
  </nav>
@@ -946,23 +1249,117 @@ section: components
946
1249
  </span>
947
1250
  <div class="pf-v5-c-masthead__main">
948
1251
  <a class="pf-v5-c-masthead__brand" href="#">
949
- <img
950
- class="pf-v5-c-brand"
951
- src="/assets/images/pf-logo.svg"
952
- alt="PatternFly logo"
953
- style="--pf-v5-c-brand--Height:36px"
954
- />
1252
+ <svg height="40px" viewBox="0 0 679 158">
1253
+ <title>PF-HorizontalLogo-Color</title>
1254
+ <defs>
1255
+ <linearGradient
1256
+ x1="68%"
1257
+ y1="2.25860997e-13%"
1258
+ x2="32%"
1259
+ y2="100%"
1260
+ id="linearGradient-jump-links-horizontal-example-masthead"
1261
+ >
1262
+ <stop stop-color="#2B9AF3" offset="0%" />
1263
+ <stop
1264
+ stop-color="#73BCF7"
1265
+ stop-opacity="0.502212631"
1266
+ offset="100%"
1267
+ />
1268
+ </linearGradient>
1269
+ </defs>
1270
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1271
+ <g
1272
+ transform="translate(206.000000, 45.750000)"
1273
+ fill="var(--pf-t--global--text--color--regular)"
1274
+ fill-rule="nonzero"
1275
+ >
1276
+ <path
1277
+ 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"
1278
+ />
1279
+ <path
1280
+ 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"
1281
+ />
1282
+ <path
1283
+ 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"
1284
+ />
1285
+ <path
1286
+ 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"
1287
+ />
1288
+ <path
1289
+ 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"
1290
+ />
1291
+ <path
1292
+ 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"
1293
+ />
1294
+ <path
1295
+ 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"
1296
+ />
1297
+ <polygon
1298
+ 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"
1299
+ />
1300
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1301
+ <path
1302
+ 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"
1303
+ />
1304
+ </g>
1305
+ <g transform="translate(0.000000, 0.000000)">
1306
+ <path
1307
+ 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"
1308
+ fill="#0066CC"
1309
+ />
1310
+ <path
1311
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1312
+ fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1313
+ />
1314
+ <path
1315
+ 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"
1316
+ fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1317
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1318
+ />
1319
+ </g>
1320
+ </g>
1321
+ </svg>
955
1322
  </a>
956
1323
  </div>
957
1324
  <div class="pf-v5-c-masthead__content">
958
1325
  <div
959
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1326
+ class="pf-v5-c-toolbar pf-m-static"
960
1327
  id="jump-links-horizontal-example-masthead-toolbar"
961
1328
  >
962
1329
  <div class="pf-v5-c-toolbar__content">
963
1330
  <div class="pf-v5-c-toolbar__content-section">
1331
+ <div class="pf-v5-c-toolbar__item">
1332
+ <button
1333
+ class="pf-v5-c-menu-toggle"
1334
+ type="button"
1335
+ aria-expanded="false"
1336
+ >
1337
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1338
+ <span class="pf-v5-c-menu-toggle__controls">
1339
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1340
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1341
+ </span>
1342
+ </span>
1343
+ </button>
1344
+ </div>
1345
+
1346
+ <div class="pf-v5-c-toolbar__item">
1347
+ <button
1348
+ class="pf-v5-c-menu-toggle"
1349
+ type="button"
1350
+ aria-expanded="false"
1351
+ >
1352
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1353
+ <span class="pf-v5-c-menu-toggle__controls">
1354
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1355
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1356
+ </span>
1357
+ </span>
1358
+ </button>
1359
+ </div>
1360
+
964
1361
  <div
965
- 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"
1362
+ 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"
966
1363
  >
967
1364
  <div
968
1365
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -974,7 +1371,9 @@ section: components
974
1371
  aria-expanded="false"
975
1372
  aria-label="Application launcher"
976
1373
  >
977
- <i class="fas fa-th" aria-hidden="true"></i>
1374
+ <span class="pf-v5-c-menu-toggle__icon">
1375
+ <i class="fas fa-th" aria-hidden="true"></i>
1376
+ </span>
978
1377
  </button>
979
1378
  </div>
980
1379
  <div class="pf-v5-c-toolbar__item">
@@ -984,7 +1383,9 @@ section: components
984
1383
  aria-expanded="false"
985
1384
  aria-label="Settings"
986
1385
  >
987
- <i class="fas fa-cog" aria-hidden="true"></i>
1386
+ <span class="pf-v5-c-menu-toggle__icon">
1387
+ <i class="fas fa-cog" aria-hidden="true"></i>
1388
+ </span>
988
1389
  </button>
989
1390
  </div>
990
1391
  <div class="pf-v5-c-toolbar__item">
@@ -994,7 +1395,9 @@ section: components
994
1395
  aria-expanded="false"
995
1396
  aria-label="Help"
996
1397
  >
997
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1398
+ <span class="pf-v5-c-menu-toggle__icon">
1399
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1400
+ </span>
998
1401
  </button>
999
1402
  </div>
1000
1403
  </div>
@@ -1005,31 +1408,12 @@ section: components
1005
1408
  aria-expanded="false"
1006
1409
  aria-label="Actions"
1007
1410
  >
1008
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1411
+ <span class="pf-v5-c-menu-toggle__icon">
1412
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1413
+ </span>
1009
1414
  </button>
1010
1415
  </div>
1011
1416
  </div>
1012
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1013
- <button
1014
- class="pf-v5-c-menu-toggle pf-m-full-height"
1015
- type="button"
1016
- aria-expanded="false"
1017
- >
1018
- <span class="pf-v5-c-menu-toggle__icon">
1019
- <img
1020
- class="pf-v5-c-avatar"
1021
- alt="Avatar image"
1022
- src="/assets/images/img_avatar-light.svg"
1023
- />
1024
- </span>
1025
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1026
- <span class="pf-v5-c-menu-toggle__controls">
1027
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1028
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1029
- </span>
1030
- </span>
1031
- </button>
1032
- </div>
1033
1417
  </div>
1034
1418
  </div>
1035
1419
  </div>
@@ -1123,29 +1507,39 @@ section: components
1123
1507
  </div>
1124
1508
  <ul class="pf-v5-c-jump-links__list" role="list">
1125
1509
  <li class="pf-v5-c-jump-links__item pf-m-current">
1126
- <a class="pf-v5-c-jump-links__link" href="#-first">
1127
- <span class="pf-v5-c-jump-links__link-text">First section</span>
1128
- </a>
1510
+ <span class="pf-v5-c-jump-links__link">
1511
+ <a class="pf-v5-c-button pf-m-link" href="#-first">
1512
+ <span class="pf-v5-c-jump-links__link-text">First section</span>
1513
+ </a>
1514
+ </span>
1129
1515
  </li>
1130
1516
  <li class="pf-v5-c-jump-links__item">
1131
- <a class="pf-v5-c-jump-links__link" href="#-second">
1132
- <span class="pf-v5-c-jump-links__link-text">Second section</span>
1133
- </a>
1517
+ <span class="pf-v5-c-jump-links__link">
1518
+ <a class="pf-v5-c-button pf-m-link" href="#-second">
1519
+ <span class="pf-v5-c-jump-links__link-text">Second section</span>
1520
+ </a>
1521
+ </span>
1134
1522
  </li>
1135
1523
  <li class="pf-v5-c-jump-links__item">
1136
- <a class="pf-v5-c-jump-links__link" href="#-third">
1137
- <span class="pf-v5-c-jump-links__link-text">Third section</span>
1138
- </a>
1524
+ <span class="pf-v5-c-jump-links__link">
1525
+ <a class="pf-v5-c-button pf-m-link" href="#-third">
1526
+ <span class="pf-v5-c-jump-links__link-text">Third section</span>
1527
+ </a>
1528
+ </span>
1139
1529
  </li>
1140
1530
  <li class="pf-v5-c-jump-links__item">
1141
- <a class="pf-v5-c-jump-links__link" href="#-fourth">
1142
- <span class="pf-v5-c-jump-links__link-text">Fourth section</span>
1143
- </a>
1531
+ <span class="pf-v5-c-jump-links__link">
1532
+ <a class="pf-v5-c-button pf-m-link" href="#-fourth">
1533
+ <span class="pf-v5-c-jump-links__link-text">Fourth section</span>
1534
+ </a>
1535
+ </span>
1144
1536
  </li>
1145
1537
  <li class="pf-v5-c-jump-links__item">
1146
- <a class="pf-v5-c-jump-links__link" href="#-fifth">
1147
- <span class="pf-v5-c-jump-links__link-text">Fifth section</span>
1148
- </a>
1538
+ <span class="pf-v5-c-jump-links__link">
1539
+ <a class="pf-v5-c-button pf-m-link" href="#-fifth">
1540
+ <span class="pf-v5-c-jump-links__link-text">Fifth section</span>
1541
+ </a>
1542
+ </span>
1149
1543
  </li>
1150
1544
  </ul>
1151
1545
  </div>
@@ -1200,23 +1594,117 @@ section: components
1200
1594
  </span>
1201
1595
  <div class="pf-v5-c-masthead__main">
1202
1596
  <a class="pf-v5-c-masthead__brand" href="#">
1203
- <img
1204
- class="pf-v5-c-brand"
1205
- src="/assets/images/pf-logo.svg"
1206
- alt="PatternFly logo"
1207
- style="--pf-v5-c-brand--Height:36px"
1208
- />
1597
+ <svg height="40px" viewBox="0 0 679 158">
1598
+ <title>PF-HorizontalLogo-Color</title>
1599
+ <defs>
1600
+ <linearGradient
1601
+ x1="68%"
1602
+ y1="2.25860997e-13%"
1603
+ x2="32%"
1604
+ y2="100%"
1605
+ id="linearGradient-jump-links-drawer-masthead"
1606
+ >
1607
+ <stop stop-color="#2B9AF3" offset="0%" />
1608
+ <stop
1609
+ stop-color="#73BCF7"
1610
+ stop-opacity="0.502212631"
1611
+ offset="100%"
1612
+ />
1613
+ </linearGradient>
1614
+ </defs>
1615
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1616
+ <g
1617
+ transform="translate(206.000000, 45.750000)"
1618
+ fill="var(--pf-t--global--text--color--regular)"
1619
+ fill-rule="nonzero"
1620
+ >
1621
+ <path
1622
+ 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"
1623
+ />
1624
+ <path
1625
+ 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"
1626
+ />
1627
+ <path
1628
+ 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"
1629
+ />
1630
+ <path
1631
+ 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"
1632
+ />
1633
+ <path
1634
+ 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"
1635
+ />
1636
+ <path
1637
+ 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"
1638
+ />
1639
+ <path
1640
+ 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"
1641
+ />
1642
+ <polygon
1643
+ 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"
1644
+ />
1645
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1646
+ <path
1647
+ 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"
1648
+ />
1649
+ </g>
1650
+ <g transform="translate(0.000000, 0.000000)">
1651
+ <path
1652
+ 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"
1653
+ fill="#0066CC"
1654
+ />
1655
+ <path
1656
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1657
+ fill="url(#linearGradient-jump-links-drawer-masthead)"
1658
+ />
1659
+ <path
1660
+ 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"
1661
+ fill="url(#linearGradient-jump-links-drawer-masthead)"
1662
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1663
+ />
1664
+ </g>
1665
+ </g>
1666
+ </svg>
1209
1667
  </a>
1210
1668
  </div>
1211
1669
  <div class="pf-v5-c-masthead__content">
1212
1670
  <div
1213
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1671
+ class="pf-v5-c-toolbar pf-m-static"
1214
1672
  id="jump-links-drawer-masthead-toolbar"
1215
1673
  >
1216
1674
  <div class="pf-v5-c-toolbar__content">
1217
1675
  <div class="pf-v5-c-toolbar__content-section">
1676
+ <div class="pf-v5-c-toolbar__item">
1677
+ <button
1678
+ class="pf-v5-c-menu-toggle"
1679
+ type="button"
1680
+ aria-expanded="false"
1681
+ >
1682
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1683
+ <span class="pf-v5-c-menu-toggle__controls">
1684
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1685
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1686
+ </span>
1687
+ </span>
1688
+ </button>
1689
+ </div>
1690
+
1691
+ <div class="pf-v5-c-toolbar__item">
1692
+ <button
1693
+ class="pf-v5-c-menu-toggle"
1694
+ type="button"
1695
+ aria-expanded="false"
1696
+ >
1697
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1698
+ <span class="pf-v5-c-menu-toggle__controls">
1699
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1700
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1701
+ </span>
1702
+ </span>
1703
+ </button>
1704
+ </div>
1705
+
1218
1706
  <div
1219
- 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"
1707
+ 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"
1220
1708
  >
1221
1709
  <div
1222
1710
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1228,7 +1716,9 @@ section: components
1228
1716
  aria-expanded="false"
1229
1717
  aria-label="Application launcher"
1230
1718
  >
1231
- <i class="fas fa-th" aria-hidden="true"></i>
1719
+ <span class="pf-v5-c-menu-toggle__icon">
1720
+ <i class="fas fa-th" aria-hidden="true"></i>
1721
+ </span>
1232
1722
  </button>
1233
1723
  </div>
1234
1724
  <div class="pf-v5-c-toolbar__item">
@@ -1238,7 +1728,9 @@ section: components
1238
1728
  aria-expanded="false"
1239
1729
  aria-label="Settings"
1240
1730
  >
1241
- <i class="fas fa-cog" aria-hidden="true"></i>
1731
+ <span class="pf-v5-c-menu-toggle__icon">
1732
+ <i class="fas fa-cog" aria-hidden="true"></i>
1733
+ </span>
1242
1734
  </button>
1243
1735
  </div>
1244
1736
  <div class="pf-v5-c-toolbar__item">
@@ -1248,7 +1740,9 @@ section: components
1248
1740
  aria-expanded="false"
1249
1741
  aria-label="Help"
1250
1742
  >
1251
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1743
+ <span class="pf-v5-c-menu-toggle__icon">
1744
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1745
+ </span>
1252
1746
  </button>
1253
1747
  </div>
1254
1748
  </div>
@@ -1259,31 +1753,12 @@ section: components
1259
1753
  aria-expanded="false"
1260
1754
  aria-label="Actions"
1261
1755
  >
1262
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1756
+ <span class="pf-v5-c-menu-toggle__icon">
1757
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1758
+ </span>
1263
1759
  </button>
1264
1760
  </div>
1265
1761
  </div>
1266
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1267
- <button
1268
- class="pf-v5-c-menu-toggle pf-m-full-height"
1269
- type="button"
1270
- aria-expanded="false"
1271
- >
1272
- <span class="pf-v5-c-menu-toggle__icon">
1273
- <img
1274
- class="pf-v5-c-avatar"
1275
- alt="Avatar image"
1276
- src="/assets/images/img_avatar-light.svg"
1277
- />
1278
- </span>
1279
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1280
- <span class="pf-v5-c-menu-toggle__controls">
1281
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1282
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1283
- </span>
1284
- </span>
1285
- </button>
1286
- </div>
1287
1762
  </div>
1288
1763
  </div>
1289
1764
  </div>
@@ -1342,54 +1817,64 @@ section: components
1342
1817
  <div class="pf-v5-c-jump-links__label">Jump to section</div>
1343
1818
  <ul class="pf-v5-c-jump-links__list" role="list">
1344
1819
  <li class="pf-v5-c-jump-links__item pf-m-current">
1345
- <a
1346
- class="pf-v5-c-jump-links__link"
1347
- href="#jump-links-drawer-jump-links-first"
1348
- >
1349
- <span
1350
- class="pf-v5-c-jump-links__link-text"
1351
- >First section</span>
1352
- </a>
1820
+ <span class="pf-v5-c-jump-links__link">
1821
+ <a
1822
+ class="pf-v5-c-button pf-m-link"
1823
+ href="#jump-links-drawer-jump-links-first"
1824
+ >
1825
+ <span
1826
+ class="pf-v5-c-jump-links__link-text"
1827
+ >First section</span>
1828
+ </a>
1829
+ </span>
1353
1830
  </li>
1354
1831
  <li class="pf-v5-c-jump-links__item">
1355
- <a
1356
- class="pf-v5-c-jump-links__link"
1357
- href="#jump-links-drawer-jump-links-second"
1358
- >
1359
- <span
1360
- class="pf-v5-c-jump-links__link-text"
1361
- >Second section</span>
1362
- </a>
1832
+ <span class="pf-v5-c-jump-links__link">
1833
+ <a
1834
+ class="pf-v5-c-button pf-m-link"
1835
+ href="#jump-links-drawer-jump-links-second"
1836
+ >
1837
+ <span
1838
+ class="pf-v5-c-jump-links__link-text"
1839
+ >Second section</span>
1840
+ </a>
1841
+ </span>
1363
1842
  </li>
1364
1843
  <li class="pf-v5-c-jump-links__item">
1365
- <a
1366
- class="pf-v5-c-jump-links__link"
1367
- href="#jump-links-drawer-jump-links-third"
1368
- >
1369
- <span
1370
- class="pf-v5-c-jump-links__link-text"
1371
- >Third section</span>
1372
- </a>
1844
+ <span class="pf-v5-c-jump-links__link">
1845
+ <a
1846
+ class="pf-v5-c-button pf-m-link"
1847
+ href="#jump-links-drawer-jump-links-third"
1848
+ >
1849
+ <span
1850
+ class="pf-v5-c-jump-links__link-text"
1851
+ >Third section</span>
1852
+ </a>
1853
+ </span>
1373
1854
  </li>
1374
1855
  <li class="pf-v5-c-jump-links__item">
1375
- <a
1376
- class="pf-v5-c-jump-links__link"
1377
- href="#jump-links-drawer-jump-links-fourth"
1378
- >
1379
- <span
1380
- class="pf-v5-c-jump-links__link-text"
1381
- >Fourth section</span>
1382
- </a>
1856
+ <span class="pf-v5-c-jump-links__link">
1857
+ <a
1858
+ class="pf-v5-c-button pf-m-link"
1859
+ href="#jump-links-drawer-jump-links-fourth"
1860
+ >
1861
+ <span
1862
+ class="pf-v5-c-jump-links__link-text"
1863
+ >Fourth section</span>
1864
+ </a>
1865
+ </span>
1383
1866
  </li>
1384
1867
  <li class="pf-v5-c-jump-links__item">
1385
- <a
1386
- class="pf-v5-c-jump-links__link"
1387
- href="#jump-links-drawer-jump-links-fifth"
1388
- >
1389
- <span
1390
- class="pf-v5-c-jump-links__link-text"
1391
- >Fifth section</span>
1392
- </a>
1868
+ <span class="pf-v5-c-jump-links__link">
1869
+ <a
1870
+ class="pf-v5-c-button pf-m-link"
1871
+ href="#jump-links-drawer-jump-links-fifth"
1872
+ >
1873
+ <span
1874
+ class="pf-v5-c-jump-links__link-text"
1875
+ >Fifth section</span>
1876
+ </a>
1877
+ </span>
1393
1878
  </li>
1394
1879
  </ul>
1395
1880
  </nav>
@@ -1428,22 +1913,24 @@ section: components
1428
1913
  </div>
1429
1914
  </div>
1430
1915
  <div class="pf-v5-c-drawer__panel" hidden>
1431
- <div class="pf-v5-c-drawer__body">
1432
- <div class="pf-v5-c-drawer__head">
1433
- <span>drawer-panel</span>
1434
- <div class="pf-v5-c-drawer__actions">
1435
- <div class="pf-v5-c-drawer__close">
1436
- <button
1437
- class="pf-v5-c-button pf-m-plain"
1438
- type="button"
1439
- aria-label="Close drawer panel"
1440
- >
1441
- <i class="fas fa-times" aria-hidden="true"></i>
1442
- </button>
1443
- </div>
1916
+ <div class="pf-v5-c-drawer__head">
1917
+ <span>Drawer panel header content</span>
1918
+ <div class="pf-v5-c-drawer__actions">
1919
+ <div class="pf-v5-c-drawer__close">
1920
+ <button
1921
+ class="pf-v5-c-button pf-m-plain"
1922
+ type="button"
1923
+ aria-label="Close drawer panel"
1924
+ >
1925
+ <i class="fas fa-times" aria-hidden="true"></i>
1926
+ </button>
1444
1927
  </div>
1445
1928
  </div>
1446
1929
  </div>
1930
+ <div
1931
+ class="pf-v5-c-drawer__description"
1932
+ >This is a helpful description of the drawer panel.</div>
1933
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1447
1934
  </div>
1448
1935
  </div>
1449
1936
  </div>
@@ -1474,23 +1961,117 @@ section: components
1474
1961
  </span>
1475
1962
  <div class="pf-v5-c-masthead__main">
1476
1963
  <a class="pf-v5-c-masthead__brand" href="#">
1477
- <img
1478
- class="pf-v5-c-brand"
1479
- src="/assets/images/pf-logo.svg"
1480
- alt="PatternFly logo"
1481
- style="--pf-v5-c-brand--Height:36px"
1482
- />
1964
+ <svg height="40px" viewBox="0 0 679 158">
1965
+ <title>PF-HorizontalLogo-Color</title>
1966
+ <defs>
1967
+ <linearGradient
1968
+ x1="68%"
1969
+ y1="2.25860997e-13%"
1970
+ x2="32%"
1971
+ y2="100%"
1972
+ id="linearGradient-jump-links-drawer-expanded-masthead"
1973
+ >
1974
+ <stop stop-color="#2B9AF3" offset="0%" />
1975
+ <stop
1976
+ stop-color="#73BCF7"
1977
+ stop-opacity="0.502212631"
1978
+ offset="100%"
1979
+ />
1980
+ </linearGradient>
1981
+ </defs>
1982
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1983
+ <g
1984
+ transform="translate(206.000000, 45.750000)"
1985
+ fill="var(--pf-t--global--text--color--regular)"
1986
+ fill-rule="nonzero"
1987
+ >
1988
+ <path
1989
+ 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"
1990
+ />
1991
+ <path
1992
+ 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"
1993
+ />
1994
+ <path
1995
+ 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"
1996
+ />
1997
+ <path
1998
+ 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"
1999
+ />
2000
+ <path
2001
+ 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"
2002
+ />
2003
+ <path
2004
+ 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"
2005
+ />
2006
+ <path
2007
+ 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"
2008
+ />
2009
+ <polygon
2010
+ 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"
2011
+ />
2012
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2013
+ <path
2014
+ 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"
2015
+ />
2016
+ </g>
2017
+ <g transform="translate(0.000000, 0.000000)">
2018
+ <path
2019
+ 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"
2020
+ fill="#0066CC"
2021
+ />
2022
+ <path
2023
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2024
+ fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2025
+ />
2026
+ <path
2027
+ 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"
2028
+ fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
2029
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2030
+ />
2031
+ </g>
2032
+ </g>
2033
+ </svg>
1483
2034
  </a>
1484
2035
  </div>
1485
2036
  <div class="pf-v5-c-masthead__content">
1486
2037
  <div
1487
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2038
+ class="pf-v5-c-toolbar pf-m-static"
1488
2039
  id="jump-links-drawer-expanded-masthead-toolbar"
1489
2040
  >
1490
2041
  <div class="pf-v5-c-toolbar__content">
1491
2042
  <div class="pf-v5-c-toolbar__content-section">
2043
+ <div class="pf-v5-c-toolbar__item">
2044
+ <button
2045
+ class="pf-v5-c-menu-toggle"
2046
+ type="button"
2047
+ aria-expanded="false"
2048
+ >
2049
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2050
+ <span class="pf-v5-c-menu-toggle__controls">
2051
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2052
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2053
+ </span>
2054
+ </span>
2055
+ </button>
2056
+ </div>
2057
+
2058
+ <div class="pf-v5-c-toolbar__item">
2059
+ <button
2060
+ class="pf-v5-c-menu-toggle"
2061
+ type="button"
2062
+ aria-expanded="false"
2063
+ >
2064
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2065
+ <span class="pf-v5-c-menu-toggle__controls">
2066
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2067
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2068
+ </span>
2069
+ </span>
2070
+ </button>
2071
+ </div>
2072
+
1492
2073
  <div
1493
- 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"
2074
+ 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"
1494
2075
  >
1495
2076
  <div
1496
2077
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1502,7 +2083,9 @@ section: components
1502
2083
  aria-expanded="false"
1503
2084
  aria-label="Application launcher"
1504
2085
  >
1505
- <i class="fas fa-th" aria-hidden="true"></i>
2086
+ <span class="pf-v5-c-menu-toggle__icon">
2087
+ <i class="fas fa-th" aria-hidden="true"></i>
2088
+ </span>
1506
2089
  </button>
1507
2090
  </div>
1508
2091
  <div class="pf-v5-c-toolbar__item">
@@ -1512,7 +2095,9 @@ section: components
1512
2095
  aria-expanded="false"
1513
2096
  aria-label="Settings"
1514
2097
  >
1515
- <i class="fas fa-cog" aria-hidden="true"></i>
2098
+ <span class="pf-v5-c-menu-toggle__icon">
2099
+ <i class="fas fa-cog" aria-hidden="true"></i>
2100
+ </span>
1516
2101
  </button>
1517
2102
  </div>
1518
2103
  <div class="pf-v5-c-toolbar__item">
@@ -1522,7 +2107,9 @@ section: components
1522
2107
  aria-expanded="false"
1523
2108
  aria-label="Help"
1524
2109
  >
1525
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2110
+ <span class="pf-v5-c-menu-toggle__icon">
2111
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2112
+ </span>
1526
2113
  </button>
1527
2114
  </div>
1528
2115
  </div>
@@ -1533,31 +2120,12 @@ section: components
1533
2120
  aria-expanded="false"
1534
2121
  aria-label="Actions"
1535
2122
  >
1536
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2123
+ <span class="pf-v5-c-menu-toggle__icon">
2124
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2125
+ </span>
1537
2126
  </button>
1538
2127
  </div>
1539
2128
  </div>
1540
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1541
- <button
1542
- class="pf-v5-c-menu-toggle pf-m-full-height"
1543
- type="button"
1544
- aria-expanded="false"
1545
- >
1546
- <span class="pf-v5-c-menu-toggle__icon">
1547
- <img
1548
- class="pf-v5-c-avatar"
1549
- alt="Avatar image"
1550
- src="/assets/images/img_avatar-light.svg"
1551
- />
1552
- </span>
1553
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1554
- <span class="pf-v5-c-menu-toggle__controls">
1555
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1556
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1557
- </span>
1558
- </span>
1559
- </button>
1560
- </div>
1561
2129
  </div>
1562
2130
  </div>
1563
2131
  </div>
@@ -1616,54 +2184,64 @@ section: components
1616
2184
  <div class="pf-v5-c-jump-links__label">Jump to section</div>
1617
2185
  <ul class="pf-v5-c-jump-links__list" role="list">
1618
2186
  <li class="pf-v5-c-jump-links__item pf-m-current">
1619
- <a
1620
- class="pf-v5-c-jump-links__link"
1621
- href="#jump-links-drawer-expanded-jump-links-first"
1622
- >
1623
- <span
1624
- class="pf-v5-c-jump-links__link-text"
1625
- >First section</span>
1626
- </a>
2187
+ <span class="pf-v5-c-jump-links__link">
2188
+ <a
2189
+ class="pf-v5-c-button pf-m-link"
2190
+ href="#jump-links-drawer-expanded-jump-links-first"
2191
+ >
2192
+ <span
2193
+ class="pf-v5-c-jump-links__link-text"
2194
+ >First section</span>
2195
+ </a>
2196
+ </span>
1627
2197
  </li>
1628
2198
  <li class="pf-v5-c-jump-links__item">
1629
- <a
1630
- class="pf-v5-c-jump-links__link"
1631
- href="#jump-links-drawer-expanded-jump-links-second"
1632
- >
1633
- <span
1634
- class="pf-v5-c-jump-links__link-text"
1635
- >Second section</span>
1636
- </a>
2199
+ <span class="pf-v5-c-jump-links__link">
2200
+ <a
2201
+ class="pf-v5-c-button pf-m-link"
2202
+ href="#jump-links-drawer-expanded-jump-links-second"
2203
+ >
2204
+ <span
2205
+ class="pf-v5-c-jump-links__link-text"
2206
+ >Second section</span>
2207
+ </a>
2208
+ </span>
1637
2209
  </li>
1638
2210
  <li class="pf-v5-c-jump-links__item">
1639
- <a
1640
- class="pf-v5-c-jump-links__link"
1641
- href="#jump-links-drawer-expanded-jump-links-third"
1642
- >
1643
- <span
1644
- class="pf-v5-c-jump-links__link-text"
1645
- >Third section</span>
1646
- </a>
2211
+ <span class="pf-v5-c-jump-links__link">
2212
+ <a
2213
+ class="pf-v5-c-button pf-m-link"
2214
+ href="#jump-links-drawer-expanded-jump-links-third"
2215
+ >
2216
+ <span
2217
+ class="pf-v5-c-jump-links__link-text"
2218
+ >Third section</span>
2219
+ </a>
2220
+ </span>
1647
2221
  </li>
1648
2222
  <li class="pf-v5-c-jump-links__item">
1649
- <a
1650
- class="pf-v5-c-jump-links__link"
1651
- href="#jump-links-drawer-expanded-jump-links-fourth"
1652
- >
1653
- <span
1654
- class="pf-v5-c-jump-links__link-text"
1655
- >Fourth section</span>
1656
- </a>
2223
+ <span class="pf-v5-c-jump-links__link">
2224
+ <a
2225
+ class="pf-v5-c-button pf-m-link"
2226
+ href="#jump-links-drawer-expanded-jump-links-fourth"
2227
+ >
2228
+ <span
2229
+ class="pf-v5-c-jump-links__link-text"
2230
+ >Fourth section</span>
2231
+ </a>
2232
+ </span>
1657
2233
  </li>
1658
2234
  <li class="pf-v5-c-jump-links__item">
1659
- <a
1660
- class="pf-v5-c-jump-links__link"
1661
- href="#jump-links-drawer-expanded-jump-links-fifth"
1662
- >
1663
- <span
1664
- class="pf-v5-c-jump-links__link-text"
1665
- >Fifth section</span>
1666
- </a>
2235
+ <span class="pf-v5-c-jump-links__link">
2236
+ <a
2237
+ class="pf-v5-c-button pf-m-link"
2238
+ href="#jump-links-drawer-expanded-jump-links-fifth"
2239
+ >
2240
+ <span
2241
+ class="pf-v5-c-jump-links__link-text"
2242
+ >Fifth section</span>
2243
+ </a>
2244
+ </span>
1667
2245
  </li>
1668
2246
  </ul>
1669
2247
  </nav>
@@ -1708,22 +2286,24 @@ section: components
1708
2286
  </div>
1709
2287
  </div>
1710
2288
  <div class="pf-v5-c-drawer__panel">
1711
- <div class="pf-v5-c-drawer__body">
1712
- <div class="pf-v5-c-drawer__head">
1713
- <span>drawer-panel</span>
1714
- <div class="pf-v5-c-drawer__actions">
1715
- <div class="pf-v5-c-drawer__close">
1716
- <button
1717
- class="pf-v5-c-button pf-m-plain"
1718
- type="button"
1719
- aria-label="Close drawer panel"
1720
- >
1721
- <i class="fas fa-times" aria-hidden="true"></i>
1722
- </button>
1723
- </div>
2289
+ <div class="pf-v5-c-drawer__head">
2290
+ <span>Drawer panel header content</span>
2291
+ <div class="pf-v5-c-drawer__actions">
2292
+ <div class="pf-v5-c-drawer__close">
2293
+ <button
2294
+ class="pf-v5-c-button pf-m-plain"
2295
+ type="button"
2296
+ aria-label="Close drawer panel"
2297
+ >
2298
+ <i class="fas fa-times" aria-hidden="true"></i>
2299
+ </button>
1724
2300
  </div>
1725
2301
  </div>
1726
2302
  </div>
2303
+ <div
2304
+ class="pf-v5-c-drawer__description"
2305
+ >This is a helpful description of the drawer panel.</div>
2306
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1727
2307
  </div>
1728
2308
  </div>
1729
2309
  </div>