@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.61

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 (371) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/PF-Backdrop.svg +1 -0
  4. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  5. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  6. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  7. package/assets/images/PF-IconLogo-color.svg +17 -0
  8. package/assets/images/PF-IconLogo.svg +17 -0
  9. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  10. package/assets/images/pf-background.svg +22 -0
  11. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  12. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  13. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  14. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  15. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  16. package/assets/images/pf_logo_white.hbs +35 -0
  17. package/assets/images/pf_logo_white.svg +38 -0
  18. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  19. package/assets/pficon/pficon.scss +6 -129
  20. package/base/_common.scss +29 -4
  21. package/base/_globals.scss +5 -7
  22. package/base/_variables.scss +8 -6
  23. package/base/patternfly-common.css +24 -6
  24. package/base/patternfly-globals.css +5 -4
  25. package/base/patternfly-icons.css +5 -1
  26. package/base/patternfly-pf-icons.css +5 -1
  27. package/base/patternfly-variables.css +889 -787
  28. package/base/tokens/_tokens-dark.scss +322 -265
  29. package/base/tokens/_tokens-default.scss +428 -306
  30. package/base/tokens/_tokens-font.scss +41 -46
  31. package/base/tokens/_tokens-palette.scss +69 -71
  32. package/base/tokens/_workspace-overrides.scss +7 -0
  33. package/components/AboutModalBox/about-modal-box.css +80 -108
  34. package/components/AboutModalBox/about-modal-box.scss +64 -78
  35. package/components/Accordion/accordion.css +96 -175
  36. package/components/Accordion/accordion.scss +106 -193
  37. package/components/ActionList/action-list.css +2 -2
  38. package/components/ActionList/action-list.scss +2 -2
  39. package/components/Alert/alert-group.css +27 -20
  40. package/components/Alert/alert-group.scss +27 -20
  41. package/components/Alert/alert.css +74 -95
  42. package/components/Alert/alert.scss +76 -89
  43. package/components/AppLauncher/app-launcher.css +32 -23
  44. package/components/AppLauncher/app-launcher.scss +32 -23
  45. package/components/Avatar/avatar.css +10 -13
  46. package/components/Avatar/avatar.scss +10 -17
  47. package/components/BackToTop/back-to-top.css +17 -15
  48. package/components/BackToTop/back-to-top.scss +14 -13
  49. package/components/Backdrop/backdrop.css +8 -4
  50. package/components/Backdrop/backdrop.scss +7 -4
  51. package/components/BackgroundImage/background-image.css +11 -4
  52. package/components/BackgroundImage/background-image.scss +13 -4
  53. package/components/Badge/badge.css +25 -17
  54. package/components/Badge/badge.scss +27 -19
  55. package/components/Banner/banner.css +95 -69
  56. package/components/Banner/banner.scss +100 -34
  57. package/components/Breadcrumb/breadcrumb.css +28 -19
  58. package/components/Breadcrumb/breadcrumb.scss +26 -19
  59. package/components/Button/button.css +422 -359
  60. package/components/Button/button.scss +480 -487
  61. package/components/CalendarMonth/calendar-month.css +25 -15
  62. package/components/CalendarMonth/calendar-month.scss +23 -15
  63. package/components/Card/card.css +28 -17
  64. package/components/Card/card.scss +32 -17
  65. package/components/Check/check.css +25 -22
  66. package/components/Check/check.scss +26 -24
  67. package/components/Chip/chip-group.css +6 -6
  68. package/components/Chip/chip-group.scss +6 -6
  69. package/components/Chip/chip.css +16 -9
  70. package/components/Chip/chip.scss +17 -9
  71. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  72. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  73. package/components/CodeBlock/code-block.css +24 -12
  74. package/components/CodeBlock/code-block.scss +24 -13
  75. package/components/CodeEditor/code-editor.css +31 -22
  76. package/components/CodeEditor/code-editor.scss +30 -21
  77. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  78. package/components/Content/content.css +40 -37
  79. package/components/Content/content.scss +40 -37
  80. package/components/ContextSelector/context-selector.css +41 -26
  81. package/components/ContextSelector/context-selector.scss +40 -25
  82. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  83. package/components/DataList/data-list-grid.css +21 -21
  84. package/components/DataList/data-list-grid.scss +3 -3
  85. package/components/DataList/data-list.css +165 -209
  86. package/components/DataList/data-list.scss +138 -185
  87. package/components/DatePicker/date-picker.css +8 -8
  88. package/components/DatePicker/date-picker.scss +8 -8
  89. package/components/DescriptionList/description-list.css +47 -39
  90. package/components/DescriptionList/description-list.scss +33 -30
  91. package/components/Divider/divider.css +97 -177
  92. package/components/Divider/divider.scss +60 -79
  93. package/components/DragDrop/drag-drop.css +26 -22
  94. package/components/DragDrop/drag-drop.scss +26 -25
  95. package/components/Drawer/drawer.css +120 -62
  96. package/components/Drawer/drawer.scss +94 -44
  97. package/components/Dropdown/dropdown.css +76 -69
  98. package/components/Dropdown/dropdown.scss +67 -62
  99. package/components/DualListSelector/dual-list-selector.css +29 -15
  100. package/components/DualListSelector/dual-list-selector.scss +30 -15
  101. package/components/EmptyState/empty-state.css +64 -38
  102. package/components/EmptyState/empty-state.scss +70 -38
  103. package/components/ExpandableSection/expandable-section.css +75 -66
  104. package/components/ExpandableSection/expandable-section.scss +82 -80
  105. package/components/FileUpload/file-upload.css +31 -43
  106. package/components/FileUpload/file-upload.scss +31 -49
  107. package/components/Form/form.css +111 -154
  108. package/components/Form/form.scss +101 -160
  109. package/components/FormControl/form-control.css +95 -111
  110. package/components/FormControl/form-control.scss +97 -92
  111. package/components/HelperText/helper-text.css +29 -35
  112. package/components/HelperText/helper-text.scss +31 -41
  113. package/components/Hint/hint.css +37 -27
  114. package/components/Hint/hint.scss +37 -30
  115. package/components/Icon/icon.css +155 -19
  116. package/components/Icon/icon.scss +188 -21
  117. package/components/InlineEdit/inline-edit.css +12 -11
  118. package/components/InlineEdit/inline-edit.scss +12 -11
  119. package/components/InputGroup/input-group.css +32 -42
  120. package/components/InputGroup/input-group.scss +31 -33
  121. package/components/JumpLinks/jump-links.css +61 -58
  122. package/components/JumpLinks/jump-links.scss +61 -60
  123. package/components/Label/label-group.css +48 -50
  124. package/components/Label/label-group.scss +48 -51
  125. package/components/Label/label.css +266 -363
  126. package/components/Label/label.scss +306 -356
  127. package/components/List/list.css +25 -25
  128. package/components/List/list.scss +26 -26
  129. package/components/LogViewer/log-viewer.css +14 -14
  130. package/components/LogViewer/log-viewer.scss +14 -14
  131. package/components/Login/login.css +104 -122
  132. package/components/Login/login.scss +92 -91
  133. package/components/Masthead/masthead.css +273 -498
  134. package/components/Masthead/masthead.scss +137 -282
  135. package/components/Menu/menu.css +82 -65
  136. package/components/Menu/menu.scss +85 -69
  137. package/components/MenuToggle/menu-toggle.css +37 -31
  138. package/components/MenuToggle/menu-toggle.scss +37 -33
  139. package/components/ModalBox/modal-box.css +76 -69
  140. package/components/ModalBox/modal-box.scss +74 -70
  141. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  143. package/components/Nav/nav.css +248 -899
  144. package/components/Nav/nav.scss +304 -1059
  145. package/components/Nav/themes/dark/nav.scss +2 -2
  146. package/components/NotificationBadge/notification-badge.css +66 -85
  147. package/components/NotificationBadge/notification-badge.scss +72 -103
  148. package/components/NotificationDrawer/notification-drawer.css +130 -128
  149. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  150. package/components/NumberInput/number-input.css +10 -10
  151. package/components/NumberInput/number-input.scss +9 -14
  152. package/components/OptionsMenu/options-menu.css +43 -31
  153. package/components/OptionsMenu/options-menu.scss +43 -31
  154. package/components/OverflowMenu/overflow-menu.css +2 -2
  155. package/components/OverflowMenu/overflow-menu.scss +2 -2
  156. package/components/Page/page.css +182 -232
  157. package/components/Page/page.scss +130 -195
  158. package/components/Pagination/pagination.css +71 -121
  159. package/components/Pagination/pagination.scss +56 -127
  160. package/components/Panel/panel.css +40 -30
  161. package/components/Panel/panel.scss +42 -33
  162. package/components/Popover/popover.css +108 -87
  163. package/components/Popover/popover.scss +120 -109
  164. package/components/Progress/progress.css +40 -52
  165. package/components/Progress/progress.scss +48 -62
  166. package/components/ProgressStepper/progress-stepper.css +26 -20
  167. package/components/ProgressStepper/progress-stepper.scss +25 -19
  168. package/components/Radio/radio.css +30 -23
  169. package/components/Radio/radio.scss +31 -25
  170. package/components/Select/select.css +56 -47
  171. package/components/Select/select.scss +56 -47
  172. package/components/Sidebar/sidebar.css +31 -14
  173. package/components/Sidebar/sidebar.scss +34 -16
  174. package/components/SimpleList/simple-list.css +45 -56
  175. package/components/SimpleList/simple-list.scss +51 -55
  176. package/components/Skeleton/skeleton.css +24 -25
  177. package/components/Skeleton/skeleton.scss +21 -26
  178. package/components/SkipToContent/skip-to-content.css +9 -6
  179. package/components/SkipToContent/skip-to-content.scss +8 -6
  180. package/components/Slider/slider.css +80 -55
  181. package/components/Slider/slider.scss +96 -65
  182. package/components/Spinner/spinner.css +17 -34
  183. package/components/Spinner/spinner.scss +19 -47
  184. package/components/Switch/switch.css +49 -41
  185. package/components/Switch/switch.scss +51 -42
  186. package/components/TabContent/tab-content.css +21 -12
  187. package/components/TabContent/tab-content.scss +22 -15
  188. package/components/Table/table-grid.css +264 -203
  189. package/components/Table/table-grid.scss +61 -47
  190. package/components/Table/table-scrollable.css +4 -4
  191. package/components/Table/table-scrollable.scss +6 -4
  192. package/components/Table/table-tree-view.css +112 -105
  193. package/components/Table/table-tree-view.scss +38 -33
  194. package/components/Table/table.css +105 -89
  195. package/components/Table/table.scss +105 -89
  196. package/components/Tabs/tabs.css +76 -48
  197. package/components/Tabs/tabs.scss +74 -48
  198. package/components/TextInputGroup/text-input-group.css +15 -15
  199. package/components/TextInputGroup/text-input-group.scss +15 -15
  200. package/components/Tile/tile.css +47 -88
  201. package/components/Tile/tile.scss +45 -91
  202. package/components/Timestamp/timestamp.css +12 -9
  203. package/components/Timestamp/timestamp.scss +11 -10
  204. package/components/Title/title.css +70 -19
  205. package/components/Title/title.scss +90 -20
  206. package/components/ToggleGroup/toggle-group.css +48 -58
  207. package/components/ToggleGroup/toggle-group.scss +48 -56
  208. package/components/Toolbar/toolbar.css +57 -43
  209. package/components/Toolbar/toolbar.scss +45 -25
  210. package/components/Tooltip/tooltip.css +74 -44
  211. package/components/Tooltip/tooltip.scss +93 -77
  212. package/components/TreeView/tree-view.css +48 -27
  213. package/components/TreeView/tree-view.scss +50 -28
  214. package/components/Truncate/truncate.css +13 -0
  215. package/components/Truncate/truncate.scss +19 -3
  216. package/components/Wizard/wizard.css +57 -36
  217. package/components/Wizard/wizard.scss +57 -36
  218. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  219. package/docs/components/Accordion/examples/Accordion.md +614 -416
  220. package/docs/components/Alert/examples/Alert.md +3 -3
  221. package/docs/components/Avatar/examples/Avatar.md +5 -19
  222. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  223. package/docs/components/Badge/examples/Badge.md +21 -0
  224. package/docs/components/Banner/examples/Banner.md +48 -25
  225. package/docs/components/Brand/examples/Brand.css +12 -0
  226. package/docs/components/Brand/examples/Brand.md +51 -32
  227. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  228. package/docs/components/Button/examples/Button.css +6 -2
  229. package/docs/components/Button/examples/Button.md +1425 -87
  230. package/docs/components/Card/examples/Card.md +143 -37
  231. package/docs/components/Check/examples/Check.md +71 -58
  232. package/docs/components/Chip/examples/Chip.md +1 -1
  233. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  234. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  235. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  236. package/docs/components/Content/examples/Content.md +5 -5
  237. package/docs/components/Divider/examples/Divider.css +3 -1
  238. package/docs/components/Divider/examples/Divider.md +4 -5
  239. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  240. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  241. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  242. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  243. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  244. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  245. package/docs/components/Form/examples/Form.md +134 -89
  246. package/docs/components/Icon/examples/Icon.md +82 -11
  247. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  248. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  249. package/docs/components/Label/examples/Label.css +4 -0
  250. package/docs/components/Label/examples/Label.md +1001 -225
  251. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  252. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  253. package/docs/components/Login/examples/Login.md +10 -5
  254. package/docs/components/Masthead/examples/masthead.md +443 -65
  255. package/docs/components/Menu/examples/Menu.css +8 -0
  256. package/docs/components/Menu/examples/Menu.md +594 -543
  257. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  258. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  259. package/docs/components/Nav/examples/Navigation.css +3 -42
  260. package/docs/components/Nav/examples/Navigation.md +305 -353
  261. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  262. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  263. package/docs/components/Page/examples/Page.css +0 -8
  264. package/docs/components/Page/examples/Page.md +22 -21
  265. package/docs/components/Pagination/examples/Pagination.md +663 -637
  266. package/docs/components/Panel/examples/Panel.md +12 -0
  267. package/docs/components/Popover/examples/Popover.css +4 -9
  268. package/docs/components/Popover/examples/Popover.md +1 -1
  269. package/docs/components/Radio/examples/Radio.md +62 -54
  270. package/docs/components/Select/deprecated/Select.md +184 -177
  271. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  272. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  273. package/docs/components/TabContent/examples/TabContent.md +10 -10
  274. package/docs/components/Table/examples/Table.css +2 -2
  275. package/docs/components/Table/examples/Table.md +10 -10
  276. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  277. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  278. package/docs/components/Tile/examples/Tile.css +1 -1
  279. package/docs/components/Tile/examples/Tile.md +264 -144
  280. package/docs/components/Title/examples/Title.md +18 -0
  281. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  282. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  283. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  284. package/docs/components/Truncate/examples/Truncate.css +2 -2
  285. package/docs/components/Truncate/examples/Truncate.md +2 -2
  286. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  287. package/docs/demos/Alert/examples/Alert.md +327 -84
  288. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  289. package/docs/demos/Banner/examples/Banner.md +209 -58
  290. package/docs/demos/Card/examples/Card.css +3 -3
  291. package/docs/demos/Card/examples/Card.md +28 -12
  292. package/docs/demos/CardView/examples/CardView.md +263 -205
  293. package/docs/demos/ContextSelector/examples/ContextSelector.md +373 -90
  294. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  295. package/docs/demos/DataList/examples/DataList.md +995 -928
  296. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  297. package/docs/demos/Drawer/examples/Drawer.md +605 -220
  298. package/docs/demos/Form/examples/BasicForms.md +133 -82
  299. package/docs/demos/JumpLinks/examples/JumpLinks.md +881 -353
  300. package/docs/demos/Masthead/examples/Masthead.md +767 -323
  301. package/docs/demos/Modal/examples/Modal.md +639 -192
  302. package/docs/demos/Nav/examples/Nav.md +685 -896
  303. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  304. package/docs/demos/Page/examples/Page.md +933 -264
  305. package/docs/demos/Page/examples/Penta.md +569 -501
  306. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  307. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  308. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1296 -917
  309. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  310. package/docs/demos/Table/examples/Table.md +3832 -3390
  311. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  312. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  313. package/docs/demos/Toolbar/examples/Toolbar.md +1331 -1493
  314. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  315. package/docs/layouts/Flex/examples/Flex.md +16 -16
  316. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  317. package/icons/pficons.mjs +1 -0
  318. package/layouts/Flex/flex.css +115 -43
  319. package/layouts/Flex/flex.scss +20 -8
  320. package/package.json +36 -32
  321. package/patternfly-addons.css +732 -972
  322. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  323. package/patternfly-base-no-globals.css +923 -799
  324. package/patternfly-base-theme-dark-unversioned.css +928 -803
  325. package/patternfly-base.css +928 -803
  326. package/patternfly-no-globals.css +6887 -7357
  327. package/patternfly-theme-dark-unversioned.css +6892 -7361
  328. package/patternfly.css +6892 -7361
  329. package/patternfly.min.css +1 -1
  330. package/patternfly.min.css.map +1 -1
  331. package/sass-utilities/functions.scss +6 -0
  332. package/sass-utilities/mixins.scss +80 -2
  333. package/sass-utilities/scss-variables.scss +8 -8
  334. package/sass-utilities/themes/dark/mixins.scss +3 -1
  335. package/utilities/Accessibility/accessibility.css +12 -12
  336. package/utilities/Spacing/spacing.css +720 -960
  337. package/utilities/Spacing/spacing.scss +4 -8
  338. package/base/themes/dark/_variables.scss +0 -102
  339. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  340. package/components/Accordion/themes/dark/accordion.scss +0 -9
  341. package/components/Alert/themes/dark/alert.scss +0 -17
  342. package/components/Badge/themes/dark/badge.scss +0 -9
  343. package/components/Banner/themes/dark/banner.scss +0 -14
  344. package/components/Button/themes/dark/button.scss +0 -51
  345. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  346. package/components/DataList/themes/dark/data-list.scss +0 -10
  347. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  348. package/components/Form/themes/dark/form.scss +0 -7
  349. package/components/FormControl/themes/dark/form-control.scss +0 -24
  350. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  351. package/components/Hint/themes/dark/hint.scss +0 -8
  352. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  353. package/components/Label/themes/dark/label.scss +0 -53
  354. package/components/Login/themes/dark/login.scss +0 -12
  355. package/components/Masthead/themes/dark/masthead.scss +0 -14
  356. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  357. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  358. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  359. package/components/Page/themes/dark/page.scss +0 -69
  360. package/components/Pagination/themes/dark/pagination.scss +0 -7
  361. package/components/Panel/themes/dark/panel.scss +0 -7
  362. package/components/Popover/themes/dark/popover.scss +0 -11
  363. package/components/Progress/themes/dark/progress.scss +0 -9
  364. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  365. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  366. package/components/Switch/themes/dark/switch.scss +0 -11
  367. package/components/Tile/themes/dark/tile.scss +0 -10
  368. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  369. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  370. package/docs/components/Avatar/examples/Avatar.css +0 -3
  371. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
@@ -29,12 +29,76 @@ wrapperTag: div
29
29
  </span>
30
30
  <div class="pf-v5-c-masthead__main">
31
31
  <a class="pf-v5-c-masthead__brand" href="#">
32
- <img
33
- class="pf-v5-c-brand"
34
- src="/assets/images/pf-logo.svg"
35
- alt="PatternFly logo"
36
- style="--pf-v5-c-brand--Height:36px"
37
- />
32
+ <svg height="40px" viewBox="0 0 679 158">
33
+ <title>PF-HorizontalLogo-Color</title>
34
+ <defs>
35
+ <linearGradient
36
+ x1="68%"
37
+ y1="2.25860997e-13%"
38
+ x2="32%"
39
+ y2="100%"
40
+ id="linearGradient-primary-detail-expanded-example-masthead"
41
+ >
42
+ <stop stop-color="#2B9AF3" offset="0%" />
43
+ <stop
44
+ stop-color="#73BCF7"
45
+ stop-opacity="0.502212631"
46
+ offset="100%"
47
+ />
48
+ </linearGradient>
49
+ </defs>
50
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
51
+ <g
52
+ transform="translate(206.000000, 45.750000)"
53
+ fill="var(--pf-t--global--text--color--regular)"
54
+ fill-rule="nonzero"
55
+ >
56
+ <path
57
+ 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"
58
+ />
59
+ <path
60
+ 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"
61
+ />
62
+ <path
63
+ 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"
64
+ />
65
+ <path
66
+ 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"
67
+ />
68
+ <path
69
+ 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"
70
+ />
71
+ <path
72
+ 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"
73
+ />
74
+ <path
75
+ 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"
76
+ />
77
+ <polygon
78
+ 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"
79
+ />
80
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
81
+ <path
82
+ 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"
83
+ />
84
+ </g>
85
+ <g transform="translate(0.000000, 0.000000)">
86
+ <path
87
+ 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"
88
+ fill="#0066CC"
89
+ />
90
+ <path
91
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
92
+ fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
93
+ />
94
+ <path
95
+ 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"
96
+ fill="url(#linearGradient-primary-detail-expanded-example-masthead)"
97
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
98
+ />
99
+ </g>
100
+ </g>
101
+ </svg>
38
102
  </a>
39
103
  </div>
40
104
  <div class="pf-v5-c-masthead__content">
@@ -44,8 +108,38 @@ wrapperTag: div
44
108
  >
45
109
  <div class="pf-v5-c-toolbar__content">
46
110
  <div class="pf-v5-c-toolbar__content-section">
111
+ <div class="pf-v5-c-toolbar__item">
112
+ <button
113
+ class="pf-v5-c-menu-toggle"
114
+ type="button"
115
+ aria-expanded="false"
116
+ >
117
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
118
+ <span class="pf-v5-c-menu-toggle__controls">
119
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
120
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
121
+ </span>
122
+ </span>
123
+ </button>
124
+ </div>
125
+
126
+ <div class="pf-v5-c-toolbar__item">
127
+ <button
128
+ class="pf-v5-c-menu-toggle"
129
+ type="button"
130
+ aria-expanded="false"
131
+ >
132
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
133
+ <span class="pf-v5-c-menu-toggle__controls">
134
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
135
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
136
+ </span>
137
+ </span>
138
+ </button>
139
+ </div>
140
+
47
141
  <div
48
- 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"
142
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
49
143
  >
50
144
  <div
51
145
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -92,27 +186,6 @@ wrapperTag: div
92
186
  </button>
93
187
  </div>
94
188
  </div>
95
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
96
- <button
97
- class="pf-v5-c-menu-toggle pf-m-full-height"
98
- type="button"
99
- aria-expanded="false"
100
- >
101
- <span class="pf-v5-c-menu-toggle__icon">
102
- <img
103
- class="pf-v5-c-avatar"
104
- alt="Avatar image"
105
- src="/assets/images/img_avatar-light.svg"
106
- />
107
- </span>
108
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
109
- <span class="pf-v5-c-menu-toggle__controls">
110
- <span class="pf-v5-c-menu-toggle__toggle-icon">
111
- <i class="fas fa-angle-down" aria-hidden="true"></i>
112
- </span>
113
- </span>
114
- </button>
115
- </div>
116
189
  </div>
117
190
  </div>
118
191
  </div>
@@ -217,10 +290,10 @@ wrapperTag: div
217
290
  >
218
291
  <div class="pf-v5-c-toolbar__toggle">
219
292
  <button
220
- class="pf-v5-c-button pf-m-plain"
293
+ class="pf-v5-c-menu-toggle pf-m-plain"
221
294
  type="button"
222
- aria-label="Show filters"
223
295
  aria-expanded="false"
296
+ aria-label="Show filters"
224
297
  aria-controls="primary-detail-expanded-example-drawer-toolbar-expandable-content"
225
298
  >
226
299
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -234,83 +307,25 @@ wrapperTag: div
234
307
  role="group"
235
308
  >
236
309
  <div class="pf-v5-c-input-group__item">
237
- <div class="pf-v5-c-select" style="width: 124px">
238
- <span
239
- id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
240
- hidden
241
- >Choose one</span>
242
-
243
- <button
244
- class="pf-v5-c-select__toggle"
245
- type="button"
246
- id="primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
247
- aria-haspopup="true"
248
- aria-expanded="false"
249
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label primary-detail-expanded-example-drawer-toolbar-select-name-toggle"
250
- >
251
- <div class="pf-v5-c-select__toggle-wrapper">
252
- <span class="pf-v5-c-select__toggle-icon">
253
- <i class="fas fa-filter" aria-hidden="true"></i>
254
- </span>
255
- <span class="pf-v5-c-select__toggle-text">Name</span>
256
- </div>
257
- <span class="pf-v5-c-select__toggle-arrow">
310
+ <button
311
+ class="pf-v5-c-menu-toggle"
312
+ type="button"
313
+ aria-expanded="false"
314
+ id="primary-detail-expanded-example-drawer-toolbar-search-filter-menu"
315
+ >
316
+ <span class="pf-v5-c-menu-toggle__icon">
317
+ <i class="fas fa-filter" aria-hidden="true"></i>
318
+ </span>
319
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
320
+ <span class="pf-v5-c-menu-toggle__controls">
321
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
258
322
  <i
259
- class="fas fa-caret-down"
323
+ class="fas fa-angle-down"
260
324
  aria-hidden="true"
261
325
  ></i>
262
326
  </span>
263
- </button>
264
-
265
- <ul
266
- class="pf-v5-c-select__menu"
267
- role="listbox"
268
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
269
- hidden
270
- >
271
- <li role="presentation">
272
- <button
273
- class="pf-v5-c-select__menu-item"
274
- role="option"
275
- >Running</button>
276
- </li>
277
- <li role="presentation">
278
- <button
279
- class="pf-v5-c-select__menu-item pf-m-selected"
280
- role="option"
281
- aria-selected="true"
282
- >
283
- Stopped
284
- <span
285
- class="pf-v5-c-select__menu-item-icon"
286
- >
287
- <i
288
- class="fas fa-check"
289
- aria-hidden="true"
290
- ></i>
291
- </span>
292
- </button>
293
- </li>
294
- <li role="presentation">
295
- <button
296
- class="pf-v5-c-select__menu-item"
297
- role="option"
298
- >Down</button>
299
- </li>
300
- <li role="presentation">
301
- <button
302
- class="pf-v5-c-select__menu-item"
303
- role="option"
304
- >Degraded</button>
305
- </li>
306
- <li role="presentation">
307
- <button
308
- class="pf-v5-c-select__menu-item"
309
- role="option"
310
- >Needs maintenance</button>
311
- </li>
312
- </ul>
313
- </div>
327
+ </span>
328
+ </button>
314
329
  </div>
315
330
  <div class="pf-v5-c-input-group__item pf-m-fill">
316
331
  <div class="pf-v5-c-text-input-group">
@@ -366,73 +381,77 @@ wrapperTag: div
366
381
  >
367
382
  <label
368
383
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
369
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
384
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
385
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
370
386
  >
371
387
  <input
372
388
  class="pf-v5-c-check__input"
373
389
  type="checkbox"
374
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
375
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active"
390
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-description"
391
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
392
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-input"
376
393
  />
377
-
378
394
  <span class="pf-v5-c-check__label">Active</span>
379
395
  <span
380
396
  class="pf-v5-c-check__description"
397
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-active-description"
381
398
  >This is a description</span>
382
399
  </label>
383
400
  <label
384
401
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
385
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
402
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
403
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
386
404
  >
387
405
  <input
388
406
  class="pf-v5-c-check__input"
389
407
  type="checkbox"
390
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
391
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled"
408
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-description"
409
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
410
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-input"
392
411
  />
393
-
394
412
  <span class="pf-v5-c-check__label">Canceled</span>
395
413
  <span
396
414
  class="pf-v5-c-check__description"
415
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-canceled-description"
397
416
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
398
417
  </label>
399
418
  <label
400
419
  class="pf-v5-c-check pf-v5-c-select__menu-item"
401
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
420
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
421
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
402
422
  >
403
423
  <input
404
424
  class="pf-v5-c-check__input"
405
425
  type="checkbox"
406
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
407
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused"
426
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
427
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-paused-input"
408
428
  />
409
-
410
429
  <span class="pf-v5-c-check__label">Paused</span>
411
430
  </label>
412
431
  <label
413
432
  class="pf-v5-c-check pf-v5-c-select__menu-item"
414
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
433
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
434
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
415
435
  >
416
436
  <input
417
437
  class="pf-v5-c-check__input"
418
438
  type="checkbox"
419
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
420
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning"
439
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
440
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-warning-input"
421
441
  />
422
-
423
442
  <span class="pf-v5-c-check__label">Warning</span>
424
443
  </label>
425
444
  <label
426
445
  class="pf-v5-c-check pf-v5-c-select__menu-item"
427
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
446
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
447
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
428
448
  >
429
449
  <input
430
450
  class="pf-v5-c-check__input"
431
451
  type="checkbox"
432
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
433
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted"
452
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
453
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-status-restarted-input"
434
454
  />
435
-
436
455
  <span class="pf-v5-c-check__label">Restarted</span>
437
456
  </label>
438
457
  </fieldset>
@@ -469,73 +488,77 @@ wrapperTag: div
469
488
  >
470
489
  <label
471
490
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
472
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
491
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
492
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
473
493
  >
474
494
  <input
475
495
  class="pf-v5-c-check__input"
476
496
  type="checkbox"
477
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
478
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active"
497
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-description"
498
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
499
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-input"
479
500
  />
480
-
481
501
  <span class="pf-v5-c-check__label">Active</span>
482
502
  <span
483
503
  class="pf-v5-c-check__description"
504
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-active-description"
484
505
  >This is a description</span>
485
506
  </label>
486
507
  <label
487
508
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
488
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
509
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
510
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
489
511
  >
490
512
  <input
491
513
  class="pf-v5-c-check__input"
492
514
  type="checkbox"
493
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
494
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled"
515
+ aria-describedby="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-description"
516
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
517
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-input"
495
518
  />
496
-
497
519
  <span class="pf-v5-c-check__label">Canceled</span>
498
520
  <span
499
521
  class="pf-v5-c-check__description"
522
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-canceled-description"
500
523
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
501
524
  </label>
502
525
  <label
503
526
  class="pf-v5-c-check pf-v5-c-select__menu-item"
504
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
527
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
528
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
505
529
  >
506
530
  <input
507
531
  class="pf-v5-c-check__input"
508
532
  type="checkbox"
509
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
510
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused"
533
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
534
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-paused-input"
511
535
  />
512
-
513
536
  <span class="pf-v5-c-check__label">Paused</span>
514
537
  </label>
515
538
  <label
516
539
  class="pf-v5-c-check pf-v5-c-select__menu-item"
517
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
540
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
541
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
518
542
  >
519
543
  <input
520
544
  class="pf-v5-c-check__input"
521
545
  type="checkbox"
522
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
523
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning"
546
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
547
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-warning-input"
524
548
  />
525
-
526
549
  <span class="pf-v5-c-check__label">Warning</span>
527
550
  </label>
528
551
  <label
529
552
  class="pf-v5-c-check pf-v5-c-select__menu-item"
530
- for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
553
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
554
+ for="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
531
555
  >
532
556
  <input
533
557
  class="pf-v5-c-check__input"
534
558
  type="checkbox"
535
- id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
536
- name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted"
559
+ id="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
560
+ name="primary-detail-expanded-example-drawer-toolbar-select-checkbox-risk-restarted-input"
537
561
  />
538
-
539
562
  <span class="pf-v5-c-check__label">Restarted</span>
540
563
  </label>
541
564
  </fieldset>
@@ -551,7 +574,10 @@ wrapperTag: div
551
574
  type="button"
552
575
  aria-label="Sort"
553
576
  >
554
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
577
+ <i
578
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
579
+ aria-hidden="true"
580
+ ></i>
555
581
  </button>
556
582
  </div>
557
583
 
@@ -603,57 +629,59 @@ wrapperTag: div
603
629
 
604
630
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
605
631
  <div class="pf-v5-c-pagination pf-m-compact">
606
- <div class="pf-v5-c-options-menu">
607
- <button
608
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
609
- type="button"
610
- id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
611
- aria-haspopup="listbox"
612
- aria-expanded="false"
613
- >
614
- <span class="pf-v5-c-options-menu__toggle-text">
615
- <b>1 - 10</b>&nbsp;of&nbsp;
616
- <b>36</b>
617
- </span>
618
- <div class="pf-v5-c-options-menu__toggle-icon">
619
- <i class="fas fa-caret-down" aria-hidden="true"></i>
620
- </div>
621
- </button>
622
- <ul
623
- class="pf-v5-c-options-menu__menu"
624
- role="menu"
625
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
626
- hidden
627
- >
628
- <li role="none">
629
- <button
630
- class="pf-v5-c-options-menu__menu-item"
631
- type="button"
632
- role="menuitem"
633
- >5 per page</button>
634
- </li>
635
- <li role="none">
636
- <button
637
- class="pf-v5-c-options-menu__menu-item"
638
- type="button"
639
- role="menuitem"
640
- >
641
- 10 per page
642
- <div
643
- class="pf-v5-c-options-menu__menu-item-icon"
632
+ <div class="pf-v5-c-pagination__page-menu">
633
+ <div class="pf-v5-c-options-menu">
634
+ <button
635
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
636
+ type="button"
637
+ id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
638
+ aria-haspopup="listbox"
639
+ aria-expanded="false"
640
+ >
641
+ <span class="pf-v5-c-options-menu__toggle-text">
642
+ <b>1 - 10</b>&nbsp;of&nbsp;
643
+ <b>36</b>
644
+ </span>
645
+ <div class="pf-v5-c-options-menu__toggle-icon">
646
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
647
+ </div>
648
+ </button>
649
+ <ul
650
+ class="pf-v5-c-options-menu__menu"
651
+ role="menu"
652
+ aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
653
+ hidden
654
+ >
655
+ <li role="none">
656
+ <button
657
+ class="pf-v5-c-options-menu__menu-item"
658
+ type="button"
659
+ role="menuitem"
660
+ >5 per page</button>
661
+ </li>
662
+ <li role="none">
663
+ <button
664
+ class="pf-v5-c-options-menu__menu-item"
665
+ type="button"
666
+ role="menuitem"
644
667
  >
645
- <i class="fas fa-check" aria-hidden="true"></i>
646
- </div>
647
- </button>
648
- </li>
649
- <li role="none">
650
- <button
651
- class="pf-v5-c-options-menu__menu-item"
652
- type="button"
653
- role="menuitem"
654
- >20 per page</button>
655
- </li>
656
- </ul>
668
+ 10 per page
669
+ <div
670
+ class="pf-v5-c-options-menu__menu-item-icon"
671
+ >
672
+ <i class="fas fa-check" aria-hidden="true"></i>
673
+ </div>
674
+ </button>
675
+ </li>
676
+ <li role="none">
677
+ <button
678
+ class="pf-v5-c-options-menu__menu-item"
679
+ type="button"
680
+ role="menuitem"
681
+ >20 per page</button>
682
+ </li>
683
+ </ul>
684
+ </div>
657
685
  </div>
658
686
  <nav
659
687
  class="pf-v5-c-pagination__nav"
@@ -1287,12 +1315,76 @@ wrapperTag: div
1287
1315
  </span>
1288
1316
  <div class="pf-v5-c-masthead__main">
1289
1317
  <a class="pf-v5-c-masthead__brand" href="#">
1290
- <img
1291
- class="pf-v5-c-brand"
1292
- src="/assets/images/pf-logo.svg"
1293
- alt="PatternFly logo"
1294
- style="--pf-v5-c-brand--Height:36px"
1295
- />
1318
+ <svg height="40px" viewBox="0 0 679 158">
1319
+ <title>PF-HorizontalLogo-Color</title>
1320
+ <defs>
1321
+ <linearGradient
1322
+ x1="68%"
1323
+ y1="2.25860997e-13%"
1324
+ x2="32%"
1325
+ y2="100%"
1326
+ id="linearGradient-primary-detail-collapsed-example-masthead"
1327
+ >
1328
+ <stop stop-color="#2B9AF3" offset="0%" />
1329
+ <stop
1330
+ stop-color="#73BCF7"
1331
+ stop-opacity="0.502212631"
1332
+ offset="100%"
1333
+ />
1334
+ </linearGradient>
1335
+ </defs>
1336
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1337
+ <g
1338
+ transform="translate(206.000000, 45.750000)"
1339
+ fill="var(--pf-t--global--text--color--regular)"
1340
+ fill-rule="nonzero"
1341
+ >
1342
+ <path
1343
+ 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"
1344
+ />
1345
+ <path
1346
+ 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"
1347
+ />
1348
+ <path
1349
+ 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"
1350
+ />
1351
+ <path
1352
+ 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"
1353
+ />
1354
+ <path
1355
+ 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"
1356
+ />
1357
+ <path
1358
+ 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"
1359
+ />
1360
+ <path
1361
+ 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"
1362
+ />
1363
+ <polygon
1364
+ 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"
1365
+ />
1366
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1367
+ <path
1368
+ 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"
1369
+ />
1370
+ </g>
1371
+ <g transform="translate(0.000000, 0.000000)">
1372
+ <path
1373
+ 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"
1374
+ fill="#0066CC"
1375
+ />
1376
+ <path
1377
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1378
+ fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1379
+ />
1380
+ <path
1381
+ 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"
1382
+ fill="url(#linearGradient-primary-detail-collapsed-example-masthead)"
1383
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1384
+ />
1385
+ </g>
1386
+ </g>
1387
+ </svg>
1296
1388
  </a>
1297
1389
  </div>
1298
1390
  <div class="pf-v5-c-masthead__content">
@@ -1302,8 +1394,38 @@ wrapperTag: div
1302
1394
  >
1303
1395
  <div class="pf-v5-c-toolbar__content">
1304
1396
  <div class="pf-v5-c-toolbar__content-section">
1397
+ <div class="pf-v5-c-toolbar__item">
1398
+ <button
1399
+ class="pf-v5-c-menu-toggle"
1400
+ type="button"
1401
+ aria-expanded="false"
1402
+ >
1403
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1404
+ <span class="pf-v5-c-menu-toggle__controls">
1405
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1406
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1407
+ </span>
1408
+ </span>
1409
+ </button>
1410
+ </div>
1411
+
1412
+ <div class="pf-v5-c-toolbar__item">
1413
+ <button
1414
+ class="pf-v5-c-menu-toggle"
1415
+ type="button"
1416
+ aria-expanded="false"
1417
+ >
1418
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1419
+ <span class="pf-v5-c-menu-toggle__controls">
1420
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1421
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1422
+ </span>
1423
+ </span>
1424
+ </button>
1425
+ </div>
1426
+
1305
1427
  <div
1306
- 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"
1428
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1307
1429
  >
1308
1430
  <div
1309
1431
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1350,27 +1472,6 @@ wrapperTag: div
1350
1472
  </button>
1351
1473
  </div>
1352
1474
  </div>
1353
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1354
- <button
1355
- class="pf-v5-c-menu-toggle pf-m-full-height"
1356
- type="button"
1357
- aria-expanded="false"
1358
- >
1359
- <span class="pf-v5-c-menu-toggle__icon">
1360
- <img
1361
- class="pf-v5-c-avatar"
1362
- alt="Avatar image"
1363
- src="/assets/images/img_avatar-light.svg"
1364
- />
1365
- </span>
1366
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1367
- <span class="pf-v5-c-menu-toggle__controls">
1368
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1369
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1370
- </span>
1371
- </span>
1372
- </button>
1373
- </div>
1374
1475
  </div>
1375
1476
  </div>
1376
1477
  </div>
@@ -1475,10 +1576,10 @@ wrapperTag: div
1475
1576
  >
1476
1577
  <div class="pf-v5-c-toolbar__toggle">
1477
1578
  <button
1478
- class="pf-v5-c-button pf-m-plain"
1579
+ class="pf-v5-c-menu-toggle pf-m-plain"
1479
1580
  type="button"
1480
- aria-label="Show filters"
1481
1581
  aria-expanded="false"
1582
+ aria-label="Show filters"
1482
1583
  aria-controls="primary-detail-collapsed-example-drawer-toolbar-expandable-content"
1483
1584
  >
1484
1585
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -1492,83 +1593,25 @@ wrapperTag: div
1492
1593
  role="group"
1493
1594
  >
1494
1595
  <div class="pf-v5-c-input-group__item">
1495
- <div class="pf-v5-c-select" style="width: 124px">
1496
- <span
1497
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1498
- hidden
1499
- >Choose one</span>
1500
-
1501
- <button
1502
- class="pf-v5-c-select__toggle"
1503
- type="button"
1504
- id="primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1505
- aria-haspopup="true"
1506
- aria-expanded="false"
1507
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label primary-detail-collapsed-example-drawer-toolbar-select-name-toggle"
1508
- >
1509
- <div class="pf-v5-c-select__toggle-wrapper">
1510
- <span class="pf-v5-c-select__toggle-icon">
1511
- <i class="fas fa-filter" aria-hidden="true"></i>
1512
- </span>
1513
- <span class="pf-v5-c-select__toggle-text">Name</span>
1514
- </div>
1515
- <span class="pf-v5-c-select__toggle-arrow">
1596
+ <button
1597
+ class="pf-v5-c-menu-toggle"
1598
+ type="button"
1599
+ aria-expanded="false"
1600
+ id="primary-detail-collapsed-example-drawer-toolbar-search-filter-menu"
1601
+ >
1602
+ <span class="pf-v5-c-menu-toggle__icon">
1603
+ <i class="fas fa-filter" aria-hidden="true"></i>
1604
+ </span>
1605
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
1606
+ <span class="pf-v5-c-menu-toggle__controls">
1607
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1516
1608
  <i
1517
- class="fas fa-caret-down"
1609
+ class="fas fa-angle-down"
1518
1610
  aria-hidden="true"
1519
1611
  ></i>
1520
1612
  </span>
1521
- </button>
1522
-
1523
- <ul
1524
- class="pf-v5-c-select__menu"
1525
- role="listbox"
1526
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
1527
- hidden
1528
- >
1529
- <li role="presentation">
1530
- <button
1531
- class="pf-v5-c-select__menu-item"
1532
- role="option"
1533
- >Running</button>
1534
- </li>
1535
- <li role="presentation">
1536
- <button
1537
- class="pf-v5-c-select__menu-item pf-m-selected"
1538
- role="option"
1539
- aria-selected="true"
1540
- >
1541
- Stopped
1542
- <span
1543
- class="pf-v5-c-select__menu-item-icon"
1544
- >
1545
- <i
1546
- class="fas fa-check"
1547
- aria-hidden="true"
1548
- ></i>
1549
- </span>
1550
- </button>
1551
- </li>
1552
- <li role="presentation">
1553
- <button
1554
- class="pf-v5-c-select__menu-item"
1555
- role="option"
1556
- >Down</button>
1557
- </li>
1558
- <li role="presentation">
1559
- <button
1560
- class="pf-v5-c-select__menu-item"
1561
- role="option"
1562
- >Degraded</button>
1563
- </li>
1564
- <li role="presentation">
1565
- <button
1566
- class="pf-v5-c-select__menu-item"
1567
- role="option"
1568
- >Needs maintenance</button>
1569
- </li>
1570
- </ul>
1571
- </div>
1613
+ </span>
1614
+ </button>
1572
1615
  </div>
1573
1616
  <div class="pf-v5-c-input-group__item pf-m-fill">
1574
1617
  <div class="pf-v5-c-text-input-group">
@@ -1624,73 +1667,77 @@ wrapperTag: div
1624
1667
  >
1625
1668
  <label
1626
1669
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1627
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1670
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1671
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1628
1672
  >
1629
1673
  <input
1630
1674
  class="pf-v5-c-check__input"
1631
1675
  type="checkbox"
1632
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1633
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active"
1676
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-description"
1677
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1678
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-input"
1634
1679
  />
1635
-
1636
1680
  <span class="pf-v5-c-check__label">Active</span>
1637
1681
  <span
1638
1682
  class="pf-v5-c-check__description"
1683
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-active-description"
1639
1684
  >This is a description</span>
1640
1685
  </label>
1641
1686
  <label
1642
1687
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1643
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1688
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1689
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1644
1690
  >
1645
1691
  <input
1646
1692
  class="pf-v5-c-check__input"
1647
1693
  type="checkbox"
1648
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1649
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled"
1694
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-description"
1695
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1696
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-input"
1650
1697
  />
1651
-
1652
1698
  <span class="pf-v5-c-check__label">Canceled</span>
1653
1699
  <span
1654
1700
  class="pf-v5-c-check__description"
1701
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-canceled-description"
1655
1702
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1656
1703
  </label>
1657
1704
  <label
1658
1705
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1659
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1706
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1707
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1660
1708
  >
1661
1709
  <input
1662
1710
  class="pf-v5-c-check__input"
1663
1711
  type="checkbox"
1664
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1665
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused"
1712
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1713
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-paused-input"
1666
1714
  />
1667
-
1668
1715
  <span class="pf-v5-c-check__label">Paused</span>
1669
1716
  </label>
1670
1717
  <label
1671
1718
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1672
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1719
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1720
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1673
1721
  >
1674
1722
  <input
1675
1723
  class="pf-v5-c-check__input"
1676
1724
  type="checkbox"
1677
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1678
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning"
1725
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1726
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-warning-input"
1679
1727
  />
1680
-
1681
1728
  <span class="pf-v5-c-check__label">Warning</span>
1682
1729
  </label>
1683
1730
  <label
1684
1731
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1685
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1732
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1733
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1686
1734
  >
1687
1735
  <input
1688
1736
  class="pf-v5-c-check__input"
1689
1737
  type="checkbox"
1690
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1691
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted"
1738
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1739
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-status-restarted-input"
1692
1740
  />
1693
-
1694
1741
  <span class="pf-v5-c-check__label">Restarted</span>
1695
1742
  </label>
1696
1743
  </fieldset>
@@ -1727,73 +1774,77 @@ wrapperTag: div
1727
1774
  >
1728
1775
  <label
1729
1776
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1730
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1777
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1778
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1731
1779
  >
1732
1780
  <input
1733
1781
  class="pf-v5-c-check__input"
1734
1782
  type="checkbox"
1735
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1736
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active"
1783
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-description"
1784
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1785
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-input"
1737
1786
  />
1738
-
1739
1787
  <span class="pf-v5-c-check__label">Active</span>
1740
1788
  <span
1741
1789
  class="pf-v5-c-check__description"
1790
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-active-description"
1742
1791
  >This is a description</span>
1743
1792
  </label>
1744
1793
  <label
1745
1794
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1746
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1795
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1796
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1747
1797
  >
1748
1798
  <input
1749
1799
  class="pf-v5-c-check__input"
1750
1800
  type="checkbox"
1751
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1752
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled"
1801
+ aria-describedby="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-description"
1802
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1803
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-input"
1753
1804
  />
1754
-
1755
1805
  <span class="pf-v5-c-check__label">Canceled</span>
1756
1806
  <span
1757
1807
  class="pf-v5-c-check__description"
1808
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-canceled-description"
1758
1809
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1759
1810
  </label>
1760
1811
  <label
1761
1812
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1762
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1813
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1814
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1763
1815
  >
1764
1816
  <input
1765
1817
  class="pf-v5-c-check__input"
1766
1818
  type="checkbox"
1767
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1768
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused"
1819
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1820
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-paused-input"
1769
1821
  />
1770
-
1771
1822
  <span class="pf-v5-c-check__label">Paused</span>
1772
1823
  </label>
1773
1824
  <label
1774
1825
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1775
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1826
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1827
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1776
1828
  >
1777
1829
  <input
1778
1830
  class="pf-v5-c-check__input"
1779
1831
  type="checkbox"
1780
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1781
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning"
1832
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1833
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-warning-input"
1782
1834
  />
1783
-
1784
1835
  <span class="pf-v5-c-check__label">Warning</span>
1785
1836
  </label>
1786
1837
  <label
1787
1838
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1788
- for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1839
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1840
+ for="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1789
1841
  >
1790
1842
  <input
1791
1843
  class="pf-v5-c-check__input"
1792
1844
  type="checkbox"
1793
- id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1794
- name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted"
1845
+ id="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1846
+ name="primary-detail-collapsed-example-drawer-toolbar-select-checkbox-risk-restarted-input"
1795
1847
  />
1796
-
1797
1848
  <span class="pf-v5-c-check__label">Restarted</span>
1798
1849
  </label>
1799
1850
  </fieldset>
@@ -1809,7 +1860,10 @@ wrapperTag: div
1809
1860
  type="button"
1810
1861
  aria-label="Sort"
1811
1862
  >
1812
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
1863
+ <i
1864
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
1865
+ aria-hidden="true"
1866
+ ></i>
1813
1867
  </button>
1814
1868
  </div>
1815
1869
 
@@ -1861,57 +1915,59 @@ wrapperTag: div
1861
1915
 
1862
1916
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
1863
1917
  <div class="pf-v5-c-pagination pf-m-compact">
1864
- <div class="pf-v5-c-options-menu">
1865
- <button
1866
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1867
- type="button"
1868
- id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1869
- aria-haspopup="listbox"
1870
- aria-expanded="false"
1871
- >
1872
- <span class="pf-v5-c-options-menu__toggle-text">
1873
- <b>1 - 10</b>&nbsp;of&nbsp;
1874
- <b>36</b>
1875
- </span>
1876
- <div class="pf-v5-c-options-menu__toggle-icon">
1877
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1878
- </div>
1879
- </button>
1880
- <ul
1881
- class="pf-v5-c-options-menu__menu"
1882
- role="menu"
1883
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1884
- hidden
1885
- >
1886
- <li role="none">
1887
- <button
1888
- class="pf-v5-c-options-menu__menu-item"
1889
- type="button"
1890
- role="menuitem"
1891
- >5 per page</button>
1892
- </li>
1893
- <li role="none">
1894
- <button
1895
- class="pf-v5-c-options-menu__menu-item"
1896
- type="button"
1897
- role="menuitem"
1898
- >
1899
- 10 per page
1900
- <div
1901
- class="pf-v5-c-options-menu__menu-item-icon"
1918
+ <div class="pf-v5-c-pagination__page-menu">
1919
+ <div class="pf-v5-c-options-menu">
1920
+ <button
1921
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1922
+ type="button"
1923
+ id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1924
+ aria-haspopup="listbox"
1925
+ aria-expanded="false"
1926
+ >
1927
+ <span class="pf-v5-c-options-menu__toggle-text">
1928
+ <b>1 - 10</b>&nbsp;of&nbsp;
1929
+ <b>36</b>
1930
+ </span>
1931
+ <div class="pf-v5-c-options-menu__toggle-icon">
1932
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1933
+ </div>
1934
+ </button>
1935
+ <ul
1936
+ class="pf-v5-c-options-menu__menu"
1937
+ role="menu"
1938
+ aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1939
+ hidden
1940
+ >
1941
+ <li role="none">
1942
+ <button
1943
+ class="pf-v5-c-options-menu__menu-item"
1944
+ type="button"
1945
+ role="menuitem"
1946
+ >5 per page</button>
1947
+ </li>
1948
+ <li role="none">
1949
+ <button
1950
+ class="pf-v5-c-options-menu__menu-item"
1951
+ type="button"
1952
+ role="menuitem"
1902
1953
  >
1903
- <i class="fas fa-check" aria-hidden="true"></i>
1904
- </div>
1905
- </button>
1906
- </li>
1907
- <li role="none">
1908
- <button
1909
- class="pf-v5-c-options-menu__menu-item"
1910
- type="button"
1911
- role="menuitem"
1912
- >20 per page</button>
1913
- </li>
1914
- </ul>
1954
+ 10 per page
1955
+ <div
1956
+ class="pf-v5-c-options-menu__menu-item-icon"
1957
+ >
1958
+ <i class="fas fa-check" aria-hidden="true"></i>
1959
+ </div>
1960
+ </button>
1961
+ </li>
1962
+ <li role="none">
1963
+ <button
1964
+ class="pf-v5-c-options-menu__menu-item"
1965
+ type="button"
1966
+ role="menuitem"
1967
+ >20 per page</button>
1968
+ </li>
1969
+ </ul>
1970
+ </div>
1915
1971
  </div>
1916
1972
  <nav
1917
1973
  class="pf-v5-c-pagination__nav"
@@ -2466,12 +2522,76 @@ wrapperTag: div
2466
2522
  </span>
2467
2523
  <div class="pf-v5-c-masthead__main">
2468
2524
  <a class="pf-v5-c-masthead__brand" href="#">
2469
- <img
2470
- class="pf-v5-c-brand"
2471
- src="/assets/images/pf-logo.svg"
2472
- alt="PatternFly logo"
2473
- style="--pf-v5-c-brand--Height:36px"
2474
- />
2525
+ <svg height="40px" viewBox="0 0 679 158">
2526
+ <title>PF-HorizontalLogo-Color</title>
2527
+ <defs>
2528
+ <linearGradient
2529
+ x1="68%"
2530
+ y1="2.25860997e-13%"
2531
+ x2="32%"
2532
+ y2="100%"
2533
+ id="linearGradient-primary-detail-content-body-padding-example-masthead"
2534
+ >
2535
+ <stop stop-color="#2B9AF3" offset="0%" />
2536
+ <stop
2537
+ stop-color="#73BCF7"
2538
+ stop-opacity="0.502212631"
2539
+ offset="100%"
2540
+ />
2541
+ </linearGradient>
2542
+ </defs>
2543
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2544
+ <g
2545
+ transform="translate(206.000000, 45.750000)"
2546
+ fill="var(--pf-t--global--text--color--regular)"
2547
+ fill-rule="nonzero"
2548
+ >
2549
+ <path
2550
+ 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"
2551
+ />
2552
+ <path
2553
+ 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"
2554
+ />
2555
+ <path
2556
+ 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"
2557
+ />
2558
+ <path
2559
+ 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"
2560
+ />
2561
+ <path
2562
+ 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"
2563
+ />
2564
+ <path
2565
+ 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"
2566
+ />
2567
+ <path
2568
+ 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"
2569
+ />
2570
+ <polygon
2571
+ 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"
2572
+ />
2573
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
2574
+ <path
2575
+ 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"
2576
+ />
2577
+ </g>
2578
+ <g transform="translate(0.000000, 0.000000)">
2579
+ <path
2580
+ 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"
2581
+ fill="#0066CC"
2582
+ />
2583
+ <path
2584
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2585
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2586
+ />
2587
+ <path
2588
+ 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"
2589
+ fill="url(#linearGradient-primary-detail-content-body-padding-example-masthead)"
2590
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2591
+ />
2592
+ </g>
2593
+ </g>
2594
+ </svg>
2475
2595
  </a>
2476
2596
  </div>
2477
2597
  <div class="pf-v5-c-masthead__content">
@@ -2481,8 +2601,38 @@ wrapperTag: div
2481
2601
  >
2482
2602
  <div class="pf-v5-c-toolbar__content">
2483
2603
  <div class="pf-v5-c-toolbar__content-section">
2604
+ <div class="pf-v5-c-toolbar__item">
2605
+ <button
2606
+ class="pf-v5-c-menu-toggle"
2607
+ type="button"
2608
+ aria-expanded="false"
2609
+ >
2610
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2611
+ <span class="pf-v5-c-menu-toggle__controls">
2612
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2613
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2614
+ </span>
2615
+ </span>
2616
+ </button>
2617
+ </div>
2618
+
2619
+ <div class="pf-v5-c-toolbar__item">
2620
+ <button
2621
+ class="pf-v5-c-menu-toggle"
2622
+ type="button"
2623
+ aria-expanded="false"
2624
+ >
2625
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2626
+ <span class="pf-v5-c-menu-toggle__controls">
2627
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2628
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2629
+ </span>
2630
+ </span>
2631
+ </button>
2632
+ </div>
2633
+
2484
2634
  <div
2485
- 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"
2635
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2486
2636
  >
2487
2637
  <div
2488
2638
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2529,27 +2679,6 @@ wrapperTag: div
2529
2679
  </button>
2530
2680
  </div>
2531
2681
  </div>
2532
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2533
- <button
2534
- class="pf-v5-c-menu-toggle pf-m-full-height"
2535
- type="button"
2536
- aria-expanded="false"
2537
- >
2538
- <span class="pf-v5-c-menu-toggle__icon">
2539
- <img
2540
- class="pf-v5-c-avatar"
2541
- alt="Avatar image"
2542
- src="/assets/images/img_avatar-light.svg"
2543
- />
2544
- </span>
2545
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2546
- <span class="pf-v5-c-menu-toggle__controls">
2547
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2548
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2549
- </span>
2550
- </span>
2551
- </button>
2552
- </div>
2553
2682
  </div>
2554
2683
  </div>
2555
2684
  </div>
@@ -2654,10 +2783,10 @@ wrapperTag: div
2654
2783
  >
2655
2784
  <div class="pf-v5-c-toolbar__toggle">
2656
2785
  <button
2657
- class="pf-v5-c-button pf-m-plain"
2786
+ class="pf-v5-c-menu-toggle pf-m-plain"
2658
2787
  type="button"
2659
- aria-label="Show filters"
2660
2788
  aria-expanded="false"
2789
+ aria-label="Show filters"
2661
2790
  aria-controls="primary-detail-content-body-padding-example-drawer-toolbar-expandable-content"
2662
2791
  >
2663
2792
  <i class="fas fa-filter" aria-hidden="true"></i>
@@ -2695,73 +2824,77 @@ wrapperTag: div
2695
2824
  >
2696
2825
  <label
2697
2826
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2698
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2827
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2828
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2699
2829
  >
2700
2830
  <input
2701
2831
  class="pf-v5-c-check__input"
2702
2832
  type="checkbox"
2703
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2704
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active"
2833
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-description"
2834
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2835
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-input"
2705
2836
  />
2706
-
2707
2837
  <span class="pf-v5-c-check__label">Active</span>
2708
2838
  <span
2709
2839
  class="pf-v5-c-check__description"
2840
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-active-description"
2710
2841
  >This is a description</span>
2711
2842
  </label>
2712
2843
  <label
2713
2844
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2714
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2845
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2846
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2715
2847
  >
2716
2848
  <input
2717
2849
  class="pf-v5-c-check__input"
2718
2850
  type="checkbox"
2719
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2720
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled"
2851
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-description"
2852
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2853
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-input"
2721
2854
  />
2722
-
2723
2855
  <span class="pf-v5-c-check__label">Canceled</span>
2724
2856
  <span
2725
2857
  class="pf-v5-c-check__description"
2858
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-canceled-description"
2726
2859
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2727
2860
  </label>
2728
2861
  <label
2729
2862
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2730
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2863
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2864
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2731
2865
  >
2732
2866
  <input
2733
2867
  class="pf-v5-c-check__input"
2734
2868
  type="checkbox"
2735
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2736
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused"
2869
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2870
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-paused-input"
2737
2871
  />
2738
-
2739
2872
  <span class="pf-v5-c-check__label">Paused</span>
2740
2873
  </label>
2741
2874
  <label
2742
2875
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2743
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2876
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2877
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2744
2878
  >
2745
2879
  <input
2746
2880
  class="pf-v5-c-check__input"
2747
2881
  type="checkbox"
2748
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2749
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning"
2882
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2883
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-warning-input"
2750
2884
  />
2751
-
2752
2885
  <span class="pf-v5-c-check__label">Warning</span>
2753
2886
  </label>
2754
2887
  <label
2755
2888
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2756
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2889
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2890
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2757
2891
  >
2758
2892
  <input
2759
2893
  class="pf-v5-c-check__input"
2760
2894
  type="checkbox"
2761
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2762
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted"
2895
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2896
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-status-restarted-input"
2763
2897
  />
2764
-
2765
2898
  <span class="pf-v5-c-check__label">Restarted</span>
2766
2899
  </label>
2767
2900
  </fieldset>
@@ -2798,73 +2931,77 @@ wrapperTag: div
2798
2931
  >
2799
2932
  <label
2800
2933
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2801
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2934
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2935
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2802
2936
  >
2803
2937
  <input
2804
2938
  class="pf-v5-c-check__input"
2805
2939
  type="checkbox"
2806
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2807
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active"
2940
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-description"
2941
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2942
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-input"
2808
2943
  />
2809
-
2810
2944
  <span class="pf-v5-c-check__label">Active</span>
2811
2945
  <span
2812
2946
  class="pf-v5-c-check__description"
2947
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-active-description"
2813
2948
  >This is a description</span>
2814
2949
  </label>
2815
2950
  <label
2816
2951
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
2817
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2952
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2953
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2818
2954
  >
2819
2955
  <input
2820
2956
  class="pf-v5-c-check__input"
2821
2957
  type="checkbox"
2822
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2823
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled"
2958
+ aria-describedby="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-description"
2959
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2960
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-input"
2824
2961
  />
2825
-
2826
2962
  <span class="pf-v5-c-check__label">Canceled</span>
2827
2963
  <span
2828
2964
  class="pf-v5-c-check__description"
2965
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-canceled-description"
2829
2966
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2830
2967
  </label>
2831
2968
  <label
2832
2969
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2833
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2970
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2971
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2834
2972
  >
2835
2973
  <input
2836
2974
  class="pf-v5-c-check__input"
2837
2975
  type="checkbox"
2838
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2839
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused"
2976
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2977
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-paused-input"
2840
2978
  />
2841
-
2842
2979
  <span class="pf-v5-c-check__label">Paused</span>
2843
2980
  </label>
2844
2981
  <label
2845
2982
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2846
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2983
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2984
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2847
2985
  >
2848
2986
  <input
2849
2987
  class="pf-v5-c-check__input"
2850
2988
  type="checkbox"
2851
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2852
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning"
2989
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2990
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-warning-input"
2853
2991
  />
2854
-
2855
2992
  <span class="pf-v5-c-check__label">Warning</span>
2856
2993
  </label>
2857
2994
  <label
2858
2995
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2859
- for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
2996
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
2997
+ for="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
2860
2998
  >
2861
2999
  <input
2862
3000
  class="pf-v5-c-check__input"
2863
3001
  type="checkbox"
2864
- id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
2865
- name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted"
3002
+ id="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
3003
+ name="primary-detail-content-body-padding-example-drawer-toolbar-select-checkbox-risk-restarted-input"
2866
3004
  />
2867
-
2868
3005
  <span class="pf-v5-c-check__label">Restarted</span>
2869
3006
  </label>
2870
3007
  </fieldset>
@@ -2880,7 +3017,10 @@ wrapperTag: div
2880
3017
  type="button"
2881
3018
  aria-label="Sort"
2882
3019
  >
2883
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
3020
+ <i
3021
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
3022
+ aria-hidden="true"
3023
+ ></i>
2884
3024
  </button>
2885
3025
  </div>
2886
3026
 
@@ -2932,81 +3072,83 @@ wrapperTag: div
2932
3072
 
2933
3073
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
2934
3074
  <div class="pf-v5-c-pagination pf-m-compact">
2935
- <div class="pf-v5-c-options-menu">
2936
- <button
2937
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2938
- type="button"
2939
- id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
2940
- aria-haspopup="listbox"
2941
- aria-expanded="false"
2942
- >
2943
- <span class="pf-v5-c-options-menu__toggle-text">
2944
- <b>1 - 10</b>&nbsp;of&nbsp;
2945
- <b>36</b>
2946
- </span>
2947
- <div class="pf-v5-c-options-menu__toggle-icon">
2948
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2949
- </div>
2950
- </button>
2951
- <ul
2952
- class="pf-v5-c-options-menu__menu"
2953
- role="menu"
2954
- aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
2955
- hidden
2956
- >
2957
- <li role="none">
2958
- <button
2959
- class="pf-v5-c-options-menu__menu-item"
2960
- type="button"
2961
- role="menuitem"
2962
- >5 per page</button>
2963
- </li>
2964
- <li role="none">
2965
- <button
2966
- class="pf-v5-c-options-menu__menu-item"
2967
- type="button"
2968
- role="menuitem"
2969
- >
2970
- 10 per page
2971
- <div
2972
- class="pf-v5-c-options-menu__menu-item-icon"
2973
- >
2974
- <i class="fas fa-check" aria-hidden="true"></i>
2975
- </div>
2976
- </button>
2977
- </li>
2978
- <li role="none">
2979
- <button
2980
- class="pf-v5-c-options-menu__menu-item"
2981
- type="button"
2982
- role="menuitem"
2983
- >20 per page</button>
2984
- </li>
2985
- </ul>
2986
- </div>
2987
- <nav
2988
- class="pf-v5-c-pagination__nav"
2989
- aria-label="Toolbar top pagination"
2990
- >
2991
- <div
2992
- class="pf-v5-c-pagination__nav-control pf-m-prev"
2993
- >
3075
+ <div class="pf-v5-c-pagination__page-menu">
3076
+ <div class="pf-v5-c-options-menu">
2994
3077
  <button
2995
- class="pf-v5-c-button pf-m-plain"
3078
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
2996
3079
  type="button"
2997
- disabled
2998
- aria-label="Go to previous page"
3080
+ id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3081
+ aria-haspopup="listbox"
3082
+ aria-expanded="false"
2999
3083
  >
3000
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3084
+ <span class="pf-v5-c-options-menu__toggle-text">
3085
+ <b>1 - 10</b>&nbsp;of&nbsp;
3086
+ <b>36</b>
3087
+ </span>
3088
+ <div class="pf-v5-c-options-menu__toggle-icon">
3089
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3090
+ </div>
3001
3091
  </button>
3002
- </div>
3003
- <div
3004
- class="pf-v5-c-pagination__nav-control pf-m-next"
3005
- >
3006
- <button
3007
- class="pf-v5-c-button pf-m-plain"
3008
- type="button"
3009
- aria-label="Go to next page"
3092
+ <ul
3093
+ class="pf-v5-c-options-menu__menu"
3094
+ role="menu"
3095
+ aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3096
+ hidden
3097
+ >
3098
+ <li role="none">
3099
+ <button
3100
+ class="pf-v5-c-options-menu__menu-item"
3101
+ type="button"
3102
+ role="menuitem"
3103
+ >5 per page</button>
3104
+ </li>
3105
+ <li role="none">
3106
+ <button
3107
+ class="pf-v5-c-options-menu__menu-item"
3108
+ type="button"
3109
+ role="menuitem"
3110
+ >
3111
+ 10 per page
3112
+ <div
3113
+ class="pf-v5-c-options-menu__menu-item-icon"
3114
+ >
3115
+ <i class="fas fa-check" aria-hidden="true"></i>
3116
+ </div>
3117
+ </button>
3118
+ </li>
3119
+ <li role="none">
3120
+ <button
3121
+ class="pf-v5-c-options-menu__menu-item"
3122
+ type="button"
3123
+ role="menuitem"
3124
+ >20 per page</button>
3125
+ </li>
3126
+ </ul>
3127
+ </div>
3128
+ </div>
3129
+ <nav
3130
+ class="pf-v5-c-pagination__nav"
3131
+ aria-label="Toolbar top pagination"
3132
+ >
3133
+ <div
3134
+ class="pf-v5-c-pagination__nav-control pf-m-prev"
3135
+ >
3136
+ <button
3137
+ class="pf-v5-c-button pf-m-plain"
3138
+ type="button"
3139
+ disabled
3140
+ aria-label="Go to previous page"
3141
+ >
3142
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3143
+ </button>
3144
+ </div>
3145
+ <div
3146
+ class="pf-v5-c-pagination__nav-control pf-m-next"
3147
+ >
3148
+ <button
3149
+ class="pf-v5-c-button pf-m-plain"
3150
+ type="button"
3151
+ aria-label="Go to next page"
3010
3152
  >
3011
3153
  <i class="fas fa-angle-right" aria-hidden="true"></i>
3012
3154
  </button>
@@ -3537,12 +3679,76 @@ wrapperTag: div
3537
3679
  </span>
3538
3680
  <div class="pf-v5-c-masthead__main">
3539
3681
  <a class="pf-v5-c-masthead__brand" href="#">
3540
- <img
3541
- class="pf-v5-c-brand"
3542
- src="/assets/images/pf-logo.svg"
3543
- alt="PatternFly logo"
3544
- style="--pf-v5-c-brand--Height:36px"
3545
- />
3682
+ <svg height="40px" viewBox="0 0 679 158">
3683
+ <title>PF-HorizontalLogo-Color</title>
3684
+ <defs>
3685
+ <linearGradient
3686
+ x1="68%"
3687
+ y1="2.25860997e-13%"
3688
+ x2="32%"
3689
+ y2="100%"
3690
+ id="linearGradient-primary-detail-card-view-expanded-example-masthead"
3691
+ >
3692
+ <stop stop-color="#2B9AF3" offset="0%" />
3693
+ <stop
3694
+ stop-color="#73BCF7"
3695
+ stop-opacity="0.502212631"
3696
+ offset="100%"
3697
+ />
3698
+ </linearGradient>
3699
+ </defs>
3700
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3701
+ <g
3702
+ transform="translate(206.000000, 45.750000)"
3703
+ fill="var(--pf-t--global--text--color--regular)"
3704
+ fill-rule="nonzero"
3705
+ >
3706
+ <path
3707
+ 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"
3708
+ />
3709
+ <path
3710
+ 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"
3711
+ />
3712
+ <path
3713
+ 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"
3714
+ />
3715
+ <path
3716
+ 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"
3717
+ />
3718
+ <path
3719
+ 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"
3720
+ />
3721
+ <path
3722
+ 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"
3723
+ />
3724
+ <path
3725
+ 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"
3726
+ />
3727
+ <polygon
3728
+ 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"
3729
+ />
3730
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3731
+ <path
3732
+ 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"
3733
+ />
3734
+ </g>
3735
+ <g transform="translate(0.000000, 0.000000)">
3736
+ <path
3737
+ 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"
3738
+ fill="#0066CC"
3739
+ />
3740
+ <path
3741
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3742
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3743
+ />
3744
+ <path
3745
+ 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"
3746
+ fill="url(#linearGradient-primary-detail-card-view-expanded-example-masthead)"
3747
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3748
+ />
3749
+ </g>
3750
+ </g>
3751
+ </svg>
3546
3752
  </a>
3547
3753
  </div>
3548
3754
  <div class="pf-v5-c-masthead__content">
@@ -3552,8 +3758,38 @@ wrapperTag: div
3552
3758
  >
3553
3759
  <div class="pf-v5-c-toolbar__content">
3554
3760
  <div class="pf-v5-c-toolbar__content-section">
3761
+ <div class="pf-v5-c-toolbar__item">
3762
+ <button
3763
+ class="pf-v5-c-menu-toggle"
3764
+ type="button"
3765
+ aria-expanded="false"
3766
+ >
3767
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3768
+ <span class="pf-v5-c-menu-toggle__controls">
3769
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3770
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3771
+ </span>
3772
+ </span>
3773
+ </button>
3774
+ </div>
3775
+
3776
+ <div class="pf-v5-c-toolbar__item">
3777
+ <button
3778
+ class="pf-v5-c-menu-toggle"
3779
+ type="button"
3780
+ aria-expanded="false"
3781
+ >
3782
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3783
+ <span class="pf-v5-c-menu-toggle__controls">
3784
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3785
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3786
+ </span>
3787
+ </span>
3788
+ </button>
3789
+ </div>
3790
+
3555
3791
  <div
3556
- 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"
3792
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3557
3793
  >
3558
3794
  <div
3559
3795
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3600,27 +3836,6 @@ wrapperTag: div
3600
3836
  </button>
3601
3837
  </div>
3602
3838
  </div>
3603
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3604
- <button
3605
- class="pf-v5-c-menu-toggle pf-m-full-height"
3606
- type="button"
3607
- aria-expanded="false"
3608
- >
3609
- <span class="pf-v5-c-menu-toggle__icon">
3610
- <img
3611
- class="pf-v5-c-avatar"
3612
- alt="Avatar image"
3613
- src="/assets/images/img_avatar-light.svg"
3614
- />
3615
- </span>
3616
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3617
- <span class="pf-v5-c-menu-toggle__controls">
3618
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3619
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3620
- </span>
3621
- </span>
3622
- </button>
3623
- </div>
3624
3839
  </div>
3625
3840
  </div>
3626
3841
  </div>
@@ -3721,65 +3936,46 @@ wrapperTag: div
3721
3936
  >
3722
3937
  <div class="pf-v5-c-toolbar__toggle">
3723
3938
  <button
3724
- class="pf-v5-c-button pf-m-plain"
3939
+ class="pf-v5-c-menu-toggle pf-m-plain"
3725
3940
  type="button"
3726
- aria-label="Show filters"
3727
3941
  aria-expanded="false"
3942
+ aria-label="Show filters"
3728
3943
  aria-controls="primary-detail-card-view-expanded-example-drawer-toolbar-expandable-content"
3729
3944
  >
3730
3945
  <i class="fas fa-filter" aria-hidden="true"></i>
3731
3946
  </button>
3732
3947
  </div>
3733
3948
  <div class="pf-v5-c-toolbar__item pf-m-bulk-select">
3734
- <div class="pf-v5-c-dropdown">
3735
- <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
3736
- <label
3737
- class="pf-v5-c-dropdown__toggle-check"
3738
- for="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
3739
- >
3740
- <div class="pf-v5-c-check pf-m-standalone">
3741
- <input
3742
- class="pf-v5-c-check__input"
3743
- type="checkbox"
3744
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
3745
- aria-label="Select all"
3746
- />
3747
- </div>
3748
- </label>
3749
-
3750
- <button
3751
- class="pf-v5-c-dropdown__toggle-button"
3752
- type="button"
3753
- aria-expanded="false"
3754
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-button"
3755
- aria-label="Dropdown toggle"
3756
- >
3757
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3758
- </button>
3759
- </div>
3760
- <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
3761
- <li role="none">
3762
- <button
3763
- class="pf-v5-c-dropdown__menu-item"
3764
- role="menuitem"
3765
- type="button"
3766
- >Select all</button>
3767
- </li>
3768
- <li role="none">
3769
- <button
3770
- class="pf-v5-c-dropdown__menu-item"
3771
- role="menuitem"
3772
- type="button"
3773
- >Select none</button>
3774
- </li>
3775
- <li role="none">
3776
- <button
3777
- class="pf-v5-c-dropdown__menu-item"
3778
- role="menuitem"
3779
- type="button"
3780
- >Other action</button>
3781
- </li>
3782
- </ul>
3949
+ <div
3950
+ class="pf-v5-c-menu-toggle pf-m-split-button"
3951
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check"
3952
+ >
3953
+ <label
3954
+ class="pf-v5-c-check pf-m-standalone"
3955
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check"
3956
+ for="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3957
+ >
3958
+ <input
3959
+ class="pf-v5-c-check__input"
3960
+ type="checkbox"
3961
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3962
+ name="primary-detail-card-view-expanded-example-drawer-toolbar-check-check-input"
3963
+ aria-label="Standalone check"
3964
+ />
3965
+ </label>
3966
+ <button
3967
+ class="pf-v5-c-menu-toggle__button"
3968
+ type="button"
3969
+ aria-expanded="false"
3970
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-menu-toggle-toggle-button"
3971
+ aria-label="Menu toggle"
3972
+ >
3973
+ <span class="pf-v5-c-menu-toggle__controls">
3974
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3975
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3976
+ </span>
3977
+ </span>
3978
+ </button>
3783
3979
  </div>
3784
3980
  </div>
3785
3981
 
@@ -3790,75 +3986,22 @@ wrapperTag: div
3790
3986
  role="group"
3791
3987
  >
3792
3988
  <div class="pf-v5-c-input-group__item">
3793
- <div class="pf-v5-c-select" style="width: 124px">
3794
- <span
3795
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
3796
- hidden
3797
- >Choose one</span>
3798
-
3799
- <button
3800
- class="pf-v5-c-select__toggle"
3801
- type="button"
3802
- id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
3803
- aria-haspopup="true"
3804
- aria-expanded="false"
3805
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label primary-detail-card-view-expanded-example-drawer-toolbar-select-name-toggle"
3806
- >
3807
- <div class="pf-v5-c-select__toggle-wrapper">
3808
- <span class="pf-v5-c-select__toggle-icon">
3809
- <i class="fas fa-filter" aria-hidden="true"></i>
3810
- </span>
3811
- <span class="pf-v5-c-select__toggle-text">Name</span>
3812
- </div>
3813
- <span class="pf-v5-c-select__toggle-arrow">
3814
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3989
+ <button
3990
+ class="pf-v5-c-menu-toggle"
3991
+ type="button"
3992
+ aria-expanded="false"
3993
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-search-filter-menu"
3994
+ >
3995
+ <span class="pf-v5-c-menu-toggle__icon">
3996
+ <i class="fas fa-filter" aria-hidden="true"></i>
3997
+ </span>
3998
+ <span class="pf-v5-c-menu-toggle__text">Name</span>
3999
+ <span class="pf-v5-c-menu-toggle__controls">
4000
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4001
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3815
4002
  </span>
3816
- </button>
3817
-
3818
- <ul
3819
- class="pf-v5-c-select__menu"
3820
- role="listbox"
3821
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
3822
- hidden
3823
- >
3824
- <li role="presentation">
3825
- <button
3826
- class="pf-v5-c-select__menu-item"
3827
- role="option"
3828
- >Running</button>
3829
- </li>
3830
- <li role="presentation">
3831
- <button
3832
- class="pf-v5-c-select__menu-item pf-m-selected"
3833
- role="option"
3834
- aria-selected="true"
3835
- >
3836
- Stopped
3837
- <span class="pf-v5-c-select__menu-item-icon">
3838
- <i class="fas fa-check" aria-hidden="true"></i>
3839
- </span>
3840
- </button>
3841
- </li>
3842
- <li role="presentation">
3843
- <button
3844
- class="pf-v5-c-select__menu-item"
3845
- role="option"
3846
- >Down</button>
3847
- </li>
3848
- <li role="presentation">
3849
- <button
3850
- class="pf-v5-c-select__menu-item"
3851
- role="option"
3852
- >Degraded</button>
3853
- </li>
3854
- <li role="presentation">
3855
- <button
3856
- class="pf-v5-c-select__menu-item"
3857
- role="option"
3858
- >Needs maintenance</button>
3859
- </li>
3860
- </ul>
3861
- </div>
4003
+ </span>
4004
+ </button>
3862
4005
  </div>
3863
4006
  <div class="pf-v5-c-input-group__item pf-m-fill">
3864
4007
  <div class="pf-v5-c-text-input-group">
@@ -3888,7 +4031,10 @@ wrapperTag: div
3888
4031
  type="button"
3889
4032
  aria-label="Sort"
3890
4033
  >
3891
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
4034
+ <i
4035
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
4036
+ aria-hidden="true"
4037
+ ></i>
3892
4038
  </button>
3893
4039
  </div>
3894
4040
 
@@ -3968,55 +4114,57 @@ wrapperTag: div
3968
4114
 
3969
4115
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3970
4116
  <div class="pf-v5-c-pagination pf-m-compact">
3971
- <div class="pf-v5-c-options-menu">
3972
- <button
3973
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3974
- type="button"
3975
- id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
3976
- aria-haspopup="listbox"
3977
- aria-expanded="false"
3978
- >
3979
- <span class="pf-v5-c-options-menu__toggle-text">
3980
- <b>1 - 10</b>&nbsp;of&nbsp;
3981
- <b>36</b>
3982
- </span>
3983
- <div class="pf-v5-c-options-menu__toggle-icon">
3984
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3985
- </div>
3986
- </button>
3987
- <ul
3988
- class="pf-v5-c-options-menu__menu"
3989
- role="menu"
3990
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
3991
- hidden
3992
- >
3993
- <li role="none">
3994
- <button
3995
- class="pf-v5-c-options-menu__menu-item"
3996
- type="button"
3997
- role="menuitem"
3998
- >5 per page</button>
3999
- </li>
4000
- <li role="none">
4001
- <button
4002
- class="pf-v5-c-options-menu__menu-item"
4003
- type="button"
4004
- role="menuitem"
4005
- >
4006
- 10 per page
4007
- <div class="pf-v5-c-options-menu__menu-item-icon">
4008
- <i class="fas fa-check" aria-hidden="true"></i>
4009
- </div>
4010
- </button>
4011
- </li>
4012
- <li role="none">
4013
- <button
4014
- class="pf-v5-c-options-menu__menu-item"
4015
- type="button"
4016
- role="menuitem"
4017
- >20 per page</button>
4018
- </li>
4019
- </ul>
4117
+ <div class="pf-v5-c-pagination__page-menu">
4118
+ <div class="pf-v5-c-options-menu">
4119
+ <button
4120
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4121
+ type="button"
4122
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4123
+ aria-haspopup="listbox"
4124
+ aria-expanded="false"
4125
+ >
4126
+ <span class="pf-v5-c-options-menu__toggle-text">
4127
+ <b>1 - 10</b>&nbsp;of&nbsp;
4128
+ <b>36</b>
4129
+ </span>
4130
+ <div class="pf-v5-c-options-menu__toggle-icon">
4131
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4132
+ </div>
4133
+ </button>
4134
+ <ul
4135
+ class="pf-v5-c-options-menu__menu"
4136
+ role="menu"
4137
+ aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4138
+ hidden
4139
+ >
4140
+ <li role="none">
4141
+ <button
4142
+ class="pf-v5-c-options-menu__menu-item"
4143
+ type="button"
4144
+ role="menuitem"
4145
+ >5 per page</button>
4146
+ </li>
4147
+ <li role="none">
4148
+ <button
4149
+ class="pf-v5-c-options-menu__menu-item"
4150
+ type="button"
4151
+ role="menuitem"
4152
+ >
4153
+ 10 per page
4154
+ <div class="pf-v5-c-options-menu__menu-item-icon">
4155
+ <i class="fas fa-check" aria-hidden="true"></i>
4156
+ </div>
4157
+ </button>
4158
+ </li>
4159
+ <li role="none">
4160
+ <button
4161
+ class="pf-v5-c-options-menu__menu-item"
4162
+ type="button"
4163
+ role="menuitem"
4164
+ >20 per page</button>
4165
+ </li>
4166
+ </ul>
4167
+ </div>
4020
4168
  </div>
4021
4169
  <nav
4022
4170
  class="pf-v5-c-pagination__nav"
@@ -5108,12 +5256,76 @@ wrapperTag: div
5108
5256
  </span>
5109
5257
  <div class="pf-v5-c-masthead__main">
5110
5258
  <a class="pf-v5-c-masthead__brand" href="#">
5111
- <img
5112
- class="pf-v5-c-brand"
5113
- src="/assets/images/pf-logo.svg"
5114
- alt="PatternFly logo"
5115
- style="--pf-v5-c-brand--Height:36px"
5116
- />
5259
+ <svg height="40px" viewBox="0 0 679 158">
5260
+ <title>PF-HorizontalLogo-Color</title>
5261
+ <defs>
5262
+ <linearGradient
5263
+ x1="68%"
5264
+ y1="2.25860997e-13%"
5265
+ x2="32%"
5266
+ y2="100%"
5267
+ id="linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead"
5268
+ >
5269
+ <stop stop-color="#2B9AF3" offset="0%" />
5270
+ <stop
5271
+ stop-color="#73BCF7"
5272
+ stop-opacity="0.502212631"
5273
+ offset="100%"
5274
+ />
5275
+ </linearGradient>
5276
+ </defs>
5277
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5278
+ <g
5279
+ transform="translate(206.000000, 45.750000)"
5280
+ fill="var(--pf-t--global--text--color--regular)"
5281
+ fill-rule="nonzero"
5282
+ >
5283
+ <path
5284
+ 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"
5285
+ />
5286
+ <path
5287
+ 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"
5288
+ />
5289
+ <path
5290
+ 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"
5291
+ />
5292
+ <path
5293
+ 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"
5294
+ />
5295
+ <path
5296
+ 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"
5297
+ />
5298
+ <path
5299
+ 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"
5300
+ />
5301
+ <path
5302
+ 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"
5303
+ />
5304
+ <polygon
5305
+ 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"
5306
+ />
5307
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
5308
+ <path
5309
+ 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"
5310
+ />
5311
+ </g>
5312
+ <g transform="translate(0.000000, 0.000000)">
5313
+ <path
5314
+ 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"
5315
+ fill="#0066CC"
5316
+ />
5317
+ <path
5318
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5319
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5320
+ />
5321
+ <path
5322
+ 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"
5323
+ fill="url(#linearGradient-primary-detail-card-simple-list-on-mobile-example-masthead)"
5324
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5325
+ />
5326
+ </g>
5327
+ </g>
5328
+ </svg>
5117
5329
  </a>
5118
5330
  </div>
5119
5331
  <div class="pf-v5-c-masthead__content">
@@ -5123,8 +5335,38 @@ wrapperTag: div
5123
5335
  >
5124
5336
  <div class="pf-v5-c-toolbar__content">
5125
5337
  <div class="pf-v5-c-toolbar__content-section">
5338
+ <div class="pf-v5-c-toolbar__item">
5339
+ <button
5340
+ class="pf-v5-c-menu-toggle"
5341
+ type="button"
5342
+ aria-expanded="false"
5343
+ >
5344
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
5345
+ <span class="pf-v5-c-menu-toggle__controls">
5346
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5347
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5348
+ </span>
5349
+ </span>
5350
+ </button>
5351
+ </div>
5352
+
5353
+ <div class="pf-v5-c-toolbar__item">
5354
+ <button
5355
+ class="pf-v5-c-menu-toggle"
5356
+ type="button"
5357
+ aria-expanded="false"
5358
+ >
5359
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
5360
+ <span class="pf-v5-c-menu-toggle__controls">
5361
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5362
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5363
+ </span>
5364
+ </span>
5365
+ </button>
5366
+ </div>
5367
+
5126
5368
  <div
5127
- 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"
5369
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
5128
5370
  >
5129
5371
  <div
5130
5372
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -5163,34 +5405,13 @@ wrapperTag: div
5163
5405
  <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
5164
5406
  <button
5165
5407
  class="pf-v5-c-menu-toggle pf-m-plain"
5166
- type="button"
5167
- aria-expanded="false"
5168
- aria-label="Actions"
5169
- >
5170
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5171
- </button>
5172
- </div>
5173
- </div>
5174
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
5175
- <button
5176
- class="pf-v5-c-menu-toggle pf-m-full-height"
5177
- type="button"
5178
- aria-expanded="false"
5179
- >
5180
- <span class="pf-v5-c-menu-toggle__icon">
5181
- <img
5182
- class="pf-v5-c-avatar"
5183
- alt="Avatar image"
5184
- src="/assets/images/img_avatar-light.svg"
5185
- />
5186
- </span>
5187
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
5188
- <span class="pf-v5-c-menu-toggle__controls">
5189
- <span class="pf-v5-c-menu-toggle__toggle-icon">
5190
- <i class="fas fa-angle-down" aria-hidden="true"></i>
5191
- </span>
5192
- </span>
5193
- </button>
5408
+ type="button"
5409
+ aria-expanded="false"
5410
+ aria-label="Actions"
5411
+ >
5412
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
5413
+ </button>
5414
+ </div>
5194
5415
  </div>
5195
5416
  </div>
5196
5417
  </div>
@@ -5488,12 +5709,76 @@ wrapperTag: div
5488
5709
  </span>
5489
5710
  <div class="pf-v5-c-masthead__main">
5490
5711
  <a class="pf-v5-c-masthead__brand" href="#">
5491
- <img
5492
- class="pf-v5-c-brand"
5493
- src="/assets/images/pf-logo.svg"
5494
- alt="PatternFly logo"
5495
- style="--pf-v5-c-brand--Height:36px"
5496
- />
5712
+ <svg height="40px" viewBox="0 0 679 158">
5713
+ <title>PF-HorizontalLogo-Color</title>
5714
+ <defs>
5715
+ <linearGradient
5716
+ x1="68%"
5717
+ y1="2.25860997e-13%"
5718
+ x2="32%"
5719
+ y2="100%"
5720
+ id="linearGradient-primary-detail-card-data-list-example-masthead"
5721
+ >
5722
+ <stop stop-color="#2B9AF3" offset="0%" />
5723
+ <stop
5724
+ stop-color="#73BCF7"
5725
+ stop-opacity="0.502212631"
5726
+ offset="100%"
5727
+ />
5728
+ </linearGradient>
5729
+ </defs>
5730
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5731
+ <g
5732
+ transform="translate(206.000000, 45.750000)"
5733
+ fill="var(--pf-t--global--text--color--regular)"
5734
+ fill-rule="nonzero"
5735
+ >
5736
+ <path
5737
+ 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"
5738
+ />
5739
+ <path
5740
+ 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"
5741
+ />
5742
+ <path
5743
+ 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"
5744
+ />
5745
+ <path
5746
+ 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"
5747
+ />
5748
+ <path
5749
+ 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"
5750
+ />
5751
+ <path
5752
+ 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"
5753
+ />
5754
+ <path
5755
+ 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"
5756
+ />
5757
+ <polygon
5758
+ 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"
5759
+ />
5760
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
5761
+ <path
5762
+ 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"
5763
+ />
5764
+ </g>
5765
+ <g transform="translate(0.000000, 0.000000)">
5766
+ <path
5767
+ 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"
5768
+ fill="#0066CC"
5769
+ />
5770
+ <path
5771
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5772
+ fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5773
+ />
5774
+ <path
5775
+ 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"
5776
+ fill="url(#linearGradient-primary-detail-card-data-list-example-masthead)"
5777
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5778
+ />
5779
+ </g>
5780
+ </g>
5781
+ </svg>
5497
5782
  </a>
5498
5783
  </div>
5499
5784
  <div class="pf-v5-c-masthead__content">
@@ -5503,8 +5788,38 @@ wrapperTag: div
5503
5788
  >
5504
5789
  <div class="pf-v5-c-toolbar__content">
5505
5790
  <div class="pf-v5-c-toolbar__content-section">
5791
+ <div class="pf-v5-c-toolbar__item">
5792
+ <button
5793
+ class="pf-v5-c-menu-toggle"
5794
+ type="button"
5795
+ aria-expanded="false"
5796
+ >
5797
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
5798
+ <span class="pf-v5-c-menu-toggle__controls">
5799
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5800
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5801
+ </span>
5802
+ </span>
5803
+ </button>
5804
+ </div>
5805
+
5806
+ <div class="pf-v5-c-toolbar__item">
5807
+ <button
5808
+ class="pf-v5-c-menu-toggle"
5809
+ type="button"
5810
+ aria-expanded="false"
5811
+ >
5812
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
5813
+ <span class="pf-v5-c-menu-toggle__controls">
5814
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5815
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5816
+ </span>
5817
+ </span>
5818
+ </button>
5819
+ </div>
5820
+
5506
5821
  <div
5507
- 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"
5822
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
5508
5823
  >
5509
5824
  <div
5510
5825
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -5551,27 +5866,6 @@ wrapperTag: div
5551
5866
  </button>
5552
5867
  </div>
5553
5868
  </div>
5554
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
5555
- <button
5556
- class="pf-v5-c-menu-toggle pf-m-full-height"
5557
- type="button"
5558
- aria-expanded="false"
5559
- >
5560
- <span class="pf-v5-c-menu-toggle__icon">
5561
- <img
5562
- class="pf-v5-c-avatar"
5563
- alt="Avatar image"
5564
- src="/assets/images/img_avatar-light.svg"
5565
- />
5566
- </span>
5567
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
5568
- <span class="pf-v5-c-menu-toggle__controls">
5569
- <span class="pf-v5-c-menu-toggle__toggle-icon">
5570
- <i class="fas fa-angle-down" aria-hidden="true"></i>
5571
- </span>
5572
- </span>
5573
- </button>
5574
- </div>
5575
5869
  </div>
5576
5870
  </div>
5577
5871
  </div>
@@ -5747,57 +6041,65 @@ wrapperTag: div
5747
6041
  <b>1 - 10</b> of
5748
6042
  <b>37</b>
5749
6043
  </div>
5750
- <div class="pf-v5-c-options-menu">
5751
- <button
5752
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
5753
- type="button"
5754
- id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5755
- aria-haspopup="listbox"
5756
- aria-expanded="false"
5757
- >
5758
- <span class="pf-v5-c-options-menu__toggle-text">
5759
- <b>1 - 10</b>&nbsp;of&nbsp;
5760
- <b>36</b>
5761
- </span>
5762
- <div class="pf-v5-c-options-menu__toggle-icon">
5763
- <i class="fas fa-caret-down" aria-hidden="true"></i>
5764
- </div>
5765
- </button>
5766
- <ul
5767
- class="pf-v5-c-options-menu__menu"
5768
- role="menu"
5769
- aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
5770
- hidden
5771
- >
5772
- <li role="none">
5773
- <button
5774
- class="pf-v5-c-options-menu__menu-item"
5775
- type="button"
5776
- role="menuitem"
5777
- >5 per page</button>
5778
- </li>
5779
- <li role="none">
5780
- <button
5781
- class="pf-v5-c-options-menu__menu-item"
5782
- type="button"
5783
- role="menuitem"
5784
- >
5785
- 10 per page
5786
- <div
5787
- class="pf-v5-c-options-menu__menu-item-icon"
6044
+ <div class="pf-v5-c-pagination__page-menu">
6045
+ <div class="pf-v5-c-options-menu">
6046
+ <button
6047
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6048
+ type="button"
6049
+ id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6050
+ aria-haspopup="listbox"
6051
+ aria-expanded="false"
6052
+ >
6053
+ <span class="pf-v5-c-options-menu__toggle-text">
6054
+ <b>1 - 10</b>&nbsp;of&nbsp;
6055
+ <b>36</b>
6056
+ </span>
6057
+ <div class="pf-v5-c-options-menu__toggle-icon">
6058
+ <i
6059
+ class="fas fa-caret-down"
6060
+ aria-hidden="true"
6061
+ ></i>
6062
+ </div>
6063
+ </button>
6064
+ <ul
6065
+ class="pf-v5-c-options-menu__menu"
6066
+ role="menu"
6067
+ aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6068
+ hidden
6069
+ >
6070
+ <li role="none">
6071
+ <button
6072
+ class="pf-v5-c-options-menu__menu-item"
6073
+ type="button"
6074
+ role="menuitem"
6075
+ >5 per page</button>
6076
+ </li>
6077
+ <li role="none">
6078
+ <button
6079
+ class="pf-v5-c-options-menu__menu-item"
6080
+ type="button"
6081
+ role="menuitem"
5788
6082
  >
5789
- <i class="fas fa-check" aria-hidden="true"></i>
5790
- </div>
5791
- </button>
5792
- </li>
5793
- <li role="none">
5794
- <button
5795
- class="pf-v5-c-options-menu__menu-item"
5796
- type="button"
5797
- role="menuitem"
5798
- >20 per page</button>
5799
- </li>
5800
- </ul>
6083
+ 10 per page
6084
+ <div
6085
+ class="pf-v5-c-options-menu__menu-item-icon"
6086
+ >
6087
+ <i
6088
+ class="fas fa-check"
6089
+ aria-hidden="true"
6090
+ ></i>
6091
+ </div>
6092
+ </button>
6093
+ </li>
6094
+ <li role="none">
6095
+ <button
6096
+ class="pf-v5-c-options-menu__menu-item"
6097
+ type="button"
6098
+ role="menuitem"
6099
+ >20 per page</button>
6100
+ </li>
6101
+ </ul>
6102
+ </div>
5801
6103
  </div>
5802
6104
  </div>
5803
6105
  </div>
@@ -6106,12 +6408,76 @@ wrapperTag: div
6106
6408
  </span>
6107
6409
  <div class="pf-v5-c-masthead__main">
6108
6410
  <a class="pf-v5-c-masthead__brand" href="#">
6109
- <img
6110
- class="pf-v5-c-brand"
6111
- src="/assets/images/pf-logo.svg"
6112
- alt="PatternFly logo"
6113
- style="--pf-v5-c-brand--Height:36px"
6114
- />
6411
+ <svg height="40px" viewBox="0 0 679 158">
6412
+ <title>PF-HorizontalLogo-Color</title>
6413
+ <defs>
6414
+ <linearGradient
6415
+ x1="68%"
6416
+ y1="2.25860997e-13%"
6417
+ x2="32%"
6418
+ y2="100%"
6419
+ id="linearGradient-primary-detail-inline-modifier-example-masthead"
6420
+ >
6421
+ <stop stop-color="#2B9AF3" offset="0%" />
6422
+ <stop
6423
+ stop-color="#73BCF7"
6424
+ stop-opacity="0.502212631"
6425
+ offset="100%"
6426
+ />
6427
+ </linearGradient>
6428
+ </defs>
6429
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
6430
+ <g
6431
+ transform="translate(206.000000, 45.750000)"
6432
+ fill="var(--pf-t--global--text--color--regular)"
6433
+ fill-rule="nonzero"
6434
+ >
6435
+ <path
6436
+ 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"
6437
+ />
6438
+ <path
6439
+ 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"
6440
+ />
6441
+ <path
6442
+ 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"
6443
+ />
6444
+ <path
6445
+ 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"
6446
+ />
6447
+ <path
6448
+ 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"
6449
+ />
6450
+ <path
6451
+ 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"
6452
+ />
6453
+ <path
6454
+ 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"
6455
+ />
6456
+ <polygon
6457
+ 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"
6458
+ />
6459
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
6460
+ <path
6461
+ 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"
6462
+ />
6463
+ </g>
6464
+ <g transform="translate(0.000000, 0.000000)">
6465
+ <path
6466
+ 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"
6467
+ fill="#0066CC"
6468
+ />
6469
+ <path
6470
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
6471
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
6472
+ />
6473
+ <path
6474
+ 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"
6475
+ fill="url(#linearGradient-primary-detail-inline-modifier-example-masthead)"
6476
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
6477
+ />
6478
+ </g>
6479
+ </g>
6480
+ </svg>
6115
6481
  </a>
6116
6482
  </div>
6117
6483
  <div class="pf-v5-c-masthead__content">
@@ -6121,8 +6487,38 @@ wrapperTag: div
6121
6487
  >
6122
6488
  <div class="pf-v5-c-toolbar__content">
6123
6489
  <div class="pf-v5-c-toolbar__content-section">
6490
+ <div class="pf-v5-c-toolbar__item">
6491
+ <button
6492
+ class="pf-v5-c-menu-toggle"
6493
+ type="button"
6494
+ aria-expanded="false"
6495
+ >
6496
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
6497
+ <span class="pf-v5-c-menu-toggle__controls">
6498
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
6499
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
6500
+ </span>
6501
+ </span>
6502
+ </button>
6503
+ </div>
6504
+
6505
+ <div class="pf-v5-c-toolbar__item">
6506
+ <button
6507
+ class="pf-v5-c-menu-toggle"
6508
+ type="button"
6509
+ aria-expanded="false"
6510
+ >
6511
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
6512
+ <span class="pf-v5-c-menu-toggle__controls">
6513
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
6514
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
6515
+ </span>
6516
+ </span>
6517
+ </button>
6518
+ </div>
6519
+
6124
6520
  <div
6125
- 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"
6521
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
6126
6522
  >
6127
6523
  <div
6128
6524
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -6169,27 +6565,6 @@ wrapperTag: div
6169
6565
  </button>
6170
6566
  </div>
6171
6567
  </div>
6172
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
6173
- <button
6174
- class="pf-v5-c-menu-toggle pf-m-full-height"
6175
- type="button"
6176
- aria-expanded="false"
6177
- >
6178
- <span class="pf-v5-c-menu-toggle__icon">
6179
- <img
6180
- class="pf-v5-c-avatar"
6181
- alt="Avatar image"
6182
- src="/assets/images/img_avatar-light.svg"
6183
- />
6184
- </span>
6185
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
6186
- <span class="pf-v5-c-menu-toggle__controls">
6187
- <span class="pf-v5-c-menu-toggle__toggle-icon">
6188
- <i class="fas fa-angle-down" aria-hidden="true"></i>
6189
- </span>
6190
- </span>
6191
- </button>
6192
- </div>
6193
6568
  </div>
6194
6569
  </div>
6195
6570
  </div>
@@ -6415,55 +6790,59 @@ wrapperTag: div
6415
6790
 
6416
6791
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
6417
6792
  <div class="pf-v5-c-pagination pf-m-compact">
6418
- <div class="pf-v5-c-options-menu">
6419
- <button
6420
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6421
- type="button"
6422
- id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6423
- aria-haspopup="listbox"
6424
- aria-expanded="false"
6425
- >
6426
- <span class="pf-v5-c-options-menu__toggle-text">
6427
- <b>1 - 10</b>&nbsp;of&nbsp;
6428
- <b>36</b>
6429
- </span>
6430
- <div class="pf-v5-c-options-menu__toggle-icon">
6431
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6432
- </div>
6433
- </button>
6434
- <ul
6435
- class="pf-v5-c-options-menu__menu"
6436
- role="menu"
6437
- aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6438
- hidden
6439
- >
6440
- <li role="none">
6441
- <button
6442
- class="pf-v5-c-options-menu__menu-item"
6443
- type="button"
6444
- role="menuitem"
6445
- >5 per page</button>
6446
- </li>
6447
- <li role="none">
6448
- <button
6449
- class="pf-v5-c-options-menu__menu-item"
6450
- type="button"
6451
- role="menuitem"
6452
- >
6453
- 10 per page
6454
- <div class="pf-v5-c-options-menu__menu-item-icon">
6455
- <i class="fas fa-check" aria-hidden="true"></i>
6456
- </div>
6457
- </button>
6458
- </li>
6459
- <li role="none">
6460
- <button
6461
- class="pf-v5-c-options-menu__menu-item"
6462
- type="button"
6463
- role="menuitem"
6464
- >20 per page</button>
6465
- </li>
6466
- </ul>
6793
+ <div class="pf-v5-c-pagination__page-menu">
6794
+ <div class="pf-v5-c-options-menu">
6795
+ <button
6796
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6797
+ type="button"
6798
+ id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6799
+ aria-haspopup="listbox"
6800
+ aria-expanded="false"
6801
+ >
6802
+ <span class="pf-v5-c-options-menu__toggle-text">
6803
+ <b>1 - 10</b>&nbsp;of&nbsp;
6804
+ <b>36</b>
6805
+ </span>
6806
+ <div class="pf-v5-c-options-menu__toggle-icon">
6807
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6808
+ </div>
6809
+ </button>
6810
+ <ul
6811
+ class="pf-v5-c-options-menu__menu"
6812
+ role="menu"
6813
+ aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6814
+ hidden
6815
+ >
6816
+ <li role="none">
6817
+ <button
6818
+ class="pf-v5-c-options-menu__menu-item"
6819
+ type="button"
6820
+ role="menuitem"
6821
+ >5 per page</button>
6822
+ </li>
6823
+ <li role="none">
6824
+ <button
6825
+ class="pf-v5-c-options-menu__menu-item"
6826
+ type="button"
6827
+ role="menuitem"
6828
+ >
6829
+ 10 per page
6830
+ <div
6831
+ class="pf-v5-c-options-menu__menu-item-icon"
6832
+ >
6833
+ <i class="fas fa-check" aria-hidden="true"></i>
6834
+ </div>
6835
+ </button>
6836
+ </li>
6837
+ <li role="none">
6838
+ <button
6839
+ class="pf-v5-c-options-menu__menu-item"
6840
+ type="button"
6841
+ role="menuitem"
6842
+ >20 per page</button>
6843
+ </li>
6844
+ </ul>
6845
+ </div>
6467
6846
  </div>
6468
6847
  <nav
6469
6848
  class="pf-v5-c-pagination__nav"