@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.91

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 (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +1 -1
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/Card/examples/Card.md CHANGED
@@ -9,12 +9,12 @@ cssPrefix: pf-v5-c-card
9
9
  ### Basic
10
10
 
11
11
  ```html
12
- <div class="pf-v5-c-card" id="card-basic-example">
13
- <div class="pf-v5-c-card__title">
14
- <h2 class="pf-v5-c-card__title-text">Title</h2>
12
+ <div class="pf-v6-c-card" id="card-basic-example">
13
+ <div class="pf-v6-c-card__title">
14
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
15
15
  </div>
16
- <div class="pf-v5-c-card__body">Body</div>
17
- <div class="pf-v5-c-card__footer">Footer</div>
16
+ <div class="pf-v6-c-card__body">Body</div>
17
+ <div class="pf-v6-c-card__footer">Footer</div>
18
18
  </div>
19
19
 
20
20
  ```
@@ -22,9 +22,9 @@ cssPrefix: pf-v5-c-card
22
22
  ### With image and action
23
23
 
24
24
  ```html
25
- <div class="pf-v5-c-card" id="card-action-example-1">
26
- <div class="pf-v5-c-card__header">
27
- <div class="pf-v5-c-card__header-main">
25
+ <div class="pf-v6-c-card" id="card-action-example-1">
26
+ <div class="pf-v6-c-card__header">
27
+ <div class="pf-v6-c-card__header-main">
28
28
  <svg
29
29
  version="1.1"
30
30
  xmlns="http://www.w3.org/2000/svg"
@@ -81,10 +81,10 @@ cssPrefix: pf-v5-c-card
81
81
  </g>
82
82
  </svg>
83
83
  </div>
84
- <div class="pf-v5-c-card__actions">
85
- <div class="pf-v5-c-dropdown">
84
+ <div class="pf-v6-c-card__actions">
85
+ <div class="pf-v6-c-dropdown">
86
86
  <button
87
- class="pf-v5-c-dropdown__toggle pf-m-plain"
87
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
88
88
  id="card-action-example-1-dropdown-kebab-button"
89
89
  aria-expanded="false"
90
90
  type="button"
@@ -93,24 +93,24 @@ cssPrefix: pf-v5-c-card
93
93
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
94
94
  </button>
95
95
  <ul
96
- class="pf-v5-c-dropdown__menu pf-m-align-right"
96
+ class="pf-v6-c-dropdown__menu pf-m-align-right"
97
97
  aria-labelledby="card-action-example-1-dropdown-kebab-button"
98
98
  hidden
99
99
  role="menu"
100
100
  >
101
101
  <li role="none">
102
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
102
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
103
103
  </li>
104
104
  <li role="none">
105
105
  <button
106
- class="pf-v5-c-dropdown__menu-item"
106
+ class="pf-v6-c-dropdown__menu-item"
107
107
  role="menuitem"
108
108
  type="button"
109
109
  >Action</button>
110
110
  </li>
111
111
  <li role="none">
112
112
  <a
113
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
113
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
114
114
  role="menuitem"
115
115
  href="#"
116
116
  aria-disabled="true"
@@ -119,25 +119,25 @@ cssPrefix: pf-v5-c-card
119
119
  </li>
120
120
  <li role="none">
121
121
  <button
122
- class="pf-v5-c-dropdown__menu-item"
122
+ class="pf-v6-c-dropdown__menu-item"
123
123
  role="menuitem"
124
124
  type="button"
125
125
  disabled
126
126
  >Disabled action</button>
127
127
  </li>
128
- <li class="pf-v5-c-divider" role="separator"></li>
128
+ <li class="pf-v6-c-divider" role="separator"></li>
129
129
  <li role="none">
130
130
  <a
131
- class="pf-v5-c-dropdown__menu-item"
131
+ class="pf-v6-c-dropdown__menu-item"
132
132
  role="menuitem"
133
133
  href="#"
134
134
  >Separated link</a>
135
135
  </li>
136
136
  </ul>
137
137
  </div>
138
- <div class="pf-v5-c-check pf-m-standalone">
138
+ <div class="pf-v6-c-check pf-m-standalone">
139
139
  <input
140
- class="pf-v5-c-check__input"
140
+ class="pf-v6-c-check__input"
141
141
  type="checkbox"
142
142
  aria-label="Standalone check"
143
143
  id="card-action-example-1-check"
@@ -147,14 +147,14 @@ cssPrefix: pf-v5-c-card
147
147
  </div>
148
148
  </div>
149
149
  </div>
150
- <div class="pf-v5-c-card__title">
150
+ <div class="pf-v6-c-card__title">
151
151
  <h2
152
- class="pf-v5-c-card__title-text"
152
+ class="pf-v6-c-card__title-text"
153
153
  id="card-action-example-1-check-label"
154
154
  >Title</h2>
155
155
  </div>
156
- <div class="pf-v5-c-card__body">Body</div>
157
- <div class="pf-v5-c-card__footer">Footer</div>
156
+ <div class="pf-v6-c-card__body">Body</div>
157
+ <div class="pf-v6-c-card__footer">Footer</div>
158
158
  </div>
159
159
 
160
160
  ```
@@ -162,12 +162,12 @@ cssPrefix: pf-v5-c-card
162
162
  ### With title in head
163
163
 
164
164
  ```html
165
- <div class="pf-v5-c-card" id="card-action-example-2">
166
- <div class="pf-v5-c-card__header">
167
- <div class="pf-v5-c-card__actions">
168
- <div class="pf-v5-c-dropdown">
165
+ <div class="pf-v6-c-card" id="card-action-example-2">
166
+ <div class="pf-v6-c-card__header">
167
+ <div class="pf-v6-c-card__actions">
168
+ <div class="pf-v6-c-dropdown">
169
169
  <button
170
- class="pf-v5-c-dropdown__toggle pf-m-plain"
170
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
171
171
  id="card-action-example-2-dropdown-kebab-button"
172
172
  aria-expanded="false"
173
173
  type="button"
@@ -176,24 +176,24 @@ cssPrefix: pf-v5-c-card
176
176
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
177
177
  </button>
178
178
  <ul
179
- class="pf-v5-c-dropdown__menu pf-m-align-right"
179
+ class="pf-v6-c-dropdown__menu pf-m-align-right"
180
180
  aria-labelledby="card-action-example-2-dropdown-kebab-button"
181
181
  hidden
182
182
  role="menu"
183
183
  >
184
184
  <li role="none">
185
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
185
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
186
186
  </li>
187
187
  <li role="none">
188
188
  <button
189
- class="pf-v5-c-dropdown__menu-item"
189
+ class="pf-v6-c-dropdown__menu-item"
190
190
  role="menuitem"
191
191
  type="button"
192
192
  >Action</button>
193
193
  </li>
194
194
  <li role="none">
195
195
  <a
196
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
196
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
197
197
  role="menuitem"
198
198
  href="#"
199
199
  aria-disabled="true"
@@ -202,25 +202,25 @@ cssPrefix: pf-v5-c-card
202
202
  </li>
203
203
  <li role="none">
204
204
  <button
205
- class="pf-v5-c-dropdown__menu-item"
205
+ class="pf-v6-c-dropdown__menu-item"
206
206
  role="menuitem"
207
207
  type="button"
208
208
  disabled
209
209
  >Disabled action</button>
210
210
  </li>
211
- <li class="pf-v5-c-divider" role="separator"></li>
211
+ <li class="pf-v6-c-divider" role="separator"></li>
212
212
  <li role="none">
213
213
  <a
214
- class="pf-v5-c-dropdown__menu-item"
214
+ class="pf-v6-c-dropdown__menu-item"
215
215
  role="menuitem"
216
216
  href="#"
217
217
  >Separated link</a>
218
218
  </li>
219
219
  </ul>
220
220
  </div>
221
- <div class="pf-v5-c-check pf-m-standalone">
221
+ <div class="pf-v6-c-check pf-m-standalone">
222
222
  <input
223
- class="pf-v5-c-check__input"
223
+ class="pf-v6-c-check__input"
224
224
  type="checkbox"
225
225
  aria-label="Standalone check"
226
226
  id="card-action-example-2-check"
@@ -229,17 +229,17 @@ cssPrefix: pf-v5-c-card
229
229
  />
230
230
  </div>
231
231
  </div>
232
- <div class="pf-v5-c-card__header-main">
233
- <div class="pf-v5-c-card__title">
232
+ <div class="pf-v6-c-card__header-main">
233
+ <div class="pf-v6-c-card__title">
234
234
  <h2
235
- class="pf-v5-c-card__title-text"
235
+ class="pf-v6-c-card__title-text"
236
236
  id="card-action-example-2-check-label"
237
237
  >This is a really really really really really really really really really really long title</h2>
238
238
  </div>
239
239
  </div>
240
240
  </div>
241
- <div class="pf-v5-c-card__body">Body</div>
242
- <div class="pf-v5-c-card__footer">Footer</div>
241
+ <div class="pf-v6-c-card__body">Body</div>
242
+ <div class="pf-v6-c-card__footer">Footer</div>
243
243
  </div>
244
244
 
245
245
  ```
@@ -247,12 +247,12 @@ cssPrefix: pf-v5-c-card
247
247
  ### With only actions in head (no title/footer)
248
248
 
249
249
  ```html
250
- <div class="pf-v5-c-card" id="card-action-example-3">
251
- <div class="pf-v5-c-card__header">
252
- <div class="pf-v5-c-card__actions">
253
- <div class="pf-v5-c-dropdown">
250
+ <div class="pf-v6-c-card" id="card-action-example-3">
251
+ <div class="pf-v6-c-card__header">
252
+ <div class="pf-v6-c-card__actions">
253
+ <div class="pf-v6-c-dropdown">
254
254
  <button
255
- class="pf-v5-c-dropdown__toggle pf-m-plain"
255
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
256
256
  id="card-action-example-3-dropdown-kebab-button"
257
257
  aria-expanded="false"
258
258
  type="button"
@@ -261,24 +261,24 @@ cssPrefix: pf-v5-c-card
261
261
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
262
262
  </button>
263
263
  <ul
264
- class="pf-v5-c-dropdown__menu pf-m-align-right"
264
+ class="pf-v6-c-dropdown__menu pf-m-align-right"
265
265
  aria-labelledby="card-action-example-3-dropdown-kebab-button"
266
266
  hidden
267
267
  role="menu"
268
268
  >
269
269
  <li role="none">
270
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
270
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
271
271
  </li>
272
272
  <li role="none">
273
273
  <button
274
- class="pf-v5-c-dropdown__menu-item"
274
+ class="pf-v6-c-dropdown__menu-item"
275
275
  role="menuitem"
276
276
  type="button"
277
277
  >Action</button>
278
278
  </li>
279
279
  <li role="none">
280
280
  <a
281
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
281
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
282
282
  role="menuitem"
283
283
  href="#"
284
284
  aria-disabled="true"
@@ -287,25 +287,25 @@ cssPrefix: pf-v5-c-card
287
287
  </li>
288
288
  <li role="none">
289
289
  <button
290
- class="pf-v5-c-dropdown__menu-item"
290
+ class="pf-v6-c-dropdown__menu-item"
291
291
  role="menuitem"
292
292
  type="button"
293
293
  disabled
294
294
  >Disabled action</button>
295
295
  </li>
296
- <li class="pf-v5-c-divider" role="separator"></li>
296
+ <li class="pf-v6-c-divider" role="separator"></li>
297
297
  <li role="none">
298
298
  <a
299
- class="pf-v5-c-dropdown__menu-item"
299
+ class="pf-v6-c-dropdown__menu-item"
300
300
  role="menuitem"
301
301
  href="#"
302
302
  >Separated link</a>
303
303
  </li>
304
304
  </ul>
305
305
  </div>
306
- <div class="pf-v5-c-check pf-m-standalone">
306
+ <div class="pf-v6-c-check pf-m-standalone">
307
307
  <input
308
- class="pf-v5-c-check__input"
308
+ class="pf-v6-c-check__input"
309
309
  type="checkbox"
310
310
  aria-label="Standalone check"
311
311
  id="card-action-example-3-check"
@@ -316,7 +316,7 @@ cssPrefix: pf-v5-c-card
316
316
  </div>
317
317
  </div>
318
318
  <div
319
- class="pf-v5-c-card__body"
319
+ class="pf-v6-c-card__body"
320
320
  id="card-action-example-3-check-label"
321
321
  >This is the card body. There are only actions in the card head.</div>
322
322
  </div>
@@ -326,20 +326,20 @@ cssPrefix: pf-v5-c-card
326
326
  ### Actions with no offset
327
327
 
328
328
  ```html
329
- <div class="pf-v5-c-card" id="card-action-no-offset">
330
- <div class="pf-v5-c-card__header">
331
- <div class="pf-v5-c-card__actions pf-m-no-offset">
332
- <button class="pf-v5-c-button pf-m-primary" type="button">Action</button>
329
+ <div class="pf-v6-c-card" id="card-action-no-offset">
330
+ <div class="pf-v6-c-card__header">
331
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
332
+ <button class="pf-v6-c-button pf-m-primary" type="button">Action</button>
333
333
  </div>
334
- <div class="pf-v5-c-card__header-main">
334
+ <div class="pf-v6-c-card__header-main">
335
335
  <h1
336
- class="pf-v5-c-title pf-m-2xl"
336
+ class="pf-v6-c-title pf-m-2xl"
337
337
  id="card-action-no-offset-check-label"
338
338
  >This is a card title</h1>
339
339
  </div>
340
340
  </div>
341
- <div class="pf-v5-c-card__body">Body</div>
342
- <div class="pf-v5-c-card__footer">Footer</div>
341
+ <div class="pf-v6-c-card__body">Body</div>
342
+ <div class="pf-v6-c-card__footer">Footer</div>
343
343
  </div>
344
344
 
345
345
  ```
@@ -347,9 +347,9 @@ cssPrefix: pf-v5-c-card
347
347
  ### With only image in head
348
348
 
349
349
  ```html
350
- <div class="pf-v5-c-card" id="card-image-head-example">
351
- <div class="pf-v5-c-card__header">
352
- <div class="pf-v5-c-card__header-main">
350
+ <div class="pf-v6-c-card" id="card-image-head-example">
351
+ <div class="pf-v6-c-card__header">
352
+ <div class="pf-v6-c-card__header-main">
353
353
  <svg
354
354
  version="1.1"
355
355
  xmlns="http://www.w3.org/2000/svg"
@@ -407,11 +407,11 @@ cssPrefix: pf-v5-c-card
407
407
  </svg>
408
408
  </div>
409
409
  </div>
410
- <div class="pf-v5-c-card__title">
411
- <h2 class="pf-v5-c-card__title-text">Title</h2>
410
+ <div class="pf-v6-c-card__title">
411
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
412
412
  </div>
413
- <div class="pf-v5-c-card__body">Body</div>
414
- <div class="pf-v5-c-card__footer">Footer</div>
413
+ <div class="pf-v6-c-card__body">Body</div>
414
+ <div class="pf-v6-c-card__footer">Footer</div>
415
415
  </div>
416
416
 
417
417
  ```
@@ -419,11 +419,11 @@ cssPrefix: pf-v5-c-card
419
419
  ### With no footer
420
420
 
421
421
  ```html
422
- <div class="pf-v5-c-card" id="card-no-footer-example">
423
- <div class="pf-v5-c-card__title">
424
- <h2 class="pf-v5-c-card__title-text">Title</h2>
422
+ <div class="pf-v6-c-card" id="card-no-footer-example">
423
+ <div class="pf-v6-c-card__title">
424
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
425
425
  </div>
426
- <div class="pf-v5-c-card__body">This card has no footer</div>
426
+ <div class="pf-v6-c-card__body">This card has no footer</div>
427
427
  </div>
428
428
 
429
429
  ```
@@ -431,9 +431,9 @@ cssPrefix: pf-v5-c-card
431
431
  ### With no title
432
432
 
433
433
  ```html
434
- <div class="pf-v5-c-card" id="card-no-title-example">
435
- <div class="pf-v5-c-card__body">This card has no title</div>
436
- <div class="pf-v5-c-card__footer">Footer</div>
434
+ <div class="pf-v6-c-card" id="card-no-title-example">
435
+ <div class="pf-v6-c-card__body">This card has no title</div>
436
+ <div class="pf-v6-c-card__footer">Footer</div>
437
437
  </div>
438
438
 
439
439
  ```
@@ -441,8 +441,8 @@ cssPrefix: pf-v5-c-card
441
441
  ### With only a content section
442
442
 
443
443
  ```html
444
- <div class="pf-v5-c-card" id="card-body-example">
445
- <div class="pf-v5-c-card__body">Body</div>
444
+ <div class="pf-v6-c-card" id="card-body-example">
445
+ <div class="pf-v6-c-card__body">Body</div>
446
446
  </div>
447
447
 
448
448
  ```
@@ -450,14 +450,14 @@ cssPrefix: pf-v5-c-card
450
450
  ### With multiple body sections
451
451
 
452
452
  ```html
453
- <div class="pf-v5-c-card" id="card-multiple-body-example">
454
- <div class="pf-v5-c-card__title">
455
- <h2 class="pf-v5-c-card__title-text">Title</h2>
453
+ <div class="pf-v6-c-card" id="card-multiple-body-example">
454
+ <div class="pf-v6-c-card__title">
455
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
456
456
  </div>
457
- <div class="pf-v5-c-card__body">Body</div>
458
- <div class="pf-v5-c-card__body">Body</div>
459
- <div class="pf-v5-c-card__body">Body</div>
460
- <div class="pf-v5-c-card__footer">Footer</div>
457
+ <div class="pf-v6-c-card__body">Body</div>
458
+ <div class="pf-v6-c-card__body">Body</div>
459
+ <div class="pf-v6-c-card__body">Body</div>
460
+ <div class="pf-v6-c-card__footer">Footer</div>
461
461
  </div>
462
462
 
463
463
  ```
@@ -465,14 +465,14 @@ cssPrefix: pf-v5-c-card
465
465
  ### With only one body that fills
466
466
 
467
467
  ```html
468
- <div class="pf-v5-c-card" id="card-body-fill-example">
469
- <div class="pf-v5-c-card__title">
470
- <h2 class="pf-v5-c-card__title-text">Title</h2>
468
+ <div class="pf-v6-c-card" id="card-body-fill-example">
469
+ <div class="pf-v6-c-card__title">
470
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
471
471
  </div>
472
- <div class="pf-v5-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
473
- <div class="pf-v5-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
474
- <div class="pf-v5-c-card__body">Body</div>
475
- <div class="pf-v5-c-card__footer">Footer</div>
472
+ <div class="pf-v6-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
473
+ <div class="pf-v6-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
474
+ <div class="pf-v6-c-card__body">Body</div>
475
+ <div class="pf-v6-c-card__footer">Footer</div>
476
476
  </div>
477
477
 
478
478
  ```
@@ -480,12 +480,12 @@ cssPrefix: pf-v5-c-card
480
480
  ### Compact
481
481
 
482
482
  ```html
483
- <div class="pf-v5-c-card pf-m-compact" id="card-compact-example">
484
- <div class="pf-v5-c-card__title">
485
- <h2 class="pf-v5-c-card__title-text">Title</h2>
483
+ <div class="pf-v6-c-card pf-m-compact" id="card-compact-example">
484
+ <div class="pf-v6-c-card__title">
485
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
486
486
  </div>
487
- <div class="pf-v5-c-card__body">Body</div>
488
- <div class="pf-v5-c-card__footer">Footer</div>
487
+ <div class="pf-v6-c-card__body">Body</div>
488
+ <div class="pf-v6-c-card__footer">Footer</div>
489
489
  </div>
490
490
 
491
491
  ```
@@ -493,12 +493,12 @@ cssPrefix: pf-v5-c-card
493
493
  ### Large
494
494
 
495
495
  ```html
496
- <div class="pf-v5-c-card pf-m-display-lg" id="card-display-lg-example">
497
- <div class="pf-v5-c-card__title">
498
- <h2 class="pf-v5-c-card__title-text">Title</h2>
496
+ <div class="pf-v6-c-card pf-m-display-lg" id="card-display-lg-example">
497
+ <div class="pf-v6-c-card__title">
498
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
499
499
  </div>
500
- <div class="pf-v5-c-card__body">Body</div>
501
- <div class="pf-v5-c-card__footer">Footer</div>
500
+ <div class="pf-v6-c-card__body">Body</div>
501
+ <div class="pf-v6-c-card__footer">Footer</div>
502
502
  </div>
503
503
 
504
504
  ```
@@ -506,21 +506,21 @@ cssPrefix: pf-v5-c-card
506
506
  ### Selectable
507
507
 
508
508
  ```html
509
- <div class="pf-v5-l-gallery pf-m-gutter">
510
- <div class="pf-v5-c-card pf-m-selectable" id="card-selectable-example">
511
- <div class="pf-v5-c-card__header">
512
- <div class="pf-v5-c-card__actions pf-m-no-offset">
513
- <div class="pf-v5-c-card__selectable-actions">
514
- <div class="pf-v5-c-check">
509
+ <div class="pf-v6-l-gallery pf-m-gutter">
510
+ <div class="pf-v6-c-card pf-m-selectable" id="card-selectable-example">
511
+ <div class="pf-v6-c-card__header">
512
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
513
+ <div class="pf-v6-c-card__selectable-actions">
514
+ <div class="pf-v6-c-check">
515
515
  <input
516
- class="pf-v5-c-check__input"
516
+ class="pf-v6-c-check__input"
517
517
  type="checkbox"
518
518
  id="card-selectable-example-check"
519
519
  name="card-selectable-example-check"
520
520
  aria-labelledby="card-selectable-example"
521
521
  />
522
522
  <label
523
- class="pf-v5-c-check__label"
523
+ class="pf-v6-c-check__label"
524
524
  for="card-selectable-example-check"
525
525
  id="card-selectable-example-check-label"
526
526
  name="card-selectable-example-check"
@@ -528,26 +528,26 @@ cssPrefix: pf-v5-c-card
528
528
  </div>
529
529
  </div>
530
530
  </div>
531
- <div class="pf-v5-c-card__header-main">
532
- <div class="pf-v5-c-card__title">
533
- <h2 class="pf-v5-c-card__title-text">Title</h2>
531
+ <div class="pf-v6-c-card__header-main">
532
+ <div class="pf-v6-c-card__title">
533
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
534
534
  </div>
535
535
  </div>
536
536
  </div>
537
- <div class="pf-v5-c-card__body">Body</div>
538
- <div class="pf-v5-c-card__footer">Footer</div>
537
+ <div class="pf-v6-c-card__body">Body</div>
538
+ <div class="pf-v6-c-card__footer">Footer</div>
539
539
  </div>
540
540
 
541
541
  <div
542
- class="pf-v5-c-card pf-m-selectable pf-m-disabled"
542
+ class="pf-v6-c-card pf-m-selectable pf-m-disabled"
543
543
  id="card-selectable-example-disabled"
544
544
  >
545
- <div class="pf-v5-c-card__header">
546
- <div class="pf-v5-c-card__actions pf-m-no-offset">
547
- <div class="pf-v5-c-card__selectable-actions">
548
- <div class="pf-v5-c-check">
545
+ <div class="pf-v6-c-card__header">
546
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
547
+ <div class="pf-v6-c-card__selectable-actions">
548
+ <div class="pf-v6-c-check">
549
549
  <input
550
- class="pf-v5-c-check__input"
550
+ class="pf-v6-c-check__input"
551
551
  type="checkbox"
552
552
  disabled
553
553
  id="card-selectable-example-disabled-check"
@@ -555,7 +555,7 @@ cssPrefix: pf-v5-c-card
555
555
  aria-labelledby="card-selectable-example-disabled"
556
556
  />
557
557
  <label
558
- class="pf-v5-c-check__label pf-m-disabled"
558
+ class="pf-v6-c-check__label pf-m-disabled"
559
559
  for="card-selectable-example-disabled-check"
560
560
  id="card-selectable-example-disabled-check-label"
561
561
  name="card-selectable-example-disabled-check"
@@ -563,29 +563,29 @@ cssPrefix: pf-v5-c-card
563
563
  </div>
564
564
  </div>
565
565
  </div>
566
- <div class="pf-v5-c-card__header-main">
566
+ <div class="pf-v6-c-card__header-main">
567
567
  <div
568
- class="pf-v5-c-card__title"
568
+ class="pf-v6-c-card__title"
569
569
  id="card-selectable-example-disabled-title"
570
570
  >
571
- <h2 class="pf-v5-c-card__title-text">Disabled card</h2>
571
+ <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
572
572
  </div>
573
573
  </div>
574
574
  </div>
575
- <div class="pf-v5-c-card__body">Body</div>
576
- <div class="pf-v5-c-card__footer">Footer</div>
575
+ <div class="pf-v6-c-card__body">Body</div>
576
+ <div class="pf-v6-c-card__footer">Footer</div>
577
577
  </div>
578
578
 
579
579
  <div
580
- class="pf-v5-c-card pf-m-selectable pf-m-selected pf-m-disabled"
580
+ class="pf-v6-c-card pf-m-selectable pf-m-selected pf-m-disabled"
581
581
  id="card-selectable-example-selected-disabled"
582
582
  >
583
- <div class="pf-v5-c-card__header">
584
- <div class="pf-v5-c-card__actions pf-m-no-offset">
585
- <div class="pf-v5-c-card__selectable-actions">
586
- <div class="pf-v5-c-check">
583
+ <div class="pf-v6-c-card__header">
584
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
585
+ <div class="pf-v6-c-card__selectable-actions">
586
+ <div class="pf-v6-c-check">
587
587
  <input
588
- class="pf-v5-c-check__input"
588
+ class="pf-v6-c-check__input"
589
589
  type="checkbox"
590
590
  checked
591
591
  disabled
@@ -594,7 +594,7 @@ cssPrefix: pf-v5-c-card
594
594
  aria-labelledby="card-selectable-example-selected-disabled"
595
595
  />
596
596
  <label
597
- class="pf-v5-c-check__label pf-m-disabled"
597
+ class="pf-v6-c-check__label pf-m-disabled"
598
598
  for="card-selectable-example-selected-disabled-check"
599
599
  id="card-selectable-example-selected-disabled-check-label"
600
600
  name="card-selectable-example-selected-disabled-check"
@@ -602,17 +602,17 @@ cssPrefix: pf-v5-c-card
602
602
  </div>
603
603
  </div>
604
604
  </div>
605
- <div class="pf-v5-c-card__header-main">
605
+ <div class="pf-v6-c-card__header-main">
606
606
  <div
607
- class="pf-v5-c-card__title"
607
+ class="pf-v6-c-card__title"
608
608
  id="card-selectable-example-selected-disabled-title"
609
609
  >
610
- <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
610
+ <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
611
611
  </div>
612
612
  </div>
613
613
  </div>
614
- <div class="pf-v5-c-card__body">Body</div>
615
- <div class="pf-v5-c-card__footer">Footer</div>
614
+ <div class="pf-v6-c-card__body">Body</div>
615
+ <div class="pf-v6-c-card__footer">Footer</div>
616
616
  </div>
617
617
  </div>
618
618
 
@@ -621,24 +621,24 @@ cssPrefix: pf-v5-c-card
621
621
  ### Selectable Secondary style
622
622
 
623
623
  ```html
624
- <div class="pf-v5-l-gallery pf-m-gutter">
624
+ <div class="pf-v6-l-gallery pf-m-gutter">
625
625
  <div
626
- class="pf-v5-c-card pf-m-selectable pf-m-secondary"
626
+ class="pf-v6-c-card pf-m-selectable pf-m-secondary"
627
627
  id="card-selectable-secondary-example"
628
628
  >
629
- <div class="pf-v5-c-card__header">
630
- <div class="pf-v5-c-card__actions pf-m-no-offset">
631
- <div class="pf-v5-c-card__selectable-actions">
632
- <div class="pf-v5-c-check">
629
+ <div class="pf-v6-c-card__header">
630
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
631
+ <div class="pf-v6-c-card__selectable-actions">
632
+ <div class="pf-v6-c-check">
633
633
  <input
634
- class="pf-v5-c-check__input"
634
+ class="pf-v6-c-check__input"
635
635
  type="checkbox"
636
636
  id="card-selectable-secondary-example-check"
637
637
  name="card-selectable-secondary-example-check"
638
638
  aria-labelledby="card-selectable-secondary-example"
639
639
  />
640
640
  <label
641
- class="pf-v5-c-check__label"
641
+ class="pf-v6-c-check__label"
642
642
  for="card-selectable-secondary-example-check"
643
643
  id="card-selectable-secondary-example-check-label"
644
644
  name="card-selectable-secondary-example-check"
@@ -646,26 +646,26 @@ cssPrefix: pf-v5-c-card
646
646
  </div>
647
647
  </div>
648
648
  </div>
649
- <div class="pf-v5-c-card__header-main">
650
- <div class="pf-v5-c-card__title">
651
- <h2 class="pf-v5-c-card__title-text">Title</h2>
649
+ <div class="pf-v6-c-card__header-main">
650
+ <div class="pf-v6-c-card__title">
651
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
652
652
  </div>
653
653
  </div>
654
654
  </div>
655
- <div class="pf-v5-c-card__body">Body</div>
656
- <div class="pf-v5-c-card__footer">Footer</div>
655
+ <div class="pf-v6-c-card__body">Body</div>
656
+ <div class="pf-v6-c-card__footer">Footer</div>
657
657
  </div>
658
658
 
659
659
  <div
660
- class="pf-v5-c-card pf-m-selectable pf-m-disabled pf-m-secondary"
660
+ class="pf-v6-c-card pf-m-selectable pf-m-disabled pf-m-secondary"
661
661
  id="card-selectable-secondary-example-disabled"
662
662
  >
663
- <div class="pf-v5-c-card__header">
664
- <div class="pf-v5-c-card__actions pf-m-no-offset">
665
- <div class="pf-v5-c-card__selectable-actions">
666
- <div class="pf-v5-c-check">
663
+ <div class="pf-v6-c-card__header">
664
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
665
+ <div class="pf-v6-c-card__selectable-actions">
666
+ <div class="pf-v6-c-check">
667
667
  <input
668
- class="pf-v5-c-check__input"
668
+ class="pf-v6-c-check__input"
669
669
  type="checkbox"
670
670
  disabled
671
671
  id="card-selectable-secondary-example-disabled-check"
@@ -673,7 +673,7 @@ cssPrefix: pf-v5-c-card
673
673
  aria-labelledby="card-selectable-secondary-example-disabled"
674
674
  />
675
675
  <label
676
- class="pf-v5-c-check__label pf-m-disabled"
676
+ class="pf-v6-c-check__label pf-m-disabled"
677
677
  for="card-selectable-secondary-example-disabled-check"
678
678
  id="card-selectable-secondary-example-disabled-check-label"
679
679
  name="card-selectable-secondary-example-disabled-check"
@@ -681,29 +681,29 @@ cssPrefix: pf-v5-c-card
681
681
  </div>
682
682
  </div>
683
683
  </div>
684
- <div class="pf-v5-c-card__header-main">
684
+ <div class="pf-v6-c-card__header-main">
685
685
  <div
686
- class="pf-v5-c-card__title"
686
+ class="pf-v6-c-card__title"
687
687
  id="card-selectable-secondary-example-disabled-title"
688
688
  >
689
- <h2 class="pf-v5-c-card__title-text">Disabled card</h2>
689
+ <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
690
690
  </div>
691
691
  </div>
692
692
  </div>
693
- <div class="pf-v5-c-card__body">Body</div>
694
- <div class="pf-v5-c-card__footer">Footer</div>
693
+ <div class="pf-v6-c-card__body">Body</div>
694
+ <div class="pf-v6-c-card__footer">Footer</div>
695
695
  </div>
696
696
 
697
697
  <div
698
- class="pf-v5-c-card pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary"
698
+ class="pf-v6-c-card pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary"
699
699
  id="card-selectable-secondary-example-selected-disabled"
700
700
  >
701
- <div class="pf-v5-c-card__header">
702
- <div class="pf-v5-c-card__actions pf-m-no-offset">
703
- <div class="pf-v5-c-card__selectable-actions">
704
- <div class="pf-v5-c-check">
701
+ <div class="pf-v6-c-card__header">
702
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
703
+ <div class="pf-v6-c-card__selectable-actions">
704
+ <div class="pf-v6-c-check">
705
705
  <input
706
- class="pf-v5-c-check__input"
706
+ class="pf-v6-c-check__input"
707
707
  type="checkbox"
708
708
  checked
709
709
  disabled
@@ -712,7 +712,7 @@ cssPrefix: pf-v5-c-card
712
712
  aria-labelledby="card-selectable-secondary-example-selected-disabled"
713
713
  />
714
714
  <label
715
- class="pf-v5-c-check__label pf-m-disabled"
715
+ class="pf-v6-c-check__label pf-m-disabled"
716
716
  for="card-selectable-secondary-example-selected-disabled-check"
717
717
  id="card-selectable-secondary-example-selected-disabled-check-label"
718
718
  name="card-selectable-secondary-example-selected-disabled-check"
@@ -720,17 +720,17 @@ cssPrefix: pf-v5-c-card
720
720
  </div>
721
721
  </div>
722
722
  </div>
723
- <div class="pf-v5-c-card__header-main">
723
+ <div class="pf-v6-c-card__header-main">
724
724
  <div
725
- class="pf-v5-c-card__title"
725
+ class="pf-v6-c-card__title"
726
726
  id="card-selectable-secondary-example-selected-disabled-title"
727
727
  >
728
- <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
728
+ <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
729
729
  </div>
730
730
  </div>
731
731
  </div>
732
- <div class="pf-v5-c-card__body">Body</div>
733
- <div class="pf-v5-c-card__footer">Footer</div>
732
+ <div class="pf-v6-c-card__body">Body</div>
733
+ <div class="pf-v6-c-card__footer">Footer</div>
734
734
  </div>
735
735
  </div>
736
736
 
@@ -739,21 +739,21 @@ cssPrefix: pf-v5-c-card
739
739
  ### Single selectable
740
740
 
741
741
  ```html
742
- <div class="pf-v5-l-gallery pf-m-gutter">
743
- <div class="pf-v5-c-card pf-m-selectable" id="card-single-selectable-example">
744
- <div class="pf-v5-c-card__header">
745
- <div class="pf-v5-c-card__actions pf-m-no-offset">
746
- <div class="pf-v5-c-card__selectable-actions">
747
- <div class="pf-v5-c-radio">
742
+ <div class="pf-v6-l-gallery pf-m-gutter">
743
+ <div class="pf-v6-c-card pf-m-selectable" id="card-single-selectable-example">
744
+ <div class="pf-v6-c-card__header">
745
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
746
+ <div class="pf-v6-c-card__selectable-actions">
747
+ <div class="pf-v6-c-radio">
748
748
  <input
749
- class="pf-v5-c-radio__input"
749
+ class="pf-v6-c-radio__input"
750
750
  type="radio"
751
751
  id="card-single-selectable-example-radio"
752
752
  name="card-single-selectable-example-radio"
753
753
  aria-labelledby="card-single-selectable-example"
754
754
  />
755
755
  <label
756
- class="pf-v5-c-radio__label"
756
+ class="pf-v6-c-radio__label"
757
757
  for="card-single-selectable-example-radio"
758
758
  id="card-single-selectable-example-radio-label"
759
759
  name="card-single-selectable-example-radio"
@@ -761,29 +761,29 @@ cssPrefix: pf-v5-c-card
761
761
  </div>
762
762
  </div>
763
763
  </div>
764
- <div class="pf-v5-c-card__header-main">
764
+ <div class="pf-v6-c-card__header-main">
765
765
  <div
766
- class="pf-v5-c-card__title"
766
+ class="pf-v6-c-card__title"
767
767
  id="card-single-selectable-example-title"
768
768
  >
769
- <h2 class="pf-v5-c-card__title-text">Title</h2>
769
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
770
770
  </div>
771
771
  </div>
772
772
  </div>
773
- <div class="pf-v5-c-card__body">Body</div>
774
- <div class="pf-v5-c-card__footer">Footer</div>
773
+ <div class="pf-v6-c-card__body">Body</div>
774
+ <div class="pf-v6-c-card__footer">Footer</div>
775
775
  </div>
776
776
 
777
777
  <div
778
- class="pf-v5-c-card pf-m-selectable pf-m-disabled"
778
+ class="pf-v6-c-card pf-m-selectable pf-m-disabled"
779
779
  id="card-single-selectable-example-disabled"
780
780
  >
781
- <div class="pf-v5-c-card__header">
782
- <div class="pf-v5-c-card__actions pf-m-no-offset">
783
- <div class="pf-v5-c-card__selectable-actions">
784
- <div class="pf-v5-c-radio">
781
+ <div class="pf-v6-c-card__header">
782
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
783
+ <div class="pf-v6-c-card__selectable-actions">
784
+ <div class="pf-v6-c-radio">
785
785
  <input
786
- class="pf-v5-c-radio__input"
786
+ class="pf-v6-c-radio__input"
787
787
  type="radio"
788
788
  id="card-single-selectable-example-disabled-radio"
789
789
  name="card-single-selectable-example-disabled-radio"
@@ -791,7 +791,7 @@ cssPrefix: pf-v5-c-card
791
791
  disabled
792
792
  />
793
793
  <label
794
- class="pf-v5-c-radio__label pf-m-disabled"
794
+ class="pf-v6-c-radio__label pf-m-disabled"
795
795
  for="card-single-selectable-example-disabled-radio"
796
796
  id="card-single-selectable-example-disabled-radio-label"
797
797
  name="card-single-selectable-example-disabled-radio"
@@ -799,29 +799,29 @@ cssPrefix: pf-v5-c-card
799
799
  </div>
800
800
  </div>
801
801
  </div>
802
- <div class="pf-v5-c-card__header-main">
802
+ <div class="pf-v6-c-card__header-main">
803
803
  <div
804
- class="pf-v5-c-card__title"
804
+ class="pf-v6-c-card__title"
805
805
  id="card-single-selectable-example-disabled-title"
806
806
  >
807
- <h2 class="pf-v5-c-card__title-text">Disabled card</h2>
807
+ <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
808
808
  </div>
809
809
  </div>
810
810
  </div>
811
- <div class="pf-v5-c-card__body">Body</div>
812
- <div class="pf-v5-c-card__footer">Footer</div>
811
+ <div class="pf-v6-c-card__body">Body</div>
812
+ <div class="pf-v6-c-card__footer">Footer</div>
813
813
  </div>
814
814
 
815
815
  <div
816
- class="pf-v5-c-card pf-m-selectable pf-m-selected pf-m-disabled"
816
+ class="pf-v6-c-card pf-m-selectable pf-m-selected pf-m-disabled"
817
817
  id="card-single-selectable-example-selected-disabled"
818
818
  >
819
- <div class="pf-v5-c-card__header">
820
- <div class="pf-v5-c-card__actions pf-m-no-offset">
821
- <div class="pf-v5-c-card__selectable-actions">
822
- <div class="pf-v5-c-radio">
819
+ <div class="pf-v6-c-card__header">
820
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
821
+ <div class="pf-v6-c-card__selectable-actions">
822
+ <div class="pf-v6-c-radio">
823
823
  <input
824
- class="pf-v5-c-radio__input"
824
+ class="pf-v6-c-radio__input"
825
825
  type="radio"
826
826
  id="card-single-selectable-example-selected-disabled-radio"
827
827
  name="card-single-selectable-example-selected-disabled-radio"
@@ -830,7 +830,7 @@ cssPrefix: pf-v5-c-card
830
830
  checked
831
831
  />
832
832
  <label
833
- class="pf-v5-c-radio__label pf-m-disabled"
833
+ class="pf-v6-c-radio__label pf-m-disabled"
834
834
  for="card-single-selectable-example-selected-disabled-radio"
835
835
  id="card-single-selectable-example-selected-disabled-radio-label"
836
836
  name="card-single-selectable-example-selected-disabled-radio"
@@ -838,17 +838,17 @@ cssPrefix: pf-v5-c-card
838
838
  </div>
839
839
  </div>
840
840
  </div>
841
- <div class="pf-v5-c-card__header-main">
841
+ <div class="pf-v6-c-card__header-main">
842
842
  <div
843
- class="pf-v5-c-card__title"
843
+ class="pf-v6-c-card__title"
844
844
  id="card-single-selectable-example-selected-disabled-title"
845
845
  >
846
- <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
846
+ <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
847
847
  </div>
848
848
  </div>
849
849
  </div>
850
- <div class="pf-v5-c-card__body">Body</div>
851
- <div class="pf-v5-c-card__footer">Footer</div>
850
+ <div class="pf-v6-c-card__body">Body</div>
851
+ <div class="pf-v6-c-card__footer">Footer</div>
852
852
  </div>
853
853
  </div>
854
854
 
@@ -857,14 +857,14 @@ cssPrefix: pf-v5-c-card
857
857
  ### Clickable
858
858
 
859
859
  ```html
860
- <div class="pf-v5-l-gallery pf-m-gutter">
861
- <div class="pf-v5-c-card pf-m-clickable" id="card-clickable-example">
862
- <div class="pf-v5-c-card__header">
863
- <div class="pf-v5-c-card__actions pf-m-no-offset">
864
- <div class="pf-v5-c-card__selectable-actions">
865
- <div class="pf-v5-c-radio pf-m-standalone">
860
+ <div class="pf-v6-l-gallery pf-m-gutter">
861
+ <div class="pf-v6-c-card pf-m-clickable" id="card-clickable-example">
862
+ <div class="pf-v6-c-card__header">
863
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
864
+ <div class="pf-v6-c-card__selectable-actions">
865
+ <div class="pf-v6-c-radio pf-m-standalone">
866
866
  <input
867
- class="pf-v5-c-radio__input pf-v5-screen-reader"
867
+ class="pf-v6-c-radio__input pf-v6-screen-reader"
868
868
  type="radio"
869
869
  id="card-clickable-example-sr-only-radio"
870
870
  name="card-clickable-example-sr-only-radio"
@@ -872,7 +872,7 @@ cssPrefix: pf-v5-c-card
872
872
  />
873
873
 
874
874
  <label
875
- class="pf-v5-c-radio__label"
875
+ class="pf-v6-c-radio__label"
876
876
  for="card-clickable-example-sr-only-radio"
877
877
  id="card-clickable-example-sr-only-radio-label"
878
878
  name="card-clickable-example-sr-only-radio"
@@ -880,26 +880,26 @@ cssPrefix: pf-v5-c-card
880
880
  </div>
881
881
  </div>
882
882
  </div>
883
- <div class="pf-v5-c-card__header-main">
884
- <div class="pf-v5-c-card__title" id="card-clickable-example-title">
885
- <h2 class="pf-v5-c-card__title-text">Title</h2>
883
+ <div class="pf-v6-c-card__header-main">
884
+ <div class="pf-v6-c-card__title" id="card-clickable-example-title">
885
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
886
886
  </div>
887
887
  </div>
888
888
  </div>
889
- <div class="pf-v5-c-card__body">Body</div>
890
- <div class="pf-v5-c-card__footer">Footer</div>
889
+ <div class="pf-v6-c-card__body">Body</div>
890
+ <div class="pf-v6-c-card__footer">Footer</div>
891
891
  </div>
892
892
 
893
893
  <div
894
- class="pf-v5-c-card pf-m-clickable pf-m-disabled"
894
+ class="pf-v6-c-card pf-m-clickable pf-m-disabled"
895
895
  id="card-clickable-example-disabled"
896
896
  >
897
- <div class="pf-v5-c-card__header">
898
- <div class="pf-v5-c-card__actions pf-m-no-offset">
899
- <div class="pf-v5-c-card__selectable-actions">
900
- <div class="pf-v5-c-radio pf-m-standalone">
897
+ <div class="pf-v6-c-card__header">
898
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
899
+ <div class="pf-v6-c-card__selectable-actions">
900
+ <div class="pf-v6-c-radio pf-m-standalone">
901
901
  <input
902
- class="pf-v5-c-radio__input pf-v5-screen-reader"
902
+ class="pf-v6-c-radio__input pf-v6-screen-reader"
903
903
  type="radio"
904
904
  id="card-clickable-example-disabled-sr-only-radio"
905
905
  name="card-clickable-example-disabled-sr-only-radio"
@@ -908,7 +908,7 @@ cssPrefix: pf-v5-c-card
908
908
  />
909
909
 
910
910
  <label
911
- class="pf-v5-c-radio__label pf-m-disabled"
911
+ class="pf-v6-c-radio__label pf-m-disabled"
912
912
  for="card-clickable-example-disabled-sr-only-radio"
913
913
  id="card-clickable-example-disabled-sr-only-radio-label"
914
914
  name="card-clickable-example-disabled-sr-only-radio"
@@ -916,29 +916,29 @@ cssPrefix: pf-v5-c-card
916
916
  </div>
917
917
  </div>
918
918
  </div>
919
- <div class="pf-v5-c-card__header-main">
919
+ <div class="pf-v6-c-card__header-main">
920
920
  <div
921
- class="pf-v5-c-card__title"
921
+ class="pf-v6-c-card__title"
922
922
  id="card-clickable-example-disabled-title"
923
923
  >
924
- <h2 class="pf-v5-c-card__title-text">Disabled card</h2>
924
+ <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
925
925
  </div>
926
926
  </div>
927
927
  </div>
928
- <div class="pf-v5-c-card__body">Body</div>
929
- <div class="pf-v5-c-card__footer">Footer</div>
928
+ <div class="pf-v6-c-card__body">Body</div>
929
+ <div class="pf-v6-c-card__footer">Footer</div>
930
930
  </div>
931
931
 
932
932
  <div
933
- class="pf-v5-c-card pf-m-clickable pf-m-selected pf-m-disabled"
933
+ class="pf-v6-c-card pf-m-clickable pf-m-selected pf-m-disabled"
934
934
  id="card-clickable-example-selected-disabled"
935
935
  >
936
- <div class="pf-v5-c-card__header">
937
- <div class="pf-v5-c-card__actions pf-m-no-offset">
938
- <div class="pf-v5-c-card__selectable-actions">
939
- <div class="pf-v5-c-radio pf-m-standalone">
936
+ <div class="pf-v6-c-card__header">
937
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
938
+ <div class="pf-v6-c-card__selectable-actions">
939
+ <div class="pf-v6-c-radio pf-m-standalone">
940
940
  <input
941
- class="pf-v5-c-radio__input pf-v5-screen-reader"
941
+ class="pf-v6-c-radio__input pf-v6-screen-reader"
942
942
  type="radio"
943
943
  id="card-clickable-example-selected-disabled-sr-only-radio"
944
944
  name="card-clickable-example-selected-disabled-sr-only-radio"
@@ -947,7 +947,7 @@ cssPrefix: pf-v5-c-card
947
947
  />
948
948
 
949
949
  <label
950
- class="pf-v5-c-radio__label pf-m-disabled"
950
+ class="pf-v6-c-radio__label pf-m-disabled"
951
951
  for="card-clickable-example-selected-disabled-sr-only-radio"
952
952
  id="card-clickable-example-selected-disabled-sr-only-radio-label"
953
953
  name="card-clickable-example-selected-disabled-sr-only-radio"
@@ -955,17 +955,17 @@ cssPrefix: pf-v5-c-card
955
955
  </div>
956
956
  </div>
957
957
  </div>
958
- <div class="pf-v5-c-card__header-main">
958
+ <div class="pf-v6-c-card__header-main">
959
959
  <div
960
- class="pf-v5-c-card__title"
960
+ class="pf-v6-c-card__title"
961
961
  id="card-clickable-example-selected-disabled-title"
962
962
  >
963
- <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
963
+ <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
964
964
  </div>
965
965
  </div>
966
966
  </div>
967
- <div class="pf-v5-c-card__body">Body</div>
968
- <div class="pf-v5-c-card__footer">Footer</div>
967
+ <div class="pf-v6-c-card__body">Body</div>
968
+ <div class="pf-v6-c-card__footer">Footer</div>
969
969
  </div>
970
970
  </div>
971
971
 
@@ -974,17 +974,17 @@ cssPrefix: pf-v5-c-card
974
974
  ### Clickable secondary style
975
975
 
976
976
  ```html
977
- <div class="pf-v5-l-gallery pf-m-gutter">
977
+ <div class="pf-v6-l-gallery pf-m-gutter">
978
978
  <div
979
- class="pf-v5-c-card pf-m-clickable pf-m-secondary"
979
+ class="pf-v6-c-card pf-m-clickable pf-m-secondary"
980
980
  id="card-clickable-secondary-example"
981
981
  >
982
- <div class="pf-v5-c-card__header">
983
- <div class="pf-v5-c-card__actions pf-m-no-offset">
984
- <div class="pf-v5-c-card__selectable-actions">
985
- <div class="pf-v5-c-radio pf-m-standalone">
982
+ <div class="pf-v6-c-card__header">
983
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
984
+ <div class="pf-v6-c-card__selectable-actions">
985
+ <div class="pf-v6-c-radio pf-m-standalone">
986
986
  <input
987
- class="pf-v5-c-radio__input pf-v5-screen-reader"
987
+ class="pf-v6-c-radio__input pf-v6-screen-reader"
988
988
  type="radio"
989
989
  id="card-clickable-secondary-example-sr-only-radio"
990
990
  name="card-clickable-secondary-example-sr-only-radio"
@@ -992,7 +992,7 @@ cssPrefix: pf-v5-c-card
992
992
  />
993
993
 
994
994
  <label
995
- class="pf-v5-c-radio__label"
995
+ class="pf-v6-c-radio__label"
996
996
  for="card-clickable-secondary-example-sr-only-radio"
997
997
  id="card-clickable-secondary-example-sr-only-radio-label"
998
998
  name="card-clickable-secondary-example-sr-only-radio"
@@ -1000,29 +1000,29 @@ cssPrefix: pf-v5-c-card
1000
1000
  </div>
1001
1001
  </div>
1002
1002
  </div>
1003
- <div class="pf-v5-c-card__header-main">
1003
+ <div class="pf-v6-c-card__header-main">
1004
1004
  <div
1005
- class="pf-v5-c-card__title"
1005
+ class="pf-v6-c-card__title"
1006
1006
  id="card-clickable-secondary-example-title"
1007
1007
  >
1008
- <h2 class="pf-v5-c-card__title-text">Title</h2>
1008
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
1009
1009
  </div>
1010
1010
  </div>
1011
1011
  </div>
1012
- <div class="pf-v5-c-card__body">Body</div>
1013
- <div class="pf-v5-c-card__footer">Footer</div>
1012
+ <div class="pf-v6-c-card__body">Body</div>
1013
+ <div class="pf-v6-c-card__footer">Footer</div>
1014
1014
  </div>
1015
1015
 
1016
1016
  <div
1017
- class="pf-v5-c-card pf-m-clickable pf-m-disabled pf-m-secondary"
1017
+ class="pf-v6-c-card pf-m-clickable pf-m-disabled pf-m-secondary"
1018
1018
  id="card-clickable-secondary-example-disabled"
1019
1019
  >
1020
- <div class="pf-v5-c-card__header">
1021
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1022
- <div class="pf-v5-c-card__selectable-actions">
1023
- <div class="pf-v5-c-radio pf-m-standalone">
1020
+ <div class="pf-v6-c-card__header">
1021
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1022
+ <div class="pf-v6-c-card__selectable-actions">
1023
+ <div class="pf-v6-c-radio pf-m-standalone">
1024
1024
  <input
1025
- class="pf-v5-c-radio__input pf-v5-screen-reader"
1025
+ class="pf-v6-c-radio__input pf-v6-screen-reader"
1026
1026
  type="radio"
1027
1027
  id="card-clickable-secondary-example-disabled-sr-only-radio"
1028
1028
  name="card-clickable-secondary-example-disabled-sr-only-radio"
@@ -1031,7 +1031,7 @@ cssPrefix: pf-v5-c-card
1031
1031
  />
1032
1032
 
1033
1033
  <label
1034
- class="pf-v5-c-radio__label pf-m-disabled"
1034
+ class="pf-v6-c-radio__label pf-m-disabled"
1035
1035
  for="card-clickable-secondary-example-disabled-sr-only-radio"
1036
1036
  id="card-clickable-secondary-example-disabled-sr-only-radio-label"
1037
1037
  name="card-clickable-secondary-example-disabled-sr-only-radio"
@@ -1039,29 +1039,29 @@ cssPrefix: pf-v5-c-card
1039
1039
  </div>
1040
1040
  </div>
1041
1041
  </div>
1042
- <div class="pf-v5-c-card__header-main">
1042
+ <div class="pf-v6-c-card__header-main">
1043
1043
  <div
1044
- class="pf-v5-c-card__title"
1044
+ class="pf-v6-c-card__title"
1045
1045
  id="card-clickable-secondary-example-disabled-title"
1046
1046
  >
1047
- <h2 class="pf-v5-c-card__title-text">Disabled card</h2>
1047
+ <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
1048
1048
  </div>
1049
1049
  </div>
1050
1050
  </div>
1051
- <div class="pf-v5-c-card__body">Body</div>
1052
- <div class="pf-v5-c-card__footer">Footer</div>
1051
+ <div class="pf-v6-c-card__body">Body</div>
1052
+ <div class="pf-v6-c-card__footer">Footer</div>
1053
1053
  </div>
1054
1054
 
1055
1055
  <div
1056
- class="pf-v5-c-card pf-m-clickable pf-m-selected pf-m-disabled pf-m-secondary"
1056
+ class="pf-v6-c-card pf-m-clickable pf-m-selected pf-m-disabled pf-m-secondary"
1057
1057
  id="card-clickable-secondary-example-selected-disabled"
1058
1058
  >
1059
- <div class="pf-v5-c-card__header">
1060
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1061
- <div class="pf-v5-c-card__selectable-actions">
1062
- <div class="pf-v5-c-radio pf-m-standalone">
1059
+ <div class="pf-v6-c-card__header">
1060
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1061
+ <div class="pf-v6-c-card__selectable-actions">
1062
+ <div class="pf-v6-c-radio pf-m-standalone">
1063
1063
  <input
1064
- class="pf-v5-c-radio__input pf-v5-screen-reader"
1064
+ class="pf-v6-c-radio__input pf-v6-screen-reader"
1065
1065
  type="radio"
1066
1066
  id="card-clickable-secondary-example-selected-disabled-sr-only-radio"
1067
1067
  name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
@@ -1070,7 +1070,7 @@ cssPrefix: pf-v5-c-card
1070
1070
  />
1071
1071
 
1072
1072
  <label
1073
- class="pf-v5-c-radio__label pf-m-disabled"
1073
+ class="pf-v6-c-radio__label pf-m-disabled"
1074
1074
  for="card-clickable-secondary-example-selected-disabled-sr-only-radio"
1075
1075
  id="card-clickable-secondary-example-selected-disabled-sr-only-radio-label"
1076
1076
  name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
@@ -1078,17 +1078,17 @@ cssPrefix: pf-v5-c-card
1078
1078
  </div>
1079
1079
  </div>
1080
1080
  </div>
1081
- <div class="pf-v5-c-card__header-main">
1081
+ <div class="pf-v6-c-card__header-main">
1082
1082
  <div
1083
- class="pf-v5-c-card__title"
1083
+ class="pf-v6-c-card__title"
1084
1084
  id="card-clickable-secondary-example-selected-disabled-title"
1085
1085
  >
1086
- <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
1086
+ <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
1087
1087
  </div>
1088
1088
  </div>
1089
1089
  </div>
1090
- <div class="pf-v5-c-card__body">Body</div>
1091
- <div class="pf-v5-c-card__footer">Footer</div>
1090
+ <div class="pf-v6-c-card__body">Body</div>
1091
+ <div class="pf-v6-c-card__footer">Footer</div>
1092
1092
  </div>
1093
1093
  </div>
1094
1094
 
@@ -1097,24 +1097,24 @@ cssPrefix: pf-v5-c-card
1097
1097
  ### Clickable and selectable
1098
1098
 
1099
1099
  ```html
1100
- <div class="pf-v5-l-gallery pf-m-gutter">
1100
+ <div class="pf-v6-l-gallery pf-m-gutter">
1101
1101
  <div
1102
- class="pf-v5-c-card pf-m-clickable pf-m-selectable"
1102
+ class="pf-v6-c-card pf-m-clickable pf-m-selectable"
1103
1103
  id="card-clickable-selectable-example"
1104
1104
  >
1105
- <div class="pf-v5-c-card__header">
1106
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1107
- <div class="pf-v5-c-card__selectable-actions">
1108
- <div class="pf-v5-c-check">
1105
+ <div class="pf-v6-c-card__header">
1106
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1107
+ <div class="pf-v6-c-card__selectable-actions">
1108
+ <div class="pf-v6-c-check">
1109
1109
  <input
1110
- class="pf-v5-c-check__input"
1110
+ class="pf-v6-c-check__input"
1111
1111
  type="checkbox"
1112
1112
  id="card-clickable-selectable-example-check"
1113
1113
  name="card-clickable-selectable-example-check"
1114
1114
  aria-labelledby="card-clickable-selectable-example"
1115
1115
  />
1116
1116
  <label
1117
- class="pf-v5-c-check__label"
1117
+ class="pf-v6-c-check__label"
1118
1118
  for="card-clickable-selectable-example-check"
1119
1119
  id="card-clickable-selectable-example-check-label"
1120
1120
  name="card-clickable-selectable-example-check"
@@ -1122,38 +1122,38 @@ cssPrefix: pf-v5-c-card
1122
1122
  </div>
1123
1123
  </div>
1124
1124
  </div>
1125
- <div class="pf-v5-c-card__header-main">
1125
+ <div class="pf-v6-c-card__header-main">
1126
1126
  <div
1127
- class="pf-v5-c-card__title"
1127
+ class="pf-v6-c-card__title"
1128
1128
  id="card-clickable-selectable-example-title"
1129
1129
  >
1130
- <h2 class="pf-v5-c-card__title-text">
1131
- <button class="pf-v5-c-button pf-m-inline pf-m-link">Title</button>
1130
+ <h2 class="pf-v6-c-card__title-text">
1131
+ <button class="pf-v6-c-button pf-m-inline pf-m-link">Title</button>
1132
1132
  </h2>
1133
1133
  </div>
1134
1134
  </div>
1135
1135
  </div>
1136
- <div class="pf-v5-c-card__body">Body</div>
1137
- <div class="pf-v5-c-card__footer">Footer</div>
1136
+ <div class="pf-v6-c-card__body">Body</div>
1137
+ <div class="pf-v6-c-card__footer">Footer</div>
1138
1138
  </div>
1139
1139
 
1140
1140
  <div
1141
- class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-current"
1141
+ class="pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-current"
1142
1142
  id="card-clickable-selectable-current-example"
1143
1143
  >
1144
- <div class="pf-v5-c-card__header">
1145
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1146
- <div class="pf-v5-c-card__selectable-actions">
1147
- <div class="pf-v5-c-check">
1144
+ <div class="pf-v6-c-card__header">
1145
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1146
+ <div class="pf-v6-c-card__selectable-actions">
1147
+ <div class="pf-v6-c-check">
1148
1148
  <input
1149
- class="pf-v5-c-check__input"
1149
+ class="pf-v6-c-check__input"
1150
1150
  type="checkbox"
1151
1151
  id="card-clickable-selectable-current-example-check"
1152
1152
  name="card-clickable-selectable-current-example-check"
1153
1153
  aria-labelledby="card-clickable-selectable-current-example"
1154
1154
  />
1155
1155
  <label
1156
- class="pf-v5-c-check__label"
1156
+ class="pf-v6-c-check__label"
1157
1157
  for="card-clickable-selectable-current-example-check"
1158
1158
  id="card-clickable-selectable-current-example-check-label"
1159
1159
  name="card-clickable-selectable-current-example-check"
@@ -1161,33 +1161,33 @@ cssPrefix: pf-v5-c-card
1161
1161
  </div>
1162
1162
  </div>
1163
1163
  </div>
1164
- <div class="pf-v5-c-card__header-main">
1164
+ <div class="pf-v6-c-card__header-main">
1165
1165
  <div
1166
- class="pf-v5-c-card__title"
1166
+ class="pf-v6-c-card__title"
1167
1167
  id="card-clickable-selectable-current-example-title"
1168
1168
  >
1169
- <h2 class="pf-v5-c-card__title-text">
1169
+ <h2 class="pf-v6-c-card__title-text">
1170
1170
  <button
1171
- class="pf-v5-c-button pf-m-inline pf-m-link"
1171
+ class="pf-v6-c-button pf-m-inline pf-m-link"
1172
1172
  >Current card (clicked)</button>
1173
1173
  </h2>
1174
1174
  </div>
1175
1175
  </div>
1176
1176
  </div>
1177
- <div class="pf-v5-c-card__body">Body</div>
1178
- <div class="pf-v5-c-card__footer">Footer</div>
1177
+ <div class="pf-v6-c-card__body">Body</div>
1178
+ <div class="pf-v6-c-card__footer">Footer</div>
1179
1179
  </div>
1180
1180
 
1181
1181
  <div
1182
- class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-disabled"
1182
+ class="pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-disabled"
1183
1183
  id="card-clickable-selectable-example-disabled"
1184
1184
  >
1185
- <div class="pf-v5-c-card__header">
1186
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1187
- <div class="pf-v5-c-card__selectable-actions">
1188
- <div class="pf-v5-c-check">
1185
+ <div class="pf-v6-c-card__header">
1186
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1187
+ <div class="pf-v6-c-card__selectable-actions">
1188
+ <div class="pf-v6-c-check">
1189
1189
  <input
1190
- class="pf-v5-c-check__input"
1190
+ class="pf-v6-c-check__input"
1191
1191
  type="checkbox"
1192
1192
  disabled
1193
1193
  id="card-clickable-selectable-example-disabled-check"
@@ -1195,7 +1195,7 @@ cssPrefix: pf-v5-c-card
1195
1195
  aria-labelledby="card-clickable-selectable-example-disabled"
1196
1196
  />
1197
1197
  <label
1198
- class="pf-v5-c-check__label pf-m-disabled"
1198
+ class="pf-v6-c-check__label pf-m-disabled"
1199
1199
  for="card-clickable-selectable-example-disabled-check"
1200
1200
  id="card-clickable-selectable-example-disabled-check-label"
1201
1201
  name="card-clickable-selectable-example-disabled-check"
@@ -1203,33 +1203,33 @@ cssPrefix: pf-v5-c-card
1203
1203
  </div>
1204
1204
  </div>
1205
1205
  </div>
1206
- <div class="pf-v5-c-card__header-main">
1206
+ <div class="pf-v6-c-card__header-main">
1207
1207
  <div
1208
- class="pf-v5-c-card__title"
1208
+ class="pf-v6-c-card__title"
1209
1209
  id="card-clickable-selectable-example-disabled-title"
1210
1210
  >
1211
- <h2 class="pf-v5-c-card__title-text">
1211
+ <h2 class="pf-v6-c-card__title-text">
1212
1212
  <button
1213
- class="pf-v5-c-button pf-m-inline pf-m-link pf-m-disabled"
1213
+ class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1214
1214
  >Disabled card</button>
1215
1215
  </h2>
1216
1216
  </div>
1217
1217
  </div>
1218
1218
  </div>
1219
- <div class="pf-v5-c-card__body">Body</div>
1220
- <div class="pf-v5-c-card__footer">Footer</div>
1219
+ <div class="pf-v6-c-card__body">Body</div>
1220
+ <div class="pf-v6-c-card__footer">Footer</div>
1221
1221
  </div>
1222
1222
 
1223
1223
  <div
1224
- class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled"
1224
+ class="pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled"
1225
1225
  id="card-clickable-selectable-example-selected-disabled"
1226
1226
  >
1227
- <div class="pf-v5-c-card__header">
1228
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1229
- <div class="pf-v5-c-card__selectable-actions">
1230
- <div class="pf-v5-c-check">
1227
+ <div class="pf-v6-c-card__header">
1228
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1229
+ <div class="pf-v6-c-card__selectable-actions">
1230
+ <div class="pf-v6-c-check">
1231
1231
  <input
1232
- class="pf-v5-c-check__input"
1232
+ class="pf-v6-c-check__input"
1233
1233
  type="checkbox"
1234
1234
  checked
1235
1235
  disabled
@@ -1238,7 +1238,7 @@ cssPrefix: pf-v5-c-card
1238
1238
  aria-labelledby="card-clickable-selectable-example-selected-disabled"
1239
1239
  />
1240
1240
  <label
1241
- class="pf-v5-c-check__label pf-m-disabled"
1241
+ class="pf-v6-c-check__label pf-m-disabled"
1242
1242
  for="card-clickable-selectable-example-selected-disabled-check"
1243
1243
  id="card-clickable-selectable-example-selected-disabled-check-label"
1244
1244
  name="card-clickable-selectable-example-selected-disabled-check"
@@ -1246,21 +1246,21 @@ cssPrefix: pf-v5-c-card
1246
1246
  </div>
1247
1247
  </div>
1248
1248
  </div>
1249
- <div class="pf-v5-c-card__header-main">
1249
+ <div class="pf-v6-c-card__header-main">
1250
1250
  <div
1251
- class="pf-v5-c-card__title"
1251
+ class="pf-v6-c-card__title"
1252
1252
  id="card-clickable-selectable-example-selected-disabled-title"
1253
1253
  >
1254
- <h2 class="pf-v5-c-card__title-text">
1254
+ <h2 class="pf-v6-c-card__title-text">
1255
1255
  <button
1256
- class="pf-v5-c-button pf-m-inline pf-m-link pf-m-disabled"
1256
+ class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1257
1257
  >Selected but disabled card</button>
1258
1258
  </h2>
1259
1259
  </div>
1260
1260
  </div>
1261
1261
  </div>
1262
- <div class="pf-v5-c-card__body">Body</div>
1263
- <div class="pf-v5-c-card__footer">Footer</div>
1262
+ <div class="pf-v6-c-card__body">Body</div>
1263
+ <div class="pf-v6-c-card__footer">Footer</div>
1264
1264
  </div>
1265
1265
  </div>
1266
1266
 
@@ -1269,24 +1269,24 @@ cssPrefix: pf-v5-c-card
1269
1269
  ### Clickable and selectable secondary style
1270
1270
 
1271
1271
  ```html
1272
- <div class="pf-v5-l-gallery pf-m-gutter">
1272
+ <div class="pf-v6-l-gallery pf-m-gutter">
1273
1273
  <div
1274
- class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-secondary"
1274
+ class="pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-secondary"
1275
1275
  id="card-clickable-selectable-secondary-example"
1276
1276
  >
1277
- <div class="pf-v5-c-card__header">
1278
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1279
- <div class="pf-v5-c-card__selectable-actions">
1280
- <div class="pf-v5-c-check">
1277
+ <div class="pf-v6-c-card__header">
1278
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1279
+ <div class="pf-v6-c-card__selectable-actions">
1280
+ <div class="pf-v6-c-check">
1281
1281
  <input
1282
- class="pf-v5-c-check__input"
1282
+ class="pf-v6-c-check__input"
1283
1283
  type="checkbox"
1284
1284
  id="card-clickable-selectable-secondary-example-check"
1285
1285
  name="card-clickable-selectable-secondary-example-check"
1286
1286
  aria-labelledby="card-clickable-selectable-secondary-example"
1287
1287
  />
1288
1288
  <label
1289
- class="pf-v5-c-check__label"
1289
+ class="pf-v6-c-check__label"
1290
1290
  for="card-clickable-selectable-secondary-example-check"
1291
1291
  id="card-clickable-selectable-secondary-example-check-label"
1292
1292
  name="card-clickable-selectable-secondary-example-check"
@@ -1294,38 +1294,38 @@ cssPrefix: pf-v5-c-card
1294
1294
  </div>
1295
1295
  </div>
1296
1296
  </div>
1297
- <div class="pf-v5-c-card__header-main">
1297
+ <div class="pf-v6-c-card__header-main">
1298
1298
  <div
1299
- class="pf-v5-c-card__title"
1299
+ class="pf-v6-c-card__title"
1300
1300
  id="card-clickable-selectable-secondary-example-title"
1301
1301
  >
1302
- <h2 class="pf-v5-c-card__title-text">
1303
- <button class="pf-v5-c-button pf-m-inline pf-m-link">Title</button>
1302
+ <h2 class="pf-v6-c-card__title-text">
1303
+ <button class="pf-v6-c-button pf-m-inline pf-m-link">Title</button>
1304
1304
  </h2>
1305
1305
  </div>
1306
1306
  </div>
1307
1307
  </div>
1308
- <div class="pf-v5-c-card__body">Body</div>
1309
- <div class="pf-v5-c-card__footer">Footer</div>
1308
+ <div class="pf-v6-c-card__body">Body</div>
1309
+ <div class="pf-v6-c-card__footer">Footer</div>
1310
1310
  </div>
1311
1311
 
1312
1312
  <div
1313
- class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-current pf-m-secondary"
1313
+ class="pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-current pf-m-secondary"
1314
1314
  id="card-clickable-selectable-secondary-current-example"
1315
1315
  >
1316
- <div class="pf-v5-c-card__header">
1317
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1318
- <div class="pf-v5-c-card__selectable-actions">
1319
- <div class="pf-v5-c-check">
1316
+ <div class="pf-v6-c-card__header">
1317
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1318
+ <div class="pf-v6-c-card__selectable-actions">
1319
+ <div class="pf-v6-c-check">
1320
1320
  <input
1321
- class="pf-v5-c-check__input"
1321
+ class="pf-v6-c-check__input"
1322
1322
  type="checkbox"
1323
1323
  id="card-clickable-selectable-secondary-current-example-check"
1324
1324
  name="card-clickable-selectable-secondary-current-example-check"
1325
1325
  aria-labelledby="card-clickable-selectable-secondary-current-example"
1326
1326
  />
1327
1327
  <label
1328
- class="pf-v5-c-check__label"
1328
+ class="pf-v6-c-check__label"
1329
1329
  for="card-clickable-selectable-secondary-current-example-check"
1330
1330
  id="card-clickable-selectable-secondary-current-example-check-label"
1331
1331
  name="card-clickable-selectable-secondary-current-example-check"
@@ -1333,33 +1333,33 @@ cssPrefix: pf-v5-c-card
1333
1333
  </div>
1334
1334
  </div>
1335
1335
  </div>
1336
- <div class="pf-v5-c-card__header-main">
1336
+ <div class="pf-v6-c-card__header-main">
1337
1337
  <div
1338
- class="pf-v5-c-card__title"
1338
+ class="pf-v6-c-card__title"
1339
1339
  id="card-clickable-selectable-secondary-current-example-title"
1340
1340
  >
1341
- <h2 class="pf-v5-c-card__title-text">
1341
+ <h2 class="pf-v6-c-card__title-text">
1342
1342
  <button
1343
- class="pf-v5-c-button pf-m-inline pf-m-link"
1343
+ class="pf-v6-c-button pf-m-inline pf-m-link"
1344
1344
  >Current card (clicked)</button>
1345
1345
  </h2>
1346
1346
  </div>
1347
1347
  </div>
1348
1348
  </div>
1349
- <div class="pf-v5-c-card__body">Body</div>
1350
- <div class="pf-v5-c-card__footer">Footer</div>
1349
+ <div class="pf-v6-c-card__body">Body</div>
1350
+ <div class="pf-v6-c-card__footer">Footer</div>
1351
1351
  </div>
1352
1352
 
1353
1353
  <div
1354
- class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-disabled pf-m-secondary"
1354
+ class="pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-disabled pf-m-secondary"
1355
1355
  id="card-clickable-selectable-secondary-example-disabled"
1356
1356
  >
1357
- <div class="pf-v5-c-card__header">
1358
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1359
- <div class="pf-v5-c-card__selectable-actions">
1360
- <div class="pf-v5-c-check">
1357
+ <div class="pf-v6-c-card__header">
1358
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1359
+ <div class="pf-v6-c-card__selectable-actions">
1360
+ <div class="pf-v6-c-check">
1361
1361
  <input
1362
- class="pf-v5-c-check__input"
1362
+ class="pf-v6-c-check__input"
1363
1363
  type="checkbox"
1364
1364
  disabled
1365
1365
  id="card-clickable-selectable-secondary-example-disabled-check"
@@ -1367,7 +1367,7 @@ cssPrefix: pf-v5-c-card
1367
1367
  aria-labelledby="card-clickable-selectable-secondary-example-disabled"
1368
1368
  />
1369
1369
  <label
1370
- class="pf-v5-c-check__label pf-m-disabled"
1370
+ class="pf-v6-c-check__label pf-m-disabled"
1371
1371
  for="card-clickable-selectable-secondary-example-disabled-check"
1372
1372
  id="card-clickable-selectable-secondary-example-disabled-check-label"
1373
1373
  name="card-clickable-selectable-secondary-example-disabled-check"
@@ -1375,33 +1375,33 @@ cssPrefix: pf-v5-c-card
1375
1375
  </div>
1376
1376
  </div>
1377
1377
  </div>
1378
- <div class="pf-v5-c-card__header-main">
1378
+ <div class="pf-v6-c-card__header-main">
1379
1379
  <div
1380
- class="pf-v5-c-card__title"
1380
+ class="pf-v6-c-card__title"
1381
1381
  id="card-clickable-selectable-secondary-example-disabled-title"
1382
1382
  >
1383
- <h2 class="pf-v5-c-card__title-text">
1383
+ <h2 class="pf-v6-c-card__title-text">
1384
1384
  <button
1385
- class="pf-v5-c-button pf-m-inline pf-m-link pf-m-disabled"
1385
+ class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1386
1386
  >Disabled card</button>
1387
1387
  </h2>
1388
1388
  </div>
1389
1389
  </div>
1390
1390
  </div>
1391
- <div class="pf-v5-c-card__body">Body</div>
1392
- <div class="pf-v5-c-card__footer">Footer</div>
1391
+ <div class="pf-v6-c-card__body">Body</div>
1392
+ <div class="pf-v6-c-card__footer">Footer</div>
1393
1393
  </div>
1394
1394
 
1395
1395
  <div
1396
- class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary"
1396
+ class="pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary"
1397
1397
  id="card-clickable-selectable-secondary-example-selected-disabled"
1398
1398
  >
1399
- <div class="pf-v5-c-card__header">
1400
- <div class="pf-v5-c-card__actions pf-m-no-offset">
1401
- <div class="pf-v5-c-card__selectable-actions">
1402
- <div class="pf-v5-c-check">
1399
+ <div class="pf-v6-c-card__header">
1400
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1401
+ <div class="pf-v6-c-card__selectable-actions">
1402
+ <div class="pf-v6-c-check">
1403
1403
  <input
1404
- class="pf-v5-c-check__input"
1404
+ class="pf-v6-c-check__input"
1405
1405
  type="checkbox"
1406
1406
  checked
1407
1407
  disabled
@@ -1410,7 +1410,7 @@ cssPrefix: pf-v5-c-card
1410
1410
  aria-labelledby="card-clickable-selectable-secondary-example-selected-disabled"
1411
1411
  />
1412
1412
  <label
1413
- class="pf-v5-c-check__label pf-m-disabled"
1413
+ class="pf-v6-c-check__label pf-m-disabled"
1414
1414
  for="card-clickable-selectable-secondary-example-selected-disabled-check"
1415
1415
  id="card-clickable-selectable-secondary-example-selected-disabled-check-label"
1416
1416
  name="card-clickable-selectable-secondary-example-selected-disabled-check"
@@ -1418,21 +1418,21 @@ cssPrefix: pf-v5-c-card
1418
1418
  </div>
1419
1419
  </div>
1420
1420
  </div>
1421
- <div class="pf-v5-c-card__header-main">
1421
+ <div class="pf-v6-c-card__header-main">
1422
1422
  <div
1423
- class="pf-v5-c-card__title"
1423
+ class="pf-v6-c-card__title"
1424
1424
  id="card-clickable-selectable-secondary-example-selected-disabled-title"
1425
1425
  >
1426
- <h2 class="pf-v5-c-card__title-text">
1426
+ <h2 class="pf-v6-c-card__title-text">
1427
1427
  <button
1428
- class="pf-v5-c-button pf-m-inline pf-m-link pf-m-disabled"
1428
+ class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1429
1429
  >Selected but disabled card</button>
1430
1430
  </h2>
1431
1431
  </div>
1432
1432
  </div>
1433
1433
  </div>
1434
- <div class="pf-v5-c-card__body">Body</div>
1435
- <div class="pf-v5-c-card__footer">Footer</div>
1434
+ <div class="pf-v6-c-card__body">Body</div>
1435
+ <div class="pf-v6-c-card__footer">Footer</div>
1436
1436
  </div>
1437
1437
  </div>
1438
1438
 
@@ -1441,12 +1441,12 @@ cssPrefix: pf-v5-c-card
1441
1441
  ### Secondary
1442
1442
 
1443
1443
  ```html
1444
- <div class="pf-v5-c-card pf-m-secondary" id="card-secondary-example">
1445
- <div class="pf-v5-c-card__title">
1446
- <h2 class="pf-v5-c-card__title-text">Title</h2>
1444
+ <div class="pf-v6-c-card pf-m-secondary" id="card-secondary-example">
1445
+ <div class="pf-v6-c-card__title">
1446
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
1447
1447
  </div>
1448
- <div class="pf-v5-c-card__body">Body</div>
1449
- <div class="pf-v5-c-card__footer">Footer</div>
1448
+ <div class="pf-v6-c-card__body">Body</div>
1449
+ <div class="pf-v6-c-card__footer">Footer</div>
1450
1450
  </div>
1451
1451
 
1452
1452
  ```
@@ -1454,12 +1454,12 @@ cssPrefix: pf-v5-c-card
1454
1454
  ### Plain
1455
1455
 
1456
1456
  ```html
1457
- <div class="pf-v5-c-card pf-m-plain" id="card-plain-example">
1458
- <div class="pf-v5-c-card__title">
1459
- <h2 class="pf-v5-c-card__title-text">Title</h2>
1457
+ <div class="pf-v6-c-card pf-m-plain" id="card-plain-example">
1458
+ <div class="pf-v6-c-card__title">
1459
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
1460
1460
  </div>
1461
- <div class="pf-v5-c-card__body">Body</div>
1462
- <div class="pf-v5-c-card__footer">Footer</div>
1461
+ <div class="pf-v6-c-card__body">Body</div>
1462
+ <div class="pf-v6-c-card__footer">Footer</div>
1463
1463
  </div>
1464
1464
 
1465
1465
  ```
@@ -1467,25 +1467,25 @@ cssPrefix: pf-v5-c-card
1467
1467
  ### Expandable
1468
1468
 
1469
1469
  ```html
1470
- <div class="pf-v5-c-card" id="card-expandable-example">
1471
- <div class="pf-v5-c-card__header">
1472
- <div class="pf-v5-c-card__header-toggle">
1470
+ <div class="pf-v6-c-card" id="card-expandable-example">
1471
+ <div class="pf-v6-c-card__header">
1472
+ <div class="pf-v6-c-card__header-toggle">
1473
1473
  <button
1474
- class="pf-v5-c-button pf-m-plain"
1474
+ class="pf-v6-c-button pf-m-plain"
1475
1475
  type="button"
1476
1476
  aria-label="Details"
1477
1477
  id="card-expandable-example-toggle"
1478
1478
  aria-labelledby="card-expandable-example-title card-expandable-example-toggle"
1479
1479
  >
1480
- <span class="pf-v5-c-card__header-toggle-icon">
1480
+ <span class="pf-v6-c-card__header-toggle-icon">
1481
1481
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1482
1482
  </span>
1483
1483
  </button>
1484
1484
  </div>
1485
- <div class="pf-v5-c-card__actions">
1486
- <div class="pf-v5-c-dropdown">
1485
+ <div class="pf-v6-c-card__actions">
1486
+ <div class="pf-v6-c-dropdown">
1487
1487
  <button
1488
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1488
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1489
1489
  id="card-expandable-example-dropdown-kebab-button"
1490
1490
  aria-expanded="false"
1491
1491
  type="button"
@@ -1494,24 +1494,24 @@ cssPrefix: pf-v5-c-card
1494
1494
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1495
1495
  </button>
1496
1496
  <ul
1497
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1497
+ class="pf-v6-c-dropdown__menu pf-m-align-right"
1498
1498
  aria-labelledby="card-expandable-example-dropdown-kebab-button"
1499
1499
  hidden
1500
1500
  role="menu"
1501
1501
  >
1502
1502
  <li role="none">
1503
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1503
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1504
1504
  </li>
1505
1505
  <li role="none">
1506
1506
  <button
1507
- class="pf-v5-c-dropdown__menu-item"
1507
+ class="pf-v6-c-dropdown__menu-item"
1508
1508
  role="menuitem"
1509
1509
  type="button"
1510
1510
  >Action</button>
1511
1511
  </li>
1512
1512
  <li role="none">
1513
1513
  <a
1514
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1514
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1515
1515
  role="menuitem"
1516
1516
  href="#"
1517
1517
  aria-disabled="true"
@@ -1520,25 +1520,25 @@ cssPrefix: pf-v5-c-card
1520
1520
  </li>
1521
1521
  <li role="none">
1522
1522
  <button
1523
- class="pf-v5-c-dropdown__menu-item"
1523
+ class="pf-v6-c-dropdown__menu-item"
1524
1524
  role="menuitem"
1525
1525
  type="button"
1526
1526
  disabled
1527
1527
  >Disabled action</button>
1528
1528
  </li>
1529
- <li class="pf-v5-c-divider" role="separator"></li>
1529
+ <li class="pf-v6-c-divider" role="separator"></li>
1530
1530
  <li role="none">
1531
1531
  <a
1532
- class="pf-v5-c-dropdown__menu-item"
1532
+ class="pf-v6-c-dropdown__menu-item"
1533
1533
  role="menuitem"
1534
1534
  href="#"
1535
1535
  >Separated link</a>
1536
1536
  </li>
1537
1537
  </ul>
1538
1538
  </div>
1539
- <div class="pf-v5-c-check pf-m-standalone">
1539
+ <div class="pf-v6-c-check pf-m-standalone">
1540
1540
  <input
1541
- class="pf-v5-c-check__input"
1541
+ class="pf-v6-c-check__input"
1542
1542
  type="checkbox"
1543
1543
  aria-label="Standalone check"
1544
1544
  id="card-expandable-example-check"
@@ -1547,10 +1547,10 @@ cssPrefix: pf-v5-c-card
1547
1547
  />
1548
1548
  </div>
1549
1549
  </div>
1550
- <div class="pf-v5-c-card__header-main">
1551
- <div class="pf-v5-c-card__title">
1550
+ <div class="pf-v6-c-card__header-main">
1551
+ <div class="pf-v6-c-card__title">
1552
1552
  <h2
1553
- class="pf-v5-c-card__title-text"
1553
+ class="pf-v6-c-card__title-text"
1554
1554
  id="card-expandable-example-title"
1555
1555
  >Title</h2>
1556
1556
  </div>
@@ -1563,32 +1563,32 @@ cssPrefix: pf-v5-c-card
1563
1563
  ### Expandable with image
1564
1564
 
1565
1565
  ```html
1566
- <div class="pf-v5-c-card" id="card-expandable-image-example">
1567
- <div class="pf-v5-c-card__header">
1568
- <div class="pf-v5-c-card__header-toggle">
1566
+ <div class="pf-v6-c-card" id="card-expandable-image-example">
1567
+ <div class="pf-v6-c-card__header">
1568
+ <div class="pf-v6-c-card__header-toggle">
1569
1569
  <button
1570
- class="pf-v5-c-button pf-m-plain"
1570
+ class="pf-v6-c-button pf-m-plain"
1571
1571
  type="button"
1572
1572
  aria-label="Details"
1573
1573
  id="card-expandable-image-example-toggle"
1574
1574
  aria-labelledby="card-expandable-image-example-title card-expandable-image-example-toggle"
1575
1575
  >
1576
- <span class="pf-v5-c-card__header-toggle-icon">
1576
+ <span class="pf-v6-c-card__header-toggle-icon">
1577
1577
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1578
1578
  </span>
1579
1579
  </button>
1580
1580
  </div>
1581
- <div class="pf-v5-c-card__header-main">
1581
+ <div class="pf-v6-c-card__header-main">
1582
1582
  <img
1583
1583
  src="/assets/images/pf-logo-small.svg"
1584
1584
  alt="PatternFly logo"
1585
1585
  width="27px"
1586
1586
  />
1587
1587
  </div>
1588
- <div class="pf-v5-c-card__actions">
1589
- <div class="pf-v5-c-dropdown">
1588
+ <div class="pf-v6-c-card__actions">
1589
+ <div class="pf-v6-c-dropdown">
1590
1590
  <button
1591
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1591
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1592
1592
  id="card-expandable-image-example-dropdown-kebab-button"
1593
1593
  aria-expanded="false"
1594
1594
  type="button"
@@ -1597,24 +1597,24 @@ cssPrefix: pf-v5-c-card
1597
1597
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1598
1598
  </button>
1599
1599
  <ul
1600
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1600
+ class="pf-v6-c-dropdown__menu pf-m-align-right"
1601
1601
  aria-labelledby="card-expandable-image-example-dropdown-kebab-button"
1602
1602
  hidden
1603
1603
  role="menu"
1604
1604
  >
1605
1605
  <li role="none">
1606
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1606
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1607
1607
  </li>
1608
1608
  <li role="none">
1609
1609
  <button
1610
- class="pf-v5-c-dropdown__menu-item"
1610
+ class="pf-v6-c-dropdown__menu-item"
1611
1611
  role="menuitem"
1612
1612
  type="button"
1613
1613
  >Action</button>
1614
1614
  </li>
1615
1615
  <li role="none">
1616
1616
  <a
1617
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1617
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1618
1618
  role="menuitem"
1619
1619
  href="#"
1620
1620
  aria-disabled="true"
@@ -1623,25 +1623,25 @@ cssPrefix: pf-v5-c-card
1623
1623
  </li>
1624
1624
  <li role="none">
1625
1625
  <button
1626
- class="pf-v5-c-dropdown__menu-item"
1626
+ class="pf-v6-c-dropdown__menu-item"
1627
1627
  role="menuitem"
1628
1628
  type="button"
1629
1629
  disabled
1630
1630
  >Disabled action</button>
1631
1631
  </li>
1632
- <li class="pf-v5-c-divider" role="separator"></li>
1632
+ <li class="pf-v6-c-divider" role="separator"></li>
1633
1633
  <li role="none">
1634
1634
  <a
1635
- class="pf-v5-c-dropdown__menu-item"
1635
+ class="pf-v6-c-dropdown__menu-item"
1636
1636
  role="menuitem"
1637
1637
  href="#"
1638
1638
  >Separated link</a>
1639
1639
  </li>
1640
1640
  </ul>
1641
1641
  </div>
1642
- <div class="pf-v5-c-check pf-m-standalone">
1642
+ <div class="pf-v6-c-check pf-m-standalone">
1643
1643
  <input
1644
- class="pf-v5-c-check__input"
1644
+ class="pf-v6-c-check__input"
1645
1645
  type="checkbox"
1646
1646
  aria-label="Standalone check"
1647
1647
  id="card-expandable-image-example-check"
@@ -1658,25 +1658,25 @@ cssPrefix: pf-v5-c-card
1658
1658
  ### Expanded
1659
1659
 
1660
1660
  ```html
1661
- <div class="pf-v5-c-card pf-m-expanded" id="card-expanded-example">
1662
- <div class="pf-v5-c-card__header">
1663
- <div class="pf-v5-c-card__header-toggle">
1661
+ <div class="pf-v6-c-card pf-m-expanded" id="card-expanded-example">
1662
+ <div class="pf-v6-c-card__header">
1663
+ <div class="pf-v6-c-card__header-toggle">
1664
1664
  <button
1665
- class="pf-v5-c-button pf-m-plain"
1665
+ class="pf-v6-c-button pf-m-plain"
1666
1666
  type="button"
1667
1667
  aria-label="Details"
1668
1668
  id="card-expanded-example-toggle"
1669
1669
  aria-labelledby="card-expanded-example-title card-expanded-example-toggle"
1670
1670
  >
1671
- <span class="pf-v5-c-card__header-toggle-icon">
1671
+ <span class="pf-v6-c-card__header-toggle-icon">
1672
1672
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1673
1673
  </span>
1674
1674
  </button>
1675
1675
  </div>
1676
- <div class="pf-v5-c-card__actions">
1677
- <div class="pf-v5-c-dropdown">
1676
+ <div class="pf-v6-c-card__actions">
1677
+ <div class="pf-v6-c-dropdown">
1678
1678
  <button
1679
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1679
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1680
1680
  id="card-expanded-example-dropdown-kebab-button"
1681
1681
  aria-expanded="false"
1682
1682
  type="button"
@@ -1685,24 +1685,24 @@ cssPrefix: pf-v5-c-card
1685
1685
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1686
1686
  </button>
1687
1687
  <ul
1688
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1688
+ class="pf-v6-c-dropdown__menu pf-m-align-right"
1689
1689
  aria-labelledby="card-expanded-example-dropdown-kebab-button"
1690
1690
  hidden
1691
1691
  role="menu"
1692
1692
  >
1693
1693
  <li role="none">
1694
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1694
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1695
1695
  </li>
1696
1696
  <li role="none">
1697
1697
  <button
1698
- class="pf-v5-c-dropdown__menu-item"
1698
+ class="pf-v6-c-dropdown__menu-item"
1699
1699
  role="menuitem"
1700
1700
  type="button"
1701
1701
  >Action</button>
1702
1702
  </li>
1703
1703
  <li role="none">
1704
1704
  <a
1705
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1705
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1706
1706
  role="menuitem"
1707
1707
  href="#"
1708
1708
  aria-disabled="true"
@@ -1711,25 +1711,25 @@ cssPrefix: pf-v5-c-card
1711
1711
  </li>
1712
1712
  <li role="none">
1713
1713
  <button
1714
- class="pf-v5-c-dropdown__menu-item"
1714
+ class="pf-v6-c-dropdown__menu-item"
1715
1715
  role="menuitem"
1716
1716
  type="button"
1717
1717
  disabled
1718
1718
  >Disabled action</button>
1719
1719
  </li>
1720
- <li class="pf-v5-c-divider" role="separator"></li>
1720
+ <li class="pf-v6-c-divider" role="separator"></li>
1721
1721
  <li role="none">
1722
1722
  <a
1723
- class="pf-v5-c-dropdown__menu-item"
1723
+ class="pf-v6-c-dropdown__menu-item"
1724
1724
  role="menuitem"
1725
1725
  href="#"
1726
1726
  >Separated link</a>
1727
1727
  </li>
1728
1728
  </ul>
1729
1729
  </div>
1730
- <div class="pf-v5-c-check pf-m-standalone">
1730
+ <div class="pf-v6-c-check pf-m-standalone">
1731
1731
  <input
1732
- class="pf-v5-c-check__input"
1732
+ class="pf-v6-c-check__input"
1733
1733
  type="checkbox"
1734
1734
  aria-label="Standalone check"
1735
1735
  id="card-expanded-example-check"
@@ -1738,16 +1738,16 @@ cssPrefix: pf-v5-c-card
1738
1738
  />
1739
1739
  </div>
1740
1740
  </div>
1741
- <div class="pf-v5-c-card__header-main">
1741
+ <div class="pf-v6-c-card__header-main">
1742
1742
  <h2
1743
- class="pf-v5-c-card__title-text"
1743
+ class="pf-v6-c-card__title-text"
1744
1744
  id="card-expanded-example-title"
1745
1745
  >Title</h2>
1746
1746
  </div>
1747
1747
  </div>
1748
- <div class="pf-v5-c-card__expandable-content">
1749
- <div class="pf-v5-c-card__body">Body</div>
1750
- <div class="pf-v5-c-card__footer">Footer</div>
1748
+ <div class="pf-v6-c-card__expandable-content">
1749
+ <div class="pf-v6-c-card__body">Body</div>
1750
+ <div class="pf-v6-c-card__footer">Footer</div>
1751
1751
  </div>
1752
1752
  </div>
1753
1753
 
@@ -1756,12 +1756,12 @@ cssPrefix: pf-v5-c-card
1756
1756
  ### Full height card
1757
1757
 
1758
1758
  ```html
1759
- <div class="pf-v5-c-card pf-m-full-height" id="card-full-height-example">
1760
- <div class="pf-v5-c-card__header">
1761
- <div class="pf-v5-c-card__actions">
1762
- <div class="pf-v5-c-dropdown">
1759
+ <div class="pf-v6-c-card pf-m-full-height" id="card-full-height-example">
1760
+ <div class="pf-v6-c-card__header">
1761
+ <div class="pf-v6-c-card__actions">
1762
+ <div class="pf-v6-c-dropdown">
1763
1763
  <button
1764
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1764
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1765
1765
  id="card-full-height-example-dropdown-kebab-button"
1766
1766
  aria-expanded="false"
1767
1767
  type="button"
@@ -1770,24 +1770,24 @@ cssPrefix: pf-v5-c-card
1770
1770
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1771
1771
  </button>
1772
1772
  <ul
1773
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1773
+ class="pf-v6-c-dropdown__menu pf-m-align-right"
1774
1774
  aria-labelledby="card-full-height-example-dropdown-kebab-button"
1775
1775
  hidden
1776
1776
  role="menu"
1777
1777
  >
1778
1778
  <li role="none">
1779
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1779
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1780
1780
  </li>
1781
1781
  <li role="none">
1782
1782
  <button
1783
- class="pf-v5-c-dropdown__menu-item"
1783
+ class="pf-v6-c-dropdown__menu-item"
1784
1784
  role="menuitem"
1785
1785
  type="button"
1786
1786
  >Action</button>
1787
1787
  </li>
1788
1788
  <li role="none">
1789
1789
  <a
1790
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1790
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1791
1791
  role="menuitem"
1792
1792
  href="#"
1793
1793
  aria-disabled="true"
@@ -1796,25 +1796,25 @@ cssPrefix: pf-v5-c-card
1796
1796
  </li>
1797
1797
  <li role="none">
1798
1798
  <button
1799
- class="pf-v5-c-dropdown__menu-item"
1799
+ class="pf-v6-c-dropdown__menu-item"
1800
1800
  role="menuitem"
1801
1801
  type="button"
1802
1802
  disabled
1803
1803
  >Disabled action</button>
1804
1804
  </li>
1805
- <li class="pf-v5-c-divider" role="separator"></li>
1805
+ <li class="pf-v6-c-divider" role="separator"></li>
1806
1806
  <li role="none">
1807
1807
  <a
1808
- class="pf-v5-c-dropdown__menu-item"
1808
+ class="pf-v6-c-dropdown__menu-item"
1809
1809
  role="menuitem"
1810
1810
  href="#"
1811
1811
  >Separated link</a>
1812
1812
  </li>
1813
1813
  </ul>
1814
1814
  </div>
1815
- <div class="pf-v5-c-check pf-m-standalone">
1815
+ <div class="pf-v6-c-check pf-m-standalone">
1816
1816
  <input
1817
- class="pf-v5-c-check__input"
1817
+ class="pf-v6-c-check__input"
1818
1818
  type="checkbox"
1819
1819
  aria-label="Standalone check"
1820
1820
  id="card-full-height-example-check"
@@ -1823,17 +1823,17 @@ cssPrefix: pf-v5-c-card
1823
1823
  />
1824
1824
  </div>
1825
1825
  </div>
1826
- <div class="pf-v5-c-card__header-main">
1827
- <div class="pf-v5-c-card__title">
1826
+ <div class="pf-v6-c-card__header-main">
1827
+ <div class="pf-v6-c-card__title">
1828
1828
  <h2
1829
- class="pf-v5-c-card__title-text"
1829
+ class="pf-v6-c-card__title-text"
1830
1830
  id="card-full-height-example-title&quot;"
1831
1831
  >Title</h2>
1832
1832
  </div>
1833
1833
  </div>
1834
1834
  </div>
1835
- <div class="pf-v5-c-card__body">Body</div>
1836
- <div class="pf-v5-c-card__footer">Footer</div>
1835
+ <div class="pf-v6-c-card__body">Body</div>
1836
+ <div class="pf-v6-c-card__footer">Footer</div>
1837
1837
  </div>
1838
1838
 
1839
1839
  ```
@@ -1841,12 +1841,12 @@ cssPrefix: pf-v5-c-card
1841
1841
  ### Expandable toggle on right
1842
1842
 
1843
1843
  ```html
1844
- <div class="pf-v5-c-card" id="card-toggle-on-right-example">
1845
- <div class="pf-v5-c-card__header pf-m-toggle-right">
1846
- <div class="pf-v5-c-card__actions">
1847
- <div class="pf-v5-c-dropdown">
1844
+ <div class="pf-v6-c-card" id="card-toggle-on-right-example">
1845
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1846
+ <div class="pf-v6-c-card__actions">
1847
+ <div class="pf-v6-c-dropdown">
1848
1848
  <button
1849
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1849
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
1850
1850
  id="card-toggle-on-right-example-dropdown-kebab-button"
1851
1851
  aria-expanded="false"
1852
1852
  type="button"
@@ -1855,24 +1855,24 @@ cssPrefix: pf-v5-c-card
1855
1855
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1856
1856
  </button>
1857
1857
  <ul
1858
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1858
+ class="pf-v6-c-dropdown__menu pf-m-align-right"
1859
1859
  aria-labelledby="card-toggle-on-right-example-dropdown-kebab-button"
1860
1860
  hidden
1861
1861
  role="menu"
1862
1862
  >
1863
1863
  <li role="none">
1864
- <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1864
+ <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1865
1865
  </li>
1866
1866
  <li role="none">
1867
1867
  <button
1868
- class="pf-v5-c-dropdown__menu-item"
1868
+ class="pf-v6-c-dropdown__menu-item"
1869
1869
  role="menuitem"
1870
1870
  type="button"
1871
1871
  >Action</button>
1872
1872
  </li>
1873
1873
  <li role="none">
1874
1874
  <a
1875
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1875
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1876
1876
  role="menuitem"
1877
1877
  href="#"
1878
1878
  aria-disabled="true"
@@ -1881,25 +1881,25 @@ cssPrefix: pf-v5-c-card
1881
1881
  </li>
1882
1882
  <li role="none">
1883
1883
  <button
1884
- class="pf-v5-c-dropdown__menu-item"
1884
+ class="pf-v6-c-dropdown__menu-item"
1885
1885
  role="menuitem"
1886
1886
  type="button"
1887
1887
  disabled
1888
1888
  >Disabled action</button>
1889
1889
  </li>
1890
- <li class="pf-v5-c-divider" role="separator"></li>
1890
+ <li class="pf-v6-c-divider" role="separator"></li>
1891
1891
  <li role="none">
1892
1892
  <a
1893
- class="pf-v5-c-dropdown__menu-item"
1893
+ class="pf-v6-c-dropdown__menu-item"
1894
1894
  role="menuitem"
1895
1895
  href="#"
1896
1896
  >Separated link</a>
1897
1897
  </li>
1898
1898
  </ul>
1899
1899
  </div>
1900
- <div class="pf-v5-c-check pf-m-standalone">
1900
+ <div class="pf-v6-c-check pf-m-standalone">
1901
1901
  <input
1902
- class="pf-v5-c-check__input"
1902
+ class="pf-v6-c-check__input"
1903
1903
  type="checkbox"
1904
1904
  aria-label="Standalone check"
1905
1905
  id="card-toggle-on-right-example-check"
@@ -1908,23 +1908,23 @@ cssPrefix: pf-v5-c-card
1908
1908
  />
1909
1909
  </div>
1910
1910
  </div>
1911
- <div class="pf-v5-c-card__header-main">
1912
- <div class="pf-v5-c-card__title">
1911
+ <div class="pf-v6-c-card__header-main">
1912
+ <div class="pf-v6-c-card__title">
1913
1913
  <h2
1914
- class="pf-v5-c-card__title-text"
1914
+ class="pf-v6-c-card__title-text"
1915
1915
  id="card-toggle-on-right-example-title"
1916
1916
  >Title</h2>
1917
1917
  </div>
1918
1918
  </div>
1919
- <div class="pf-v5-c-card__header-toggle">
1919
+ <div class="pf-v6-c-card__header-toggle">
1920
1920
  <button
1921
- class="pf-v5-c-button pf-m-plain"
1921
+ class="pf-v6-c-button pf-m-plain"
1922
1922
  type="button"
1923
1923
  aria-label="Details"
1924
1924
  id="card-toggle-on-right-example-toggle"
1925
1925
  aria-labelledby="card-toggle-on-right-example-title card-toggle-on-right-example-toggle"
1926
1926
  >
1927
- <span class="pf-v5-c-card__header-toggle-icon">
1927
+ <span class="pf-v6-c-card__header-toggle-icon">
1928
1928
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1929
1929
  </span>
1930
1930
  </button>
@@ -1937,16 +1937,16 @@ cssPrefix: pf-v5-c-card
1937
1937
  ### Card with dividers between sections
1938
1938
 
1939
1939
  ```html
1940
- <div class="pf-v5-c-card">
1941
- <div class="pf-v5-c-card__title">
1942
- <h2 class="pf-v5-c-card__title-text">Title</h2>
1940
+ <div class="pf-v6-c-card">
1941
+ <div class="pf-v6-c-card__title">
1942
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
1943
1943
  </div>
1944
- <hr class="pf-v5-c-divider" />
1945
- <div class="pf-v5-c-card__body">Body</div>
1946
- <hr class="pf-v5-c-divider" />
1947
- <div class="pf-v5-c-card__body">Body</div>
1948
- <hr class="pf-v5-c-divider" />
1949
- <div class="pf-v5-c-card__footer">Footer</div>
1944
+ <hr class="pf-v6-c-divider" />
1945
+ <div class="pf-v6-c-card__body">Body</div>
1946
+ <hr class="pf-v6-c-divider" />
1947
+ <div class="pf-v6-c-card__body">Body</div>
1948
+ <hr class="pf-v6-c-divider" />
1949
+ <div class="pf-v6-c-card__footer">Footer</div>
1950
1950
  </div>
1951
1951
 
1952
1952
  ```