@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.31

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -1597,38 +1597,38 @@ cssPrefix: pf-c-calendar-month
 
 ### Accessibility
 
-| Attribute                            | Applied to                                                   | Outcome                                                                                                             |
-| ------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `aria-hidden="true"`                 | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required**                                                |
-| `aria-hidden="true"`                 | `.pf-c-calendar-month__day > span`                           | Hides the visual day of the month label from assistive technologies. **Required**                                   |
-| `.pf-screen-reader`                  | `.pf-c-calendar-month__day > span`                           | Hides the full day of the month text visually. **Required**                                                         |
-| `aria-label="[Prev/Next] month"`     | `.pf-c-calendar-month__header-nav-control`                   | Provides an accessible label for the nav controls. **Required**                                                     |
-| `disabled`                           | `.pf-c-calendar-month__date`                                 | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
-| `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date`                                 | Provides an accessible label for the date button. **Required**                                                      |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
+| `aria-hidden="true"` | `.pf-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
+| `.pf-screen-reader` | `.pf-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
+| `aria-label="[Prev/Next] month"` | `.pf-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
+| `disabled` | `.pf-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
+| `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
 
 ### Usage
 
-| Class                                      | Applied to                                 | Outcome                                                       |
-| ------------------------------------------ | ------------------------------------------ | ------------------------------------------------------------- |
-| `.pf-c-calendar-month`                     | `<div>`                                    | Initiates the calendar month component. **Required**          |
-| `.pf-c-calendar-month__header`             | `<div>`                                    | Initiates the calendar month header. **Required**             |
-| `.pf-c-calendar-month__header-nav-control` | `<div>`                                    | Initiates a nav control for navigating by month. **Required** |
-| `.pf-c-calendar-month__header-month`       | `<div>`                                    | Initiates the month select. **Required**                      |
-| `.pf-c-calendar-month__header-year`        | `<div>`                                    | Initiates the year input. **Required**                        |
-| `.pf-c-calendar-month__calendar`           | `<table>`                                  | Initiates the calendar. **Required**                          |
-| `.pf-c-calendar-month__days`               | `<thead>`                                  | Initiates the calendar days section. **Required**             |
-| `.pf-c-calendar-month__days-row`           | `<tr>`                                     | Initiates the calendar days row. **Required**                 |
-| `.pf-c-calendar-month__day`                | `<th>`                                     | Initiates a calendar day. **Required**                        |
-| `.pf-c-calendar-month__dates`              | `<tbody>`                                  | Initiates the calendar dates section. **Required**            |
-| `.pf-c-calendar-month__dates-row`          | `<tr>`                                     | Initiates a calendar dates row. **Required**                  |
-| `.pf-c-calendar-month__dates-cell`         | `<td>`                                     | Initiates a calendar date cell. **Required**                  |
-| `.pf-c-calendar-month__date`               | `<button>`                                 | Initiates a calendar date. **Required**                       |
-| `.pf-m-prev-month`                         | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required**   |
-| `.pf-m-next-month`                         | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required**       |
-| `.pf-m-current`                            | `.pf-c-calendar-month__dates-cell`         | Indicates a date is the current day. **Required**             |
-| `.pf-m-selected`                           | `.pf-c-calendar-month__dates-cell`         | Indicates a date is selected.                                 |
-| `.pf-m-start-range`                        | `.pf-c-calendar-month__dates-cell`         | Indicates a date is the start of a range.                     |
-| `.pf-m-in-range`                           | `.pf-c-calendar-month__dates-cell`         | Indicates a date is in a range.                               |
-| `.pf-m-end-range`                          | `.pf-c-calendar-month__dates-cell`         | Indicates a date is the end of a range.                       |
-| `.pf-m-adjacent-month`                     | `.pf-c-calendar-month__dates-cell`         | Indicates a date is in an adjacent month.                     |
-| `.pf-m-disabled`                           | `.pf-c-calendar-month__dates-cell`         | Indicates a date is disabled and unavailable.                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
+| `.pf-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
+| `.pf-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
+| `.pf-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
+| `.pf-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
+| `.pf-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
+| `.pf-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
+| `.pf-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
+| `.pf-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
+| `.pf-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
+| `.pf-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
+| `.pf-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
+| `.pf-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
+| `.pf-m-prev-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
+| `.pf-m-next-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
+| `.pf-m-current` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
+| `.pf-m-selected` | `.pf-c-calendar-month__dates-cell` | Indicates a date is selected. |
+| `.pf-m-start-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
+| `.pf-m-in-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in a range. |
+| `.pf-m-end-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
+| `.pf-m-adjacent-month` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
+| `.pf-m-disabled` | `.pf-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |

package/docs/components/Card/examples/Card.md

@@ -10,7 +10,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card" id="card-basic-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -79,7 +81,12 @@ cssPrefix: pf-c-card
       </div>
     </div>
   </div>
-  <div class="pf-c-card__title" id="card-action-example-1-check-label">Title</div>
+  <div class="pf-c-card__title">
+    <h2
+      class="pf-c-card__title-text"
+      id="card-action-example-1-check-label"
+    >Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -144,10 +151,14 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div
-      class="pf-c-card__title"
-      id="card-action-example-2-check-label"
-    >This is a really really really really really really really really really really long title</div>
+    <div class="pf-c-card__header-main">
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-action-example-2-check-label"
+        >This is a really really really really really really really really really really long title</h2>
+      </div>
+    </div>
   </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
@@ -230,10 +241,12 @@ cssPrefix: pf-c-card
     <div class="pf-c-card__actions pf-m-no-offset">
       <button class="pf-c-button pf-m-primary" type="button">Action</button>
     </div>
-    <h1
-      class="pf-c-title pf-m-2xl"
-      id="card-action-no-offset-check-label"
-    >This is a card title</h1>
+    <div class="pf-c-card__header-main">
+      <h1
+        class="pf-c-title pf-m-2xl"
+        id="card-action-no-offset-check-label"
+      >This is a card title</h1>
+    </div>
   </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
@@ -250,7 +263,9 @@ cssPrefix: pf-c-card
       <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
     </div>
   </div>
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -261,7 +276,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card" id="card-no-footer-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">This card has no footer</div>
 </div>
 
@@ -290,7 +307,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card" id="card-multiple-body-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__body">Body</div>
@@ -303,7 +322,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card" id="card-body-fill-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
   <div class="pf-c-card__body pf-m-no-fill">Body pf-m-no-fill</div>
   <div class="pf-c-card__body">Body</div>
@@ -316,7 +337,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-compact" id="card-compact-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -327,7 +350,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-display-lg" id="card-display-lg-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -338,7 +363,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-hoverable-raised" id="card-hoverable-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -353,7 +380,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selectable-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -368,7 +397,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selected-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -389,7 +420,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selectable-with-input-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -403,7 +436,9 @@ cssPrefix: pf-c-card
   class="pf-c-card pf-m-non-selectable-raised"
   id="card-non-selectable-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -414,7 +449,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-hoverable" id="card-hoverable-legacy-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -429,7 +466,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selectable-legacy-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -444,7 +483,9 @@ cssPrefix: pf-c-card
   tabindex="0"
   id="card-selected-legacy-example"
 >
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -455,7 +496,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-flat" id="card-flat-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -466,7 +509,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-rounded" id="card-rounded-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -477,7 +522,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card pf-m-plain" id="card-plain-example">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
 </div>
@@ -555,7 +602,14 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
+    <div class="pf-c-card__header-main">
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-expandable-example-title"
+        >Title</h2>
+      </div>
+    </div>
   </div>
 </div>
 
@@ -579,11 +633,13 @@ cssPrefix: pf-c-card
         </span>
       </button>
     </div>
-    <img
-      src="/assets/images/pf-logo-small.svg"
-      alt="PatternFly logo"
-      width="27px"
-    />
+    <div class="pf-c-card__header-main">
+      <img
+        src="/assets/images/pf-logo-small.svg"
+        alt="PatternFly logo"
+        width="27px"
+      />
+    </div>
     <div class="pf-c-card__actions">
       <div class="pf-c-dropdown">
         <button
@@ -713,7 +769,9 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
+    <div class="pf-c-card__header-main">
+      <h2 class="pf-c-card__title-text" id="card-expanded-example-title">Title</h2>
+    </div>
   </div>
   <div class="pf-c-card__expandable-content">
     <div class="pf-c-card__body">Body</div>
@@ -781,7 +839,14 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
+    <div class="pf-c-card__header-main">
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-full-height-example-title&quot;"
+        >Title</h2>
+      </div>
+    </div>
   </div>
   <div class="pf-c-card__body">Body</div>
   <div class="pf-c-card__footer">Footer</div>
@@ -847,7 +912,14 @@ cssPrefix: pf-c-card
         />
       </div>
     </div>
-    <div class="pf-c-card__title" id="card-toggle-on-right-example-title">Title</div>
+    <div class="pf-c-card__header-main">
+      <div class="pf-c-card__title">
+        <h2
+          class="pf-c-card__title-text"
+          id="card-toggle-on-right-example-title"
+        >Title</h2>
+      </div>
+    </div>
     <div class="pf-c-card__header-toggle">
       <button
         class="pf-c-button pf-m-plain"
@@ -870,7 +942,9 @@ cssPrefix: pf-c-card
 
 ```html
 <div class="pf-c-card">
-  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__title">
+    <h2 class="pf-c-card__title-text">Title</h2>
+  </div>
   <hr class="pf-c-divider" />
   <div class="pf-c-card__body">Body</div>
   <hr class="pf-c-divider" />
@@ -889,30 +963,31 @@ A card is a generic rectangular container that can be used to build other compon
 
 ### Usage
 
-| Class                            | Applied                             | Outcome                                                                                                                                                                        |
-| -------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-card`                     | `<div>`                             | Creates a card component.  **Required**                                                                                                                                        |
-| `.pf-c-card__title`              | `<div>`                             | Creates the title of a card.                                                                                                                                                   |
-| `.pf-c-card__body`               | `<div>`                             | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements.                              |
-| `.pf-c-card__footer`             | `<div>`                             | Creates the footer of a card.                                                                                                                                                  |
-| `.pf-c-card__header`             | `<div>`                             | Creates the header of the card where images, actions, and/or the card title can go.                                                                                            |
-| `.pf-c-card__header-toggle`      | `<div>`                             | Creates the expandable card toggle.                                                                                                                                            |
-| `.pf-c-card__header-toggle-icon` | `<span>`                            | Creates the expandable card toggle icon.                                                                                                                                       |
-| `.pf-c-card__actions`            | `<div>`                             | Creates an actions element to be used in the card header.                                                                                                                      |
-| `.pf-c-card__header-main`        | `<div>`                             | Creates a wrapper element to be used in the card header when using an image, logo, or text.                                                                                    |
-| `.pf-c-card__expandable-content` | `<div>`                             | Creates the expandable card's expandable content.                                                                                                                              |
-| `.pf-c-card__sr-input`           | `<input>`                           | Creates an input which, when focused, makes a following `.pf-c-card` appear focused.                                                                                           |
-| `.pf-m-compact`                  | `.pf-c-card`                        | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
-| `.pf-m-display-lg`               | `.pf-c-card`                        | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases.                                        |
-| `.pf-m-no-fill`                  | `.pf-c-card__body`                  | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies.                                               |
-| `.pf-m-hoverable-raised`         | `.pf-c-card`                        | Modifies the card to include hover styles on `:hover`.                                                                                                                         |
-| `.pf-m-selectable-raised`        | `.pf-c-card`                        | Modifies a selectable card so that it is selectable.                                                                                                                           |
-| `.pf-m-selected-raised`          | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state.                                                                                                                             |
-| `.pf-m-non-selectable-raised`    | `.pf-c-card`                        | Modifies a selectable card so that it is not selectable.                                                                                                                       |
-| `.pf-m-flat`                     | `.pf-c-card`                        | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background.                                         |
-| `.pf-m-rounded`                  | `.pf-c-card`                        | Modifies the card to have rounded corners.                                                                                                                                     |
-| `.pf-m-plain`                    | `.pf-c-card`                        | Modifies the card to have no box shadow and no background color.                                                                                                               |
-| `.pf-m-expanded`                 | `.pf-c-card`                        | Modifies the card for the expanded state.                                                                                                                                      |
-| `.pf-m-toggle-right`             | `.pf-c-card__header`                | Modifies the expandable card header toggle to be positioned at flex-end.                                                                                                       |
-| `.pf-m-full-height`              | `.pf-c-card`                        | Modifies the card to full height of its parent.                                                                                                                                |
-| `.pf-m-no-offset`                | `.pf-c-card__actions`               | Removes the negative vertical margins on the actions element intended to align the action content with the card title.                                                         |
+| Class | Applied | Outcome |
+| ---- | ---- | ---- |
+| `.pf-c-card` | `<div>` | Creates a card component.  **Required** |
+| `.pf-c-card__title` | `<div>` | Creates a card title container. |
+| `.pf-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
+| `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
+| `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
+| `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
+| `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
+| `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
+| `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
+| `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
+| `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
+| `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
+| `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
+| `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
+| `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
+| `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
+| `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
+| `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
+| `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
+| `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
+| `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
+| `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
+| `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
+| `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
+| `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
+| `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |

package/docs/components/Check/examples/Check.md

@@ -97,22 +97,18 @@ cssPrefix: pf-c-check
     type="checkbox"
     id="check-disabled"
     name="check-disabled"
-    disabled
   />
 
-  <label
-    class="pf-c-check__label pf-m-disabled"
-    for="check-disabled"
-  >Check disabled</label>
+  <label class="pf-c-check__label" for="check-disabled">Check disabled</label>
 </div>
 <div class="pf-c-check">
   <input
     class="pf-c-check__input"
     type="checkbox"
+    disabled
     id="check-disabled-2"
     name="check-disabled-2"
     checked
-    disabled
   />
 
   <label
@@ -213,20 +209,20 @@ If you extend this component or modify the styles of this component, then make s
 
 ### Accessibility
 
-| Attribute  | Applied to           | Outcome                                                                                                           |
-| ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `disabled` | `.pf-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
-| `required` | `.pf-c-check__input` | Indicates that the element is required.                                                                           |
+| `required` | `.pf-c-check__input` | Indicates that the element is required. |
 
 ### Usage
 
-| Class                         | Applied to                | Outcome                                                                                                               |
-| ----------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-check`                 | `<div>`, `<label>`        | Initiates the check component. **Required**                                                                           |
-| `.pf-c-check__input`          | `<input type="checkbox">` | Initiates a check input. **Required**                                                                                 |
-| `.pf-c-check__label`          | `<label>`, `<span>`       | Initiates a label. **Required**                                                                                       |
-| `.pf-c-check__label-required` | `<span>`                  | Initiates a required indicator.                                                                                       |
-| `.pf-c-check__description`    | `<span>`                  | Initiates a check description.                                                                                        |
-| `.pf-c-check__body`           | `<span>`                  | Initiates a check body.                                                                                               |
-| `.pf-m-standalone`            | `.pf-c-check`             | Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
-| `.pf-m-disabled`              | `.pf-c-check__label`      | Modifies the check component for the disabled state. **Required when input is disabled**                              |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-check` | `<div>`, `<label>` |  Initiates the check component. **Required**  |
+| `.pf-c-check__input` | `<input type="checkbox">` |  Initiates a check input. **Required**  |
+| `.pf-c-check__label` | `<label>`, `<span>` |  Initiates a label. **Required**  |
+| `.pf-c-check__label-required` | `<span>` |  Initiates a required indicator. |
+| `.pf-c-check__description` | `<span>` |  Initiates a check description. |
+| `.pf-c-check__body` | `<span>` |  Initiates a check body. |
+| `.pf-m-standalone` | `.pf-c-check` |  Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
+| `.pf-m-disabled` | `.pf-c-check__label` |  Modifies the check component for the disabled state. **Required when input is disabled** |