@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

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 (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/demos/Card/examples/Card.md CHANGED
@@ -68,57 +68,63 @@ wrapperTag: div
68
68
  </ul>
69
69
  </div>
70
70
  </div>
71
- <div class="pf-l-level pf-m-gutter">
72
- <div
73
- class="pf-c-card__title"
74
- id="card-demo-horizontal-grid-collapsed-example-title"
75
- >Getting started</div>
76
- <div class="pf-c-label-group">
77
- <div class="pf-c-label-group__main">
78
- <ul
79
- class="pf-c-label-group__list"
80
- role="list"
81
- aria-label="Group of labels"
82
- >
83
- <li class="pf-c-label-group__list-item">
84
- <span class="pf-c-label pf-m-blue pf-m-compact">
85
- <span class="pf-c-label__content">
86
- <span class="pf-c-label__icon">
87
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
71
+ <div class="pf-c-card__header-main">
72
+ <div class="pf-l-split pf-m-gutter pf-m-wrap">
73
+ <div class="pf-c-card__title">
74
+ <h2
75
+ class="pf-c-card__title-text"
76
+ id="card-demo-horizontal-grid-collapsed-example-title"
77
+ >Getting started</h2>
78
+ </div>
79
+ <div class="pf-c-label-group">
80
+ <div class="pf-c-label-group__main">
81
+ <ul
82
+ class="pf-c-label-group__list"
83
+ role="list"
84
+ aria-label="Group of labels"
85
+ >
86
+ <li class="pf-c-label-group__list-item">
87
+ <span class="pf-c-label pf-m-compact">
88
+ <span class="pf-c-label__content">
89
+ <span class="pf-c-label__icon">
90
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
91
+ </span>
92
+ <span class="pf-c-label__text">Set up your cluster</span>
88
93
  </span>
89
- Set up your cluster
90
94
  </span>
91
- </span>
92
- </li>
93
- <li class="pf-c-label-group__list-item">
94
- <span class="pf-c-label pf-m-purple pf-m-compact">
95
- <span class="pf-c-label__content">
96
- <span class="pf-c-label__icon">
97
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
95
+ </li>
96
+ <li class="pf-c-label-group__list-item">
97
+ <span class="pf-c-label pf-m-compact pf-m-purple">
98
+ <span class="pf-c-label__content">
99
+ <span class="pf-c-label__icon">
100
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
101
+ </span>
102
+ <span class="pf-c-label__text">Guided tours</span>
98
103
  </span>
99
- Guided tours
100
104
  </span>
101
- </span>
102
- </li>
103
- <li class="pf-c-label-group__list-item">
104
- <span class="pf-c-label pf-m-green pf-m-compact">
105
- <span class="pf-c-label__content">
106
- <span class="pf-c-label__icon">
107
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
105
+ </li>
106
+ <li class="pf-c-label-group__list-item">
107
+ <span class="pf-c-label pf-m-compact pf-m-green">
108
+ <span class="pf-c-label__content">
109
+ <span class="pf-c-label__icon">
110
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
111
+ </span>
112
+ <span class="pf-c-label__text">Quick starts</span>
108
113
  </span>
109
- Quick starts
110
114
  </span>
111
- </span>
112
- </li>
113
- <li class="pf-c-label-group__list-item">
114
- <button
115
- class="pf-c-label pf-m-overflow pf-m-compact"
116
- type="button"
117
- >
118
- <span class="pf-c-label__content">1 more</span>
119
- </button>
120
- </li>
121
- </ul>
115
+ </li>
116
+ <li class="pf-c-label-group__list-item">
117
+ <button
118
+ class="pf-c-label pf-m-compact pf-m-overflow"
119
+ type="button"
120
+ >
121
+ <span class="pf-c-label__content">
122
+ <span class="pf-c-label__text">1 more</span>
123
+ </span>
124
+ </button>
125
+ </li>
126
+ </ul>
127
+ </div>
122
128
  </div>
123
129
  </div>
124
130
  </div>
@@ -192,10 +198,14 @@ wrapperTag: div
192
198
  </ul>
193
199
  </div>
194
200
  </div>
195
- <div
196
- class="pf-c-card__title"
197
- id="card-demo-horizontal-grid-expanded-example-title"
198
- >Getting started</div>
201
+ <div class="pf-c-card__header-main">
202
+ <div class="pf-c-card__title">
203
+ <h2
204
+ class="pf-c-card__title-text"
205
+ id="card-demo-horizontal-grid-expanded-example-title"
206
+ >Getting started</h2>
207
+ </div>
208
+ </div>
199
209
  </div>
200
210
  <div class="pf-c-card__expandable-content">
201
211
  <div class="pf-c-card__body">
@@ -213,11 +223,11 @@ wrapperTag: div
213
223
  <span class="pf-c-label__icon">
214
224
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
215
225
  </span>
216
- Set up your cluster
226
+ <span class="pf-c-label__text">Set up your cluster</span>
217
227
  </span>
218
228
  </span>
219
229
  <p>Continue setting up your cluster to access all you cain in the Console</p>
220
- <ul class="pf-c-list pf-m-plain">
230
+ <ul class="pf-c-list pf-m-plain" role="list">
221
231
  <li>
222
232
  <a href="#">Add identity provider</a>
223
233
  </li>
@@ -249,11 +259,11 @@ wrapperTag: div
249
259
  <span class="pf-c-label__icon">
250
260
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
251
261
  </span>
252
- Guided tours
262
+ <span class="pf-c-label__text">Guided tours</span>
253
263
  </span>
254
264
  </span>
255
265
  <p>Tour some of the key features around the console</p>
256
- <ul class="pf-c-list pf-m-plain">
266
+ <ul class="pf-c-list pf-m-plain" role="list">
257
267
  <li>
258
268
  <a href="#">Tour the console</a>
259
269
  </li>
@@ -280,11 +290,11 @@ wrapperTag: div
280
290
  <span class="pf-c-label__icon">
281
291
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
282
292
  </span>
283
- Quick starts
293
+ <span class="pf-c-label__text">Quick starts</span>
284
294
  </span>
285
295
  </span>
286
296
  <p>Get started with features using our step-by-step documentation</p>
287
- <ul class="pf-c-list pf-m-plain">
297
+ <ul class="pf-c-list pf-m-plain" role="list">
288
298
  <li>
289
299
  <a href="#">Getting started with Serverless</a>
290
300
  </li>
@@ -314,11 +324,11 @@ wrapperTag: div
314
324
  <span class="pf-c-label__icon">
315
325
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
316
326
  </span>
317
- Learning resources
327
+ <span class="pf-c-label__text">Learning resources</span>
318
328
  </span>
319
329
  </span>
320
330
  <p>Learn about new features within the Console and get started with demo apps</p>
321
- <ul class="pf-c-list pf-m-plain">
331
+ <ul class="pf-c-list pf-m-plain" role="list">
322
332
  <li>
323
333
  <a href="#">See what's possible with the Explore page</a>
324
334
  </li>
@@ -357,7 +367,9 @@ wrapperTag: div
357
367
  style="min-height: 200px; background: center / cover url('/assets/images/pfbg_992@2x.jpg'); "
358
368
  ></div>
359
369
  <div class="pf-l-grid__item">
360
- <div class="pf-c-card__title">Headline</div>
370
+ <div class="pf-c-card__title">
371
+ <h2 class="pf-c-card__title-text">Headline</h2>
372
+ </div>
361
373
  <div
362
374
  class="pf-c-card__body"
363
375
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu, tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.</div>
@@ -482,7 +494,9 @@ wrapperTag: div
482
494
  <div class="pf-l-grid__item">
483
495
  <div class="pf-l-gallery pf-m-gutter">
484
496
  <div class="pf-c-card pf-u-text-align-center">
485
- <div class="pf-c-card__title">5 Clusters</div>
497
+ <div class="pf-c-card__title">
498
+ <h2 class="pf-c-card__title-text">5 Clusters</h2>
499
+ </div>
486
500
  <div class="pf-c-card__body">
487
501
  <i
488
502
  class="fas fa-check-circle pf-u-success-color-100"
@@ -491,7 +505,9 @@ wrapperTag: div
491
505
  </div>
492
506
  </div>
493
507
  <div class="pf-c-card pf-u-text-align-center">
494
- <div class="pf-c-card__title">15 Clusters</div>
508
+ <div class="pf-c-card__title">
509
+ <h2 class="pf-c-card__title-text">15 Clusters</h2>
510
+ </div>
495
511
  <div class="pf-c-card__body">
496
512
  <i
497
513
  class="fas fa-exclamation-triangle pf-u-warning-color-100"
@@ -500,7 +516,9 @@ wrapperTag: div
500
516
  </div>
501
517
  </div>
502
518
  <div class="pf-c-card pf-u-text-align-center">
503
- <div class="pf-c-card__title">3 Clusters</div>
519
+ <div class="pf-c-card__title">
520
+ <h2 class="pf-c-card__title-text">3 Clusters</h2>
521
+ </div>
504
522
  <div class="pf-c-card__body">
505
523
  <i
506
524
  class="fas fa-times-circle pf-u-danger-color-100"
@@ -513,7 +531,9 @@ wrapperTag: div
513
531
  <div class="pf-l-grid__item">
514
532
  <div class="pf-l-gallery pf-m-gutter">
515
533
  <div class="pf-c-card pf-u-text-align-center">
516
- <div class="pf-c-card__title">10 Hosts</div>
534
+ <div class="pf-c-card__title">
535
+ <h2 class="pf-c-card__title-text">10 Hosts</h2>
536
+ </div>
517
537
  <div class="pf-c-card__body">
518
538
  <div class="pf-l-flex pf-m-inline-flex">
519
539
  <div class="pf-l-flex pf-m-space-items-sm">
@@ -543,7 +563,9 @@ wrapperTag: div
543
563
  </div>
544
564
  </div>
545
565
  <div class="pf-c-card pf-u-text-align-center">
546
- <div class="pf-c-card__title">50 Hosts</div>
566
+ <div class="pf-c-card__title">
567
+ <h2 class="pf-c-card__title-text">50 Hosts</h2>
568
+ </div>
547
569
  <div class="pf-c-card__body">
548
570
  <div class="pf-l-flex pf-m-inline-flex">
549
571
  <div class="pf-l-flex pf-m-space-items-sm">
@@ -573,7 +595,9 @@ wrapperTag: div
573
595
  </div>
574
596
  </div>
575
597
  <div class="pf-c-card pf-u-text-align-center">
576
- <div class="pf-c-card__title">12 Hosts</div>
598
+ <div class="pf-c-card__title">
599
+ <h2 class="pf-c-card__title-text">12 Hosts</h2>
600
+ </div>
577
601
  <div class="pf-c-card__body">
578
602
  <div class="pf-l-flex pf-m-inline-flex">
579
603
  <div class="pf-l-flex pf-m-space-items-sm">
@@ -610,7 +634,9 @@ wrapperTag: div
610
634
  style="--pf-l-gallery--GridTemplateColumns--min: 260px;"
611
635
  >
612
636
  <div class="pf-c-card">
613
- <div class="pf-c-card__title pf-u-text-align-center">13 Hosts</div>
637
+ <div class="pf-c-card__title">
638
+ <h2 class="pf-c-card__title-text pf-u-text-align-center">13 Hosts</h2>
639
+ </div>
614
640
  <div class="pf-c-card__body">
615
641
  <div class="pf-l-flex pf-m-justify-content-space-around">
616
642
  <div class="pf-l-flex">
@@ -641,7 +667,9 @@ wrapperTag: div
641
667
  </div>
642
668
  </div>
643
669
  <div class="pf-c-card">
644
- <div class="pf-c-card__title pf-u-text-align-center">3 Hosts</div>
670
+ <div class="pf-c-card__title pf-u-text-align-center">
671
+ <h2 class="pf-c-card__title-text">3 Hosts</h2>
672
+ </div>
645
673
  <div class="pf-c-card__body">
646
674
  <div class="pf-l-flex pf-m-justify-content-space-around">
647
675
  <div class="pf-l-flex">
@@ -672,7 +700,9 @@ wrapperTag: div
672
700
  </div>
673
701
  </div>
674
702
  <div class="pf-c-card">
675
- <div class="pf-c-card__title pf-u-text-align-center">50 Hosts</div>
703
+ <div class="pf-c-card__title pf-u-text-align-center">
704
+ <h2 class="pf-c-card__title-text">50 Hosts</h2>
705
+ </div>
676
706
  <div class="pf-c-card__body">
677
707
  <div class="pf-l-flex pf-m-justify-content-space-around">
678
708
  <div class="pf-l-flex">
@@ -713,7 +743,9 @@ wrapperTag: div
713
743
  ```html
714
744
  <div class="pf-c-card">
715
745
  <div class="pf-c-card__header">
716
- <h2 class="pf-c-title pf-m-lg">Status</h2>
746
+ <div class="pf-c-card__header-main">
747
+ <h2 class="pf-c-title pf-m-lg">Status</h2>
748
+ </div>
717
749
  </div>
718
750
  <div class="pf-c-card__body">
719
751
  <div class="pf-c-tabs pf-m-fill" id="status-tabs">
@@ -762,15 +794,20 @@ wrapperTag: div
762
794
  <span class="pf-c-description-list__text">
763
795
  <div class="pf-l-grid">
764
796
  <div class="pf-l-grid__item pf-m-3-col">
765
- <span
797
+ <svg
766
798
  class="pf-c-spinner pf-m-md"
767
799
  role="progressbar"
800
+ viewBox="0 0 100 100"
768
801
  aria-label="Loading"
769
802
  >
770
- <span class="pf-c-spinner__clipper"></span>
771
- <span class="pf-c-spinner__lead-ball"></span>
772
- <span class="pf-c-spinner__tail-ball"></span>
773
- </span>
803
+ <circle
804
+ class="pf-c-spinner__path"
805
+ cx="50"
806
+ cy="50"
807
+ r="45"
808
+ fill="none"
809
+ />
810
+ </svg>
774
811
  </div>
775
812
  <div class="pf-l-grid__item pf-m-9-col">
776
813
  <h3 class="pf-c-title pf-m-md">Running</h3>
@@ -814,15 +851,20 @@ wrapperTag: div
814
851
  <span class="pf-c-description-list__text">
815
852
  <div class="pf-l-grid">
816
853
  <div class="pf-l-grid__item pf-m-3-col">
817
- <span
854
+ <svg
818
855
  class="pf-c-spinner pf-m-md"
819
856
  role="progressbar"
857
+ viewBox="0 0 100 100"
820
858
  aria-label="Loading"
821
859
  >
822
- <span class="pf-c-spinner__clipper"></span>
823
- <span class="pf-c-spinner__lead-ball"></span>
824
- <span class="pf-c-spinner__tail-ball"></span>
825
- </span>
860
+ <circle
861
+ class="pf-c-spinner__path"
862
+ cx="50"
863
+ cy="50"
864
+ r="45"
865
+ fill="none"
866
+ />
867
+ </svg>
826
868
  </div>
827
869
  <div class="pf-l-grid__item pf-m-9-col">
828
870
  <h3 class="pf-c-title pf-m-md">Running</h3>
@@ -987,7 +1029,7 @@ wrapperTag: div
987
1029
  aria-hidden="true"
988
1030
  ></i>
989
1031
  </span>
990
- 1
1032
+ <span class="pf-c-label__text">1</span>
991
1033
  </span>
992
1034
  </span>
993
1035
  <span class="pf-c-label pf-m-orange">
@@ -998,7 +1040,7 @@ wrapperTag: div
998
1040
  aria-hidden="true"
999
1041
  ></i>
1000
1042
  </span>
1001
- 3
1043
+ <span class="pf-c-label__text">3</span>
1002
1044
  </span>
1003
1045
  </span>
1004
1046
  <span class="pf-c-label pf-m-green">
@@ -1006,7 +1048,7 @@ wrapperTag: div
1006
1048
  <span class="pf-c-label__icon">
1007
1049
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1008
1050
  </span>
1009
- 3
1051
+ <span class="pf-c-label__text">3</span>
1010
1052
  </span>
1011
1053
  </span>
1012
1054
  <span class="pf-c-label pf-m-blue">
@@ -1014,7 +1056,7 @@ wrapperTag: div
1014
1056
  <span class="pf-c-label__icon">
1015
1057
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1016
1058
  </span>
1017
- 3
1059
+ <span class="pf-c-label__text">3</span>
1018
1060
  </span>
1019
1061
  </span>
1020
1062
  <span class="pf-c-label pf-m-cyan">
@@ -1022,7 +1064,7 @@ wrapperTag: div
1022
1064
  <span class="pf-c-label__icon">
1023
1065
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1024
1066
  </span>
1025
- 3
1067
+ <span class="pf-c-label__text">3</span>
1026
1068
  </span>
1027
1069
  </span>
1028
1070
  </div>
@@ -1033,7 +1075,7 @@ wrapperTag: div
1033
1075
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1034
1076
  </span>
1035
1077
  </button>
1036
- <ul class="pf-c-notification-drawer__list" hidden>
1078
+ <ul class="pf-c-notification-drawer__list" role="list" hidden>
1037
1079
  <li
1038
1080
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1039
1081
  tabindex="0"
@@ -1180,7 +1222,7 @@ wrapperTag: div
1180
1222
  aria-hidden="true"
1181
1223
  ></i>
1182
1224
  </span>
1183
- 1
1225
+ <span class="pf-c-label__text">1</span>
1184
1226
  </span>
1185
1227
  </span>
1186
1228
  <span class="pf-c-label pf-m-orange">
@@ -1191,7 +1233,7 @@ wrapperTag: div
1191
1233
  aria-hidden="true"
1192
1234
  ></i>
1193
1235
  </span>
1194
- 3
1236
+ <span class="pf-c-label__text">3</span>
1195
1237
  </span>
1196
1238
  </span>
1197
1239
  <span class="pf-c-label pf-m-green">
@@ -1199,7 +1241,7 @@ wrapperTag: div
1199
1241
  <span class="pf-c-label__icon">
1200
1242
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1201
1243
  </span>
1202
- 3
1244
+ <span class="pf-c-label__text">3</span>
1203
1245
  </span>
1204
1246
  </span>
1205
1247
  <span class="pf-c-label pf-m-blue">
@@ -1207,7 +1249,7 @@ wrapperTag: div
1207
1249
  <span class="pf-c-label__icon">
1208
1250
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1209
1251
  </span>
1210
- 3
1252
+ <span class="pf-c-label__text">3</span>
1211
1253
  </span>
1212
1254
  </span>
1213
1255
  <span class="pf-c-label pf-m-cyan">
@@ -1215,7 +1257,7 @@ wrapperTag: div
1215
1257
  <span class="pf-c-label__icon">
1216
1258
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1217
1259
  </span>
1218
- 3
1260
+ <span class="pf-c-label__text">3</span>
1219
1261
  </span>
1220
1262
  </span>
1221
1263
  </div>
@@ -1226,7 +1268,7 @@ wrapperTag: div
1226
1268
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1227
1269
  </span>
1228
1270
  </button>
1229
- <ul class="pf-c-notification-drawer__list">
1271
+ <ul class="pf-c-notification-drawer__list" role="list">
1230
1272
  <li
1231
1273
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1232
1274
  tabindex="0"
@@ -1318,17 +1360,23 @@ wrapperTag: div
1318
1360
  >
1319
1361
  <div class="pf-c-popover__arrow"></div>
1320
1362
  <div class="pf-c-popover__content">
1321
- <button
1322
- class="pf-c-button pf-m-plain"
1323
- type="button"
1324
- aria-label="Close"
1325
- >
1326
- <i class="fas fa-times" aria-hidden="true"></i>
1327
- </button>
1328
- <h1
1329
- class="pf-c-title pf-m-md"
1330
- id="status-card-expanded-with-popover-example-popover-popover-right-header"
1331
- >Control Panel Status</h1>
1363
+ <div class="pf-c-popover__close">
1364
+ <button
1365
+ class="pf-c-button pf-m-plain"
1366
+ type="button"
1367
+ aria-label="Close"
1368
+ >
1369
+ <i class="fas fa-times" aria-hidden="true"></i>
1370
+ </button>
1371
+ </div>
1372
+ <header class="pf-c-popover__header">
1373
+ <div
1374
+ class="pf-c-popover__title"
1375
+ id="status-card-expanded-with-popover-example-popover-popover-right-header"
1376
+ >
1377
+ <h1 class="pf-c-popover__title-text">Control Panel Status</h1>
1378
+ </div>
1379
+ </header>
1332
1380
  <div
1333
1381
  class="pf-c-popover__body"
1334
1382
  id="status-card-expanded-with-popover-example-popover-popover-right-body"
@@ -1627,7 +1675,7 @@ wrapperTag: div
1627
1675
  aria-hidden="true"
1628
1676
  ></i>
1629
1677
  </span>
1630
- 1
1678
+ <span class="pf-c-label__text">1</span>
1631
1679
  </span>
1632
1680
  </span>
1633
1681
  <span class="pf-c-label pf-m-orange">
@@ -1638,7 +1686,7 @@ wrapperTag: div
1638
1686
  aria-hidden="true"
1639
1687
  ></i>
1640
1688
  </span>
1641
- 3
1689
+ <span class="pf-c-label__text">3</span>
1642
1690
  </span>
1643
1691
  </span>
1644
1692
  <span class="pf-c-label pf-m-green">
@@ -1646,7 +1694,7 @@ wrapperTag: div
1646
1694
  <span class="pf-c-label__icon">
1647
1695
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1648
1696
  </span>
1649
- 3
1697
+ <span class="pf-c-label__text">3</span>
1650
1698
  </span>
1651
1699
  </span>
1652
1700
  <span class="pf-c-label pf-m-blue">
@@ -1654,7 +1702,7 @@ wrapperTag: div
1654
1702
  <span class="pf-c-label__icon">
1655
1703
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1656
1704
  </span>
1657
- 3
1705
+ <span class="pf-c-label__text">3</span>
1658
1706
  </span>
1659
1707
  </span>
1660
1708
  <span class="pf-c-label pf-m-cyan">
@@ -1662,7 +1710,7 @@ wrapperTag: div
1662
1710
  <span class="pf-c-label__icon">
1663
1711
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1664
1712
  </span>
1665
- 3
1713
+ <span class="pf-c-label__text">3</span>
1666
1714
  </span>
1667
1715
  </span>
1668
1716
  </div>
@@ -1673,7 +1721,7 @@ wrapperTag: div
1673
1721
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1674
1722
  </span>
1675
1723
  </button>
1676
- <ul class="pf-c-notification-drawer__list">
1724
+ <ul class="pf-c-notification-drawer__list" role="list">
1677
1725
  <li
1678
1726
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1679
1727
  tabindex="0"
@@ -1819,12 +1867,10 @@ wrapperTag: div
1819
1867
  >
1820
1868
  <div class="pf-c-card" id="utilization-card-3-example">
1821
1869
  <div class="pf-c-card__header pf-u-align-items-flex-start">
1822
- <div
1823
- class="pf-c-card__title"
1824
- id="utilization-card-3-example-title1"
1825
- style="padding-top: 3px;"
1826
- >
1827
- <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1870
+ <div class="pf-c-card__header-main">
1871
+ <div class="pf-c-card__title" id="utilization-card-3-example-title1">
1872
+ <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1873
+ </div>
1828
1874
  </div>
1829
1875
  <div class="pf-c-card__actions pf-m-no-offset">
1830
1876
  <div class="pf-c-select">
@@ -1938,8 +1984,13 @@ wrapperTag: div
1938
1984
  ```html
1939
1985
  <div class="pf-c-card" id="nested-cards-toggle-right-example">
1940
1986
  <div class="pf-c-card__header">
1941
- <div class="pf-c-card__title" id="nested-cards-toggle-right-example-title">
1942
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1987
+ <div class="pf-c-card__header-main">
1988
+ <div
1989
+ class="pf-c-card__title"
1990
+ id="nested-cards-toggle-right-example-title"
1991
+ >
1992
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1993
+ </div>
1943
1994
  </div>
1944
1995
  </div>
1945
1996
  <div
@@ -1960,11 +2011,13 @@ wrapperTag: div
1960
2011
  </span>
1961
2012
  </button>
1962
2013
  </div>
1963
- <div
1964
- class="pf-c-card__title"
1965
- id="nested-cards-toggle-right-example-group-1-title"
1966
- >
1967
- <span class="pf-u-font-weight-light">CPU 1</span>
2014
+ <div class="pf-c-card__header-main">
2015
+ <div
2016
+ class="pf-c-card__title"
2017
+ id="nested-cards-toggle-right-example-group-1-title"
2018
+ >
2019
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 1</h2>
2020
+ </div>
1968
2021
  </div>
1969
2022
  </div>
1970
2023
  <div class="pf-c-card__expandable-content">
@@ -2069,11 +2122,13 @@ wrapperTag: div
2069
2122
  </span>
2070
2123
  </button>
2071
2124
  </div>
2072
- <div
2073
- class="pf-c-card__title"
2074
- id="nested-cards-toggle-right-example-group-2-title"
2075
- >
2076
- <span class="pf-u-font-weight-light">CPU 2</span>
2125
+ <div class="pf-c-card__header-main">
2126
+ <div
2127
+ class="pf-c-card__title"
2128
+ id="nested-cards-toggle-right-example-group-2-title"
2129
+ >
2130
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 2</h2>
2131
+ </div>
2077
2132
  </div>
2078
2133
  </div>
2079
2134
  </div>
@@ -2095,11 +2150,13 @@ wrapperTag: div
2095
2150
  </span>
2096
2151
  </button>
2097
2152
  </div>
2098
- <div
2099
- class="pf-c-card__title"
2100
- id="nested-cards-toggle-right-example-group-3-title"
2101
- >
2102
- <span class="pf-u-font-weight-light">CPU 3</span>
2153
+ <div class="pf-c-card__header-main">
2154
+ <div
2155
+ class="pf-c-card__title"
2156
+ id="nested-cards-toggle-right-example-group-3-title&quot;"
2157
+ >
2158
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 3</h2>
2159
+ </div>
2103
2160
  </div>
2104
2161
  </div>
2105
2162
  </div>
@@ -2112,8 +2169,10 @@ wrapperTag: div
2112
2169
  ```html
2113
2170
  <div class="pf-c-card" id="nested-cards-example">
2114
2171
  <div class="pf-c-card__header">
2115
- <div class="pf-c-card__title" id="nested-cards-example-title">
2116
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2172
+ <div class="pf-c-card__header-main">
2173
+ <div class="pf-c-card__title" id="nested-cards-example-title">
2174
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2175
+ </div>
2117
2176
  </div>
2118
2177
  </div>
2119
2178
  <div
@@ -2134,8 +2193,10 @@ wrapperTag: div
2134
2193
  </span>
2135
2194
  </button>
2136
2195
  </div>
2137
- <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2138
- <span class="pf-u-font-weight-light">CPU 1</span>
2196
+ <div class="pf-c-card__header-main">
2197
+ <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2198
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 1</h2>
2199
+ </div>
2139
2200
  </div>
2140
2201
  </div>
2141
2202
  <div class="pf-c-card__expandable-content">
@@ -2237,8 +2298,10 @@ wrapperTag: div
2237
2298
  </span>
2238
2299
  </button>
2239
2300
  </div>
2240
- <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2241
- <span class="pf-u-font-weight-light">CPU 2</span>
2301
+ <div class="pf-c-card__header-main">
2302
+ <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2303
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 2</h2>
2304
+ </div>
2242
2305
  </div>
2243
2306
  </div>
2244
2307
  </div>
@@ -2257,8 +2320,10 @@ wrapperTag: div
2257
2320
  </span>
2258
2321
  </button>
2259
2322
  </div>
2260
- <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2261
- <span class="pf-u-font-weight-light">CPU 3</span>
2323
+ <div class="pf-c-card__header-main">
2324
+ <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2325
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 3</h2>
2326
+ </div>
2262
2327
  </div>
2263
2328
  </div>
2264
2329
  </div>
@@ -2271,8 +2336,10 @@ wrapperTag: div
2271
2336
  ```html
2272
2337
  <div class="pf-c-card" id="with-accordion-example">
2273
2338
  <div class="pf-c-card__header">
2274
- <div class="pf-c-card__title" id="with-accordion-example-title">
2275
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2339
+ <div class="pf-c-card__header-main">
2340
+ <div class="pf-c-card__title" id="with-accordion-example-title">
2341
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2342
+ </div>
2276
2343
  </div>
2277
2344
  </div>
2278
2345
  <div class="pf-c-card__body">
@@ -2585,7 +2652,7 @@ wrapperTag: div
2585
2652
  >
2586
2653
  <div class="pf-c-card" id="trend-card-1-example">
2587
2654
  <div class="pf-c-card__header">
2588
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2655
+ <div class="pf-c-card__header-main">
2589
2656
  <div class="pf-c-card__title" id="trend-card-1-example-title">
2590
2657
  <h1 class="pf-c-title pf-m-2xl">1,050,765 IOPS</h1>
2591
2658
  </div>
@@ -2670,18 +2737,20 @@ wrapperTag: div
2670
2737
  >
2671
2738
  <div class="pf-c-card" id="trend-card-2-example">
2672
2739
  <div class="pf-c-card__header">
2673
- <div class="pf-l-flex pf-m-align-items-center">
2674
- <div class="pf-l-flex__item pf-m-flex-none">
2675
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2676
- <div class="pf-c-card__title" id="trend-card-2-example-title">
2677
- <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2740
+ <div class="pf-c-card__header-main">
2741
+ <div class="pf-l-flex pf-m-align-items-center">
2742
+ <div class="pf-l-flex__item pf-m-flex-none">
2743
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2744
+ <div class="pf-c-card__title" id="trend-card-2-example-title">
2745
+ <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2746
+ </div>
2747
+ <span class="pf-u-color-200">Storage capacity</span>
2678
2748
  </div>
2679
- <span class="pf-u-color-200">Storage capacity</span>
2680
2749
  </div>
2681
- </div>
2682
- <div class="pf-l-flex__item pf-m-flex-1">
2683
- <div class="ws-chart">
2684
- <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2750
+ <div class="pf-l-flex__item pf-m-flex-1">
2751
+ <div class="ws-chart">
2752
+ <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2753
+ </div>
2685
2754
  </div>
2686
2755
  </div>
2687
2756
  </div>
@@ -2769,12 +2838,14 @@ wrapperTag: div
2769
2838
  </ul>
2770
2839
  </div>
2771
2840
  </div>
2772
- <div
2773
- class="pf-c-card__title"
2774
- id="card-log-view-example-title1"
2775
- style="padding-top: 3px;"
2776
- >
2777
- <h2 class="pf-c-title pf-m-lg">Activity</h2>
2841
+ <div class="pf-c-card__header-main">
2842
+ <div
2843
+ class="pf-c-card__title"
2844
+ id="card-log-view-example-title1"
2845
+ style="padding-top: 3px;"
2846
+ >
2847
+ <h2 class="pf-c-title pf-m-lg">Activity</h2>
2848
+ </div>
2778
2849
  </div>
2779
2850
  </div>
2780
2851
  <div class="pf-c-card__body">
@@ -2914,12 +2985,14 @@ wrapperTag: div
2914
2985
  </ul>
2915
2986
  </div>
2916
2987
  </div>
2917
- <div
2918
- class="pf-c-card__title"
2919
- id="card-events-view-example-title1"
2920
- style="padding-top: 3px;"
2921
- >
2922
- <h2 class="pf-c-title pf-m-lg">Events</h2>
2988
+ <div class="pf-c-card__header-main">
2989
+ <div
2990
+ class="pf-c-card__title"
2991
+ id="card-events-view-example-title1"
2992
+ style="padding-top: 3px;"
2993
+ >
2994
+ <h2 class="pf-c-title pf-m-lg">Events</h2>
2995
+ </div>
2923
2996
  </div>
2924
2997
  </div>
2925
2998
  <div class="pf-c-card__body">
@@ -2974,15 +3047,20 @@ wrapperTag: div
2974
3047
  <dt class="pf-c-description-list__term">
2975
3048
  <div class="pf-l-flex pf-m-nowrap">
2976
3049
  <div class="pf-l-flex__item">
2977
- <span
3050
+ <svg
2978
3051
  class="pf-c-spinner pf-m-md"
2979
3052
  role="progressbar"
3053
+ viewBox="0 0 100 100"
2980
3054
  aria-label="Loading"
2981
3055
  >
2982
- <span class="pf-c-spinner__clipper"></span>
2983
- <span class="pf-c-spinner__lead-ball"></span>
2984
- <span class="pf-c-spinner__tail-ball"></span>
2985
- </span>
3056
+ <circle
3057
+ class="pf-c-spinner__path"
3058
+ cx="50"
3059
+ cy="50"
3060
+ r="45"
3061
+ fill="none"
3062
+ />
3063
+ </svg>
2986
3064
  </div>
2987
3065
  <div class="pf-l-flex__item">Pulling image</div>
2988
3066
  </div>