@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -9,94 +9,99 @@ cssPrefix: pf-d-dashboard
9
9
  ```html isFullscreen
10
10
  <div class="pf-v6-c-page" id="dashboard-demo">
11
11
  <div class="pf-v6-c-skip-to-content">
12
- <a
13
- class="pf-v6-c-button pf-m-primary"
14
- href="#main-content-dashboard-demo"
15
- >Skip to content</a>
12
+ <a class="pf-v6-c-button pf-m-primary" href="#main-content-dashboard-demo">
13
+ <span class="pf-v6-c-button__text">Skip to content</span>
14
+ </a>
16
15
  </div>
17
16
  <header class="pf-v6-c-masthead" id="dashboard-demo-masthead">
18
- <span class="pf-v6-c-masthead__toggle">
19
- <button
20
- class="pf-v6-c-button pf-m-plain"
21
- type="button"
22
- aria-label="Global navigation"
23
- >
24
- <i class="fas fa-bars" aria-hidden="true"></i>
25
- </button>
26
- </span>
27
17
  <div class="pf-v6-c-masthead__main">
28
- <a class="pf-v6-c-masthead__brand" href="#">
29
- <svg height="40px" viewBox="0 0 679 158">
30
- <title>PF-HorizontalLogo-Color</title>
31
- <defs>
32
- <linearGradient
33
- x1="68%"
34
- y1="2.25860997e-13%"
35
- x2="32%"
36
- y2="100%"
37
- id="linearGradient-dashboard-demo-masthead"
38
- >
39
- <stop stop-color="#2B9AF3" offset="0%" />
40
- <stop
41
- stop-color="#73BCF7"
42
- stop-opacity="0.502212631"
43
- offset="100%"
44
- />
45
- </linearGradient>
46
- </defs>
47
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
48
- <g
49
- transform="translate(206.000000, 45.750000)"
50
- fill="var(--pf-t--global--text--color--regular)"
51
- fill-rule="nonzero"
52
- >
53
- <path
54
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
55
- />
56
- <path
57
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
58
- />
59
- <path
60
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
61
- />
62
- <path
63
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
64
- />
65
- <path
66
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
67
- />
68
- <path
69
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
70
- />
71
- <path
72
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
73
- />
74
- <polygon
75
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
76
- />
77
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
78
- <path
79
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
80
- />
81
- </g>
82
- <g transform="translate(0.000000, 0.000000)">
83
- <path
84
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
85
- fill="#0066CC"
86
- />
87
- <path
88
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
89
- fill="url(#linearGradient-dashboard-demo-masthead)"
90
- />
91
- <path
92
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
93
- fill="url(#linearGradient-dashboard-demo-masthead)"
94
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
95
- />
18
+ <span class="pf-v6-c-masthead__toggle">
19
+ <button
20
+ class="pf-v6-c-button pf-m-plain"
21
+ type="button"
22
+ aria-label="Global navigation"
23
+ >
24
+ <span class="pf-v6-c-button__icon">
25
+ <i class="fas fa-bars" aria-hidden="true"></i>
26
+ </span>
27
+ </button>
28
+ </span>
29
+ <div class="pf-v6-c-masthead__brand">
30
+ <a class="pf-v6-c-masthead__logo" href="#">
31
+ <svg height="37px" viewBox="0 0 679 158">
32
+ <title>PF-HorizontalLogo-Color</title>
33
+ <defs>
34
+ <linearGradient
35
+ x1="68%"
36
+ y1="2.25860997e-13%"
37
+ x2="32%"
38
+ y2="100%"
39
+ id="linearGradient-dashboard-demo-masthead"
40
+ >
41
+ <stop stop-color="#2B9AF3" offset="0%" />
42
+ <stop
43
+ stop-color="#73BCF7"
44
+ stop-opacity="0.502212631"
45
+ offset="100%"
46
+ />
47
+ </linearGradient>
48
+ </defs>
49
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
50
+ <g
51
+ transform="translate(206.000000, 45.750000)"
52
+ fill="var(--pf-t--global--text--color--regular)"
53
+ fill-rule="nonzero"
54
+ >
55
+ <path
56
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
57
+ />
58
+ <path
59
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
60
+ />
61
+ <path
62
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
63
+ />
64
+ <path
65
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
66
+ />
67
+ <path
68
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
69
+ />
70
+ <path
71
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
72
+ />
73
+ <path
74
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
75
+ />
76
+ <polygon
77
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
78
+ />
79
+ <polygon
80
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
81
+ />
82
+ <path
83
+ 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"
84
+ />
85
+ </g>
86
+ <g transform="translate(0.000000, 0.000000)">
87
+ <path
88
+ 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"
89
+ fill="#0066CC"
90
+ />
91
+ <path
92
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
93
+ fill="url(#linearGradient-dashboard-demo-masthead)"
94
+ />
95
+ <path
96
+ 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"
97
+ fill="url(#linearGradient-dashboard-demo-masthead)"
98
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
99
+ />
100
+ </g>
96
101
  </g>
97
- </g>
98
- </svg>
99
- </a>
102
+ </svg>
103
+ </a>
104
+ </div>
100
105
  </div>
101
106
  <div class="pf-v6-c-masthead__content">
102
107
  <div
@@ -105,41 +110,11 @@ cssPrefix: pf-d-dashboard
105
110
  >
106
111
  <div class="pf-v6-c-toolbar__content">
107
112
  <div class="pf-v6-c-toolbar__content-section">
108
- <div class="pf-v6-c-toolbar__item">
109
- <button
110
- class="pf-v6-c-menu-toggle"
111
- type="button"
112
- aria-expanded="false"
113
- >
114
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
115
- <span class="pf-v6-c-menu-toggle__controls">
116
- <span class="pf-v6-c-menu-toggle__toggle-icon">
117
- <i class="fas fa-caret-down" aria-hidden="true"></i>
118
- </span>
119
- </span>
120
- </button>
121
- </div>
122
-
123
- <div class="pf-v6-c-toolbar__item">
124
- <button
125
- class="pf-v6-c-menu-toggle"
126
- type="button"
127
- aria-expanded="false"
128
- >
129
- <span class="pf-v6-c-menu-toggle__text">Services</span>
130
- <span class="pf-v6-c-menu-toggle__controls">
131
- <span class="pf-v6-c-menu-toggle__toggle-icon">
132
- <i class="fas fa-caret-down" aria-hidden="true"></i>
133
- </span>
134
- </span>
135
- </button>
136
- </div>
137
-
138
113
  <div
139
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
114
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
140
115
  >
141
116
  <div
142
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
117
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
143
118
  >
144
119
  <div class="pf-v6-c-toolbar__item">
145
120
  <button
@@ -178,6 +153,7 @@ cssPrefix: pf-d-dashboard
178
153
  </button>
179
154
  </div>
180
155
  </div>
156
+
181
157
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
182
158
  <button
183
159
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -205,889 +181,819 @@ cssPrefix: pf-d-dashboard
205
181
  >
206
182
  <ul class="pf-v6-c-nav__list" role="list">
207
183
  <li class="pf-v6-c-nav__item">
208
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
184
+ <a href="#" class="pf-v6-c-nav__link">
185
+ <span class="pf-v6-c-nav__link-text">System panel</span>
186
+ </a>
209
187
  </li>
210
188
  <li class="pf-v6-c-nav__item">
211
189
  <a
212
190
  href="#"
213
191
  class="pf-v6-c-nav__link pf-m-current"
214
192
  aria-current="page"
215
- >Policy</a>
193
+ >
194
+ <span class="pf-v6-c-nav__link-text">Policy</span>
195
+ </a>
216
196
  </li>
217
197
  <li class="pf-v6-c-nav__item">
218
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
198
+ <a href="#" class="pf-v6-c-nav__link">
199
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
200
+ </a>
219
201
  </li>
220
202
  <li class="pf-v6-c-nav__item">
221
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
203
+ <a href="#" class="pf-v6-c-nav__link">
204
+ <span class="pf-v6-c-nav__link-text">Network services</span>
205
+ </a>
222
206
  </li>
223
207
  <li class="pf-v6-c-nav__item">
224
- <a href="#" class="pf-v6-c-nav__link">Server</a>
208
+ <a href="#" class="pf-v6-c-nav__link">
209
+ <span class="pf-v6-c-nav__link-text">Server</span>
210
+ </a>
225
211
  </li>
226
212
  </ul>
227
213
  </nav>
228
214
  </div>
229
215
  </div>
230
- <main
231
- class="pf-v6-c-page__main"
232
- tabindex="-1"
233
- id="main-content-dashboard-demo"
234
- >
235
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
236
- <div class="pf-v6-c-page__main-body">
237
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
238
- <ol class="pf-v6-c-breadcrumb__list" role="list">
239
- <li class="pf-v6-c-breadcrumb__item">
240
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
241
- </li>
242
- <li class="pf-v6-c-breadcrumb__item">
243
- <span class="pf-v6-c-breadcrumb__item-divider">
244
- <i class="fas fa-angle-right" aria-hidden="true"></i>
245
- </span>
216
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
217
+ <main
218
+ class="pf-v6-c-page__main"
219
+ tabindex="-1"
220
+ id="main-content-dashboard-demo"
221
+ >
222
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
223
+ <div class="pf-v6-c-page__main-body">
224
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
225
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
226
+ <li class="pf-v6-c-breadcrumb__item">
227
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
228
+ </li>
229
+ <li class="pf-v6-c-breadcrumb__item">
230
+ <span class="pf-v6-c-breadcrumb__item-divider">
231
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
232
+ </span>
246
233
 
247
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
248
- </li>
249
- <li class="pf-v6-c-breadcrumb__item">
250
- <span class="pf-v6-c-breadcrumb__item-divider">
251
- <i class="fas fa-angle-right" aria-hidden="true"></i>
252
- </span>
234
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
235
+ </li>
236
+ <li class="pf-v6-c-breadcrumb__item">
237
+ <span class="pf-v6-c-breadcrumb__item-divider">
238
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
239
+ </span>
253
240
 
254
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
255
- </li>
256
- <li class="pf-v6-c-breadcrumb__item">
257
- <span class="pf-v6-c-breadcrumb__item-divider">
258
- <i class="fas fa-angle-right" aria-hidden="true"></i>
259
- </span>
241
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
242
+ </li>
243
+ <li class="pf-v6-c-breadcrumb__item">
244
+ <span class="pf-v6-c-breadcrumb__item-divider">
245
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
246
+ </span>
260
247
 
261
- <a
262
- href="#"
263
- class="pf-v6-c-breadcrumb__link pf-m-current"
264
- aria-current="page"
265
- >Section landing</a>
266
- </li>
267
- </ol>
268
- </nav>
269
- </div>
270
- </section>
271
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
272
- <div class="pf-v6-c-page__main-body">
273
- <div class="pf-v6-c-content">
274
- <h1>Main title</h1>
275
- <p>This is a full page demo.</p>
248
+ <a
249
+ href="#"
250
+ class="pf-v6-c-breadcrumb__link pf-m-current"
251
+ aria-current="page"
252
+ >Section landing</a>
253
+ </li>
254
+ </ol>
255
+ </nav>
276
256
  </div>
277
- </div>
278
- </section>
279
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
280
- <div class="pf-v6-c-page__main-body">
281
- <div class="pf-v6-l-grid pf-m-gutter">
282
- <div class="pf-v6-c-card pf-m-expanded">
283
- <div class="pf-v6-c-card__header">
284
- <div class="pf-v6-c-card__header-toggle">
285
- <button
286
- class="pf-v6-c-button pf-m-plain"
287
- type="button"
288
- aria-label="Details"
289
- id="dashboard-demo-expandable-status-card-1-toggle"
290
- aria-labelledby="dashboard-demo-expandable-status-card-1-title dashboard-demo-expandable-status-card-1-toggle"
291
- >
292
- <span class="pf-v6-c-card__header-toggle-icon">
293
- <i class="fas fa-angle-right" aria-hidden="true"></i>
294
- </span>
295
- </button>
296
- </div>
297
- <div class="pf-v6-c-card__actions">
298
- <div class="pf-v6-c-dropdown">
257
+ </section>
258
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
259
+ <div class="pf-v6-c-page__main-body">
260
+ <div class="pf-v6-c-content">
261
+ <h1>Main title</h1>
262
+ <p>This is a full page demo.</p>
263
+ </div>
264
+ </div>
265
+ </section>
266
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
267
+ <div class="pf-v6-c-page__main-body">
268
+ <div class="pf-v6-l-grid pf-m-gutter">
269
+ <div class="pf-v6-c-card pf-m-expanded">
270
+ <div class="pf-v6-c-card__header">
271
+ <div class="pf-v6-c-card__header-toggle">
299
272
  <button
300
- class="pf-v6-c-dropdown__toggle pf-m-plain"
301
- id="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
302
- aria-expanded="false"
273
+ class="pf-v6-c-button pf-m-plain"
274
+ id="dashboard-demo-expandable-status-card-1-toggle"
303
275
  type="button"
304
- aria-label="Actions"
276
+ aria-labelledby="dashboard-demo-expandable-status-card-1-title dashboard-demo-expandable-status-card-1-toggle"
277
+ aria-label="Details"
305
278
  >
306
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
279
+ <span class="pf-v6-c-button__icon pf-m-start">
280
+ <span class="pf-v6-c-card__header-toggle-icon">
281
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
282
+ </span>
283
+ </span>
307
284
  </button>
308
- <ul
309
- class="pf-v6-c-dropdown__menu"
310
- aria-labelledby="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
311
- hidden
312
- role="menu"
285
+ </div>
286
+ <div class="pf-v6-c-card__actions">
287
+ <button
288
+ class="pf-v6-c-menu-toggle pf-m-plain"
289
+ type="button"
290
+ aria-expanded="false"
291
+ aria-label="Menu toggle"
292
+ id="dashboard-demo-expandable-status-card-1-action-kebab"
313
293
  >
314
- <li role="none">
315
- <a
316
- class="pf-v6-c-dropdown__menu-item"
317
- role="menuitem"
318
- href="#"
319
- >Link</a>
320
- </li>
321
- <li role="none">
322
- <button
323
- class="pf-v6-c-dropdown__menu-item"
324
- role="menuitem"
325
- type="button"
326
- >Action</button>
327
- </li>
328
- <li role="none">
329
- <a
330
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
331
- role="menuitem"
332
- href="#"
333
- aria-disabled="true"
334
- tabindex="-1"
335
- >Disabled link</a>
336
- </li>
337
- <li role="none">
338
- <button
339
- class="pf-v6-c-dropdown__menu-item"
340
- role="menuitem"
341
- type="button"
342
- disabled
343
- >Disabled action</button>
344
- </li>
345
- <li class="pf-v6-c-divider" role="separator"></li>
346
- <li role="none">
347
- <a
348
- class="pf-v6-c-dropdown__menu-item"
349
- role="menuitem"
350
- href="#"
351
- >Separated link</a>
352
- </li>
353
- </ul>
294
+ <span class="pf-v6-c-menu-toggle__icon">
295
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
296
+ </span>
297
+ </button>
354
298
  </div>
355
- </div>
356
- <div
357
- class="pf-v6-c-card__title"
358
- id="dashboard-demo-expandable-status-card-1-title"
359
- >
360
- <h2 class="pf-v6-c-title pf-m-xl">Improve recommended pathways</h2>
361
- </div>
362
- </div>
363
- <div class="pf-v6-c-card__expandable-content">
364
- <div class="pf-v6-l-flex pf-m-column pf-m-row-on-md">
365
299
  <div
366
- class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
300
+ class="pf-v6-c-card__title"
301
+ id="dashboard-demo-expandable-status-card-1-title"
367
302
  >
368
- <div class="pf-v6-c-card pf-m-plain">
369
- <div class="pf-v6-c-card__body">
370
- <div
371
- class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
372
- >
303
+ <h2 class="pf-v6-c-title pf-m-xl">Improve recommended pathways</h2>
304
+ </div>
305
+ </div>
306
+ <div class="pf-v6-c-card__expandable-content">
307
+ <div class="pf-v6-l-flex pf-m-column pf-m-row-on-md">
308
+ <div
309
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
310
+ >
311
+ <div class="pf-v6-c-card pf-m-plain">
312
+ <div class="pf-v6-c-card__body">
373
313
  <div
374
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
314
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
375
315
  >
376
- <div class="pf-v6-c-label-group">
377
- <div class="pf-v6-c-label-group__main">
378
- <ul
379
- class="pf-v6-c-label-group__list"
380
- role="list"
381
- aria-label="Group of labels"
382
- >
383
- <li class="pf-v6-c-label-group__list-item">
384
- <span
385
- class="pf-v6-c-label pf-m-outline pf-m-blue"
386
- >
387
- <span class="pf-v6-c-label__content">
388
- <span class="pf-v6-c-label__icon">
389
- <i
390
- class="pf-v5-pficon pf-v5-pficon-port"
391
- aria-hidden="true"
392
- ></i>
316
+ <div
317
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
318
+ >
319
+ <div class="pf-v6-c-label-group">
320
+ <div class="pf-v6-c-label-group__main">
321
+ <ul
322
+ class="pf-v6-c-label-group__list"
323
+ role="list"
324
+ aria-label="Group of labels"
325
+ >
326
+ <li class="pf-v6-c-label-group__list-item">
327
+ <span
328
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
329
+ >
330
+ <span class="pf-v6-c-label__content">
331
+ <span class="pf-v6-c-label__icon">
332
+ <i
333
+ class="pf-v6-pficon pf-v6-pficon-port"
334
+ aria-hidden="true"
335
+ ></i>
336
+ </span>
337
+ <span
338
+ class="pf-v6-c-label__text"
339
+ >Performance</span>
393
340
  </span>
394
- <span
395
- class="pf-v6-c-label__text"
396
- >Performance</span>
397
341
  </span>
398
- </span>
399
- </li>
400
- </ul>
342
+ </li>
343
+ </ul>
344
+ </div>
401
345
  </div>
346
+ <a href="#">378 systems</a>
402
347
  </div>
403
- <a href="#">378 systems</a>
404
- </div>
405
- <div class="pf-v6-l-flex__item pf-m-spacer-md">
406
- <p>Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance</p>
407
- </div>
408
- <div
409
- class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
410
- style="row-gap: var(--pf-v5-global--spacer--md);"
411
- >
412
- <div
413
- class="pf-v6-l-flex__item"
414
- style="margin-block-end: -.25em"
415
- >
416
- <span class="pf-v6-c-label pf-m-red">
417
- <span class="pf-v6-c-label__content">
418
- <span class="pf-v6-c-label__text">Incident</span>
419
- </span>
420
- </span>
348
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
349
+ <p>Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance</p>
421
350
  </div>
422
351
  <div
423
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
424
- style="row-gap: var(--pf-v5-global--spacer--md);"
352
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
353
+ style="row-gap: var(--pf-6-global--spacer--md);"
425
354
  >
426
- <i
427
- class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-color-400"
428
- style="line-height: 1"
429
- aria-hidden="true"
430
- ></i>
431
- <p class="pf-v6-u-color-200">
432
- System reboot
433
- <b class="pf-v6-u-color-100">is not</b> required
434
- </p>
355
+ <div
356
+ class="pf-v6-l-flex__item"
357
+ style="margin-block-end: -.25em"
358
+ >
359
+ <span class="pf-v6-c-label pf-m-red">
360
+ <span class="pf-v6-c-label__content">
361
+ <span class="pf-v6-c-label__text">Incident</span>
362
+ </span>
363
+ </span>
364
+ </div>
365
+ <div
366
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
367
+ style="row-gap: var(--pf-6-global--spacer--md);"
368
+ >
369
+ <i
370
+ class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
371
+ style="line-height: 1"
372
+ aria-hidden="true"
373
+ ></i>
374
+ <p class="pf-v6-u-color-200">
375
+ System reboot
376
+ <b class="pf-v6-u-color-100">is not</b> required
377
+ </p>
378
+ </div>
435
379
  </div>
436
380
  </div>
437
381
  </div>
438
- </div>
439
- <div class="pf-v6-c-card__footer">
440
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
441
- View pathway
442
- <span class="pf-v6-c-button__icon pf-m-end">
443
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
444
- </span>
445
- </a>
382
+ <div class="pf-v6-c-card__footer">
383
+ <a
384
+ class="pf-v6-c-button pf-m-inline pf-m-link"
385
+ href="#"
386
+ >
387
+ <span class="pf-v6-c-button__text">View pathway</span>
388
+ <span class="pf-v6-c-button__icon pf-m-end">
389
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
390
+ </span>
391
+ </a>
392
+ </div>
446
393
  </div>
447
394
  </div>
448
- </div>
449
- <hr class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl" />
450
- <div
451
- class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
452
- >
453
- <div class="pf-v6-c-card pf-m-plain">
454
- <div class="pf-v6-c-card__body">
455
- <div
456
- class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
457
- >
395
+ <hr
396
+ class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl"
397
+ />
398
+ <div
399
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
400
+ >
401
+ <div class="pf-v6-c-card pf-m-plain">
402
+ <div class="pf-v6-c-card__body">
458
403
  <div
459
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
404
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
460
405
  >
461
- <div class="pf-v6-c-label-group">
462
- <div class="pf-v6-c-label-group__main">
463
- <ul
464
- class="pf-v6-c-label-group__list"
465
- role="list"
466
- aria-label="Group of labels"
467
- >
468
- <li class="pf-v6-c-label-group__list-item">
469
- <span
470
- class="pf-v6-c-label pf-m-outline pf-m-blue"
471
- >
472
- <span class="pf-v6-c-label__content">
473
- <span class="pf-v6-c-label__icon">
474
- <i
475
- class="fas fa-cube"
476
- aria-hidden="true"
477
- ></i>
406
+ <div
407
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
408
+ >
409
+ <div class="pf-v6-c-label-group">
410
+ <div class="pf-v6-c-label-group__main">
411
+ <ul
412
+ class="pf-v6-c-label-group__list"
413
+ role="list"
414
+ aria-label="Group of labels"
415
+ >
416
+ <li class="pf-v6-c-label-group__list-item">
417
+ <span
418
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
419
+ >
420
+ <span class="pf-v6-c-label__content">
421
+ <span class="pf-v6-c-label__icon">
422
+ <i
423
+ class="fas fa-cube"
424
+ aria-hidden="true"
425
+ ></i>
426
+ </span>
427
+ <span
428
+ class="pf-v6-c-label__text"
429
+ >Stablility</span>
478
430
  </span>
479
- <span
480
- class="pf-v6-c-label__text"
481
- >Stablility</span>
482
- </span>
483
- </span>
484
- </li>
485
- <li class="pf-v6-c-label-group__list-item">
486
- <button
487
- class="pf-v6-c-label pf-m-overflow"
488
- type="button"
489
- >
490
- <span class="pf-v6-c-label__content">
491
- <span class="pf-v6-c-label__text">1 more</span>
492
431
  </span>
493
- </button>
494
- </li>
495
- </ul>
432
+ </li>
433
+ <li class="pf-v6-c-label-group__list-item">
434
+ <button
435
+ class="pf-v6-c-label pf-m-overflow"
436
+ type="button"
437
+ >
438
+ <span class="pf-v6-c-label__content">
439
+ <span class="pf-v6-c-label__text">1 more</span>
440
+ </span>
441
+ </button>
442
+ </li>
443
+ </ul>
444
+ </div>
496
445
  </div>
446
+ <a href="#">211 systems</a>
447
+ </div>
448
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
449
+ <p>Adjust your networking configuration to get ahead of network perfomance degradations and packet losses</p>
497
450
  </div>
498
- <a href="#">211 systems</a>
499
- </div>
500
- <div class="pf-v6-l-flex__item pf-m-spacer-md">
501
- <p>Adjust your networking configuration to get ahead of network perfomance degradations and packet losses</p>
502
- </div>
503
- <div
504
- class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
505
- style="row-gap: var(--pf-v5-global--spacer--md);"
506
- >
507
451
  <div
508
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
509
- style="row-gap: var(--pf-v5-global--spacer--md);"
452
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
453
+ style="row-gap: var(--pf-6-global--spacer--md);"
510
454
  >
511
- <i
512
- class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-danger-color-100"
513
- style="line-height: 1"
514
- aria-hidden="true"
515
- ></i>
516
- <p class="pf-v6-u-color-200">
517
- System reboot
518
- <b class="pf-v6-u-color-100">is</b> required
519
- </p>
455
+ <div
456
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
457
+ style="row-gap: var(--pf-6-global--spacer--md);"
458
+ >
459
+ <i
460
+ class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-danger-color-100"
461
+ style="line-height: 1"
462
+ aria-hidden="true"
463
+ ></i>
464
+ <p class="pf-v6-u-color-200">
465
+ System reboot
466
+ <b class="pf-v6-u-color-100">is</b> required
467
+ </p>
468
+ </div>
520
469
  </div>
521
470
  </div>
522
471
  </div>
523
- </div>
524
- <div class="pf-v6-c-card__footer">
525
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
526
- View pathway
527
- <span class="pf-v6-c-button__icon pf-m-end">
528
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
529
- </span>
530
- </a>
472
+ <div class="pf-v6-c-card__footer">
473
+ <a
474
+ class="pf-v6-c-button pf-m-inline pf-m-link"
475
+ href="#"
476
+ >
477
+ <span class="pf-v6-c-button__text">View pathway</span>
478
+ <span class="pf-v6-c-button__icon pf-m-end">
479
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
480
+ </span>
481
+ </a>
482
+ </div>
531
483
  </div>
532
484
  </div>
533
- </div>
534
- <hr class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl" />
535
- <div
536
- class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
537
- >
538
- <div class="pf-v6-c-card pf-m-plain">
539
- <div class="pf-v6-c-card__body">
540
- <div
541
- class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
542
- >
485
+ <hr
486
+ class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl"
487
+ />
488
+ <div
489
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
490
+ >
491
+ <div class="pf-v6-c-card pf-m-plain">
492
+ <div class="pf-v6-c-card__body">
543
493
  <div
544
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
494
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
545
495
  >
546
- <div class="pf-v6-c-label-group">
547
- <div class="pf-v6-c-label-group__main">
548
- <ul
549
- class="pf-v6-c-label-group__list"
550
- role="list"
551
- aria-label="Group of labels"
552
- >
553
- <li class="pf-v6-c-label-group__list-item">
554
- <span
555
- class="pf-v6-c-label pf-m-outline pf-m-blue"
556
- >
557
- <span class="pf-v6-c-label__content">
558
- <span class="pf-v6-c-label__icon">
559
- <i
560
- class="pf-v5-pficon pf-v5-pficon-automation"
561
- aria-hidden="true"
562
- ></i>
496
+ <div
497
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
498
+ >
499
+ <div class="pf-v6-c-label-group">
500
+ <div class="pf-v6-c-label-group__main">
501
+ <ul
502
+ class="pf-v6-c-label-group__list"
503
+ role="list"
504
+ aria-label="Group of labels"
505
+ >
506
+ <li class="pf-v6-c-label-group__list-item">
507
+ <span
508
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
509
+ >
510
+ <span class="pf-v6-c-label__content">
511
+ <span class="pf-v6-c-label__icon">
512
+ <i
513
+ class="pf-v6-pficon pf-v6-pficon-automation"
514
+ aria-hidden="true"
515
+ ></i>
516
+ </span>
517
+ <span
518
+ class="pf-v6-c-label__text"
519
+ >Availability</span>
563
520
  </span>
564
- <span
565
- class="pf-v6-c-label__text"
566
- >Availability</span>
567
521
  </span>
568
- </span>
569
- </li>
570
- </ul>
522
+ </li>
523
+ </ul>
524
+ </div>
571
525
  </div>
526
+ <a href="#">166 systems</a>
572
527
  </div>
573
- <a href="#">166 systems</a>
574
- </div>
575
- <div class="pf-v6-l-flex__item pf-m-spacer-md">
576
- <p>Fine tune your Oracle DB configuration to improve database performance and avoid process failure</p>
577
- </div>
578
- <div
579
- class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
580
- style="row-gap: var(--pf-v5-global--spacer--md);"
581
- >
582
- <div
583
- class="pf-v6-l-flex__item"
584
- style="margin-block-end: -.25em"
585
- >
586
- <span class="pf-v6-c-label pf-m-red">
587
- <span class="pf-v6-c-label__content">
588
- <span class="pf-v6-c-label__text">Incident</span>
589
- </span>
590
- </span>
528
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
529
+ <p>Fine tune your Oracle DB configuration to improve database performance and avoid process failure</p>
591
530
  </div>
592
531
  <div
593
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
594
- style="row-gap: var(--pf-v5-global--spacer--md);"
532
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
533
+ style="row-gap: var(--pf-6-global--spacer--md);"
595
534
  >
596
- <i
597
- class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-color-400"
598
- style="line-height: 1"
599
- aria-hidden="true"
600
- ></i>
601
- <p class="pf-v6-u-color-200">
602
- System reboot
603
- <b class="pf-v6-u-color-100">is not</b> required
604
- </p>
535
+ <div
536
+ class="pf-v6-l-flex__item"
537
+ style="margin-block-end: -.25em"
538
+ >
539
+ <span class="pf-v6-c-label pf-m-red">
540
+ <span class="pf-v6-c-label__content">
541
+ <span class="pf-v6-c-label__text">Incident</span>
542
+ </span>
543
+ </span>
544
+ </div>
545
+ <div
546
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
547
+ style="row-gap: var(--pf-6-global--spacer--md);"
548
+ >
549
+ <i
550
+ class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
551
+ style="line-height: 1"
552
+ aria-hidden="true"
553
+ ></i>
554
+ <p class="pf-v6-u-color-200">
555
+ System reboot
556
+ <b class="pf-v6-u-color-100">is not</b> required
557
+ </p>
558
+ </div>
605
559
  </div>
606
560
  </div>
607
561
  </div>
608
- </div>
609
- <div class="pf-v6-c-card__footer">
610
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
611
- View pathway
612
- <span class="pf-v6-c-button__icon pf-m-end">
613
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
614
- </span>
615
- </a>
562
+ <div class="pf-v6-c-card__footer">
563
+ <a
564
+ class="pf-v6-c-button pf-m-inline pf-m-link"
565
+ href="#"
566
+ >
567
+ <span class="pf-v6-c-button__text">View pathway</span>
568
+ <span class="pf-v6-c-button__icon pf-m-end">
569
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
570
+ </span>
571
+ </a>
572
+ </div>
616
573
  </div>
617
574
  </div>
618
575
  </div>
619
576
  </div>
620
577
  </div>
621
- </div>
622
- <div
623
- class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl"
624
- style="--pf-v5-l-grid--item--Order-on-lg:3"
625
- >
626
- <div class="pf-v6-l-flex pf-m-column">
627
- <div
628
- class="pf-v6-c-card pf-m-expanded"
629
- id="dashboard-demo-status-card-1"
630
- >
631
- <div class="pf-v6-c-card__header">
632
- <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
633
- </div>
634
- <div class="pf-v6-c-card__body">
635
- <div
636
- class="pf-v6-l-gallery pf-m-gutter"
637
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 100%; --pf-v5-l-gallery--GridTemplateColumns--min-on-sm: 180px; --pf-v5-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v5-l-gallery--GridTemplateColumns--max-on-sm: 1fr;"
638
- >
639
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
640
- <div class="pf-v6-l-flex__item">
641
- <i
642
- class="fas fa-check-circle pf-v6-u-success-color-100"
643
- aria-hidden="true"
644
- ></i>
645
- </div>
646
- <div class="pf-v6-l-flex__item">
647
- <span>Cluster</span>
648
- </div>
649
- </div>
650
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
651
- <div class="pf-v6-l-flex__item">
652
- <i
653
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
654
- aria-hidden="true"
655
- ></i>
656
- </div>
657
- <div class="pf-v6-l-flex__item pf-v5-u-text-nowrap">
658
- <span class="popover-parent">
659
- <a href="#">Control Panel</a>
660
- </span>
661
- </div>
662
- </div>
663
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
664
- <div class="pf-v6-l-flex__item pf-v5-u-text-nowrap">
665
- <i
666
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
667
- aria-hidden="true"
668
- ></i>
669
- </div>
670
- <div
671
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
672
- >
578
+ <div
579
+ class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl"
580
+ style="--pf-v6-l-grid--item--Order-on-lg:3"
581
+ >
582
+ <div class="pf-v6-l-flex pf-m-column">
583
+ <div
584
+ class="pf-v6-c-card pf-m-expanded"
585
+ id="dashboard-demo-status-card-1"
586
+ >
587
+ <div class="pf-v6-c-card__header">
588
+ <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
589
+ </div>
590
+ <div class="pf-v6-c-card__body">
591
+ <div
592
+ class="pf-v6-l-gallery pf-m-gutter"
593
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 100%; --pf-v6-l-gallery--GridTemplateColumns--min-on-sm: 180px; --pf-v6-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v6-l-gallery--GridTemplateColumns--max-on-sm: 1fr;"
594
+ >
595
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
673
596
  <div class="pf-v6-l-flex__item">
674
- <a href="#">Operators</a>
597
+ <i
598
+ class="fas fa-check-circle pf-v6-u-success-color-100"
599
+ aria-hidden="true"
600
+ ></i>
675
601
  </div>
676
602
  <div class="pf-v6-l-flex__item">
677
- <span class="pf-v5-u-color-200">1 degraged</span>
603
+ <span>Cluster</span>
678
604
  </div>
679
605
  </div>
680
- </div>
681
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
682
- <div class="pf-v6-l-flex__item">
683
- <i
684
- class="fas fa-check-circle pf-v6-u-success-color-100"
685
- aria-hidden="true"
686
- ></i>
687
- </div>
688
- <div
689
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
690
- >
606
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
691
607
  <div class="pf-v6-l-flex__item">
692
- <a href="#">Image Vulnerabilities</a>
608
+ <i
609
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
610
+ aria-hidden="true"
611
+ ></i>
693
612
  </div>
694
- <div class="pf-v6-l-flex__item">
695
- <span class="pf-v6-u-color-200">0 vulnerabilities</span>
613
+ <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
614
+ <span class="popover-parent">
615
+ <a href="#">Control Panel</a>
616
+ </span>
696
617
  </div>
697
618
  </div>
698
- </div>
699
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
700
- <div class="pf-v6-l-flex__item">
701
- <i
702
- class="fas fa-check-circle pf-v6-u-success-color-100"
703
- aria-hidden="true"
704
- ></i>
619
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
620
+ <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
621
+ <i
622
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
623
+ aria-hidden="true"
624
+ ></i>
625
+ </div>
626
+ <div
627
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
628
+ >
629
+ <div class="pf-v6-l-flex__item">
630
+ <a href="#">Operators</a>
631
+ </div>
632
+ <div class="pf-v6-l-flex__item">
633
+ <span class="pf-v6-u-text-color-subtle">1 degraded</span>
634
+ </div>
635
+ </div>
705
636
  </div>
706
- <div
707
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
708
- >
637
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
709
638
  <div class="pf-v6-l-flex__item">
710
- <a href="#">Storage</a>
639
+ <i
640
+ class="fas fa-check-circle pf-v6-u-success-color-100"
641
+ aria-hidden="true"
642
+ ></i>
711
643
  </div>
712
- <div class="pf-v6-l-flex__item">
713
- <span class="pf-v6-u-color-200">Degraded</span>
644
+ <div
645
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
646
+ >
647
+ <div class="pf-v6-l-flex__item">
648
+ <a href="#">Image Vulnerabilities</a>
649
+ </div>
650
+ <div class="pf-v6-l-flex__item">
651
+ <span class="pf-v6-u-color-200">0 vulnerabilities</span>
652
+ </div>
714
653
  </div>
715
654
  </div>
716
- </div>
717
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
718
- <div class="pf-v6-l-flex__item">
719
- <i
720
- class="fas fa-check-circle pf-v6-u-success-color-100"
721
- aria-hidden="true"
722
- ></i>
723
- </div>
724
- <div
725
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
726
- >
655
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
727
656
  <div class="pf-v6-l-flex__item">
728
- <a href="#">Hardware</a>
657
+ <i
658
+ class="fas fa-check-circle pf-v6-u-success-color-100"
659
+ aria-hidden="true"
660
+ ></i>
661
+ </div>
662
+ <div
663
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
664
+ >
665
+ <div class="pf-v6-l-flex__item">
666
+ <a href="#">Storage</a>
667
+ </div>
668
+ <div class="pf-v6-l-flex__item">
669
+ <span class="pf-v6-u-color-200">Degraded</span>
670
+ </div>
729
671
  </div>
730
672
  </div>
731
- </div>
732
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
733
- <div class="pf-v6-l-flex__item">
734
- <i
735
- class="fas fa-check-circle pf-v6-u-success-color-100"
736
- aria-hidden="true"
737
- ></i>
738
- </div>
739
- <div
740
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
741
- >
673
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
742
674
  <div class="pf-v6-l-flex__item">
743
- <a href="#">Insights</a>
675
+ <i
676
+ class="fas fa-check-circle pf-v6-u-success-color-100"
677
+ aria-hidden="true"
678
+ ></i>
679
+ </div>
680
+ <div
681
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
682
+ >
683
+ <div class="pf-v6-l-flex__item">
684
+ <a href="#">Hardware</a>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
689
+ <div class="pf-v6-l-flex__item">
690
+ <i
691
+ class="fas fa-check-circle pf-v6-u-success-color-100"
692
+ aria-hidden="true"
693
+ ></i>
694
+ </div>
695
+ <div
696
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
697
+ >
698
+ <div class="pf-v6-l-flex__item">
699
+ <a href="#">Insights</a>
700
+ </div>
744
701
  </div>
745
702
  </div>
746
703
  </div>
747
704
  </div>
748
- </div>
749
- <hr class="pf-v6-c-divider" />
750
- <div class="pf-v6-c-notification-drawer">
751
- <div class="pf-v6-c-notification-drawer__body">
752
- <section class="pf-v6-c-notification-drawer__group">
753
- <button
754
- class="pf-v6-c-notification-drawer__group-toggle"
755
- aria-expanded="false"
756
- >
757
- <div
758
- class="pf-v6-c-notification-drawer__group-toggle-title"
705
+ <hr class="pf-v6-c-divider" />
706
+ <div class="pf-v6-c-notification-drawer">
707
+ <div class="pf-v6-c-notification-drawer__body">
708
+ <section class="pf-v6-c-notification-drawer__group">
709
+ <button
710
+ class="pf-v6-c-notification-drawer__group-toggle"
711
+ aria-expanded="false"
759
712
  >
760
- <div class="pf-v6-l-flex">
761
- <div
762
- class="pf-v6-l-flex__item pf-m-spacer-md"
763
- >Notifications</div>
764
- <div class="pf-v6-c-label-group">
765
- <div class="pf-v6-c-label-group__main">
766
- <ul
767
- class="pf-v6-c-label-group__list"
768
- role="list"
769
- aria-label="Group of labels"
770
- >
771
- <li class="pf-v6-c-label-group__list-item">
772
- <span class="pf-v6-c-label pf-m-red">
773
- <span class="pf-v6-c-label__content">
774
- <span class="pf-v6-c-label__icon">
775
- <i
776
- class="fas fa-fw fa-exclamation-circle"
777
- aria-hidden="true"
778
- ></i>
713
+ <div
714
+ class="pf-v6-c-notification-drawer__group-toggle-title"
715
+ >
716
+ <div class="pf-v6-l-flex">
717
+ <div
718
+ class="pf-v6-l-flex__item pf-m-spacer-md"
719
+ >Notifications</div>
720
+ <div class="pf-v6-c-label-group">
721
+ <div class="pf-v6-c-label-group__main">
722
+ <ul
723
+ class="pf-v6-c-label-group__list"
724
+ role="list"
725
+ aria-label="Group of labels"
726
+ >
727
+ <li class="pf-v6-c-label-group__list-item">
728
+ <span class="pf-v6-c-label pf-m-red">
729
+ <span class="pf-v6-c-label__content">
730
+ <span class="pf-v6-c-label__icon">
731
+ <i
732
+ class="fas fa-fw fa-exclamation-circle"
733
+ aria-hidden="true"
734
+ ></i>
735
+ </span>
736
+ <span class="pf-v6-c-label__text">1</span>
779
737
  </span>
780
- <span class="pf-v6-c-label__text">1</span>
781
738
  </span>
782
- </span>
783
- </li>
784
- <li class="pf-v6-c-label-group__list-item">
785
- <span class="pf-v6-c-label pf-m-orange">
786
- <span class="pf-v6-c-label__content">
787
- <span class="pf-v6-c-label__icon">
788
- <i
789
- class="fas fa-fw fa-exclamation-circle"
790
- aria-hidden="true"
791
- ></i>
739
+ </li>
740
+ <li class="pf-v6-c-label-group__list-item">
741
+ <span class="pf-v6-c-label pf-m-orange">
742
+ <span class="pf-v6-c-label__content">
743
+ <span class="pf-v6-c-label__icon">
744
+ <i
745
+ class="fas fa-fw fa-exclamation-circle"
746
+ aria-hidden="true"
747
+ ></i>
748
+ </span>
749
+ <span class="pf-v6-c-label__text">1</span>
792
750
  </span>
793
- <span class="pf-v6-c-label__text">1</span>
794
751
  </span>
795
- </span>
796
- </li>
797
- <li class="pf-v6-c-label-group__list-item">
798
- <span class="pf-v6-c-label pf-m-green">
799
- <span class="pf-v6-c-label__content">
800
- <span class="pf-v6-c-label__icon">
801
- <i
802
- class="fas fa-fw fa-check-circle"
803
- aria-hidden="true"
804
- ></i>
752
+ </li>
753
+ <li class="pf-v6-c-label-group__list-item">
754
+ <span class="pf-v6-c-label pf-m-green">
755
+ <span class="pf-v6-c-label__content">
756
+ <span class="pf-v6-c-label__icon">
757
+ <i
758
+ class="fas fa-fw fa-check-circle"
759
+ aria-hidden="true"
760
+ ></i>
761
+ </span>
762
+ <span class="pf-v6-c-label__text">3</span>
805
763
  </span>
806
- <span class="pf-v6-c-label__text">3</span>
807
764
  </span>
808
- </span>
809
- </li>
810
- <li class="pf-v6-c-label-group__list-item">
811
- <span class="pf-v6-c-label pf-m-blue">
812
- <span class="pf-v6-c-label__content">
813
- <span class="pf-v6-c-label__icon">
814
- <i
815
- class="fas fa-fw fa-info-circle"
816
- aria-hidden="true"
817
- ></i>
765
+ </li>
766
+ <li class="pf-v6-c-label-group__list-item">
767
+ <span class="pf-v6-c-label pf-m-blue">
768
+ <span class="pf-v6-c-label__content">
769
+ <span class="pf-v6-c-label__icon">
770
+ <i
771
+ class="fas fa-fw fa-info-circle"
772
+ aria-hidden="true"
773
+ ></i>
774
+ </span>
775
+ <span class="pf-v6-c-label__text">3</span>
818
776
  </span>
819
- <span class="pf-v6-c-label__text">3</span>
820
777
  </span>
821
- </span>
822
- </li>
823
- <li class="pf-v6-c-label-group__list-item">
824
- <span class="pf-v6-c-label pf-m-cyan">
825
- <span class="pf-v6-c-label__content">
826
- <span class="pf-v6-c-label__icon">
827
- <i
828
- class="fas fa-fw fa-bell"
829
- aria-hidden="true"
830
- ></i>
778
+ </li>
779
+ <li class="pf-v6-c-label-group__list-item">
780
+ <span class="pf-v6-c-label pf-m-teal">
781
+ <span class="pf-v6-c-label__content">
782
+ <span class="pf-v6-c-label__icon">
783
+ <i
784
+ class="fas fa-fw fa-bell"
785
+ aria-hidden="true"
786
+ ></i>
787
+ </span>
788
+ <span class="pf-v6-c-label__text">3</span>
831
789
  </span>
832
- <span class="pf-v6-c-label__text">3</span>
833
790
  </span>
834
- </span>
835
- </li>
836
- </ul>
791
+ </li>
792
+ </ul>
793
+ </div>
837
794
  </div>
838
795
  </div>
839
796
  </div>
840
- </div>
841
- <span
842
- class="pf-v6-c-notification-drawer__group-toggle-icon"
843
- >
844
- <i class="fas fa-angle-right" aria-hidden="true"></i>
845
- </span>
846
- </button>
847
- <ul
848
- class="pf-v6-c-notification-drawer__list"
849
- role="list"
850
- hidden
851
- >
852
- <li
853
- class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
854
- tabindex="0"
797
+ <span
798
+ class="pf-v6-c-notification-drawer__group-toggle-icon"
799
+ >
800
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
801
+ </span>
802
+ </button>
803
+ <ul
804
+ class="pf-v6-c-notification-drawer__list"
805
+ role="list"
806
+ hidden
855
807
  >
856
- <div
857
- class="pf-v6-c-notification-drawer__list-item-header"
808
+ <li
809
+ class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
810
+ tabindex="0"
858
811
  >
859
- <span
860
- class="pf-v6-c-notification-drawer__list-item-header-icon"
861
- >
862
- <i
863
- class="fas fa-exclamation-circle"
864
- aria-hidden="true"
865
- ></i>
866
- </span>
867
- <h2
868
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-danger-color-200"
812
+ <div
813
+ class="pf-v6-c-notification-drawer__list-item-header"
869
814
  >
870
815
  <span
871
- class="pf-v6-screen-reader"
872
- >Danger notification:</span>
873
- Critical alert regarding control plane
874
- </h2>
875
- </div>
876
- <div
877
- class="pf-v6-c-notification-drawer__list-item-description"
878
- >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>
879
- </li>
880
- <li
881
- class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning"
882
- tabindex="0"
883
- >
884
- <div
885
- class="pf-v6-c-notification-drawer__list-item-header"
816
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
817
+ >
818
+ <i
819
+ class="fas fa-exclamation-circle"
820
+ aria-hidden="true"
821
+ ></i>
822
+ </span>
823
+ <h2
824
+ class="pf-v6-c-notification-drawer__list-item-header-title"
825
+ >
826
+ <span
827
+ class="pf-v6-screen-reader"
828
+ >Danger notification:</span>
829
+ Critical alert regarding control plane
830
+ </h2>
831
+ </div>
832
+ <div
833
+ class="pf-v6-c-notification-drawer__list-item-description"
834
+ >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>
835
+ </li>
836
+ <li
837
+ class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning"
838
+ tabindex="0"
886
839
  >
887
- <span
888
- class="pf-v6-c-notification-drawer__list-item-header-icon"
889
- >
890
- <i
891
- class="fas fa-exclamation-triangle"
892
- aria-hidden="true"
893
- ></i>
894
- </span>
895
- <h2
896
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-warning-color-200"
840
+ <div
841
+ class="pf-v6-c-notification-drawer__list-item-header"
897
842
  >
898
843
  <span
899
- class="pf-v6-screen-reader"
900
- >Warning notification:</span>
901
- Warning alert
902
- </h2>
903
- </div>
904
- <div
905
- class="pf-v6-c-notification-drawer__list-item-description"
906
- >This is a warning notification description.</div>
907
- </li>
908
- </ul>
909
- </section>
844
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
845
+ >
846
+ <i
847
+ class="fas fa-exclamation-triangle"
848
+ aria-hidden="true"
849
+ ></i>
850
+ </span>
851
+ <h2
852
+ class="pf-v6-c-notification-drawer__list-item-header-title"
853
+ >
854
+ <span
855
+ class="pf-v6-screen-reader"
856
+ >Warning notification:</span>
857
+ Warning alert
858
+ </h2>
859
+ </div>
860
+ <div
861
+ class="pf-v6-c-notification-drawer__list-item-description"
862
+ >This is a warning notification description.</div>
863
+ </li>
864
+ </ul>
865
+ </section>
866
+ </div>
910
867
  </div>
911
868
  </div>
912
- </div>
913
- <!-- inventory -->
914
- <div class="pf-v6-c-card" id="dashboard-demo-line-chart-card-1">
915
- <div class="pf-v6-c-card__header">
916
- <div class="pf-v6-c-card__actions pf-m-no-offset">
917
- <div class="pf-v6-c-select">
918
- <span
919
- id="dashboard-demo-line-chart-card-1-select-dropdown-label"
920
- hidden
921
- >Choose one</span>
922
-
869
+ <!-- inventory -->
870
+ <div class="pf-v6-c-card" id="dashboard-demo-line-chart-card-1">
871
+ <div class="pf-v6-c-card__header">
872
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
923
873
  <button
924
- class="pf-v6-c-select__toggle pf-m-plain"
874
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
925
875
  type="button"
926
- id="dashboard-demo-line-chart-card-1-select-dropdown-toggle"
927
- aria-haspopup="true"
928
876
  aria-expanded="false"
929
- aria-labelledby="dashboard-demo-line-chart-card-1-select-dropdown-label dashboard-demo-line-chart-card-1-select-dropdown-toggle"
877
+ id="dashboard-demo-line-chart-card-1-select-dropdown"
930
878
  >
931
- <div class="pf-v6-c-select__toggle-wrapper">
932
- <span class="pf-v6-c-select__toggle-text">24 hours</span>
933
- </div>
934
- <span class="pf-v6-c-select__toggle-arrow">
935
- <i class="fas fa-caret-down" aria-hidden="true"></i>
879
+ <span class="pf-v6-c-menu-toggle__text">24 hours</span>
880
+ <span class="pf-v6-c-menu-toggle__controls">
881
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
882
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
883
+ </span>
936
884
  </span>
937
885
  </button>
938
-
939
- <ul
940
- class="pf-v6-c-select__menu pf-m-align-right"
941
- role="listbox"
942
- aria-labelledby="dashboard-demo-line-chart-card-1-select-dropdown-label"
943
- hidden
944
- >
945
- <li role="presentation">
946
- <button
947
- class="pf-v6-c-select__menu-item"
948
- role="option"
949
- >Running</button>
950
- </li>
951
- <li role="presentation">
952
- <button
953
- class="pf-v6-c-select__menu-item pf-m-selected"
954
- role="option"
955
- aria-selected="true"
956
- >
957
- Stopped
958
- <span class="pf-v6-c-select__menu-item-icon">
959
- <i class="fas fa-check" aria-hidden="true"></i>
960
- </span>
961
- </button>
962
- </li>
963
- <li role="presentation">
964
- <button
965
- class="pf-v6-c-select__menu-item"
966
- role="option"
967
- >Down</button>
968
- </li>
969
- <li role="presentation">
970
- <button
971
- class="pf-v6-c-select__menu-item"
972
- role="option"
973
- >Degraded</button>
974
- </li>
975
- <li role="presentation">
976
- <button
977
- class="pf-v6-c-select__menu-item"
978
- role="option"
979
- >Needs maintenance</button>
980
- </li>
981
- </ul>
886
+ </div>
887
+ <div
888
+ class="pf-v6-c-card__title"
889
+ id="dashboard-demo-line-chart-card-1-title"
890
+ >
891
+ <h2 class="pf-v6-c-title pf-m-xl">Cluster utilizations</h2>
982
892
  </div>
983
893
  </div>
984
894
  <div
985
- class="pf-v6-c-card__title"
986
- id="dashboard-demo-line-chart-card-1-title"
895
+ class="pf-v6-c-card pf-m-plain pf-m-expanded"
896
+ id="dashboard-demo-line-chart-card-1-group-1"
987
897
  >
988
- <h2 class="pf-v6-c-title pf-m-xl">Cluster utilizations</h2>
989
- </div>
990
- </div>
991
- <div
992
- class="pf-v6-c-card pf-m-plain pf-m-expanded"
993
- id="dashboard-demo-line-chart-card-1-group-1"
994
- >
995
- <div class="pf-v6-c-card__header pf-m-toggle-right">
996
- <div class="pf-v6-c-card__header-toggle">
997
- <button
998
- class="pf-v6-c-button pf-m-plain"
999
- type="button"
1000
- aria-label="Details"
1001
- id="dashboard-demo-line-chart-card-1-group-1-toggle"
1002
- aria-labelledby="dashboard-demo-line-chart-card-1-group-1-title dashboard-demo-line-chart-card-1-group-1-toggle"
1003
- >
1004
- <span class="pf-v6-c-card__header-toggle-icon">
1005
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1006
- </span>
1007
- </button>
1008
- </div>
1009
- <div class="pf-v6-c-card__title">
1010
- <h2
1011
- class="pf-v6-c-card__title-text"
1012
- id="dashboard-demo-line-chart-card-1-group-1-title"
1013
- >CPU 1</h2>
898
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
899
+ <div class="pf-v6-c-card__header-toggle">
900
+ <button
901
+ class="pf-v6-c-button pf-m-plain"
902
+ id="dashboard-demo-line-chart-card-1-group-1-toggle"
903
+ type="button"
904
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-1-title dashboard-demo-line-chart-card-1-group-1-toggle"
905
+ aria-label="Details"
906
+ >
907
+ <span class="pf-v6-c-button__icon pf-m-start">
908
+ <span class="pf-v6-c-card__header-toggle-icon">
909
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
910
+ </span>
911
+ </span>
912
+ </button>
913
+ </div>
914
+ <div class="pf-v6-c-card__title">
915
+ <h2
916
+ class="pf-v6-c-card__title-text"
917
+ id="dashboard-demo-line-chart-card-1-group-1-title"
918
+ >CPU 1</h2>
919
+ </div>
1014
920
  </div>
1015
- </div>
1016
- <div class="pf-v6-c-card__expandable-content">
1017
- <div class="pf-v6-c-card__body">
1018
- <div class="pf-v6-l-grid pf-m-gutter">
921
+ <div class="pf-v6-c-card__expandable-content">
922
+ <div class="pf-v6-c-card__body">
1019
923
  <div class="pf-v6-l-grid pf-m-gutter">
1020
- <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1021
- <div
1022
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
1023
- >
1024
- <div class="pf-v6-l-flex__item">
1025
- <b>Temperature</b>
1026
- </div>
1027
- <hr
1028
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
1029
- />
1030
- <div class="pf-v6-l-flex__item">
1031
- <span>64C</span>
924
+ <div class="pf-v6-l-grid pf-m-gutter">
925
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
926
+ <div
927
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
928
+ >
929
+ <div class="pf-v6-l-flex__item">
930
+ <b>Temperature</b>
931
+ </div>
932
+ <hr
933
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
934
+ />
935
+ <div class="pf-v6-l-flex__item">
936
+ <span>64C</span>
937
+ </div>
1032
938
  </div>
1033
939
  </div>
1034
- </div>
1035
- <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
1036
- <div class="pf-v6-l-grid pf-m-gutter">
1037
- <div class="pf-v6-l-grid__item pf-m-2-col">
1038
- <div
1039
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
1040
- >
1041
- <div class="pf-v6-l-flex__item">100C</div>
1042
- <div class="pf-v6-l-flex__item">50C</div>
1043
- <div class="pf-v6-l-flex__item">0C</div>
940
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
941
+ <div class="pf-v6-l-grid pf-m-gutter">
942
+ <div class="pf-v6-l-grid__item pf-m-2-col">
943
+ <div
944
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
945
+ >
946
+ <div class="pf-v6-l-flex__item">100C</div>
947
+ <div class="pf-v6-l-flex__item">50C</div>
948
+ <div class="pf-v6-l-flex__item">0C</div>
949
+ </div>
1044
950
  </div>
1045
- </div>
1046
- <div class="pf-v6-l-grid__item pf-m-10-col">
1047
- <div class="ws-chart">
1048
- <img
1049
- src="/assets/images/img_line-chart-2.png"
1050
- alt="Line chart"
1051
- />
951
+ <div class="pf-v6-l-grid__item pf-m-10-col">
952
+ <div class="ws-chart">
953
+ <img
954
+ src="/assets/images/img_line-chart-2.png"
955
+ alt="Line chart"
956
+ />
957
+ </div>
1052
958
  </div>
1053
959
  </div>
1054
960
  </div>
1055
961
  </div>
1056
- </div>
1057
- <hr class="pf-v6-c-divider pf-v5-u-hidden-on-md" />
1058
- <div class="pf-v6-l-grid pf-m-gutter">
1059
- <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1060
- <div
1061
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
1062
- >
1063
- <div class="pf-v6-l-flex__item">
1064
- <b>Speed</b>
1065
- </div>
1066
- <hr
1067
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
1068
- />
1069
- <div class="pf-v6-l-flex__item">
1070
- <span>2.3Ghz</span>
962
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
963
+ <div class="pf-v6-l-grid pf-m-gutter">
964
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
965
+ <div
966
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md"
967
+ >
968
+ <div class="pf-v6-l-flex__item">
969
+ <b>Speed</b>
970
+ </div>
971
+ <hr
972
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
973
+ />
974
+ <div class="pf-v6-l-flex__item">
975
+ <span>2.3Ghz</span>
976
+ </div>
1071
977
  </div>
1072
978
  </div>
1073
- </div>
1074
- <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
1075
- <div class="pf-v6-l-grid pf-m-gutter">
1076
- <div class="pf-v6-l-grid__item pf-m-2-col">
1077
- <div
1078
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
1079
- >
1080
- <div class="pf-v6-l-flex__item">36hz</div>
1081
- <div class="pf-v6-l-flex__item">1.5Ghz</div>
1082
- <div class="pf-v6-l-flex__item">0Ghz</div>
979
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
980
+ <div class="pf-v6-l-grid pf-m-gutter">
981
+ <div class="pf-v6-l-grid__item pf-m-2-col">
982
+ <div
983
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
984
+ >
985
+ <div class="pf-v6-l-flex__item">36hz</div>
986
+ <div class="pf-v6-l-flex__item">1.5Ghz</div>
987
+ <div class="pf-v6-l-flex__item">0Ghz</div>
988
+ </div>
1083
989
  </div>
1084
- </div>
1085
- <div class="pf-v6-l-grid__item pf-m-10-col">
1086
- <div class="ws-chart">
1087
- <img
1088
- src="/assets/images/img_line-chart-2.png"
1089
- alt="Line chart"
1090
- />
990
+ <div class="pf-v6-l-grid__item pf-m-10-col">
991
+ <div class="ws-chart">
992
+ <img
993
+ src="/assets/images/img_line-chart-2.png"
994
+ alt="Line chart"
995
+ />
996
+ </div>
1091
997
  </div>
1092
998
  </div>
1093
999
  </div>
@@ -1096,649 +1002,609 @@ cssPrefix: pf-d-dashboard
1096
1002
  </div>
1097
1003
  </div>
1098
1004
  </div>
1099
- </div>
1100
- <div
1101
- class="pf-v6-c-card pf-m-plain"
1102
- id="dashboard-demo-line-chart-card-1-group-2"
1103
- >
1104
- <div class="pf-v6-c-card__header pf-m-toggle-right">
1105
- <div class="pf-v6-c-card__header-toggle">
1106
- <button
1107
- class="pf-v6-c-button pf-m-plain"
1108
- type="button"
1109
- aria-label="Details"
1110
- id="dashboard-demo-line-chart-card-1-group-2-toggle"
1111
- aria-labelledby="dashboard-demo-line-chart-card-1-group-2-title dashboard-demo-line-chart-card-1-group-2-toggle"
1112
- >
1113
- <span class="pf-v6-c-card__header-toggle-icon">
1114
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1115
- </span>
1116
- </button>
1117
- </div>
1118
- <div class="pf-v6-c-card__title">
1119
- <h2
1120
- class="pf-v6-c-card__title-text"
1121
- id="dashboard-demo-line-chart-card-1-group-2-title"
1122
- >Pod count</h2>
1005
+ <div
1006
+ class="pf-v6-c-card pf-m-plain"
1007
+ id="dashboard-demo-line-chart-card-1-group-2"
1008
+ >
1009
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1010
+ <div class="pf-v6-c-card__header-toggle">
1011
+ <button
1012
+ class="pf-v6-c-button pf-m-plain"
1013
+ id="dashboard-demo-line-chart-card-1-group-2-toggle"
1014
+ type="button"
1015
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-2-title dashboard-demo-line-chart-card-1-group-2-toggle"
1016
+ aria-label="Details"
1017
+ >
1018
+ <span class="pf-v6-c-button__icon pf-m-start">
1019
+ <span class="pf-v6-c-card__header-toggle-icon">
1020
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1021
+ </span>
1022
+ </span>
1023
+ </button>
1024
+ </div>
1025
+ <div class="pf-v6-c-card__title">
1026
+ <h2
1027
+ class="pf-v6-c-card__title-text"
1028
+ id="dashboard-demo-line-chart-card-1-group-2-title"
1029
+ >Pod count</h2>
1030
+ </div>
1123
1031
  </div>
1124
1032
  </div>
1125
- </div>
1126
- <div
1127
- class="pf-v6-c-card pf-m-plain"
1128
- id="dashboard-demo-line-chart-card-1-group-3"
1129
- >
1130
- <div class="pf-v6-c-card__header pf-m-toggle-right">
1131
- <div class="pf-v6-c-card__header-toggle">
1132
- <button
1133
- class="pf-v6-c-button pf-m-plain"
1134
- type="button"
1135
- aria-label="Details"
1136
- id="dashboard-demo-line-chart-card-1-group-3-toggle"
1137
- aria-labelledby="dashboard-demo-line-chart-card-1-group-3-title dashboard-demo-line-chart-card-1-group-3-toggle"
1138
- >
1139
- <span class="pf-v6-c-card__header-toggle-icon">
1140
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1141
- </span>
1142
- </button>
1143
- </div>
1144
- <div class="pf-v6-c-card__title">
1145
- <h2
1146
- class="pf-v6-c-card__title-text"
1147
- id="dashboard-demo-line-chart-card-1-group-3-title"
1148
- >Memory</h2>
1033
+ <div
1034
+ class="pf-v6-c-card pf-m-plain"
1035
+ id="dashboard-demo-line-chart-card-1-group-3"
1036
+ >
1037
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1038
+ <div class="pf-v6-c-card__header-toggle">
1039
+ <button
1040
+ class="pf-v6-c-button pf-m-plain"
1041
+ id="dashboard-demo-line-chart-card-1-group-3-toggle"
1042
+ type="button"
1043
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-3-title dashboard-demo-line-chart-card-1-group-3-toggle"
1044
+ aria-label="Details"
1045
+ >
1046
+ <span class="pf-v6-c-button__icon pf-m-start">
1047
+ <span class="pf-v6-c-card__header-toggle-icon">
1048
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1049
+ </span>
1050
+ </span>
1051
+ </button>
1052
+ </div>
1053
+ <div class="pf-v6-c-card__title">
1054
+ <h2
1055
+ class="pf-v6-c-card__title-text"
1056
+ id="dashboard-demo-line-chart-card-1-group-3-title"
1057
+ >Memory</h2>
1058
+ </div>
1149
1059
  </div>
1150
1060
  </div>
1151
1061
  </div>
1152
- </div>
1153
- <div class="pf-v6-c-card">
1154
- <div class="pf-v6-c-card__title">
1155
- <h2 class="pf-v6-c-title pf-m-xl">Recomendations by severity</h2>
1156
- </div>
1157
- <div class="pf-v6-c-card__body">
1158
- <div class="pf-v6-l-flex pf-m-inline-flex">
1159
- <div class="pf-v6-l-grid pf-m-gutter pf-m-all-3-col">
1160
- <div
1161
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1162
- >
1163
- <span
1164
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1165
- >2</span>
1166
- <span class="pf-v6-u-font-color-200">Critical</span>
1167
- </div>
1168
- <div
1169
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1170
- >
1171
- <span
1172
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1173
- >5</span>
1174
- <span class="pf-v6-u-font-color-200">Important</span>
1175
- </div>
1176
- <div
1177
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1178
- >
1179
- <span
1180
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1181
- >7</span>
1182
- <span class="pf-v6-u-font-color-200">Moderate</span>
1183
- </div>
1184
- <div
1185
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1186
- >
1187
- <span
1188
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1189
- >12</span>
1190
- <span class="pf-v6-u-font-color-200">Low</span>
1062
+ <div class="pf-v6-c-card">
1063
+ <div class="pf-v6-c-card__title">
1064
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by severity</h2>
1065
+ </div>
1066
+ <div class="pf-v6-c-card__body">
1067
+ <div class="pf-v6-l-flex pf-m-inline-flex">
1068
+ <div class="pf-v6-l-grid pf-m-gutter pf-m-all-3-col">
1069
+ <div
1070
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1071
+ >
1072
+ <span
1073
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1074
+ >2</span>
1075
+ <span class="pf-v6-u-font-color-200">Critical</span>
1076
+ </div>
1077
+ <div
1078
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1079
+ >
1080
+ <span
1081
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1082
+ >5</span>
1083
+ <span class="pf-v6-u-font-color-200">Important</span>
1084
+ </div>
1085
+ <div
1086
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1087
+ >
1088
+ <span
1089
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1090
+ >7</span>
1091
+ <span class="pf-v6-u-font-color-200">Moderate</span>
1092
+ </div>
1093
+ <div
1094
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1095
+ >
1096
+ <span
1097
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1098
+ >12</span>
1099
+ <span class="pf-v6-u-font-color-200">Low</span>
1100
+ </div>
1191
1101
  </div>
1192
1102
  </div>
1193
1103
  </div>
1194
- </div>
1195
- <div class="pf-v6-c-card__title">
1196
- <h2 class="pf-v6-c-title pf-m-xl">Recomendations by category</h2>
1197
- </div>
1198
- <div class="pf-v6-c-card__body">
1199
- <img
1200
- src="/assets/images/img_pie-chart-with-legend.png"
1201
- alt="Pie chart"
1202
- width="450"
1203
- />
1204
- </div>
1205
- <div class="pf-v6-c-card__footer">
1206
- <a href="#">View more</a>
1104
+ <div class="pf-v6-c-card__title">
1105
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by category</h2>
1106
+ </div>
1107
+ <div class="pf-v6-c-card__body">
1108
+ <img
1109
+ src="/assets/images/img_pie-chart-with-legend.png"
1110
+ alt="Pie chart"
1111
+ width="450"
1112
+ />
1113
+ </div>
1114
+ <div class="pf-v6-c-card__footer">
1115
+ <a href="#">View more</a>
1116
+ </div>
1207
1117
  </div>
1208
1118
  </div>
1209
1119
  </div>
1210
- </div>
1211
- <div
1212
- class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1213
- style="--pf-v5-l-grid--item--Order-on-lg:2"
1214
- >
1215
1120
  <div
1216
- class="pf-v6-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg"
1121
+ class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1122
+ style="--pf-v6-l-grid--item--Order-on-lg:2"
1217
1123
  >
1218
- <div class="pf-v6-l-flex__item pf-m-flex-1">
1219
- <div class="pf-v6-c-card" id="dashboard-demo-details-card-1">
1220
- <div class="pf-v6-c-card__title">
1221
- <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
1222
- </div>
1223
- <div class="pf-v6-c-card__body">
1224
- <dl class="pf-v6-c-description-list">
1225
- <div class="pf-v6-c-description-list__group">
1226
- <dt
1227
- class="pf-v6-c-description-list__term"
1228
- >Cluster API Address</dt>
1229
- <dd class="pf-v6-c-description-list__description">
1230
- <div class="pf-v6-c-description-list__text">
1231
- <a href="#">https://api1.devcluster.openshift.com</a>
1232
- </div>
1233
- </dd>
1234
- </div>
1235
- <div class="pf-v6-c-description-list__group">
1236
- <dt class="pf-v6-c-description-list__term">Cluster ID</dt>
1237
- <dd class="pf-v6-c-description-list__description">
1238
- <div
1239
- class="pf-v6-c-description-list__text"
1240
- >63b97ac1-b850-41d9-8820-239becde9e86</div>
1241
- </dd>
1242
- </div>
1243
- <div class="pf-v6-c-description-list__group">
1244
- <dt class="pf-v6-c-description-list__term">Provider</dt>
1245
- <dd class="pf-v6-c-description-list__description">
1246
- <div class="pf-v6-c-description-list__text">AWS</div>
1247
- </dd>
1248
- </div>
1249
- <div class="pf-v6-c-description-list__group">
1250
- <dt
1251
- class="pf-v6-c-description-list__term"
1252
- >OpenShift Version</dt>
1253
- <dd class="pf-v6-c-description-list__description">
1254
- <div
1255
- class="pf-v6-c-description-list__text"
1256
- >4.5.0.ci-2020-06-16-015028</div>
1257
- </dd>
1258
- </div>
1259
- <div class="pf-v6-c-description-list__group">
1260
- <dt
1261
- class="pf-v6-c-description-list__term"
1262
- >Update Channel</dt>
1263
- <dd class="pf-v6-c-description-list__description">
1264
- <div class="pf-v6-c-description-list__text">stable-4.5</div>
1265
- </dd>
1266
- </div>
1267
- </dl>
1268
- </div>
1269
- <hr class="pf-v6-c-divider" />
1270
- <div class="pf-v6-c-card__footer">
1271
- <a href="#">View Settings</a>
1124
+ <div
1125
+ class="pf-v6-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg"
1126
+ >
1127
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1128
+ <div class="pf-v6-c-card" id="dashboard-demo-details-card-1">
1129
+ <div class="pf-v6-c-card__title">
1130
+ <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
1131
+ </div>
1132
+ <div class="pf-v6-c-card__body">
1133
+ <dl class="pf-v6-c-description-list">
1134
+ <div class="pf-v6-c-description-list__group">
1135
+ <dt
1136
+ class="pf-v6-c-description-list__term"
1137
+ >Cluster API Address</dt>
1138
+ <dd class="pf-v6-c-description-list__description">
1139
+ <div class="pf-v6-c-description-list__text">
1140
+ <a href="#">https://api1.devcluster.openshift.com</a>
1141
+ </div>
1142
+ </dd>
1143
+ </div>
1144
+ <div class="pf-v6-c-description-list__group">
1145
+ <dt class="pf-v6-c-description-list__term">Cluster ID</dt>
1146
+ <dd class="pf-v6-c-description-list__description">
1147
+ <div
1148
+ class="pf-v6-c-description-list__text"
1149
+ >63b97ac1-b850-41d9-8820-239becde9e86</div>
1150
+ </dd>
1151
+ </div>
1152
+ <div class="pf-v6-c-description-list__group">
1153
+ <dt class="pf-v6-c-description-list__term">Provider</dt>
1154
+ <dd class="pf-v6-c-description-list__description">
1155
+ <div class="pf-v6-c-description-list__text">AWS</div>
1156
+ </dd>
1157
+ </div>
1158
+ <div class="pf-v6-c-description-list__group">
1159
+ <dt
1160
+ class="pf-v6-c-description-list__term"
1161
+ >OpenShift Version</dt>
1162
+ <dd class="pf-v6-c-description-list__description">
1163
+ <div
1164
+ class="pf-v6-c-description-list__text"
1165
+ >4.5.0.ci-2020-06-16-015028</div>
1166
+ </dd>
1167
+ </div>
1168
+ <div class="pf-v6-c-description-list__group">
1169
+ <dt
1170
+ class="pf-v6-c-description-list__term"
1171
+ >Update Channel</dt>
1172
+ <dd class="pf-v6-c-description-list__description">
1173
+ <div
1174
+ class="pf-v6-c-description-list__text"
1175
+ >stable-4.5</div>
1176
+ </dd>
1177
+ </div>
1178
+ </dl>
1179
+ </div>
1180
+ <hr class="pf-v6-c-divider" />
1181
+ <div class="pf-v6-c-card__footer">
1182
+ <a href="#">View Settings</a>
1183
+ </div>
1272
1184
  </div>
1273
1185
  </div>
1274
- </div>
1275
- <div class="pf-v6-l-flex__item pf-m-flex-1">
1276
- <div class="pf-v6-c-card" id="dashboard-demo-data-list-card-1">
1186
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1277
1187
  <div
1278
- class="pf-v6-c-card__header pf-v5-u-align-items-flex-start"
1188
+ class="pf-v6-c-card"
1189
+ id="dashboard-demo-data-list-card-1"
1279
1190
  >
1280
1191
  <div
1281
- class="pf-v6-c-card__title"
1282
- id="dashboard-demo-data-list-card-1-title1"
1192
+ class="pf-v6-c-card__header pf-v6-u-align-items-flex-start"
1283
1193
  >
1284
- <h2 class="pf-v6-c-title pf-m-lg">Inventory</h2>
1194
+ <div
1195
+ class="pf-v6-c-card__title"
1196
+ id="dashboard-demo-data-list-card-1-title1"
1197
+ >
1198
+ <h2 class="pf-v6-c-title pf-m-lg">Inventory</h2>
1199
+ </div>
1285
1200
  </div>
1286
- </div>
1287
- <ul
1288
- class="pf-v6-c-data-list pf-m-grid-none"
1289
- role="list"
1290
- aria-label="Simple data list example"
1291
- id="dashboard-demo-data-list-card-1-data-list"
1292
- >
1293
- <li
1294
- class="pf-v6-c-data-list__item"
1295
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-1"
1201
+ <ul
1202
+ class="pf-v6-c-data-list pf-m-grid-none"
1203
+ role="list"
1204
+ aria-label="Simple data list example"
1205
+ id="dashboard-demo-data-list-card-1-data-list"
1296
1206
  >
1297
- <div class="pf-v6-c-data-list__item-row">
1298
- <div class="pf-v6-c-data-list__item-content">
1299
- <div
1300
- class="pf-v6-c-data-list__cell"
1301
- id="dashboard-demo-data-list-card-1-data-list-item-1"
1302
- >3 Nodes</div>
1303
- <div
1304
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1305
- >
1306
- <a href="#">
1307
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1308
- <span>3</span>
1309
- <i
1310
- class="fas fa-check-circle pf-v6-u-success-color-100"
1311
- aria-hidden="true"
1312
- ></i>
1313
- </div>
1314
- </a>
1207
+ <li
1208
+ class="pf-v6-c-data-list__item"
1209
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-1"
1210
+ >
1211
+ <div class="pf-v6-c-data-list__item-row">
1212
+ <div class="pf-v6-c-data-list__item-content">
1213
+ <div
1214
+ class="pf-v6-c-data-list__cell"
1215
+ id="dashboard-demo-data-list-card-1-data-list-item-1"
1216
+ >3 Nodes</div>
1217
+ <div
1218
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1219
+ >
1220
+ <a href="#">
1221
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1222
+ <span>3</span>
1223
+ <i
1224
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1225
+ aria-hidden="true"
1226
+ ></i>
1227
+ </div>
1228
+ </a>
1229
+ </div>
1315
1230
  </div>
1316
1231
  </div>
1317
- </div>
1318
- </li>
1319
- <li
1320
- class="pf-v6-c-data-list__item"
1321
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-2"
1322
- >
1323
- <div class="pf-v6-c-data-list__item-row">
1324
- <div class="pf-v6-c-data-list__item-content">
1325
- <div
1326
- class="pf-v6-c-data-list__cell"
1327
- id="dashboard-demo-data-list-card-1-data-list-item-2"
1328
- >8 Disks</div>
1329
- <div
1330
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1331
- >
1332
- <a href="#">
1333
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1334
- <span>8</span>
1335
- <i
1336
- class="fas fa-check-circle pf-v6-u-success-color-100"
1337
- aria-hidden="true"
1338
- ></i>
1339
- </div>
1340
- </a>
1232
+ </li>
1233
+ <li
1234
+ class="pf-v6-c-data-list__item"
1235
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-2"
1236
+ >
1237
+ <div class="pf-v6-c-data-list__item-row">
1238
+ <div class="pf-v6-c-data-list__item-content">
1239
+ <div
1240
+ class="pf-v6-c-data-list__cell"
1241
+ id="dashboard-demo-data-list-card-1-data-list-item-2"
1242
+ >8 Disks</div>
1243
+ <div
1244
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1245
+ >
1246
+ <a href="#">
1247
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1248
+ <span>8</span>
1249
+ <i
1250
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1251
+ aria-hidden="true"
1252
+ ></i>
1253
+ </div>
1254
+ </a>
1255
+ </div>
1341
1256
  </div>
1342
1257
  </div>
1343
- </div>
1344
- </li>
1345
- <li
1346
- class="pf-v6-c-data-list__item"
1347
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-3"
1348
- >
1349
- <div class="pf-v6-c-data-list__item-row">
1350
- <div class="pf-v6-c-data-list__item-content">
1351
- <div
1352
- class="pf-v6-c-data-list__cell"
1353
- id="dashboard-demo-data-list-card-1-data-list-item-3"
1354
- >20 Pods</div>
1355
- <div
1356
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1357
- >
1358
- <a href="#">
1359
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1360
- <span>20</span>
1361
- <i
1362
- class="fas fa-check-circle pf-v6-u-success-color-100"
1363
- aria-hidden="true"
1364
- ></i>
1365
- </div>
1366
- </a>
1258
+ </li>
1259
+ <li
1260
+ class="pf-v6-c-data-list__item"
1261
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-3"
1262
+ >
1263
+ <div class="pf-v6-c-data-list__item-row">
1264
+ <div class="pf-v6-c-data-list__item-content">
1265
+ <div
1266
+ class="pf-v6-c-data-list__cell"
1267
+ id="dashboard-demo-data-list-card-1-data-list-item-3"
1268
+ >20 Pods</div>
1269
+ <div
1270
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1271
+ >
1272
+ <a href="#">
1273
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1274
+ <span>20</span>
1275
+ <i
1276
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1277
+ aria-hidden="true"
1278
+ ></i>
1279
+ </div>
1280
+ </a>
1281
+ </div>
1367
1282
  </div>
1368
1283
  </div>
1369
- </div>
1370
- </li>
1371
- <li
1372
- class="pf-v6-c-data-list__item"
1373
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-4"
1374
- >
1375
- <div class="pf-v6-c-data-list__item-row">
1376
- <div class="pf-v6-c-data-list__item-content">
1377
- <div
1378
- class="pf-v6-c-data-list__cell"
1379
- id="dashboard-demo-data-list-card-1-data-list-item-4"
1380
- >12 PVs</div>
1381
- <div
1382
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1383
- >
1384
- <a href="#">
1385
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1386
- <span>12</span>
1387
- <i
1388
- class="fas fa-check-circle pf-v6-u-success-color-100"
1389
- aria-hidden="true"
1390
- ></i>
1391
- </div>
1392
- </a>
1284
+ </li>
1285
+ <li
1286
+ class="pf-v6-c-data-list__item"
1287
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-4"
1288
+ >
1289
+ <div class="pf-v6-c-data-list__item-row">
1290
+ <div class="pf-v6-c-data-list__item-content">
1291
+ <div
1292
+ class="pf-v6-c-data-list__cell"
1293
+ id="dashboard-demo-data-list-card-1-data-list-item-4"
1294
+ >12 PVs</div>
1295
+ <div
1296
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1297
+ >
1298
+ <a href="#">
1299
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1300
+ <span>12</span>
1301
+ <i
1302
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1303
+ aria-hidden="true"
1304
+ ></i>
1305
+ </div>
1306
+ </a>
1307
+ </div>
1393
1308
  </div>
1394
1309
  </div>
1395
- </div>
1396
- </li>
1397
- <li
1398
- class="pf-v6-c-data-list__item"
1399
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-5"
1400
- >
1401
- <div class="pf-v6-c-data-list__item-row">
1402
- <div class="pf-v6-c-data-list__item-content">
1403
- <div
1404
- class="pf-v6-c-data-list__cell"
1405
- id="dashboard-demo-data-list-card-1-data-list-item-5"
1406
- >18 PVCs</div>
1407
- <div
1408
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1409
- >
1410
- <a href="#">
1411
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1412
- <span>18</span>
1413
- <i
1414
- class="fas fa-check-circle pf-v6-u-success-color-100"
1415
- aria-hidden="true"
1416
- ></i>
1417
- </div>
1418
- </a>
1310
+ </li>
1311
+ <li
1312
+ class="pf-v6-c-data-list__item"
1313
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-5"
1314
+ >
1315
+ <div class="pf-v6-c-data-list__item-row">
1316
+ <div class="pf-v6-c-data-list__item-content">
1317
+ <div
1318
+ class="pf-v6-c-data-list__cell"
1319
+ id="dashboard-demo-data-list-card-1-data-list-item-5"
1320
+ >18 PVCs</div>
1321
+ <div
1322
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1323
+ >
1324
+ <a href="#">
1325
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1326
+ <span>18</span>
1327
+ <i
1328
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1329
+ aria-hidden="true"
1330
+ ></i>
1331
+ </div>
1332
+ </a>
1333
+ </div>
1419
1334
  </div>
1420
1335
  </div>
1421
- </div>
1422
- </li>
1423
- </ul>
1336
+ </li>
1337
+ </ul>
1338
+ </div>
1424
1339
  </div>
1425
1340
  </div>
1426
1341
  </div>
1427
- </div>
1428
- <div
1429
- class="pf-v6-l-grid__item pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1430
- style="--pf-v5-l-grid--item--Order-on-lg:4"
1431
- >
1432
- <div class="pf-v6-l-flex pf-m-column">
1433
- <div class="pf-v6-c-card" id="dashboard-demo-events-card-1">
1434
- <div class="pf-v6-c-card__header">
1435
- <div class="pf-v6-c-card__actions pf-m-no-offset">
1436
- <div class="pf-v6-c-select">
1437
- <span
1438
- id="dashboard-demo-events-card-1-select-dropdown-label"
1439
- hidden
1440
- >Choose one</span>
1441
-
1342
+ <div
1343
+ class="pf-v6-l-grid__item pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1344
+ style="--pf-v6-l-grid--item--Order-on-lg:4"
1345
+ >
1346
+ <div class="pf-v6-l-flex pf-m-column">
1347
+ <div class="pf-v6-c-card" id="dashboard-demo-events-card-1">
1348
+ <div class="pf-v6-c-card__header">
1349
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1442
1350
  <button
1443
- class="pf-v6-c-select__toggle pf-m-plain"
1351
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1444
1352
  type="button"
1445
- id="dashboard-demo-events-card-1-select-dropdown-toggle"
1446
- aria-haspopup="true"
1447
1353
  aria-expanded="false"
1448
- aria-labelledby="dashboard-demo-events-card-1-select-dropdown-label dashboard-demo-events-card-1-select-dropdown-toggle"
1354
+ id="dashboard-demo-events-card-1-select-dropdown"
1449
1355
  >
1450
- <div class="pf-v6-c-select__toggle-wrapper">
1451
- <span class="pf-v6-c-select__toggle-text">Status</span>
1452
- </div>
1453
- <span class="pf-v6-c-select__toggle-arrow">
1454
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1356
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
1357
+ <span class="pf-v6-c-menu-toggle__controls">
1358
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1359
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1360
+ </span>
1455
1361
  </span>
1456
1362
  </button>
1457
-
1458
- <ul
1459
- class="pf-v6-c-select__menu pf-m-align-right"
1460
- role="listbox"
1461
- aria-labelledby="dashboard-demo-events-card-1-select-dropdown-label"
1462
- hidden
1463
- >
1464
- <li role="presentation">
1465
- <button
1466
- class="pf-v6-c-select__menu-item"
1467
- role="option"
1468
- >Running</button>
1469
- </li>
1470
- <li role="presentation">
1471
- <button
1472
- class="pf-v6-c-select__menu-item pf-m-selected"
1473
- role="option"
1474
- aria-selected="true"
1475
- >
1476
- Stopped
1477
- <span class="pf-v6-c-select__menu-item-icon">
1478
- <i class="fas fa-check" aria-hidden="true"></i>
1479
- </span>
1480
- </button>
1481
- </li>
1482
- <li role="presentation">
1483
- <button
1484
- class="pf-v6-c-select__menu-item"
1485
- role="option"
1486
- >Down</button>
1487
- </li>
1488
- <li role="presentation">
1489
- <button
1490
- class="pf-v6-c-select__menu-item"
1491
- role="option"
1492
- >Degraded</button>
1493
- </li>
1494
- <li role="presentation">
1495
- <button
1496
- class="pf-v6-c-select__menu-item"
1497
- role="option"
1498
- >Needs maintenance</button>
1499
- </li>
1500
- </ul>
1363
+ </div>
1364
+ <div
1365
+ class="pf-v6-c-card__title"
1366
+ id="dashboard-demo-events-card-1-title1"
1367
+ style="padding-block-start: 3px;"
1368
+ >
1369
+ <h2 class="pf-v6-c-title pf-m-xl">Events</h2>
1501
1370
  </div>
1502
1371
  </div>
1503
- <div
1504
- class="pf-v6-c-card__title"
1505
- id="dashboard-demo-events-card-1-title1"
1506
- style="padding-block-start: 3px;"
1507
- >
1508
- <h2 class="pf-v6-c-title pf-m-xl">Events</h2>
1509
- </div>
1510
- </div>
1511
- <div class="pf-v6-c-card__body">
1512
- <dl class="pf-v6-c-description-list pf-m-compact">
1513
- <div class="pf-v6-c-description-list__group">
1514
- <dt class="pf-v6-c-description-list__term">
1515
- <div class="pf-v6-l-flex pf-m-nowrap">
1516
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1517
- <i
1518
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1519
- aria-hidden="true"
1520
- ></i>
1372
+ <div class="pf-v6-c-card__body">
1373
+ <dl class="pf-v6-c-description-list pf-m-compact">
1374
+ <div class="pf-v6-c-description-list__group">
1375
+ <dt class="pf-v6-c-description-list__term">
1376
+ <div class="pf-v6-l-flex pf-m-nowrap">
1377
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1378
+ <i
1379
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1380
+ aria-hidden="true"
1381
+ ></i>
1382
+ </div>
1383
+ <div
1384
+ class="pf-v6-l-flex__item"
1385
+ >Readiness probe failed</div>
1521
1386
  </div>
1522
- <div class="pf-v6-l-flex__item">Readiness probe failed</div>
1523
- </div>
1524
- </dt>
1525
- <dd class="pf-v6-c-description-list__description">
1526
- <div
1527
- class="pf-v6-c-description-list__text"
1528
- >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
1529
- </dd>
1530
- <dd class="pf-v6-c-description-list__description">
1531
- <div class="pf-v6-c-description-list__text">
1532
- <time
1533
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1534
- >Jun 17, 11:02 am</time>
1535
- </div>
1536
- </dd>
1537
- </div>
1538
- <div class="pf-v6-c-description-list__group">
1539
- <dt class="pf-v6-c-description-list__term">
1540
- <div class="pf-v6-l-flex pf-m-nowrap">
1541
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1542
- <i
1543
- class="fas fa-check-circle pf-v6-u-success-color-100"
1544
- aria-hidden="true"
1545
- ></i>
1387
+ </dt>
1388
+ <dd class="pf-v6-c-description-list__description">
1389
+ <div
1390
+ class="pf-v6-c-description-list__text"
1391
+ >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
1392
+ </dd>
1393
+ <dd class="pf-v6-c-description-list__description">
1394
+ <div class="pf-v6-c-description-list__text">
1395
+ <time
1396
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1397
+ >Jun 17, 11:02 am</time>
1546
1398
  </div>
1547
- <div class="pf-v6-l-flex__item">Successful assignment</div>
1548
- </div>
1549
- </dt>
1550
- <dd class="pf-v6-c-description-list__description">
1551
- <div
1552
- class="pf-v6-c-description-list__text"
1553
- >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
1554
- </dd>
1555
- <dd class="pf-v6-c-description-list__description">
1556
- <div class="pf-v6-c-description-list__text">
1557
- <time
1558
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1559
- >Jun 17, 11:13 am</time>
1560
- </div>
1561
- </dd>
1562
- </div>
1563
- <div class="pf-v6-c-description-list__group">
1564
- <dt class="pf-v6-c-description-list__term">
1565
- <div class="pf-v6-l-flex pf-m-nowrap">
1566
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1567
- <svg
1568
- class="pf-v6-c-spinner pf-m-md"
1569
- role="progressbar"
1570
- viewBox="0 0 100 100"
1571
- aria-label="Loading"
1572
- >
1573
- <circle
1574
- class="pf-v6-c-spinner__path"
1575
- cx="50"
1576
- cy="50"
1577
- r="45"
1578
- fill="none"
1579
- />
1580
- </svg>
1399
+ </dd>
1400
+ </div>
1401
+ <div class="pf-v6-c-description-list__group">
1402
+ <dt class="pf-v6-c-description-list__term">
1403
+ <div class="pf-v6-l-flex pf-m-nowrap">
1404
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1405
+ <i
1406
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1407
+ aria-hidden="true"
1408
+ ></i>
1409
+ </div>
1410
+ <div
1411
+ class="pf-v6-l-flex__item"
1412
+ >Successful assignment</div>
1581
1413
  </div>
1582
- <div class="pf-v6-l-flex__item">Pulling image</div>
1583
- </div>
1584
- </dt>
1585
- <dd class="pf-v6-c-description-list__description">
1586
- <div
1587
- class="pf-v6-c-description-list__text"
1588
- >Pulling image "openshift/hello-openshift"</div>
1589
- </dd>
1590
- <dd class="pf-v6-c-description-list__description">
1591
- <div class="pf-v6-c-description-list__text">
1592
- <time
1593
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1594
- >Jun 17, 10:59 am</time>
1595
- </div>
1596
- </dd>
1597
- </div>
1598
- <div class="pf-v6-c-description-list__group">
1599
- <dt class="pf-v6-c-description-list__term">
1600
- <div class="pf-v6-l-flex pf-m-nowrap">
1601
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1602
- <i
1603
- class="fas fa-check-circle pf-v6-u-success-color-100"
1604
- aria-hidden="true"
1605
- ></i>
1414
+ </dt>
1415
+ <dd class="pf-v6-c-description-list__description">
1416
+ <div
1417
+ class="pf-v6-c-description-list__text"
1418
+ >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
1419
+ </dd>
1420
+ <dd class="pf-v6-c-description-list__description">
1421
+ <div class="pf-v6-c-description-list__text">
1422
+ <time
1423
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1424
+ >Jun 17, 11:13 am</time>
1606
1425
  </div>
1607
- <div class="pf-v6-l-flex__item">Created container</div>
1608
- </div>
1609
- </dt>
1610
- <dd class="pf-v6-c-description-list__description">
1611
- <div
1612
- class="pf-v6-c-description-list__text"
1613
- >Created container hello-openshift</div>
1614
- </dd>
1615
- <dd class="pf-v6-c-description-list__description">
1616
- <div class="pf-v6-c-description-list__text">
1617
- <time
1618
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1619
- >Jun 17, 10:45 am</time>
1620
- </div>
1621
- </dd>
1622
- </div>
1426
+ </dd>
1427
+ </div>
1428
+ <div class="pf-v6-c-description-list__group">
1429
+ <dt class="pf-v6-c-description-list__term">
1430
+ <div class="pf-v6-l-flex pf-m-nowrap">
1431
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1432
+ <svg
1433
+ class="pf-v6-c-spinner pf-m-md"
1434
+ role="progressbar"
1435
+ viewBox="0 0 100 100"
1436
+ aria-label="Loading"
1437
+ >
1438
+ <circle
1439
+ class="pf-v6-c-spinner__path"
1440
+ cx="50"
1441
+ cy="50"
1442
+ r="45"
1443
+ fill="none"
1444
+ />
1445
+ </svg>
1446
+ </div>
1447
+ <div class="pf-v6-l-flex__item">Pulling image</div>
1448
+ </div>
1449
+ </dt>
1450
+ <dd class="pf-v6-c-description-list__description">
1451
+ <div
1452
+ class="pf-v6-c-description-list__text"
1453
+ >Pulling image "openshift/hello-openshift"</div>
1454
+ </dd>
1455
+ <dd class="pf-v6-c-description-list__description">
1456
+ <div class="pf-v6-c-description-list__text">
1457
+ <time
1458
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1459
+ >Jun 17, 10:59 am</time>
1460
+ </div>
1461
+ </dd>
1462
+ </div>
1463
+ <div class="pf-v6-c-description-list__group">
1464
+ <dt class="pf-v6-c-description-list__term">
1465
+ <div class="pf-v6-l-flex pf-m-nowrap">
1466
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1467
+ <i
1468
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1469
+ aria-hidden="true"
1470
+ ></i>
1471
+ </div>
1472
+ <div class="pf-v6-l-flex__item">Created container</div>
1473
+ </div>
1474
+ </dt>
1475
+ <dd class="pf-v6-c-description-list__description">
1476
+ <div
1477
+ class="pf-v6-c-description-list__text"
1478
+ >Created container hello-openshift</div>
1479
+ </dd>
1480
+ <dd class="pf-v6-c-description-list__description">
1481
+ <div class="pf-v6-c-description-list__text">
1482
+ <time
1483
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1484
+ >Jun 17, 10:45 am</time>
1485
+ </div>
1486
+ </dd>
1487
+ </div>
1623
1488
 
1624
- <div class="pf-v6-c-description-list__group">
1625
- <dt class="pf-v6-c-description-list__term">
1626
- <div class="pf-v6-l-flex pf-m-nowrap">
1627
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1628
- <i
1629
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
1630
- aria-hidden="true"
1631
- ></i>
1489
+ <div class="pf-v6-c-description-list__group">
1490
+ <dt class="pf-v6-c-description-list__term">
1491
+ <div class="pf-v6-l-flex pf-m-nowrap">
1492
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1493
+ <i
1494
+ class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
1495
+ aria-hidden="true"
1496
+ ></i>
1497
+ </div>
1498
+ <div
1499
+ class="pf-v6-l-flex__item"
1500
+ >CPU utilitization over 50%</div>
1632
1501
  </div>
1502
+ </dt>
1503
+ <dd class="pf-v6-c-description-list__description">
1633
1504
  <div
1634
- class="pf-v6-l-flex__item"
1635
- >CPU utilitization over 50%</div>
1636
- </div>
1637
- </dt>
1638
- <dd class="pf-v6-c-description-list__description">
1639
- <div
1640
- class="pf-v6-c-description-list__text"
1641
- >Migrated 2 pods to other hosts</div>
1642
- </dd>
1643
- <dd class="pf-v6-c-description-list__description">
1644
- <div class="pf-v6-c-description-list__text">
1645
- <time
1646
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1647
- >Jun 17, 10:33 am</time>
1648
- </div>
1649
- </dd>
1650
- </div>
1505
+ class="pf-v6-c-description-list__text"
1506
+ >Migrated 2 pods to other hosts</div>
1507
+ </dd>
1508
+ <dd class="pf-v6-c-description-list__description">
1509
+ <div class="pf-v6-c-description-list__text">
1510
+ <time
1511
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1512
+ >Jun 17, 10:33 am</time>
1513
+ </div>
1514
+ </dd>
1515
+ </div>
1651
1516
 
1652
- <div class="pf-v6-c-description-list__group">
1653
- <dt class="pf-v6-c-description-list__term">
1654
- <div class="pf-v6-l-flex pf-m-nowrap">
1655
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1656
- <i
1657
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1658
- aria-hidden="true"
1659
- ></i>
1517
+ <div class="pf-v6-c-description-list__group">
1518
+ <dt class="pf-v6-c-description-list__term">
1519
+ <div class="pf-v6-l-flex pf-m-nowrap">
1520
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1521
+ <i
1522
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1523
+ aria-hidden="true"
1524
+ ></i>
1525
+ </div>
1526
+ <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1660
1527
  </div>
1661
- <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1662
- </div>
1663
- </dt>
1664
- <dd class="pf-v6-c-description-list__description">
1665
- <div
1666
- class="pf-v6-c-description-list__text"
1667
- >Rebuild initiated as Disk 5 failed</div>
1668
- </dd>
1669
- <dd class="pf-v6-c-description-list__description">
1670
- <div class="pf-v6-c-description-list__text">
1671
- <time
1672
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1673
- >Jun 17, 10:33 am</time>
1674
- </div>
1675
- </dd>
1676
- </div>
1528
+ </dt>
1529
+ <dd class="pf-v6-c-description-list__description">
1530
+ <div
1531
+ class="pf-v6-c-description-list__text"
1532
+ >Rebuild initiated as Disk 5 failed</div>
1533
+ </dd>
1534
+ <dd class="pf-v6-c-description-list__description">
1535
+ <div class="pf-v6-c-description-list__text">
1536
+ <time
1537
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1538
+ >Jun 17, 10:33 am</time>
1539
+ </div>
1540
+ </dd>
1541
+ </div>
1677
1542
 
1678
- <div class="pf-v6-c-description-list__group">
1679
- <dt class="pf-v6-c-description-list__term">
1680
- <div class="pf-v6-l-flex pf-m-nowrap">
1681
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1682
- <i
1683
- class="fas fa-check-circle pf-v6-u-success-color-100"
1684
- aria-hidden="true"
1685
- ></i>
1543
+ <div class="pf-v6-c-description-list__group">
1544
+ <dt class="pf-v6-c-description-list__term">
1545
+ <div class="pf-v6-l-flex pf-m-nowrap">
1546
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1547
+ <i
1548
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1549
+ aria-hidden="true"
1550
+ ></i>
1551
+ </div>
1552
+ <div class="pf-v6-l-flex__item">Created container</div>
1686
1553
  </div>
1687
- <div class="pf-v6-l-flex__item">Created container</div>
1688
- </div>
1689
- </dt>
1690
- <dd class="pf-v6-c-description-list__description">
1691
- <div
1692
- class="pf-v6-c-description-list__text"
1693
- >Created container hello-openshift-123</div>
1694
- </dd>
1695
- <dd class="pf-v6-c-description-list__description">
1696
- <div class="pf-v6-c-description-list__text">
1697
- <time
1698
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1699
- >Jun 17, 10:31 am</time>
1700
- </div>
1701
- </dd>
1702
- </div>
1554
+ </dt>
1555
+ <dd class="pf-v6-c-description-list__description">
1556
+ <div
1557
+ class="pf-v6-c-description-list__text"
1558
+ >Created container hello-openshift-123</div>
1559
+ </dd>
1560
+ <dd class="pf-v6-c-description-list__description">
1561
+ <div class="pf-v6-c-description-list__text">
1562
+ <time
1563
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1564
+ >Jun 17, 10:31 am</time>
1565
+ </div>
1566
+ </dd>
1567
+ </div>
1703
1568
 
1704
- <div class="pf-v6-c-description-list__group">
1705
- <dt class="pf-v6-c-description-list__term">
1706
- <div class="pf-v6-l-flex pf-m-nowrap">
1707
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1708
- <i
1709
- class="fas fa-check-circle pf-v6-u-success-color-100"
1710
- aria-hidden="true"
1711
- ></i>
1569
+ <div class="pf-v6-c-description-list__group">
1570
+ <dt class="pf-v6-c-description-list__term">
1571
+ <div class="pf-v6-l-flex pf-m-nowrap">
1572
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1573
+ <i
1574
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1575
+ aria-hidden="true"
1576
+ ></i>
1577
+ </div>
1578
+ <div class="pf-v6-l-flex__item">Created container</div>
1712
1579
  </div>
1713
- <div class="pf-v6-l-flex__item">Created container</div>
1714
- </div>
1715
- </dt>
1716
- <dd class="pf-v6-c-description-list__description">
1717
- <div
1718
- class="pf-v6-c-description-list__text"
1719
- >Created container hello-openshift-456</div>
1720
- </dd>
1721
- <dd class="pf-v6-c-description-list__description">
1722
- <div class="pf-v6-c-description-list__text">
1723
- <time
1724
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1725
- >Jun 17, 10:30 am</time>
1726
- </div>
1727
- </dd>
1728
- </div>
1729
- </dl>
1730
- </div>
1731
- <hr class="pf-v6-c-divider" />
1732
- <div class="pf-v6-c-card__footer">
1733
- <a href="#">View all events</a>
1580
+ </dt>
1581
+ <dd class="pf-v6-c-description-list__description">
1582
+ <div
1583
+ class="pf-v6-c-description-list__text"
1584
+ >Created container hello-openshift-456</div>
1585
+ </dd>
1586
+ <dd class="pf-v6-c-description-list__description">
1587
+ <div class="pf-v6-c-description-list__text">
1588
+ <time
1589
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1590
+ >Jun 17, 10:30 am</time>
1591
+ </div>
1592
+ </dd>
1593
+ </div>
1594
+ </dl>
1595
+ </div>
1596
+ <hr class="pf-v6-c-divider" />
1597
+ <div class="pf-v6-c-card__footer">
1598
+ <a href="#">View all events</a>
1599
+ </div>
1734
1600
  </div>
1735
1601
  </div>
1736
1602
  </div>
1737
1603
  </div>
1738
1604
  </div>
1739
- </div>
1740
- </section>
1741
- </main>
1605
+ </section>
1606
+ </main>
1607
+ </div>
1742
1608
  </div>
1743
1609
 
1744
1610
  ```