@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

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

@@ -25,7 +25,61 @@ cssPrefix: pf-v5-c-card
 <div class="pf-v5-c-card" id="card-action-example-1">
   <div class="pf-v5-c-card__header">
     <div class="pf-v5-c-card__header-main">
-      <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 706.3 132.5"
+        fill="currentColor"
+        width="300px"
+      >
+        <g>
+          <path
+            d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+                c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
+                c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
+                c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
+                c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
+          />
+          <path
+            d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+                c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
+          />
+          <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
+          <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
+          <path
+            d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
+          />
+          <path
+            d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+                c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
+                l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
+                c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
+                H478.9z"
+          />
+          <path
+            d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+                c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
+                c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
+          />
+          <path
+            d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
+          />
+          <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
+          <path
+            d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
+          />
+        </g>
+        <g>
+          <path
+            d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+                l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
+                l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
+                L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
+                l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
+                L101.1,70z"
+          />
+        </g>
+      </svg>
     </div>
     <div class="pf-v5-c-card__actions">
       <div class="pf-v5-c-dropdown">
@@ -85,6 +139,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-1-check"
           name="card-action-example-1-check"
           aria-labelledby="card-action-example-1"
@@ -167,6 +222,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-2-check"
           name="card-action-example-2-check"
           aria-labelledby="card-action-example-2"
@@ -251,6 +307,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-3-check"
           name="card-action-example-3-check"
           aria-labelledby="card-action-example-3"
@@ -293,7 +350,61 @@ cssPrefix: pf-v5-c-card
 <div class="pf-v5-c-card" id="card-image-head-example">
   <div class="pf-v5-c-card__header">
     <div class="pf-v5-c-card__header-main">
-      <img src="/assets/images/pf_logo.svg" width="300px" alt="Logo" />
+      <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 706.3 132.5"
+        fill="currentColor"
+        width="300px"
+      >
+        <g>
+          <path
+            d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+                c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
+                c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
+                c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
+                c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
+          />
+          <path
+            d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+                c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
+          />
+          <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
+          <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
+          <path
+            d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
+          />
+          <path
+            d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+                c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
+                l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
+                c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
+                H478.9z"
+          />
+          <path
+            d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+                c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
+                c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
+          />
+          <path
+            d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
+          />
+          <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
+          <path
+            d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
+          />
+        </g>
+        <g>
+          <path
+            d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+                l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
+                l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
+                L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
+                l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
+                L101.1,70z"
+          />
+        </g>
+      </svg>
     </div>
   </div>
   <div class="pf-v5-c-card__title">
@@ -400,7 +511,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -408,12 +519,11 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-check"
               aria-labelledby="card-selectable-example"
             />
-
             <label
               class="pf-v5-c-check__label"
+              for="card-selectable-example-check"
               id="card-selectable-example-check-label"
               name="card-selectable-example-check"
-              for="card-selectable-example-check"
             ></label>
           </div>
         </div>
@@ -435,7 +545,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -444,12 +554,11 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-disabled-check"
               aria-labelledby="card-selectable-example-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
+              for="card-selectable-example-disabled-check"
               id="card-selectable-example-disabled-check-label"
               name="card-selectable-example-disabled-check"
-              for="card-selectable-example-disabled-check"
             ></label>
           </div>
         </div>
@@ -474,7 +583,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -484,12 +593,11 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-selected-disabled-check"
               aria-labelledby="card-selectable-example-selected-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
+              for="card-selectable-example-selected-disabled-check"
               id="card-selectable-example-selected-disabled-check-label"
               name="card-selectable-example-selected-disabled-check"
-              for="card-selectable-example-selected-disabled-check"
             ></label>
           </div>
         </div>
@@ -510,7 +618,125 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Single Selectable
+### Selectable Secondary style
+
+```html
+<div class="pf-v5-l-gallery pf-m-gutter">
+  <div
+    class="pf-v5-c-card pf-m-selectable pf-m-secondary"
+    id="card-selectable-secondary-example"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-check">
+            <input
+              class="pf-v5-c-check__input"
+              type="checkbox"
+              id="card-selectable-secondary-example-check"
+              name="card-selectable-secondary-example-check"
+              aria-labelledby="card-selectable-secondary-example"
+            />
+            <label
+              class="pf-v5-c-check__label"
+              for="card-selectable-secondary-example-check"
+              id="card-selectable-secondary-example-check-label"
+              name="card-selectable-secondary-example-check"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div class="pf-v5-c-card__title">
+          <h2 class="pf-v5-c-card__title-text">Title</h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
+  </div>
+
+  <div
+    class="pf-v5-c-card pf-m-selectable pf-m-disabled pf-m-secondary"
+    id="card-selectable-secondary-example-disabled"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-check">
+            <input
+              class="pf-v5-c-check__input"
+              type="checkbox"
+              disabled
+              id="card-selectable-secondary-example-disabled-check"
+              name="card-selectable-secondary-example-disabled-check"
+              aria-labelledby="card-selectable-secondary-example-disabled"
+            />
+            <label
+              class="pf-v5-c-check__label pf-m-disabled"
+              for="card-selectable-secondary-example-disabled-check"
+              id="card-selectable-secondary-example-disabled-check-label"
+              name="card-selectable-secondary-example-disabled-check"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-selectable-secondary-example-disabled-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">Disabled card</h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
+  </div>
+
+  <div
+    class="pf-v5-c-card pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary"
+    id="card-selectable-secondary-example-selected-disabled"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-check">
+            <input
+              class="pf-v5-c-check__input"
+              type="checkbox"
+              checked
+              disabled
+              id="card-selectable-secondary-example-selected-disabled-check"
+              name="card-selectable-secondary-example-selected-disabled-check"
+              aria-labelledby="card-selectable-secondary-example-selected-disabled"
+            />
+            <label
+              class="pf-v5-c-check__label pf-m-disabled"
+              for="card-selectable-secondary-example-selected-disabled-check"
+              id="card-selectable-secondary-example-selected-disabled-check-label"
+              name="card-selectable-secondary-example-selected-disabled-check"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-selectable-secondary-example-selected-disabled-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
+  </div>
+</div>
+
+```
+
+### Single selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">
@@ -518,7 +744,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -526,12 +752,11 @@ cssPrefix: pf-v5-c-card
               name="card-single-selectable-example-radio"
               aria-labelledby="card-single-selectable-example"
             />
-
             <label
               class="pf-v5-c-radio__label"
+              for="card-single-selectable-example-radio"
               id="card-single-selectable-example-radio-label"
               name="card-single-selectable-example-radio"
-              for="card-single-selectable-example-radio"
             ></label>
           </div>
         </div>
@@ -556,7 +781,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -565,12 +790,11 @@ cssPrefix: pf-v5-c-card
               aria-labelledby="card-single-selectable-example-disabled"
               disabled
             />
-
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-single-selectable-example-disabled-radio"
               id="card-single-selectable-example-disabled-radio-label"
               name="card-single-selectable-example-disabled-radio"
-              for="card-single-selectable-example-disabled-radio"
             ></label>
           </div>
         </div>
@@ -595,7 +819,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -605,12 +829,11 @@ cssPrefix: pf-v5-c-card
               disabled
               checked
             />
-
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-single-selectable-example-selected-disabled-radio"
               id="card-single-selectable-example-selected-disabled-radio-label"
               name="card-single-selectable-example-selected-disabled-radio"
-              for="card-single-selectable-example-selected-disabled-radio"
             ></label>
           </div>
         </div>
@@ -650,9 +873,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label"
+              for="card-clickable-example-sr-only-radio"
               id="card-clickable-example-sr-only-radio-label"
               name="card-clickable-example-sr-only-radio"
-              for="card-clickable-example-sr-only-radio"
             ></label>
           </div>
         </div>
@@ -686,9 +909,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-clickable-example-disabled-sr-only-radio"
               id="card-clickable-example-disabled-sr-only-radio-label"
               name="card-clickable-example-disabled-sr-only-radio"
-              for="card-clickable-example-disabled-sr-only-radio"
             ></label>
           </div>
         </div>
@@ -725,9 +948,9 @@ cssPrefix: pf-v5-c-card
 
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-clickable-example-selected-disabled-sr-only-radio"
               id="card-clickable-example-selected-disabled-sr-only-radio-label"
               name="card-clickable-example-selected-disabled-sr-only-radio"
-              for="card-clickable-example-selected-disabled-sr-only-radio"
             ></label>
           </div>
         </div>
@@ -748,7 +971,130 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Clickable and Selectable
+### Clickable secondary style
+
+```html
+<div class="pf-v5-l-gallery pf-m-gutter">
+  <div
+    class="pf-v5-c-card pf-m-clickable pf-m-secondary"
+    id="card-clickable-secondary-example"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-radio pf-m-standalone">
+            <input
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
+              type="radio"
+              id="card-clickable-secondary-example-sr-only-radio"
+              name="card-clickable-secondary-example-sr-only-radio"
+              aria-labelledby="card-clickable-secondary-example"
+            />
+
+            <label
+              class="pf-v5-c-radio__label"
+              for="card-clickable-secondary-example-sr-only-radio"
+              id="card-clickable-secondary-example-sr-only-radio-label"
+              name="card-clickable-secondary-example-sr-only-radio"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-clickable-secondary-example-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">Title</h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
+  </div>
+
+  <div
+    class="pf-v5-c-card pf-m-clickable pf-m-disabled pf-m-secondary"
+    id="card-clickable-secondary-example-disabled"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-radio pf-m-standalone">
+            <input
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
+              type="radio"
+              id="card-clickable-secondary-example-disabled-sr-only-radio"
+              name="card-clickable-secondary-example-disabled-sr-only-radio"
+              aria-labelledby="card-clickable-secondary-example-disabled"
+              disabled
+            />
+
+            <label
+              class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-clickable-secondary-example-disabled-sr-only-radio"
+              id="card-clickable-secondary-example-disabled-sr-only-radio-label"
+              name="card-clickable-secondary-example-disabled-sr-only-radio"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-clickable-secondary-example-disabled-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">Disabled card</h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
+  </div>
+
+  <div
+    class="pf-v5-c-card pf-m-clickable pf-m-selected pf-m-disabled pf-m-secondary"
+    id="card-clickable-secondary-example-selected-disabled"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-radio pf-m-standalone">
+            <input
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
+              type="radio"
+              id="card-clickable-secondary-example-selected-disabled-sr-only-radio"
+              name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
+              aria-labelledby="card-clickable-secondary-example-selected-disabled"
+              disabled
+            />
+
+            <label
+              class="pf-v5-c-radio__label pf-m-disabled"
+              for="card-clickable-secondary-example-selected-disabled-sr-only-radio"
+              id="card-clickable-secondary-example-selected-disabled-sr-only-radio-label"
+              name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-clickable-secondary-example-selected-disabled-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
+  </div>
+</div>
+
+```
+
+### Clickable and selectable
 
 ```html
 <div class="pf-v5-l-gallery pf-m-gutter">
@@ -759,7 +1105,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -767,12 +1113,11 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-check"
               aria-labelledby="card-clickable-selectable-example"
             />
-
             <label
               class="pf-v5-c-check__label"
+              for="card-clickable-selectable-example-check"
               id="card-clickable-selectable-example-check-label"
               name="card-clickable-selectable-example-check"
-              for="card-clickable-selectable-example-check"
             ></label>
           </div>
         </div>
@@ -782,10 +1127,9 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-card__title"
           id="card-clickable-selectable-example-title"
         >
-          <button
-            class="pf-v5-c-button pf-m-link pf-m-inline"
-            type="button"
-          >Title</button>
+          <h2 class="pf-v5-c-card__title-text">
+            <button class="pf-v5-c-button pf-m-link pf-m-inline">Title</button>
+          </h2>
         </div>
       </div>
     </div>
@@ -800,7 +1144,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -808,12 +1152,11 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-current-example-check"
               aria-labelledby="card-clickable-selectable-current-example"
             />
-
             <label
               class="pf-v5-c-check__label"
+              for="card-clickable-selectable-current-example-check"
               id="card-clickable-selectable-current-example-check-label"
               name="card-clickable-selectable-current-example-check"
-              for="card-clickable-selectable-current-example-check"
             ></label>
           </div>
         </div>
@@ -823,10 +1166,11 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-card__title"
           id="card-clickable-selectable-current-example-title"
         >
-          <button
-            class="pf-v5-c-button pf-m-link pf-m-inline"
-            type="button"
-          >Current card (clicked)</button>
+          <h2 class="pf-v5-c-card__title-text">
+            <button
+              class="pf-v5-c-button pf-m-link pf-m-inline"
+            >Current card (clicked)</button>
+          </h2>
         </div>
       </div>
     </div>
@@ -841,7 +1185,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -850,12 +1194,11 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-disabled-check"
               aria-labelledby="card-clickable-selectable-example-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
+              for="card-clickable-selectable-example-disabled-check"
               id="card-clickable-selectable-example-disabled-check-label"
               name="card-clickable-selectable-example-disabled-check"
-              for="card-clickable-selectable-example-disabled-check"
             ></label>
           </div>
         </div>
@@ -865,11 +1208,11 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-card__title"
           id="card-clickable-selectable-example-disabled-title"
         >
-          <button
-            class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
-            type="button"
-            disabled
-          >Disabled card</button>
+          <h2 class="pf-v5-c-card__title-text">
+            <button
+              class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
+            >Disabled card</button>
+          </h2>
         </div>
       </div>
     </div>
@@ -884,7 +1227,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -894,12 +1237,11 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-selected-disabled-check"
               aria-labelledby="card-clickable-selectable-example-selected-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
+              for="card-clickable-selectable-example-selected-disabled-check"
               id="card-clickable-selectable-example-selected-disabled-check-label"
               name="card-clickable-selectable-example-selected-disabled-check"
-              for="card-clickable-selectable-example-selected-disabled-check"
             ></label>
           </div>
         </div>
@@ -909,11 +1251,11 @@ cssPrefix: pf-v5-c-card
           class="pf-v5-c-card__title"
           id="card-clickable-selectable-example-selected-disabled-title"
         >
-          <button
-            class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
-            type="button"
-            disabled
-          >Selected but disabled card</button>
+          <h2 class="pf-v5-c-card__title-text">
+            <button
+              class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
+            >Selected but disabled card</button>
+          </h2>
         </div>
       </div>
     </div>
@@ -924,109 +1266,182 @@ cssPrefix: pf-v5-c-card
 
 ```
 
-### Hoverable raised
-
-```html isDeprecated
-<div class="pf-v5-c-card pf-m-hoverable-raised" id="card-hoverable-example">
-  <div class="pf-v5-c-card__title">
-    <h2 class="pf-v5-c-card__title-text">Title</h2>
-  </div>
-  <div class="pf-v5-c-card__body">Body</div>
-  <div class="pf-v5-c-card__footer">Footer</div>
-</div>
-
-```
-
-### Selectable raised
+### Clickable and selectable secondary style
 
-```html isDeprecated
-<div
-  class="pf-v5-c-card pf-m-selectable-raised"
-  tabindex="0"
-  id="card-selectable-raised-example"
->
-  <div class="pf-v5-c-card__title">
-    <h2 class="pf-v5-c-card__title-text">Title</h2>
-  </div>
-  <div class="pf-v5-c-card__body">Body</div>
-  <div class="pf-v5-c-card__footer">Footer</div>
-</div>
-
-```
-
-### Selected raised
-
-```html isDeprecated
-<div
-  class="pf-v5-c-card pf-m-selectable-raised pf-m-selected-raised"
-  tabindex="0"
-  id="card-selected-raised-example"
->
-  <div class="pf-v5-c-card__title">
-    <h2 class="pf-v5-c-card__title-text">Title</h2>
+```html
+<div class="pf-v5-l-gallery pf-m-gutter">
+  <div
+    class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-secondary"
+    id="card-clickable-selectable-secondary-example"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-check">
+            <input
+              class="pf-v5-c-check__input"
+              type="checkbox"
+              id="card-clickable-selectable-secondary-example-check"
+              name="card-clickable-selectable-secondary-example-check"
+              aria-labelledby="card-clickable-selectable-secondary-example"
+            />
+            <label
+              class="pf-v5-c-check__label"
+              for="card-clickable-selectable-secondary-example-check"
+              id="card-clickable-selectable-secondary-example-check-label"
+              name="card-clickable-selectable-secondary-example-check"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-clickable-selectable-secondary-example-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">
+            <button class="pf-v5-c-button pf-m-link pf-m-inline">Title</button>
+          </h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
   </div>
-  <div class="pf-v5-c-card__body">Body</div>
-  <div class="pf-v5-c-card__footer">Footer</div>
-</div>
-
-```
 
-### Selectable raised with a hidden input for improved screen reader accessibility
-
-```html isDeprecated
-<input
-  class="pf-v5-c-card__sr-input pf-v5-screen-reader"
-  type="checkbox"
-  tabindex="-1"
-  aria-label="Checkbox to improve screen reader accessibility of a selectable card"
-/>
-<div
-  class="pf-v5-c-card pf-m-selectable-raised"
-  tabindex="0"
-  id="card-selectable-raised-with-input-example"
->
-  <div class="pf-v5-c-card__title">
-    <h2 class="pf-v5-c-card__title-text">Title</h2>
+  <div
+    class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-current pf-m-secondary"
+    id="card-clickable-selectable-secondary-current-example"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-check">
+            <input
+              class="pf-v5-c-check__input"
+              type="checkbox"
+              id="card-clickable-selectable-secondary-current-example-check"
+              name="card-clickable-selectable-secondary-current-example-check"
+              aria-labelledby="card-clickable-selectable-secondary-current-example"
+            />
+            <label
+              class="pf-v5-c-check__label"
+              for="card-clickable-selectable-secondary-current-example-check"
+              id="card-clickable-selectable-secondary-current-example-check-label"
+              name="card-clickable-selectable-secondary-current-example-check"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-clickable-selectable-secondary-current-example-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">
+            <button
+              class="pf-v5-c-button pf-m-link pf-m-inline"
+            >Current card (clicked)</button>
+          </h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
   </div>
-  <div class="pf-v5-c-card__body">Body</div>
-  <div class="pf-v5-c-card__footer">Footer</div>
-</div>
-
-```
 
-### Non selectable raised
-
-```html isDeprecated
-<div
-  class="pf-v5-c-card pf-m-non-selectable-raised"
-  id="card-non-selectable-raised-example"
->
-  <div class="pf-v5-c-card__title">
-    <h2 class="pf-v5-c-card__title-text">Title</h2>
+  <div
+    class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-disabled pf-m-secondary"
+    id="card-clickable-selectable-secondary-example-disabled"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-check">
+            <input
+              class="pf-v5-c-check__input"
+              type="checkbox"
+              disabled
+              id="card-clickable-selectable-secondary-example-disabled-check"
+              name="card-clickable-selectable-secondary-example-disabled-check"
+              aria-labelledby="card-clickable-selectable-secondary-example-disabled"
+            />
+            <label
+              class="pf-v5-c-check__label pf-m-disabled"
+              for="card-clickable-selectable-secondary-example-disabled-check"
+              id="card-clickable-selectable-secondary-example-disabled-check-label"
+              name="card-clickable-selectable-secondary-example-disabled-check"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-clickable-selectable-secondary-example-disabled-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">
+            <button
+              class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
+            >Disabled card</button>
+          </h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
   </div>
-  <div class="pf-v5-c-card__body">Body</div>
-  <div class="pf-v5-c-card__footer">Footer</div>
-</div>
 
-```
-
-### Flat
-
-```html
-<div class="pf-v5-c-card pf-m-flat" id="card-flat-example">
-  <div class="pf-v5-c-card__title">
-    <h2 class="pf-v5-c-card__title-text">Title</h2>
+  <div
+    class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary"
+    id="card-clickable-selectable-secondary-example-selected-disabled"
+  >
+    <div class="pf-v5-c-card__header">
+      <div class="pf-v5-c-card__actions pf-m-no-offset">
+        <div class="pf-v5-c-card__selectable-actions">
+          <div class="pf-v5-c-check">
+            <input
+              class="pf-v5-c-check__input"
+              type="checkbox"
+              checked
+              disabled
+              id="card-clickable-selectable-secondary-example-selected-disabled-check"
+              name="card-clickable-selectable-secondary-example-selected-disabled-check"
+              aria-labelledby="card-clickable-selectable-secondary-example-selected-disabled"
+            />
+            <label
+              class="pf-v5-c-check__label pf-m-disabled"
+              for="card-clickable-selectable-secondary-example-selected-disabled-check"
+              id="card-clickable-selectable-secondary-example-selected-disabled-check-label"
+              name="card-clickable-selectable-secondary-example-selected-disabled-check"
+            ></label>
+          </div>
+        </div>
+      </div>
+      <div class="pf-v5-c-card__header-main">
+        <div
+          class="pf-v5-c-card__title"
+          id="card-clickable-selectable-secondary-example-selected-disabled-title"
+        >
+          <h2 class="pf-v5-c-card__title-text">
+            <button
+              class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
+            >Selected but disabled card</button>
+          </h2>
+        </div>
+      </div>
+    </div>
+    <div class="pf-v5-c-card__body">Body</div>
+    <div class="pf-v5-c-card__footer">Footer</div>
   </div>
-  <div class="pf-v5-c-card__body">Body</div>
-  <div class="pf-v5-c-card__footer">Footer</div>
 </div>
 
 ```
 
-### Rounded
+### Secondary
 
 ```html
-<div class="pf-v5-c-card pf-m-rounded" id="card-rounded-example">
+<div class="pf-v5-c-card pf-m-secondary" id="card-secondary-example">
   <div class="pf-v5-c-card__title">
     <h2 class="pf-v5-c-card__title-text">Title</h2>
   </div>
@@ -1125,6 +1540,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expandable-example-check"
           name="card-expandable-example-check"
           aria-labelledby="card-expandable-example"
@@ -1227,6 +1643,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expandable-image-example-check"
           name="card-expandable-image-example-check"
           aria-labelledby="card-expandable-image-example"
@@ -1314,6 +1731,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expanded-example-check"
           name="card-expanded-example-check"
           aria-labelledby="card-expanded-example"
@@ -1398,6 +1816,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-full-height-example-check"
           name="card-full-height-example-check"
           aria-labelledby="card-full-height-example"
@@ -1482,6 +1901,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-toggle-on-right-example-check"
           name="card-toggle-on-right-example-check"
           aria-labelledby="card-toggle-on-right-example"
@@ -1562,10 +1982,7 @@ A card is a generic rectangular container that can be used to build other compon
 | `.pf-m-selected` | `.pf-v5-c-card` | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-v5-c-card__input`. |
 | `.pf-m-current` | `.pf-v5-c-card` | Modifies a card that is both clickable and selectable for clicked state styling. |
 | `.pf-m-disabled` | `.pf-v5-c-card` | Modifies a card so it is not selectable or clickable.  |
-| `.pf-m-hoverable-raised` | `.pf-v5-c-card` | Modifies the card to include hover styles on `:hover`. |
-| `.pf-m-selectable-raised` | `.pf-v5-c-card` | Modifies a selectable card so that it is selectable. |
-| `.pf-m-selected-raised` | `.pf-v5-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
-| `.pf-m-non-selectable-raised` | `.pf-v5-c-card` | Modifies a selectable card so that it is not selectable. |
+| `.pf-m-secondary` | `.pf-v5-c-card` | Modifies the card to have secondary styling. |
 | `.pf-m-flat` | `.pf-v5-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-v5-c-card` | Modifies the card to have rounded corners. |
 | `.pf-m-plain` | `.pf-v5-c-card` | Modifies the card to have no box shadow and no background color. |