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

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 (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. 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">
@@ -987,7 +1019,7 @@ wrapperTag: div
987
1019
  aria-hidden="true"
988
1020
  ></i>
989
1021
  </span>
990
- 1
1022
+ <span class="pf-c-label__text">1</span>
991
1023
  </span>
992
1024
  </span>
993
1025
  <span class="pf-c-label pf-m-orange">
@@ -998,7 +1030,7 @@ wrapperTag: div
998
1030
  aria-hidden="true"
999
1031
  ></i>
1000
1032
  </span>
1001
- 3
1033
+ <span class="pf-c-label__text">3</span>
1002
1034
  </span>
1003
1035
  </span>
1004
1036
  <span class="pf-c-label pf-m-green">
@@ -1006,7 +1038,7 @@ wrapperTag: div
1006
1038
  <span class="pf-c-label__icon">
1007
1039
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1008
1040
  </span>
1009
- 3
1041
+ <span class="pf-c-label__text">3</span>
1010
1042
  </span>
1011
1043
  </span>
1012
1044
  <span class="pf-c-label pf-m-blue">
@@ -1014,7 +1046,7 @@ wrapperTag: div
1014
1046
  <span class="pf-c-label__icon">
1015
1047
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1016
1048
  </span>
1017
- 3
1049
+ <span class="pf-c-label__text">3</span>
1018
1050
  </span>
1019
1051
  </span>
1020
1052
  <span class="pf-c-label pf-m-cyan">
@@ -1022,7 +1054,7 @@ wrapperTag: div
1022
1054
  <span class="pf-c-label__icon">
1023
1055
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1024
1056
  </span>
1025
- 3
1057
+ <span class="pf-c-label__text">3</span>
1026
1058
  </span>
1027
1059
  </span>
1028
1060
  </div>
@@ -1033,7 +1065,7 @@ wrapperTag: div
1033
1065
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1034
1066
  </span>
1035
1067
  </button>
1036
- <ul class="pf-c-notification-drawer__list" hidden>
1068
+ <ul class="pf-c-notification-drawer__list" role="list" hidden>
1037
1069
  <li
1038
1070
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1039
1071
  tabindex="0"
@@ -1180,7 +1212,7 @@ wrapperTag: div
1180
1212
  aria-hidden="true"
1181
1213
  ></i>
1182
1214
  </span>
1183
- 1
1215
+ <span class="pf-c-label__text">1</span>
1184
1216
  </span>
1185
1217
  </span>
1186
1218
  <span class="pf-c-label pf-m-orange">
@@ -1191,7 +1223,7 @@ wrapperTag: div
1191
1223
  aria-hidden="true"
1192
1224
  ></i>
1193
1225
  </span>
1194
- 3
1226
+ <span class="pf-c-label__text">3</span>
1195
1227
  </span>
1196
1228
  </span>
1197
1229
  <span class="pf-c-label pf-m-green">
@@ -1199,7 +1231,7 @@ wrapperTag: div
1199
1231
  <span class="pf-c-label__icon">
1200
1232
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1201
1233
  </span>
1202
- 3
1234
+ <span class="pf-c-label__text">3</span>
1203
1235
  </span>
1204
1236
  </span>
1205
1237
  <span class="pf-c-label pf-m-blue">
@@ -1207,7 +1239,7 @@ wrapperTag: div
1207
1239
  <span class="pf-c-label__icon">
1208
1240
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1209
1241
  </span>
1210
- 3
1242
+ <span class="pf-c-label__text">3</span>
1211
1243
  </span>
1212
1244
  </span>
1213
1245
  <span class="pf-c-label pf-m-cyan">
@@ -1215,7 +1247,7 @@ wrapperTag: div
1215
1247
  <span class="pf-c-label__icon">
1216
1248
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1217
1249
  </span>
1218
- 3
1250
+ <span class="pf-c-label__text">3</span>
1219
1251
  </span>
1220
1252
  </span>
1221
1253
  </div>
@@ -1226,7 +1258,7 @@ wrapperTag: div
1226
1258
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1227
1259
  </span>
1228
1260
  </button>
1229
- <ul class="pf-c-notification-drawer__list">
1261
+ <ul class="pf-c-notification-drawer__list" role="list">
1230
1262
  <li
1231
1263
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1232
1264
  tabindex="0"
@@ -1318,17 +1350,23 @@ wrapperTag: div
1318
1350
  >
1319
1351
  <div class="pf-c-popover__arrow"></div>
1320
1352
  <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>
1353
+ <div class="pf-c-popover__close">
1354
+ <button
1355
+ class="pf-c-button pf-m-plain"
1356
+ type="button"
1357
+ aria-label="Close"
1358
+ >
1359
+ <i class="fas fa-times" aria-hidden="true"></i>
1360
+ </button>
1361
+ </div>
1362
+ <header class="pf-c-popover__header">
1363
+ <div
1364
+ class="pf-c-popover__title"
1365
+ id="status-card-expanded-with-popover-example-popover-popover-right-header"
1366
+ >
1367
+ <h1 class="pf-c-popover__title-text">Control Panel Status</h1>
1368
+ </div>
1369
+ </header>
1332
1370
  <div
1333
1371
  class="pf-c-popover__body"
1334
1372
  id="status-card-expanded-with-popover-example-popover-popover-right-body"
@@ -1627,7 +1665,7 @@ wrapperTag: div
1627
1665
  aria-hidden="true"
1628
1666
  ></i>
1629
1667
  </span>
1630
- 1
1668
+ <span class="pf-c-label__text">1</span>
1631
1669
  </span>
1632
1670
  </span>
1633
1671
  <span class="pf-c-label pf-m-orange">
@@ -1638,7 +1676,7 @@ wrapperTag: div
1638
1676
  aria-hidden="true"
1639
1677
  ></i>
1640
1678
  </span>
1641
- 3
1679
+ <span class="pf-c-label__text">3</span>
1642
1680
  </span>
1643
1681
  </span>
1644
1682
  <span class="pf-c-label pf-m-green">
@@ -1646,7 +1684,7 @@ wrapperTag: div
1646
1684
  <span class="pf-c-label__icon">
1647
1685
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
1648
1686
  </span>
1649
- 3
1687
+ <span class="pf-c-label__text">3</span>
1650
1688
  </span>
1651
1689
  </span>
1652
1690
  <span class="pf-c-label pf-m-blue">
@@ -1654,7 +1692,7 @@ wrapperTag: div
1654
1692
  <span class="pf-c-label__icon">
1655
1693
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1656
1694
  </span>
1657
- 3
1695
+ <span class="pf-c-label__text">3</span>
1658
1696
  </span>
1659
1697
  </span>
1660
1698
  <span class="pf-c-label pf-m-cyan">
@@ -1662,7 +1700,7 @@ wrapperTag: div
1662
1700
  <span class="pf-c-label__icon">
1663
1701
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
1664
1702
  </span>
1665
- 3
1703
+ <span class="pf-c-label__text">3</span>
1666
1704
  </span>
1667
1705
  </span>
1668
1706
  </div>
@@ -1673,7 +1711,7 @@ wrapperTag: div
1673
1711
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1674
1712
  </span>
1675
1713
  </button>
1676
- <ul class="pf-c-notification-drawer__list">
1714
+ <ul class="pf-c-notification-drawer__list" role="list">
1677
1715
  <li
1678
1716
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1679
1717
  tabindex="0"
@@ -1819,12 +1857,10 @@ wrapperTag: div
1819
1857
  >
1820
1858
  <div class="pf-c-card" id="utilization-card-3-example">
1821
1859
  <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>
1860
+ <div class="pf-c-card__header-main">
1861
+ <div class="pf-c-card__title" id="utilization-card-3-example-title1">
1862
+ <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1863
+ </div>
1828
1864
  </div>
1829
1865
  <div class="pf-c-card__actions pf-m-no-offset">
1830
1866
  <div class="pf-c-select">
@@ -1938,8 +1974,13 @@ wrapperTag: div
1938
1974
  ```html
1939
1975
  <div class="pf-c-card" id="nested-cards-toggle-right-example">
1940
1976
  <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>
1977
+ <div class="pf-c-card__header-main">
1978
+ <div
1979
+ class="pf-c-card__title"
1980
+ id="nested-cards-toggle-right-example-title"
1981
+ >
1982
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1983
+ </div>
1943
1984
  </div>
1944
1985
  </div>
1945
1986
  <div
@@ -1960,11 +2001,13 @@ wrapperTag: div
1960
2001
  </span>
1961
2002
  </button>
1962
2003
  </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>
2004
+ <div class="pf-c-card__header-main">
2005
+ <div
2006
+ class="pf-c-card__title"
2007
+ id="nested-cards-toggle-right-example-group-1-title"
2008
+ >
2009
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 1</h2>
2010
+ </div>
1968
2011
  </div>
1969
2012
  </div>
1970
2013
  <div class="pf-c-card__expandable-content">
@@ -2069,11 +2112,13 @@ wrapperTag: div
2069
2112
  </span>
2070
2113
  </button>
2071
2114
  </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>
2115
+ <div class="pf-c-card__header-main">
2116
+ <div
2117
+ class="pf-c-card__title"
2118
+ id="nested-cards-toggle-right-example-group-2-title"
2119
+ >
2120
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 2</h2>
2121
+ </div>
2077
2122
  </div>
2078
2123
  </div>
2079
2124
  </div>
@@ -2095,11 +2140,13 @@ wrapperTag: div
2095
2140
  </span>
2096
2141
  </button>
2097
2142
  </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>
2143
+ <div class="pf-c-card__header-main">
2144
+ <div
2145
+ class="pf-c-card__title"
2146
+ id="nested-cards-toggle-right-example-group-3-title&quot;"
2147
+ >
2148
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 3</h2>
2149
+ </div>
2103
2150
  </div>
2104
2151
  </div>
2105
2152
  </div>
@@ -2112,8 +2159,10 @@ wrapperTag: div
2112
2159
  ```html
2113
2160
  <div class="pf-c-card" id="nested-cards-example">
2114
2161
  <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>
2162
+ <div class="pf-c-card__header-main">
2163
+ <div class="pf-c-card__title" id="nested-cards-example-title">
2164
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2165
+ </div>
2117
2166
  </div>
2118
2167
  </div>
2119
2168
  <div
@@ -2134,8 +2183,10 @@ wrapperTag: div
2134
2183
  </span>
2135
2184
  </button>
2136
2185
  </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>
2186
+ <div class="pf-c-card__header-main">
2187
+ <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2188
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 1</h2>
2189
+ </div>
2139
2190
  </div>
2140
2191
  </div>
2141
2192
  <div class="pf-c-card__expandable-content">
@@ -2237,8 +2288,10 @@ wrapperTag: div
2237
2288
  </span>
2238
2289
  </button>
2239
2290
  </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>
2291
+ <div class="pf-c-card__header-main">
2292
+ <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2293
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 2</h2>
2294
+ </div>
2242
2295
  </div>
2243
2296
  </div>
2244
2297
  </div>
@@ -2257,8 +2310,10 @@ wrapperTag: div
2257
2310
  </span>
2258
2311
  </button>
2259
2312
  </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>
2313
+ <div class="pf-c-card__header-main">
2314
+ <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2315
+ <h2 class="pf-c-card__title-text pf-u-font-weight-light">CPU 3</h2>
2316
+ </div>
2262
2317
  </div>
2263
2318
  </div>
2264
2319
  </div>
@@ -2271,8 +2326,10 @@ wrapperTag: div
2271
2326
  ```html
2272
2327
  <div class="pf-c-card" id="with-accordion-example">
2273
2328
  <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>
2329
+ <div class="pf-c-card__header-main">
2330
+ <div class="pf-c-card__title" id="with-accordion-example-title">
2331
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2332
+ </div>
2276
2333
  </div>
2277
2334
  </div>
2278
2335
  <div class="pf-c-card__body">
@@ -2585,7 +2642,7 @@ wrapperTag: div
2585
2642
  >
2586
2643
  <div class="pf-c-card" id="trend-card-1-example">
2587
2644
  <div class="pf-c-card__header">
2588
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2645
+ <div class="pf-c-card__header-main">
2589
2646
  <div class="pf-c-card__title" id="trend-card-1-example-title">
2590
2647
  <h1 class="pf-c-title pf-m-2xl">1,050,765 IOPS</h1>
2591
2648
  </div>
@@ -2670,18 +2727,20 @@ wrapperTag: div
2670
2727
  >
2671
2728
  <div class="pf-c-card" id="trend-card-2-example">
2672
2729
  <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>
2730
+ <div class="pf-c-card__header-main">
2731
+ <div class="pf-l-flex pf-m-align-items-center">
2732
+ <div class="pf-l-flex__item pf-m-flex-none">
2733
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2734
+ <div class="pf-c-card__title" id="trend-card-2-example-title">
2735
+ <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2736
+ </div>
2737
+ <span class="pf-u-color-200">Storage capacity</span>
2678
2738
  </div>
2679
- <span class="pf-u-color-200">Storage capacity</span>
2680
2739
  </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" />
2740
+ <div class="pf-l-flex__item pf-m-flex-1">
2741
+ <div class="ws-chart">
2742
+ <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2743
+ </div>
2685
2744
  </div>
2686
2745
  </div>
2687
2746
  </div>
@@ -2769,12 +2828,14 @@ wrapperTag: div
2769
2828
  </ul>
2770
2829
  </div>
2771
2830
  </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>
2831
+ <div class="pf-c-card__header-main">
2832
+ <div
2833
+ class="pf-c-card__title"
2834
+ id="card-log-view-example-title1"
2835
+ style="padding-top: 3px;"
2836
+ >
2837
+ <h2 class="pf-c-title pf-m-lg">Activity</h2>
2838
+ </div>
2778
2839
  </div>
2779
2840
  </div>
2780
2841
  <div class="pf-c-card__body">
@@ -2914,12 +2975,14 @@ wrapperTag: div
2914
2975
  </ul>
2915
2976
  </div>
2916
2977
  </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>
2978
+ <div class="pf-c-card__header-main">
2979
+ <div
2980
+ class="pf-c-card__title"
2981
+ id="card-events-view-example-title1"
2982
+ style="padding-top: 3px;"
2983
+ >
2984
+ <h2 class="pf-c-title pf-m-lg">Events</h2>
2985
+ </div>
2923
2986
  </div>
2924
2987
  </div>
2925
2988
  <div class="pf-c-card__body">