@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/components/Card/examples/Card.md CHANGED
@@ -10,7 +10,9 @@ cssPrefix: pf-c-card
10
10
 
11
11
  ```html
12
12
  <div class="pf-c-card" id="card-basic-example">
13
- <div class="pf-c-card__title">Title</div>
13
+ <div class="pf-c-card__title">
14
+ <h2 class="pf-c-card__title-text">Title</h2>
15
+ </div>
14
16
  <div class="pf-c-card__body">Body</div>
15
17
  <div class="pf-c-card__footer">Footer</div>
16
18
  </div>
@@ -74,12 +76,17 @@ cssPrefix: pf-c-card
74
76
  type="checkbox"
75
77
  id="card-action-example-1-check"
76
78
  name="card-action-example-1-check"
77
- aria-label="card-action-example-1 checkbox"
79
+ aria-labelledby="card-action-example-1"
78
80
  />
79
81
  </div>
80
82
  </div>
81
83
  </div>
82
- <div class="pf-c-card__title" id="card-action-example-1-check-label">Title</div>
84
+ <div class="pf-c-card__title">
85
+ <h2
86
+ class="pf-c-card__title-text"
87
+ id="card-action-example-1-check-label"
88
+ >Title</h2>
89
+ </div>
83
90
  <div class="pf-c-card__body">Body</div>
84
91
  <div class="pf-c-card__footer">Footer</div>
85
92
  </div>
@@ -140,14 +147,18 @@ cssPrefix: pf-c-card
140
147
  type="checkbox"
141
148
  id="card-action-example-2-check"
142
149
  name="card-action-example-2-check"
143
- aria-label="card-action-example-2 checkbox"
150
+ aria-labelledby="card-action-example-2"
144
151
  />
145
152
  </div>
146
153
  </div>
147
- <div
148
- class="pf-c-card__title"
149
- id="card-action-example-2-check-label"
150
- >This is a really really really really really really really really really really long title</div>
154
+ <div class="pf-c-card__header-main">
155
+ <div class="pf-c-card__title">
156
+ <h2
157
+ class="pf-c-card__title-text"
158
+ id="card-action-example-2-check-label"
159
+ >This is a really really really really really really really really really really long title</h2>
160
+ </div>
161
+ </div>
151
162
  </div>
152
163
  <div class="pf-c-card__body">Body</div>
153
164
  <div class="pf-c-card__footer">Footer</div>
@@ -209,7 +220,7 @@ cssPrefix: pf-c-card
209
220
  type="checkbox"
210
221
  id="card-action-example-3-check"
211
222
  name="card-action-example-3-check"
212
- aria-label="card-action-example-3 checkbox"
223
+ aria-labelledby="card-action-example-3"
213
224
  />
214
225
  </div>
215
226
  </div>
@@ -230,10 +241,12 @@ cssPrefix: pf-c-card
230
241
  <div class="pf-c-card__actions pf-m-no-offset">
231
242
  <button class="pf-c-button pf-m-primary" type="button">Action</button>
232
243
  </div>
233
- <h1
234
- class="pf-c-title pf-m-2xl"
235
- id="card-action-no-offset-check-label"
236
- >This is a card title</h1>
244
+ <div class="pf-c-card__header-main">
245
+ <h1
246
+ class="pf-c-title pf-m-2xl"
247
+ id="card-action-no-offset-check-label"
248
+ >This is a card title</h1>
249
+ </div>
237
250
  </div>
238
251
  <div class="pf-c-card__body">Body</div>
239
252
  <div class="pf-c-card__footer">Footer</div>
@@ -250,7 +263,9 @@ cssPrefix: pf-c-card
250
263
  <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
251
264
  </div>
252
265
  </div>
253
- <div class="pf-c-card__title">Title</div>
266
+ <div class="pf-c-card__title">
267
+ <h2 class="pf-c-card__title-text">Title</h2>
268
+ </div>
254
269
  <div class="pf-c-card__body">Body</div>
255
270
  <div class="pf-c-card__footer">Footer</div>
256
271
  </div>
@@ -261,7 +276,9 @@ cssPrefix: pf-c-card
261
276
 
262
277
  ```html
263
278
  <div class="pf-c-card" id="card-no-footer-example">
264
- <div class="pf-c-card__title">Title</div>
279
+ <div class="pf-c-card__title">
280
+ <h2 class="pf-c-card__title-text">Title</h2>
281
+ </div>
265
282
  <div class="pf-c-card__body">This card has no footer</div>
266
283
  </div>
267
284
 
@@ -290,7 +307,9 @@ cssPrefix: pf-c-card
290
307
 
291
308
  ```html
292
309
  <div class="pf-c-card" id="card-multiple-body-example">
293
- <div class="pf-c-card__title">Title</div>
310
+ <div class="pf-c-card__title">
311
+ <h2 class="pf-c-card__title-text">Title</h2>
312
+ </div>
294
313
  <div class="pf-c-card__body">Body</div>
295
314
  <div class="pf-c-card__body">Body</div>
296
315
  <div class="pf-c-card__body">Body</div>
@@ -303,7 +322,9 @@ cssPrefix: pf-c-card
303
322
 
304
323
  ```html
305
324
  <div class="pf-c-card" id="card-body-fill-example">
306
- <div class="pf-c-card__title">Title</div>
325
+ <div class="pf-c-card__title">
326
+ <h2 class="pf-c-card__title-text">Title</h2>
327
+ </div>
307
328
  <div class="pf-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
308
329
  <div class="pf-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
309
330
  <div class="pf-c-card__body">Body</div>
@@ -316,7 +337,9 @@ cssPrefix: pf-c-card
316
337
 
317
338
  ```html
318
339
  <div class="pf-c-card pf-m-compact" id="card-compact-example">
319
- <div class="pf-c-card__title">Title</div>
340
+ <div class="pf-c-card__title">
341
+ <h2 class="pf-c-card__title-text">Title</h2>
342
+ </div>
320
343
  <div class="pf-c-card__body">Body</div>
321
344
  <div class="pf-c-card__footer">Footer</div>
322
345
  </div>
@@ -327,124 +350,621 @@ cssPrefix: pf-c-card
327
350
 
328
351
  ```html
329
352
  <div class="pf-c-card pf-m-display-lg" id="card-display-lg-example">
330
- <div class="pf-c-card__title">Title</div>
353
+ <div class="pf-c-card__title">
354
+ <h2 class="pf-c-card__title-text">Title</h2>
355
+ </div>
331
356
  <div class="pf-c-card__body">Body</div>
332
357
  <div class="pf-c-card__footer">Footer</div>
333
358
  </div>
334
359
 
335
360
  ```
336
361
 
337
- ### Hoverable
362
+ ### Selectable
338
363
 
339
364
  ```html
340
- <div class="pf-c-card pf-m-hoverable-raised" id="card-hoverable-example">
341
- <div class="pf-c-card__title">Title</div>
342
- <div class="pf-c-card__body">Body</div>
343
- <div class="pf-c-card__footer">Footer</div>
365
+ <div class="pf-l-gallery pf-m-gutter">
366
+ <div class="pf-c-card pf-m-selectable" id="card-selectable-example">
367
+ <div class="pf-c-card__header">
368
+ <div class="pf-c-card__actions pf-m-no-offset">
369
+ <div class="pf-c-card__selectable-actions">
370
+ <div class="pf-c-check pf-m-standalone">
371
+ <input
372
+ class="pf-c-check__input"
373
+ type="checkbox"
374
+ id="card-selectable-example-check"
375
+ name="card-selectable-example-check"
376
+ aria-labelledby="card-selectable-example"
377
+ />
378
+
379
+ <label
380
+ class="pf-c-check__label"
381
+ id="card-selectable-example-check-label"
382
+ name="card-selectable-example-check"
383
+ for="card-selectable-example-check"
384
+ ></label>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ <div class="pf-c-card__header-main">
389
+ <div class="pf-c-card__title">
390
+ <h2 class="pf-c-card__title-text">Title</h2>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ <div class="pf-c-card__body">Body</div>
395
+ <div class="pf-c-card__footer">Footer</div>
396
+ </div>
397
+
398
+ <div
399
+ class="pf-c-card pf-m-selectable pf-m-disabled"
400
+ id="card-selectable-example-disabled"
401
+ >
402
+ <div class="pf-c-card__header">
403
+ <div class="pf-c-card__actions pf-m-no-offset">
404
+ <div class="pf-c-card__selectable-actions">
405
+ <div class="pf-c-check pf-m-standalone">
406
+ <input
407
+ class="pf-c-check__input"
408
+ type="checkbox"
409
+ disabled
410
+ id="card-selectable-example-disabled-check"
411
+ name="card-selectable-example-disabled-check"
412
+ aria-labelledby="card-selectable-example-disabled"
413
+ />
414
+
415
+ <label
416
+ class="pf-c-check__label pf-m-disabled"
417
+ id="card-selectable-example-disabled-check-label"
418
+ name="card-selectable-example-disabled-check"
419
+ for="card-selectable-example-disabled-check"
420
+ ></label>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ <div class="pf-c-card__header-main">
425
+ <div
426
+ class="pf-c-card__title"
427
+ id="card-selectable-example-disabled-title"
428
+ >
429
+ <h2 class="pf-c-card__title-text">Disabled card</h2>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ <div class="pf-c-card__body">Body</div>
434
+ <div class="pf-c-card__footer">Footer</div>
435
+ </div>
436
+
437
+ <div
438
+ class="pf-c-card pf-m-selectable pf-m-selected pf-m-disabled"
439
+ id="card-selectable-example-selected-disabled"
440
+ >
441
+ <div class="pf-c-card__header">
442
+ <div class="pf-c-card__actions pf-m-no-offset">
443
+ <div class="pf-c-card__selectable-actions">
444
+ <div class="pf-c-check pf-m-standalone">
445
+ <input
446
+ class="pf-c-check__input"
447
+ type="checkbox"
448
+ checked
449
+ disabled
450
+ id="card-selectable-example-selected-disabled-check"
451
+ name="card-selectable-example-selected-disabled-check"
452
+ aria-labelledby="card-selectable-example-selected-disabled"
453
+ />
454
+
455
+ <label
456
+ class="pf-c-check__label pf-m-disabled"
457
+ id="card-selectable-example-selected-disabled-check-label"
458
+ name="card-selectable-example-selected-disabled-check"
459
+ for="card-selectable-example-selected-disabled-check"
460
+ ></label>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ <div class="pf-c-card__header-main">
465
+ <div
466
+ class="pf-c-card__title"
467
+ id="card-selectable-example-selected-disabled-title"
468
+ >
469
+ <h2 class="pf-c-card__title-text">Selected but disabled card</h2>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ <div class="pf-c-card__body">Body</div>
474
+ <div class="pf-c-card__footer">Footer</div>
475
+ </div>
344
476
  </div>
345
477
 
346
478
  ```
347
479
 
348
- ### Selectable
480
+ ### Single Selectable
349
481
 
350
482
  ```html
351
- <div
352
- class="pf-c-card pf-m-selectable-raised"
353
- tabindex="0"
354
- id="card-selectable-example"
355
- >
356
- <div class="pf-c-card__title">Title</div>
357
- <div class="pf-c-card__body">Body</div>
358
- <div class="pf-c-card__footer">Footer</div>
483
+ <div class="pf-l-gallery pf-m-gutter">
484
+ <div class="pf-c-card pf-m-selectable" id="card-single-selectable-example">
485
+ <div class="pf-c-card__header">
486
+ <div class="pf-c-card__actions pf-m-no-offset">
487
+ <div class="pf-c-card__selectable-actions">
488
+ <div class="pf-c-radio pf-m-standalone">
489
+ <input
490
+ class="pf-c-radio__input"
491
+ type="radio"
492
+ id="card-single-selectable-example-radio"
493
+ name="card-single-selectable-example-radio"
494
+ aria-labelledby="card-single-selectable-example"
495
+ />
496
+
497
+ <label
498
+ class="pf-c-radio__label"
499
+ id="card-single-selectable-example-radio-label"
500
+ name="card-single-selectable-example-radio"
501
+ for="card-single-selectable-example-radio"
502
+ ></label>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ <div class="pf-c-card__header-main">
507
+ <div class="pf-c-card__title" id="card-single-selectable-example-title">
508
+ <h2 class="pf-c-card__title-text">Title</h2>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ <div class="pf-c-card__body">Body</div>
513
+ <div class="pf-c-card__footer">Footer</div>
514
+ </div>
515
+
516
+ <div
517
+ class="pf-c-card pf-m-selectable pf-m-disabled"
518
+ id="card-single-selectable-example-disabled"
519
+ >
520
+ <div class="pf-c-card__header">
521
+ <div class="pf-c-card__actions pf-m-no-offset">
522
+ <div class="pf-c-card__selectable-actions">
523
+ <div class="pf-c-radio pf-m-standalone">
524
+ <input
525
+ class="pf-c-radio__input"
526
+ type="radio"
527
+ id="card-single-selectable-example-disabled-radio"
528
+ name="card-single-selectable-example-disabled-radio"
529
+ aria-labelledby="card-single-selectable-example-disabled"
530
+ disabled
531
+ />
532
+
533
+ <label
534
+ class="pf-c-radio__label pf-m-disabled"
535
+ id="card-single-selectable-example-disabled-radio-label"
536
+ name="card-single-selectable-example-disabled-radio"
537
+ for="card-single-selectable-example-disabled-radio"
538
+ ></label>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ <div class="pf-c-card__header-main">
543
+ <div
544
+ class="pf-c-card__title"
545
+ id="card-single-selectable-example-disabled-title"
546
+ >
547
+ <h2 class="pf-c-card__title-text">Disabled card</h2>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ <div class="pf-c-card__body">Body</div>
552
+ <div class="pf-c-card__footer">Footer</div>
553
+ </div>
554
+
555
+ <div
556
+ class="pf-c-card pf-m-selectable pf-m-selected pf-m-disabled"
557
+ id="card-single-selectable-example-selected-disabled"
558
+ >
559
+ <div class="pf-c-card__header">
560
+ <div class="pf-c-card__actions pf-m-no-offset">
561
+ <div class="pf-c-card__selectable-actions">
562
+ <div class="pf-c-radio pf-m-standalone">
563
+ <input
564
+ class="pf-c-radio__input"
565
+ type="radio"
566
+ id="card-single-selectable-example-selected-disabled-radio"
567
+ name="card-single-selectable-example-selected-disabled-radio"
568
+ aria-labelledby="card-single-selectable-example-selected-disabled"
569
+ disabled
570
+ checked
571
+ />
572
+
573
+ <label
574
+ class="pf-c-radio__label pf-m-disabled"
575
+ id="card-single-selectable-example-selected-disabled-radio-label"
576
+ name="card-single-selectable-example-selected-disabled-radio"
577
+ for="card-single-selectable-example-selected-disabled-radio"
578
+ ></label>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ <div class="pf-c-card__header-main">
583
+ <div
584
+ class="pf-c-card__title"
585
+ id="card-single-selectable-example-selected-disabled-title"
586
+ >
587
+ <h2 class="pf-c-card__title-text">Selected but disabled card</h2>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ <div class="pf-c-card__body">Body</div>
592
+ <div class="pf-c-card__footer">Footer</div>
593
+ </div>
359
594
  </div>
360
595
 
361
596
  ```
362
597
 
363
- ### Selected
598
+ ### Clickable
364
599
 
365
600
  ```html
366
- <div
367
- class="pf-c-card pf-m-selectable-raised pf-m-selected-raised"
368
- tabindex="0"
369
- id="card-selected-example"
370
- >
371
- <div class="pf-c-card__title">Title</div>
372
- <div class="pf-c-card__body">Body</div>
373
- <div class="pf-c-card__footer">Footer</div>
601
+ <div class="pf-l-gallery pf-m-gutter">
602
+ <div class="pf-c-card pf-m-clickable" id="card-clickable-example">
603
+ <div class="pf-c-card__header">
604
+ <div class="pf-c-card__actions pf-m-no-offset">
605
+ <div class="pf-c-card__selectable-actions">
606
+ <div class="pf-c-radio pf-m-standalone">
607
+ <input
608
+ class="pf-c-radio__input pf-screen-reader"
609
+ type="radio"
610
+ id="card-clickable-example-sr-only-radio"
611
+ name="card-clickable-example-sr-only-radio"
612
+ aria-labelledby="card-clickable-example"
613
+ />
614
+
615
+ <label
616
+ class="pf-c-radio__label"
617
+ id="card-clickable-example-sr-only-radio-label"
618
+ name="card-clickable-example-sr-only-radio"
619
+ for="card-clickable-example-sr-only-radio"
620
+ ></label>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ <div class="pf-c-card__header-main">
625
+ <div class="pf-c-card__title" id="card-clickable-example-title">
626
+ <h2 class="pf-c-card__title-text">Title</h2>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ <div class="pf-c-card__body">Body</div>
631
+ <div class="pf-c-card__footer">Footer</div>
632
+ </div>
633
+
634
+ <div
635
+ class="pf-c-card pf-m-clickable pf-m-disabled"
636
+ id="card-clickable-example-disabled"
637
+ >
638
+ <div class="pf-c-card__header">
639
+ <div class="pf-c-card__actions pf-m-no-offset">
640
+ <div class="pf-c-card__selectable-actions">
641
+ <div class="pf-c-radio pf-m-standalone">
642
+ <input
643
+ class="pf-c-radio__input pf-screen-reader"
644
+ type="radio"
645
+ id="card-clickable-example-disabled-sr-only-radio"
646
+ name="card-clickable-example-disabled-sr-only-radio"
647
+ aria-labelledby="card-clickable-example-disabled"
648
+ disabled
649
+ />
650
+
651
+ <label
652
+ class="pf-c-radio__label pf-m-disabled"
653
+ id="card-clickable-example-disabled-sr-only-radio-label"
654
+ name="card-clickable-example-disabled-sr-only-radio"
655
+ for="card-clickable-example-disabled-sr-only-radio"
656
+ ></label>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ <div class="pf-c-card__header-main">
661
+ <div
662
+ class="pf-c-card__title"
663
+ id="card-clickable-example-disabled-title"
664
+ >
665
+ <h2 class="pf-c-card__title-text">Disabled card</h2>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ <div class="pf-c-card__body">Body</div>
670
+ <div class="pf-c-card__footer">Footer</div>
671
+ </div>
672
+
673
+ <div
674
+ class="pf-c-card pf-m-clickable pf-m-selected pf-m-disabled"
675
+ id="card-clickable-example-selected-disabled"
676
+ >
677
+ <div class="pf-c-card__header">
678
+ <div class="pf-c-card__actions pf-m-no-offset">
679
+ <div class="pf-c-card__selectable-actions">
680
+ <div class="pf-c-radio pf-m-standalone">
681
+ <input
682
+ class="pf-c-radio__input pf-screen-reader"
683
+ type="radio"
684
+ id="card-clickable-example-selected-disabled-sr-only-radio"
685
+ name="card-clickable-example-selected-disabled-sr-only-radio"
686
+ aria-labelledby="card-clickable-example-selected-disabled"
687
+ disabled
688
+ />
689
+
690
+ <label
691
+ class="pf-c-radio__label pf-m-disabled"
692
+ id="card-clickable-example-selected-disabled-sr-only-radio-label"
693
+ name="card-clickable-example-selected-disabled-sr-only-radio"
694
+ for="card-clickable-example-selected-disabled-sr-only-radio"
695
+ ></label>
696
+ </div>
697
+ </div>
698
+ </div>
699
+ <div class="pf-c-card__header-main">
700
+ <div
701
+ class="pf-c-card__title"
702
+ id="card-clickable-example-selected-disabled-title"
703
+ >
704
+ <h2 class="pf-c-card__title-text">Selected but disabled card</h2>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ <div class="pf-c-card__body">Body</div>
709
+ <div class="pf-c-card__footer">Footer</div>
710
+ </div>
374
711
  </div>
375
712
 
376
713
  ```
377
714
 
378
- ### Selectable with a hidden input for improved screen reader accessibility
715
+ ### Clickable and Selectable
379
716
 
380
717
  ```html
381
- <input
382
- class="pf-c-card__sr-input pf-screen-reader"
383
- type="checkbox"
384
- tabindex="-1"
385
- aria-label="Checkbox to improve screen reader accessibility of a selectable card"
386
- />
387
- <div
388
- class="pf-c-card pf-m-selectable-raised"
389
- tabindex="0"
390
- id="card-selectable-with-input-example"
391
- >
392
- <div class="pf-c-card__title">Title</div>
718
+ <div class="pf-l-gallery pf-m-gutter">
719
+ <div
720
+ class="pf-c-card pf-m-clickable pf-m-selectable"
721
+ id="card-clickable-selectable-example"
722
+ >
723
+ <div class="pf-c-card__header">
724
+ <div class="pf-c-card__actions pf-m-no-offset">
725
+ <div class="pf-c-card__selectable-actions">
726
+ <div class="pf-c-check pf-m-standalone">
727
+ <input
728
+ class="pf-c-check__input"
729
+ type="checkbox"
730
+ id="card-clickable-selectable-example-check"
731
+ name="card-clickable-selectable-example-check"
732
+ aria-labelledby="card-clickable-selectable-example"
733
+ />
734
+
735
+ <label
736
+ class="pf-c-check__label"
737
+ id="card-clickable-selectable-example-check-label"
738
+ name="card-clickable-selectable-example-check"
739
+ for="card-clickable-selectable-example-check"
740
+ ></label>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ <div class="pf-c-card__header-main">
745
+ <div
746
+ class="pf-c-card__title"
747
+ id="card-clickable-selectable-example-title"
748
+ >
749
+ <button class="pf-c-button pf-m-link pf-m-inline" type="button">Title</button>
750
+ </div>
751
+ </div>
752
+ </div>
753
+ <div class="pf-c-card__body">Body</div>
754
+ <div class="pf-c-card__footer">Footer</div>
755
+ </div>
756
+
757
+ <div
758
+ class="pf-c-card pf-m-clickable pf-m-selectable pf-m-current"
759
+ id="card-clickable-selectable-current-example"
760
+ >
761
+ <div class="pf-c-card__header">
762
+ <div class="pf-c-card__actions pf-m-no-offset">
763
+ <div class="pf-c-card__selectable-actions">
764
+ <div class="pf-c-check pf-m-standalone">
765
+ <input
766
+ class="pf-c-check__input"
767
+ type="checkbox"
768
+ id="card-clickable-selectable-current-example-check"
769
+ name="card-clickable-selectable-current-example-check"
770
+ aria-labelledby="card-clickable-selectable-current-example"
771
+ />
772
+
773
+ <label
774
+ class="pf-c-check__label"
775
+ id="card-clickable-selectable-current-example-check-label"
776
+ name="card-clickable-selectable-current-example-check"
777
+ for="card-clickable-selectable-current-example-check"
778
+ ></label>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ <div class="pf-c-card__header-main">
783
+ <div
784
+ class="pf-c-card__title"
785
+ id="card-clickable-selectable-current-example-title"
786
+ >
787
+ <button
788
+ class="pf-c-button pf-m-link pf-m-inline"
789
+ type="button"
790
+ >Current card (clicked)</button>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ <div class="pf-c-card__body">Body</div>
795
+ <div class="pf-c-card__footer">Footer</div>
796
+ </div>
797
+
798
+ <div
799
+ class="pf-c-card pf-m-clickable pf-m-selectable pf-m-disabled"
800
+ id="card-clickable-selectable-example-disabled"
801
+ >
802
+ <div class="pf-c-card__header">
803
+ <div class="pf-c-card__actions pf-m-no-offset">
804
+ <div class="pf-c-card__selectable-actions">
805
+ <div class="pf-c-check pf-m-standalone">
806
+ <input
807
+ class="pf-c-check__input"
808
+ type="checkbox"
809
+ disabled
810
+ id="card-clickable-selectable-example-disabled-check"
811
+ name="card-clickable-selectable-example-disabled-check"
812
+ aria-labelledby="card-clickable-selectable-example-disabled"
813
+ />
814
+
815
+ <label
816
+ class="pf-c-check__label pf-m-disabled"
817
+ id="card-clickable-selectable-example-disabled-check-label"
818
+ name="card-clickable-selectable-example-disabled-check"
819
+ for="card-clickable-selectable-example-disabled-check"
820
+ ></label>
821
+ </div>
822
+ </div>
823
+ </div>
824
+ <div class="pf-c-card__header-main">
825
+ <div
826
+ class="pf-c-card__title"
827
+ id="card-clickable-selectable-example-disabled-title"
828
+ >
829
+ <button
830
+ class="pf-c-button pf-m-link pf-m-inline pf-m-disabled"
831
+ type="button"
832
+ disabled
833
+ >Disabled card</button>
834
+ </div>
835
+ </div>
836
+ </div>
837
+ <div class="pf-c-card__body">Body</div>
838
+ <div class="pf-c-card__footer">Footer</div>
839
+ </div>
840
+
841
+ <div
842
+ class="pf-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled"
843
+ id="card-clickable-selectable-example-selected-disabled"
844
+ >
845
+ <div class="pf-c-card__header">
846
+ <div class="pf-c-card__actions pf-m-no-offset">
847
+ <div class="pf-c-card__selectable-actions">
848
+ <div class="pf-c-check pf-m-standalone">
849
+ <input
850
+ class="pf-c-check__input"
851
+ type="checkbox"
852
+ checked
853
+ disabled
854
+ id="card-clickable-selectable-example-selected-disabled-check"
855
+ name="card-clickable-selectable-example-selected-disabled-check"
856
+ aria-labelledby="card-clickable-selectable-example-selected-disabled"
857
+ />
858
+
859
+ <label
860
+ class="pf-c-check__label pf-m-disabled"
861
+ id="card-clickable-selectable-example-selected-disabled-check-label"
862
+ name="card-clickable-selectable-example-selected-disabled-check"
863
+ for="card-clickable-selectable-example-selected-disabled-check"
864
+ ></label>
865
+ </div>
866
+ </div>
867
+ </div>
868
+ <div class="pf-c-card__header-main">
869
+ <div
870
+ class="pf-c-card__title"
871
+ id="card-clickable-selectable-example-selected-disabled-title"
872
+ >
873
+ <button
874
+ class="pf-c-button pf-m-link pf-m-inline pf-m-disabled"
875
+ type="button"
876
+ disabled
877
+ >Selected but disabled card</button>
878
+ </div>
879
+ </div>
880
+ </div>
881
+ <div class="pf-c-card__body">Body</div>
882
+ <div class="pf-c-card__footer">Footer</div>
883
+ </div>
884
+ </div>
885
+
886
+ ```
887
+
888
+ ### Hoverable raised (deprecated)
889
+
890
+ ```html
891
+ <div class="pf-c-card pf-m-hoverable-raised" id="card-hoverable-example">
892
+ <div class="pf-c-card__title">
893
+ <h2 class="pf-c-card__title-text">Title</h2>
894
+ </div>
393
895
  <div class="pf-c-card__body">Body</div>
394
896
  <div class="pf-c-card__footer">Footer</div>
395
897
  </div>
396
898
 
397
899
  ```
398
900
 
399
- ### Non selectable
901
+ ### Selectable raised (deprecated)
400
902
 
401
903
  ```html
402
904
  <div
403
- class="pf-c-card pf-m-non-selectable-raised"
404
- id="card-non-selectable-example"
905
+ class="pf-c-card pf-m-selectable-raised"
906
+ tabindex="0"
907
+ id="card-selectable-raised-example"
405
908
  >
406
- <div class="pf-c-card__title">Title</div>
909
+ <div class="pf-c-card__title">
910
+ <h2 class="pf-c-card__title-text">Title</h2>
911
+ </div>
407
912
  <div class="pf-c-card__body">Body</div>
408
913
  <div class="pf-c-card__footer">Footer</div>
409
914
  </div>
410
915
 
411
916
  ```
412
917
 
413
- ### Hoverable (legacy)
918
+ ### Selected raised (deprecated)
414
919
 
415
920
  ```html
416
- <div class="pf-c-card pf-m-hoverable" id="card-hoverable-legacy-example">
417
- <div class="pf-c-card__title">Title</div>
921
+ <div
922
+ class="pf-c-card pf-m-selectable-raised pf-m-selected-raised"
923
+ tabindex="0"
924
+ id="card-selected-raised-example"
925
+ >
926
+ <div class="pf-c-card__title">
927
+ <h2 class="pf-c-card__title-text">Title</h2>
928
+ </div>
418
929
  <div class="pf-c-card__body">Body</div>
419
930
  <div class="pf-c-card__footer">Footer</div>
420
931
  </div>
421
932
 
422
933
  ```
423
934
 
424
- ### Selectable (legacy)
935
+ ### Selectable raised with a hidden input for improved screen reader accessibility (deprecated)
425
936
 
426
937
  ```html
938
+ <input
939
+ class="pf-c-card__sr-input pf-screen-reader"
940
+ type="checkbox"
941
+ tabindex="-1"
942
+ aria-label="Checkbox to improve screen reader accessibility of a selectable card"
943
+ />
427
944
  <div
428
- class="pf-c-card pf-m-selectable"
945
+ class="pf-c-card pf-m-selectable-raised"
429
946
  tabindex="0"
430
- id="card-selectable-legacy-example"
947
+ id="card-selectable-raised-with-input-example"
431
948
  >
432
- <div class="pf-c-card__title">Title</div>
949
+ <div class="pf-c-card__title">
950
+ <h2 class="pf-c-card__title-text">Title</h2>
951
+ </div>
433
952
  <div class="pf-c-card__body">Body</div>
434
953
  <div class="pf-c-card__footer">Footer</div>
435
954
  </div>
436
955
 
437
956
  ```
438
957
 
439
- ### Selected (legacy)
958
+ ### Non selectable raised (deprecated)
440
959
 
441
960
  ```html
442
961
  <div
443
- class="pf-c-card pf-m-selectable pf-m-selected"
444
- tabindex="0"
445
- id="card-selected-legacy-example"
962
+ class="pf-c-card pf-m-non-selectable-raised"
963
+ id="card-non-selectable-raised-example"
446
964
  >
447
- <div class="pf-c-card__title">Title</div>
965
+ <div class="pf-c-card__title">
966
+ <h2 class="pf-c-card__title-text">Title</h2>
967
+ </div>
448
968
  <div class="pf-c-card__body">Body</div>
449
969
  <div class="pf-c-card__footer">Footer</div>
450
970
  </div>
@@ -455,7 +975,9 @@ cssPrefix: pf-c-card
455
975
 
456
976
  ```html
457
977
  <div class="pf-c-card pf-m-flat" id="card-flat-example">
458
- <div class="pf-c-card__title">Title</div>
978
+ <div class="pf-c-card__title">
979
+ <h2 class="pf-c-card__title-text">Title</h2>
980
+ </div>
459
981
  <div class="pf-c-card__body">Body</div>
460
982
  <div class="pf-c-card__footer">Footer</div>
461
983
  </div>
@@ -466,7 +988,9 @@ cssPrefix: pf-c-card
466
988
 
467
989
  ```html
468
990
  <div class="pf-c-card pf-m-rounded" id="card-rounded-example">
469
- <div class="pf-c-card__title">Title</div>
991
+ <div class="pf-c-card__title">
992
+ <h2 class="pf-c-card__title-text">Title</h2>
993
+ </div>
470
994
  <div class="pf-c-card__body">Body</div>
471
995
  <div class="pf-c-card__footer">Footer</div>
472
996
  </div>
@@ -477,7 +1001,9 @@ cssPrefix: pf-c-card
477
1001
 
478
1002
  ```html
479
1003
  <div class="pf-c-card pf-m-plain" id="card-plain-example">
480
- <div class="pf-c-card__title">Title</div>
1004
+ <div class="pf-c-card__title">
1005
+ <h2 class="pf-c-card__title-text">Title</h2>
1006
+ </div>
481
1007
  <div class="pf-c-card__body">Body</div>
482
1008
  <div class="pf-c-card__footer">Footer</div>
483
1009
  </div>
@@ -551,11 +1077,18 @@ cssPrefix: pf-c-card
551
1077
  type="checkbox"
552
1078
  id="card-expandable-example-check"
553
1079
  name="card-expandable-example-check"
554
- aria-label="card-expandable-example checkbox"
1080
+ aria-labelledby="card-expandable-example"
555
1081
  />
556
1082
  </div>
557
1083
  </div>
558
- <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
1084
+ <div class="pf-c-card__header-main">
1085
+ <div class="pf-c-card__title">
1086
+ <h2
1087
+ class="pf-c-card__title-text"
1088
+ id="card-expandable-example-title"
1089
+ >Title</h2>
1090
+ </div>
1091
+ </div>
559
1092
  </div>
560
1093
  </div>
561
1094
 
@@ -579,11 +1112,13 @@ cssPrefix: pf-c-card
579
1112
  </span>
580
1113
  </button>
581
1114
  </div>
582
- <img
583
- src="/assets/images/pf-logo-small.svg"
584
- alt="PatternFly logo"
585
- width="27px"
586
- />
1115
+ <div class="pf-c-card__header-main">
1116
+ <img
1117
+ src="/assets/images/pf-logo-small.svg"
1118
+ alt="PatternFly logo"
1119
+ width="27px"
1120
+ />
1121
+ </div>
587
1122
  <div class="pf-c-card__actions">
588
1123
  <div class="pf-c-dropdown">
589
1124
  <button
@@ -633,7 +1168,7 @@ cssPrefix: pf-c-card
633
1168
  type="checkbox"
634
1169
  id="card-expandable-image-example-check"
635
1170
  name="card-expandable-image-example-check"
636
- aria-label="card-expandable-image-example checkbox"
1171
+ aria-labelledby="card-expandable-image-example"
637
1172
  />
638
1173
  </div>
639
1174
  </div>
@@ -709,11 +1244,13 @@ cssPrefix: pf-c-card
709
1244
  type="checkbox"
710
1245
  id="card-expanded-example-check"
711
1246
  name="card-expanded-example-check"
712
- aria-label="card-expanded-example checkbox"
1247
+ aria-labelledby="card-expanded-example"
713
1248
  />
714
1249
  </div>
715
1250
  </div>
716
- <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
1251
+ <div class="pf-c-card__header-main">
1252
+ <h2 class="pf-c-card__title-text" id="card-expanded-example-title">Title</h2>
1253
+ </div>
717
1254
  </div>
718
1255
  <div class="pf-c-card__expandable-content">
719
1256
  <div class="pf-c-card__body">Body</div>
@@ -777,11 +1314,18 @@ cssPrefix: pf-c-card
777
1314
  type="checkbox"
778
1315
  id="card-full-height-example-check"
779
1316
  name="card-full-height-example-check"
780
- aria-label="card-full-height-example checkbox"
1317
+ aria-labelledby="card-full-height-example"
781
1318
  />
782
1319
  </div>
783
1320
  </div>
784
- <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
1321
+ <div class="pf-c-card__header-main">
1322
+ <div class="pf-c-card__title">
1323
+ <h2
1324
+ class="pf-c-card__title-text"
1325
+ id="card-full-height-example-title&quot;"
1326
+ >Title</h2>
1327
+ </div>
1328
+ </div>
785
1329
  </div>
786
1330
  <div class="pf-c-card__body">Body</div>
787
1331
  <div class="pf-c-card__footer">Footer</div>
@@ -843,11 +1387,18 @@ cssPrefix: pf-c-card
843
1387
  type="checkbox"
844
1388
  id="card-toggle-on-right-example-check"
845
1389
  name="card-toggle-on-right-example-check"
846
- aria-label="card-toggle-on-right-example checkbox"
1390
+ aria-labelledby="card-toggle-on-right-example"
847
1391
  />
848
1392
  </div>
849
1393
  </div>
850
- <div class="pf-c-card__title" id="card-toggle-on-right-example-title">Title</div>
1394
+ <div class="pf-c-card__header-main">
1395
+ <div class="pf-c-card__title">
1396
+ <h2
1397
+ class="pf-c-card__title-text"
1398
+ id="card-toggle-on-right-example-title"
1399
+ >Title</h2>
1400
+ </div>
1401
+ </div>
851
1402
  <div class="pf-c-card__header-toggle">
852
1403
  <button
853
1404
  class="pf-c-button pf-m-plain"
@@ -870,7 +1421,9 @@ cssPrefix: pf-c-card
870
1421
 
871
1422
  ```html
872
1423
  <div class="pf-c-card">
873
- <div class="pf-c-card__title">Title</div>
1424
+ <div class="pf-c-card__title">
1425
+ <h2 class="pf-c-card__title-text">Title</h2>
1426
+ </div>
874
1427
  <hr class="pf-c-divider" />
875
1428
  <div class="pf-c-card__body">Body</div>
876
1429
  <hr class="pf-c-divider" />
@@ -889,30 +1442,37 @@ A card is a generic rectangular container that can be used to build other compon
889
1442
 
890
1443
  ### Usage
891
1444
 
892
- | Class | Applied | Outcome |
893
- | -------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
894
- | `.pf-c-card` | `<div>` | Creates a card component. **Required** |
895
- | `.pf-c-card__title` | `<div>` | Creates the title of a card. |
896
- | `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
897
- | `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
898
- | `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
899
- | `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
900
- | `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
901
- | `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
902
- | `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. |
903
- | `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
904
- | `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
905
- | `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
906
- | `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
907
- | `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
908
- | `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
909
- | `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
910
- | `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
911
- | `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
912
- | `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
913
- | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
914
- | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
915
- | `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
916
- | `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
917
- | `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
918
- | `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
1445
+ | Class | Applied | Outcome |
1446
+ | ---- | ---- | ---- |
1447
+ | `.pf-c-card` | `<div>` | Creates a card component. **Required** |
1448
+ | `.pf-c-card__title` | `<div>` | Creates a card title container. |
1449
+ | `.pf-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
1450
+ | `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
1451
+ | `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
1452
+ | `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
1453
+ | `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
1454
+ | `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
1455
+ | `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
1456
+ | `.pf-c-card__selectable-actions` | `<div>` | Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable. |
1457
+ | `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
1458
+ | `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
1459
+ | `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
1460
+ | `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
1461
+ | `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
1462
+ | `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` not to fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
1463
+ | `.pf-m-selectable` | `.pf-c-card` | Modifies a card to be selectable. |
1464
+ | `.pf-m-clickable` | `.pf-c-card` | Modifies a card to be clickable. |
1465
+ | `.pf-m-selected` | `.pf-c-card` | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-c-card__input`. |
1466
+ | `.pf-m-current` | `.pf-c-card` | Modifies a card that is both clickable and selectable for clicked state styling. |
1467
+ | `.pf-m-disabled` | `.pf-c-card` | Modifies a card so it is not selectable or clickable. |
1468
+ | `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
1469
+ | `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
1470
+ | `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
1471
+ | `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
1472
+ | `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
1473
+ | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
1474
+ | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
1475
+ | `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
1476
+ | `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
1477
+ | `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
1478
+ | `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |