diff --git a/.changeset/clever-yaks-thank.md b/.changeset/clever-yaks-thank.md
new file mode 100644
index 0000000000..b10af4b792
--- /dev/null
+++ b/.changeset/clever-yaks-thank.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": minor
+---
+`<pf-card>`: added `title` slot, for when the title is not inline with any slotted header actions
diff --git a/elements/pf-card/demo/header-images-and-actions.html b/elements/pf-card/demo/header-images-and-actions.html
new file mode 100644
index 0000000000..03cd21ee88
--- /dev/null
+++ b/elements/pf-card/demo/header-images-and-actions.html
@@ -0,0 +1,31 @@
+<pf-card>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       xml:space="preserve"
+       slot="header"
+       fill="#030303"
+       width="300px"
+       viewBox="0 0 706.3 132.5">
+    <path d="M197.2 83.9V48.6h15.2c2.2 0 4.1.3 5.6 1s2.8 1.5 3.7 2.6c1 1.1 1.6 2.3 2.1 3.6.4 1.3.6 2.7.6 4 0 .9-.1 1.7-.3 2.6-.2.9-.5 1.7-.9 2.6-.4.8-.9 1.6-1.6 2.3-.6.7-1.4 1.4-2.3 1.9-.9.5-1.9 1-3.1 1.3a16 16 0 0 1-3.9.5H204v13h-6.8zm15.5-19.5c.9 0 1.6-.1 2.2-.4.6-.3 1.1-.6 1.4-1.1.4-.4.6-.9.8-1.5.2-.6.3-1.1.3-1.7 0-.5-.1-1-.2-1.6-.1-.5-.4-1-.7-1.5-.4-.5-.8-.8-1.4-1.1-.6-.3-1.4-.4-2.3-.4h-8.6v9.4h8.5zM271.6 83.9l-2.7-7.3h-13.6l-2.7 7.3h-7.3l13.5-35.4h6.7L279 83.9h-7.4zm-8.4-22.7c-.2-.4-.4-.9-.6-1.5-.2-.6-.4-1.1-.5-1.7-.1.5-.3 1.1-.5 1.7-.2.6-.4 1.1-.6 1.5l-3.5 9.2h9.2l-3.5-9.2zM317.3 55.2V84h-6.8V55.2h-10.1v-6.6h27v6.6h-10.1zM370.2 55.2V84h-6.8V55.2h-10.1v-6.6h27v6.6h-10.1zM408.5 83.9V48.6h24.1v6.5h-17.3v7.4h10.2V69h-10.2v8.5h18.4V84h-25.2zM462.4 83.9V48.6h16.4c2.2 0 4.1.3 5.6.9 1.5.6 2.7 1.4 3.6 2.5.9 1 1.6 2.2 2 3.5.4 1.3.6 2.7.6 4.2 0 1-.1 2-.4 3-.3 1-.7 2-1.3 2.9-.6.9-1.3 1.8-2.1 2.5-.9.7-1.8 1.3-3 1.7l6.9 14.1H483l-6.6-13.2h-7.1v13.2h-6.9zm16.5-19.6c.9 0 1.6-.1 2.2-.4.6-.3 1.1-.6 1.4-1 .4-.4.6-.9.8-1.5.2-.6.2-1.1.2-1.7 0-.6-.1-1.1-.2-1.7-.1-.6-.4-1-.7-1.5-.3-.4-.8-.8-1.4-1-.6-.3-1.4-.4-2.3-.4h-9.7v9.2h9.7zM541.9 83.9l-14-20.6c-.2-.3-.5-.8-.8-1.3-.3-.5-.5-1-.7-1.4.1.4.1.8.1 1.3V83.8h-6.8V48.6h6.4L539.8 69c.2.3.5.7.7 1.2.3.5.5 1 .7 1.4 0-.5-.1-1-.1-1.4V48.6h6.8V84h-6zM578.4 83.9V48.6h23.7v6.5h-16.9v7.4H596V69h-10.7v15h-6.9zM629.8 83.9V48.6h6.8v28.8h17.1V84h-23.9zM686.4 83.9V70.2l-13.1-21.6h7.7l8.7 14.5 8.7-14.5h7.7L693 70.2V84h-6.6z"/>
+    <path d="m49 103-21.2 4.9L0 68.4 70 0l70 68.4-27.8 39.4L91 103l-21 29.5L49 103zm21 25.7 18.6-26.2-7.2-1.7-11 16.2-11.9-16.2-7.2 1.7L70 128.7zm.4-15.6 9.2-13.5L70 6.7l-9.5 92.9 9.9 13.5zm-41.6-7.7 18.8-4.3-13.8-19.4 4.1-9.3L25.2 55 58 14.9 2.9 68.7l25.9 36.7zm82.4 0 16.3-23.1 9.6-13.6L82 14.9 114.9 55l-12.8 17.4 4.1 9.3L92.4 101l18.8 4.4zm-21.1-4.9 13.6-19.1-3-6.9-18 24.3 7.4 1.7zm-40.1 0 7.3-1.7-17.9-24.3-3 6.9L50 100.5zm31.9-4.3 17.6-24.1-26.6-60.5 9 84.6zm-23.8 0 9-84.6-26.6 60.5 17.6 24.1zM39 70 66.1 8.5 28 55.1 39 70zm62.1 0 11-15L74 8.5 101.1 70z"/>
+  </svg>
+  <pf-dropdown slot="header">
+    <pf-button slot="toggle" plain icon="ellipsis-v"></pf-button>
+    <pf-dropdown-menu slot="menu">
+      <pf-dropdown-item>Action</pf-dropdown-item>
+      <pf-dropdown-item href="#">Link</pf-dropdown-item>
+      <pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
+      <pf-dropdown-item href="#" disabled>Disabled Link</pf-dropdown-item>
+      <hr>
+      <pf-dropdown-item>Separated Action</pf-dropdown-item>
+      <pf-dropdown-item href="#">Separated Link</pf-dropdown-item>
+    </pf-dropdown-menu>
+  </pf-dropdown>
+  <h2 slot="title">Title</h2>
+  <span>Body</span>
+  <span slot="footer">Footer</span>
+</pf-card>
+
+<script type="module">
+  import '@patternfly/elements/pf-card/pf-card.js';
+  import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
+</script>
diff --git a/elements/pf-card/demo/modifiers.html b/elements/pf-card/demo/modifiers.html
new file mode 100644
index 0000000000..d25fab3f30
--- /dev/null
+++ b/elements/pf-card/demo/modifiers.html
@@ -0,0 +1,107 @@
+<section>
+  <form id="card-settings">
+    <pf-switch id="flat" data-attribute="flat"></pf-switch>
+    <label for="flat">Flat</label>
+
+    <pf-switch id="rounded" data-attribute="rounded"></pf-switch>
+    <label for="rounded">Rounded</label>
+
+    <pf-switch id="plain" data-attribute="plain"></pf-switch>
+    <label for="plain">Plain</label>
+
+    <pf-switch id="full-height" data-attribute="full-height"></pf-switch>
+    <label for="full-height">Full Height</label>
+
+    <pf-switch id="size-compact" data-attribute="size" data-value="compact"></pf-switch>
+    <label for="size-compact">Compact</label>
+
+    <pf-switch id="size-large" data-attribute="size" data-value="large"></pf-switch>
+    <label for="size-large">Large</label>
+  </form>
+
+  <div id="card-container">
+    <pf-card>
+      <h2 slot="header">Lightest card</h2>
+      <p>This is the lightest pf-card and <a href="#">a link</a>, and <a href=".">a visited link</a> with <code>border</code>.</p>
+      <pf-button slot="footer">Try</pf-button>
+      <pf-button slot="footer">Buy</pf-button>
+    </pf-card>
+  </div>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-card/pf-card.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+  import '@patternfly/elements/pf-switch/pf-switch.js';
+
+  const form = document.getElementById('card-settings');
+  const card = document.querySelector('pf-card');
+
+  form.addEventListener('change', async function(event) {
+    await Promise.all(Array.from(document.querySelectorAll('pf-switch'), x => x.updateComplete));
+    const { checked } = event.target;
+    const { attribute, value } = event.target.dataset;
+    switch (attribute) {
+      case 'flat':
+      case 'rounded':
+      case 'plain':
+      case 'full-height':
+        card.toggleAttribute(attribute, checked);
+        break;
+      case 'size':
+        if (checked) {
+          card.setAttribute('size', value);
+        } else if (!checked && form.querySelector('[data-attribute="size"][checked]')) {
+          card.setAttribute('size', form.querySelector('[data-attribute="size"][checked]').dataset.value);
+        } else if(!checked) {
+          card.removeAttribute('size');
+        }
+        break;
+    }
+  });
+
+</script>
+
+<style>
+  [data-demo="pf-card"] { display: contents; }
+
+  section {
+    padding: 2em;
+    background: #eeeeee;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: max-content 1fr;
+    height: 100%;
+    position: relative;
+    @media (min-width: 800px) {
+      grid-template-columns: 1fr 4fr;
+      grid-template-rows: 1fr;
+    }
+  }
+
+  form {
+    display: grid;
+    grid-template-columns: max-content auto;
+    grid-auto-rows: max-content;
+    gap: 1em;
+  }
+
+  pf-card {
+    max-width: 50%;
+    margin: 0 auto;
+  }
+
+  #card-container {
+    padding: 2em;
+    /* resize: vertical; */
+    /* overflow: auto; */
+    /* min-height: 40vh; */
+    background: repeating-linear-gradient(
+      45deg,
+      #fff,
+      #fff 10px,
+      #eee 10px,
+      #eee 20px
+    );
+  }
+</style>
diff --git a/elements/pf-card/demo/pf-card.html b/elements/pf-card/demo/pf-card.html
index 300c4e9a5e..3f5df03b08 100644
--- a/elements/pf-card/demo/pf-card.html
+++ b/elements/pf-card/demo/pf-card.html
@@ -1,18 +1,15 @@
 <pf-card>
-  <h2 slot="header">Lightest card</h2>
-  <p>This is the lightest pf-card and <a href="#">a link</a>, and <a href=".">a visited link</a> with <code>border</code>.</p>
-  <pf-button slot="footer">Try</pf-button>
-  <pf-button slot="footer">Buy</pf-button>
+  <h2 slot="header">Header</h2>
+  <span>Body</span>
+  <span slot="footer">Footer</span>
 </pf-card>
 
 <script type="module">
   import '@patternfly/elements/pf-card/pf-card.js';
-  import '@patternfly/elements/pf-button/pf-button.js';
 </script>
 
 <style>
 pf-card {
   margin: 1em;
-  max-width: 50%;
 }
 </style>
diff --git a/elements/pf-card/demo/settings.html b/elements/pf-card/demo/settings.html
deleted file mode 100644
index a242b24405..0000000000
--- a/elements/pf-card/demo/settings.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<section>
-  <form id="card-settings">
-    <pf-switch id="flat" data-attribute="flat"></pf-switch>
-    <label for="flat">Flat</label>
-
-    <pf-switch id="rounded" data-attribute="rounded"></pf-switch>
-    <label for="rounded">Rounded</label>
-
-    <pf-switch id="plain" data-attribute="plain"></pf-switch>
-    <label for="plain">Plain</label>
-
-    <pf-switch id="full-height" data-attribute="full-height"></pf-switch>
-    <label for="full-height">Full Height</label>
-
-    <pf-switch id="size" data-attribute="size"></pf-switch>
-    <label for="size" data-state="on">Compact</label>
-    <label for="size" data-state="off">Large</label>
-  </form>
-
-  <div id="card-container" class="resize">
-    <pf-card>
-      <h2 slot="header">Lightest card</h2>
-      <p>This is the lightest pf-card and <a href="#">a link</a>, and <a href=".">a visited link</a> with <code>border</code>.</p>
-      <pf-button slot="footer">Try</pf-button>
-      <pf-button slot="footer">Buy</pf-button>
-    </pf-card>
-  </div>
-</section>
-
-<script type="module">
-  import '@patternfly/elements/pf-card/pf-card.js';
-  import '@patternfly/elements/pf-button/pf-button.js';
-  import '@patternfly/elements/pf-switch/pf-switch.js';
-
-  const form = document.getElementById('card-settings');
-  const card = document.querySelector('pf-card');
-
-  form.addEventListener('change', function(event) {
-    const { checked } = event.target;
-    const { attribute } = event.target.dataset;
-    switch (attribute) {
-      case 'flat':
-      case 'rounded':
-      case 'plain':
-      case 'full-height':
-        card.toggleAttribute(attribute, checked);
-        break;
-      case 'size':
-        card.setAttribute('size', form.querySelector('label[for="size"]:not([hidden])').textContent.toLowerCase());
-        break;
-    }
-  });
-
-</script>
-
-<style>
-section {
-  padding: 2em;
-  background: #eeeeee;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content 1fr;
-  @media (min-width: 800px) {
-    grid-template-columns: 1fr 4fr;
-    grid-template-rows: 1fr;
-  }
-}
-
-form {
-  display: grid;
-  grid-template-columns: max-content auto;
-  grid-auto-rows: max-content;
-  gap: 1em;
-}
-
-pf-card {
-  max-width: 50%;
-  margin: 0 auto;
-}
-
-.resize {
-  padding: 2em;
-  resize: vertical;
-  overflow: auto;
-  min-height: 40vh;
-  background: repeating-linear-gradient(
-    45deg,
-    #fff,
-    #fff 10px,
-    #eee 10px,
-    #eee 20px
-  );
-}
-</style>
diff --git a/elements/pf-card/demo/title-inline-with-images-and-actions.html b/elements/pf-card/demo/title-inline-with-images-and-actions.html
new file mode 100644
index 0000000000..4157935d7e
--- /dev/null
+++ b/elements/pf-card/demo/title-inline-with-images-and-actions.html
@@ -0,0 +1,22 @@
+<pf-card>
+  <h2 slot="header">This is a really really really really really really really really really really long header </h2>
+  <pf-dropdown slot="header">
+    <pf-button slot="toggle" plain icon="ellipsis-v"></pf-button>
+    <pf-dropdown-menu slot="menu">
+      <pf-dropdown-item>Action</pf-dropdown-item>
+      <pf-dropdown-item href="#">Link</pf-dropdown-item>
+      <pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
+      <pf-dropdown-item href="#" disabled>Disabled Link</pf-dropdown-item>
+      <hr>
+      <pf-dropdown-item>Separated Action</pf-dropdown-item>
+      <pf-dropdown-item href="#">Separated Link</pf-dropdown-item>
+    </pf-dropdown-menu>
+  </pf-dropdown>
+  <span>Body</span>
+  <span slot="footer">Footer</span>
+</pf-card>
+
+<script type="module">
+  import '@patternfly/elements/pf-card/pf-card.js';
+  import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
+</script>
diff --git a/elements/pf-card/docs/pf-card.md b/elements/pf-card/docs/pf-card.md
index 7410a941ea..e8101deb2b 100644
--- a/elements/pf-card/docs/pf-card.md
+++ b/elements/pf-card/docs/pf-card.md
@@ -13,7 +13,9 @@
 
 {% band header="Usage" %}
 
-  ### Compact card
+  ### Basic cards
+
+  ### Modifiers
   {% htmlexample %}
   <pf-card size="compact">
     <h3 slot="header">Header</h3>
@@ -22,20 +24,20 @@
   </pf-card>
   {% endhtmlexample %}
 
-  ### Rounded card
+  ### Large card
   {% htmlexample %}
-  <pf-card rounded>
-    <h3 slot="header">Header</h3>
-    <p>This is the rounded card</p>
+  <pf-card size="large">
+    <h3 slot="header">Large card</h3>
+    <p>This is the large card</p>
     <a slot="footer" href="#">Link in the footer</a>
   </pf-card>
   {% endhtmlexample %}
 
-  ### Large card
+  ### Rounded card
   {% htmlexample %}
-  <pf-card size="large">
-    <h3 slot="header">Large card</h3>
-    <p>This is the large card</p>
+  <pf-card rounded>
+    <h3 slot="header">Header</h3>
+    <p>This is the rounded card</p>
     <a slot="footer" href="#">Link in the footer</a>
   </pf-card>
   {% endhtmlexample %}
@@ -57,6 +59,65 @@
     <a slot="footer" href="#">Link in the footer</a>
   </pf-card>
   {% endhtmlexample %}
+
+  ### Header images and actions
+  You can include header images and actions in the `header` slot, along with a
+  title in the `title` slot. The following example includes an SVG image, and
+  also includes a kebab dropdown.
+
+  {% htmlexample %}
+  <pf-card>
+    <svg xmlns="http://www.w3.org/2000/svg"
+         xml:space="preserve"
+         slot="header"
+         fill="#030303"
+         width="300px"
+         viewBox="0 0 706.3 132.5">
+      <path d="M197.2 83.9V48.6h15.2c2.2 0 4.1.3 5.6 1s2.8 1.5 3.7 2.6c1 1.1 1.6 2.3 2.1 3.6.4 1.3.6 2.7.6 4 0 .9-.1 1.7-.3 2.6-.2.9-.5 1.7-.9 2.6-.4.8-.9 1.6-1.6 2.3-.6.7-1.4 1.4-2.3 1.9-.9.5-1.9 1-3.1 1.3a16 16 0 0 1-3.9.5H204v13h-6.8zm15.5-19.5c.9 0 1.6-.1 2.2-.4.6-.3 1.1-.6 1.4-1.1.4-.4.6-.9.8-1.5.2-.6.3-1.1.3-1.7 0-.5-.1-1-.2-1.6-.1-.5-.4-1-.7-1.5-.4-.5-.8-.8-1.4-1.1-.6-.3-1.4-.4-2.3-.4h-8.6v9.4h8.5zM271.6 83.9l-2.7-7.3h-13.6l-2.7 7.3h-7.3l13.5-35.4h6.7L279 83.9h-7.4zm-8.4-22.7c-.2-.4-.4-.9-.6-1.5-.2-.6-.4-1.1-.5-1.7-.1.5-.3 1.1-.5 1.7-.2.6-.4 1.1-.6 1.5l-3.5 9.2h9.2l-3.5-9.2zM317.3 55.2V84h-6.8V55.2h-10.1v-6.6h27v6.6h-10.1zM370.2 55.2V84h-6.8V55.2h-10.1v-6.6h27v6.6h-10.1zM408.5 83.9V48.6h24.1v6.5h-17.3v7.4h10.2V69h-10.2v8.5h18.4V84h-25.2zM462.4 83.9V48.6h16.4c2.2 0 4.1.3 5.6.9 1.5.6 2.7 1.4 3.6 2.5.9 1 1.6 2.2 2 3.5.4 1.3.6 2.7.6 4.2 0 1-.1 2-.4 3-.3 1-.7 2-1.3 2.9-.6.9-1.3 1.8-2.1 2.5-.9.7-1.8 1.3-3 1.7l6.9 14.1H483l-6.6-13.2h-7.1v13.2h-6.9zm16.5-19.6c.9 0 1.6-.1 2.2-.4.6-.3 1.1-.6 1.4-1 .4-.4.6-.9.8-1.5.2-.6.2-1.1.2-1.7 0-.6-.1-1.1-.2-1.7-.1-.6-.4-1-.7-1.5-.3-.4-.8-.8-1.4-1-.6-.3-1.4-.4-2.3-.4h-9.7v9.2h9.7zM541.9 83.9l-14-20.6c-.2-.3-.5-.8-.8-1.3-.3-.5-.5-1-.7-1.4.1.4.1.8.1 1.3V83.8h-6.8V48.6h6.4L539.8 69c.2.3.5.7.7 1.2.3.5.5 1 .7 1.4 0-.5-.1-1-.1-1.4V48.6h6.8V84h-6zM578.4 83.9V48.6h23.7v6.5h-16.9v7.4H596V69h-10.7v15h-6.9zM629.8 83.9V48.6h6.8v28.8h17.1V84h-23.9zM686.4 83.9V70.2l-13.1-21.6h7.7l8.7 14.5 8.7-14.5h7.7L693 70.2V84h-6.6z"/>
+      <path d="m49 103-21.2 4.9L0 68.4 70 0l70 68.4-27.8 39.4L91 103l-21 29.5L49 103zm21 25.7 18.6-26.2-7.2-1.7-11 16.2-11.9-16.2-7.2 1.7L70 128.7zm.4-15.6 9.2-13.5L70 6.7l-9.5 92.9 9.9 13.5zm-41.6-7.7 18.8-4.3-13.8-19.4 4.1-9.3L25.2 55 58 14.9 2.9 68.7l25.9 36.7zm82.4 0 16.3-23.1 9.6-13.6L82 14.9 114.9 55l-12.8 17.4 4.1 9.3L92.4 101l18.8 4.4zm-21.1-4.9 13.6-19.1-3-6.9-18 24.3 7.4 1.7zm-40.1 0 7.3-1.7-17.9-24.3-3 6.9L50 100.5zm31.9-4.3 17.6-24.1-26.6-60.5 9 84.6zm-23.8 0 9-84.6-26.6 60.5 17.6 24.1zM39 70 66.1 8.5 28 55.1 39 70zm62.1 0 11-15L74 8.5 101.1 70z"/>
+    </svg>
+    <pf-dropdown slot="header">
+      <pf-button slot="toggle" plain icon="ellipsis-v"></pf-button>
+      <pf-dropdown-menu slot="menu">
+        <pf-dropdown-item>Action</pf-dropdown-item>
+        <pf-dropdown-item href="#">Link</pf-dropdown-item>
+        <pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
+        <pf-dropdown-item href="#" disabled>Disabled Link</pf-dropdown-item>
+        <hr>
+        <pf-dropdown-item>Separated Action</pf-dropdown-item>
+        <pf-dropdown-item href="#">Separated Link</pf-dropdown-item>
+      </pf-dropdown-menu>
+    </pf-dropdown>
+    <h2 slot="title">Title</h2>
+    <span>Body</span>
+    <span slot="footer">Footer</span>
+  </pf-card>
+  {% endhtmlexample %}
+
+  ### Title inline with images and actions 
+  Slotting the `<h2>` into the `header` slot, instead of the `title` slot will
+  style it inline with any images or actions.
+
+  {% htmlexample %}
+  <pf-card>
+    <h2 slot="header">This is a really really really really really really really really really really long header </h2>
+    <pf-dropdown slot="header">
+      <pf-button slot="toggle" plain icon="ellipsis-v"></pf-button>
+      <pf-dropdown-menu slot="menu">
+        <pf-dropdown-item>Action</pf-dropdown-item>
+        <pf-dropdown-item href="#">Link</pf-dropdown-item>
+        <pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
+        <pf-dropdown-item href="#" disabled>Disabled Link</pf-dropdown-item>
+        <hr>
+        <pf-dropdown-item>Separated Action</pf-dropdown-item>
+        <pf-dropdown-item href="#">Separated Link</pf-dropdown-item>
+      </pf-dropdown-menu>
+    </pf-dropdown>
+    <span>Body</span>
+    <span slot="footer">Footer</span>
+  </pf-card>
+  {% endhtmlexample %}
+
 {% endband %}
 
 {% renderSlots %}
@@ -79,3 +140,8 @@
 {% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
 
 {% renderCssParts %}{% endrenderCssParts %}
+
+<script type="module">
+  import '@patternfly/elements/pf-card/pf-card.js';
+  import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
+</script>
diff --git a/elements/pf-card/pf-card.css b/elements/pf-card/pf-card.css
index 7ffeddb163..93f47a4ade 100644
--- a/elements/pf-card/pf-card.css
+++ b/elements/pf-card/pf-card.css
@@ -1,105 +1,202 @@
 :host {
+	--pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+	--pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
+	--pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif);
+	--pf-c-card__title--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold, 700);
+	--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card__body--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md, 1rem);
+	--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	--pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md, 1rem) * -1);
+	--pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
+	--pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
+	--pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+	--pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+	--pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+	--pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+	--pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+	--pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg, 3px);
+	--pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+	--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+	--pf-c-card--m-selectable-raised--before--Right: 0;
+	--pf-c-card--m-selectable-raised--before--Bottom: 0;
+	--pf-c-card--m-selectable-raised--before--Left: 0;
+	--pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+	--pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+	--pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
+	--pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl, 4px);
+	--pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
+	--pf-c-card--m-selectable-raised--before--Transition: none;
+	--pf-c-card--m-selectable-raised--before--ScaleY: 1;
+	--pf-c-card--m-selectable-raised--before--TranslateY: 0;
+	--pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+	--pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+	--pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+	--pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+	--pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
+	--pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400, #73bcf7);
+	--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100, #06c);
+	--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
+	--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
+	--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
+	--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
+	--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
+	--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs, 100);
+	--pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
+	--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
+	--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
+	--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
+	--pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);
+	--pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);
+	--pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
+	--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200, #d2d2d2);
+	--pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+	--pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md, 1rem);
+	--pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl, 1.25rem);
+	--pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl, 2rem);
+	--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem);
+	--pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
+	--pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	--pf-c-card--m-full-height--Height: 100%;
+	--pf-c-card--m-plain--BoxShadow: none;
+	--pf-c-card--m-plain--BackgroundColor: transparent;
+	--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
+	--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
+	--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	--pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100, #06c);
   display: flex;
   flex-direction: column;
-
-  background-color: var(--pf-c-card--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
-  box-shadow: var(--pf-c-card--BoxShadow, var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)));
+	background-color: var(--pf-c-card--BackgroundColor);
+	box-shadow: var(--pf-c-card--BoxShadow);
 }
 
-:host([size="compact"]) {
-  --_pf-c-card__body--FontSize: var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));
-  --_pf-c-card__footer--FontSize: var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));
-  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));
-  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));
-  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));
-  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));
-  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem));
+[hidden],
+.empty {
+  display: none !important;
 }
 
-:host([size="large"]) {
-  --pf-c-card__title--FontSize: var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));
-  --_pf-c-card--first-child--PaddingTop: var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));
-  --_pf-c-card--child--PaddingRight: var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));
-  --_pf-c-card--child--PaddingBottom: var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));
-  --_pf-c-card--child--PaddingLeft: var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));
-  --_pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));
+header {
+  padding-block-start: var(--pf-c-card--first-child--PaddingTop);
+  padding-block-end: var(--pf-c-card__title--not--last-child--PaddingBottom);
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
 }
 
-:host([flat]) {
-  --pf-c-card--BoxShadow: none;
-  border: var(--pf-c-card--m-flat--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid var(--pf-c-card--m-flat--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));
-}
+header ::slotted(*) {
+  margin-block: 0 !important;
 
-:host([plain]) {
-  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow, none);
-  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor, transparent);
+  font-family: var(--pf-c-card__title--FontFamily) !important;
+  font-size: var(--pf-c-card__title--FontSize) !important;
+  font-weight: var(--pf-c-card__title--FontWeight) !important;
 }
 
-:host([rounded]) {
-  border-radius: var(--pf-c-card--m-rounded--BorderRadius, var(--pf-global--BorderRadius--sm, 3px));
+header ::slotted(pf-dropdown) {
+  margin-inline-start: auto;
 }
 
-:host([full-height]) {
-  height: var(--pf-c-card--m-full-height--Height, 100%);
-  --_pf-c-card__body--FullHeight--Flex: 1 1 auto;
+article {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 [part="header"],
 [part="body"],
 [part="footer"] {
-  padding-inline-start: var(--_pf-c-card--child--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
-  padding-inline-end: var(--_pf-c-card--child--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));
-  padding-block-end: var(--_pf-c-card--child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem));
+  padding-inline-start: var(--pf-c-card--child--PaddingLeft);
+  padding-inline-end: var(--pf-c-card--child--PaddingRight);
+  padding-block-end: var(--pf-c-card--child--PaddingBottom);
 }
 
-[part="header"] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+#title {
+  display: block;
+  flex: 1 0 100%;
+  padding-block-start: var(--pf-c-card__title--not--last-child--PaddingBottom);
 }
 
 [part="body"] {
-  font-size: var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));
-  flex: var(--_pf-c-card__body--FullHeight--Flex, initial);
+  font-size: var(--pf-c-card__body--FontSize);
+  flex: var(--pf-c-card__body--FullHeight--Flex);
 }
 
-[part=body] ::slotted(:not([slot]):first-of-type) {
+[part="body"] ::slotted(:not([slot]):first-of-type) {
   margin-block-start: 0 !important;
 }
 
-[part=body] ::slotted(:not([slot]):last-of-type) {
+[part="body"] ::slotted(:not([slot]):last-of-type) {
   margin-block-end: 0 !important;
 }
 
-header {
-  padding-block-start: var(--_pf-c-card--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));
-  padding-block-end: var(--_pf-c-card__title--not--last-child--PaddingBottom, var(--pf-global--spacer--md, 1rem));
-}
-
-header ::slotted(*) {
-  margin-block: 0 !important;
-
-  font-family: var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif)) !important;
-  font-size: var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem)) !important;
-  font-weight: var(--pf-c-card__title--FontWeight, var(--pf-global--FontWeight--bold, 700)) !important;
-}
-
 [part="footer"] {
   margin-block-start: auto;
   display: flex;
   gap: 0.5em;
   inset-block-end: 0;
+  font-size: var(--pf-c-card__footer--FontSize);
+}
 
-  font-size: var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));
+:host([size="compact"]) {
+	--pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
+	--pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
+	--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);
+	--pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);
+	--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);
+	--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);
+	--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);
+	--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
 }
 
-article {
-  position: relative;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+:host([size="large"]) {
+	--pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
+	--pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
+	--pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
+	--pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
+	--pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);
+	--pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);
+	--pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);
 }
 
-.empty {
-  display: none;
+:host([flat]) {
+  --pf-c-card--BoxShadow: none;
+  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
+}
+
+:host([plain]) {
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
+}
+
+:host([rounded]) {
+  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
+}
+
+:host([full-height]) {
+  height: var(--pf-c-card--m-full-height--Height);
+  --pf-c-card__body--FullHeight--Flex: 1 1 auto;
 }
+
diff --git a/elements/pf-card/pf-card.ts b/elements/pf-card/pf-card.ts
index 9e5d9c1b7f..890744e900 100644
--- a/elements/pf-card/pf-card.ts
+++ b/elements/pf-card/pf-card.ts
@@ -17,11 +17,17 @@ import style from './pf-card.css';
  * @summary Gives a preview of information in a small layout
  *
  * @slot header
- *       If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).
- *       An icon, svg, or use of the icon component are also valid in this region.
- * @slot - Any content that is not designated for the header or footer slot, will go to this slot.
+ *       When included, defines the contents of a card. Card headers can contain images as well as
+ *       the title of a card and an actions menu represented by the right-aligned kebab.
+ *       In most cases, your card should include a header. The only exceptions are when cards being
+ *       used as a layout element to create a white background behind other content.
+ * @slot title
+ *       Communicates the title of a card if it's not included in the header.
+ *       If a card will be utilized as a selectable and clickable card, the title needs to be made as a linked text to trigger action and indicate interaction.
+ * @slot - Body. Provides details about the item. A card body can include any combination of static
+ *         text and/or active content.
  * @slot footer
- *       Use this slot for anything that you want to be stuck to the base of the card.
+ *       Contains external links, actions, or static text at the bottom of a card.
  *
  * @csspart header - The container for *header* content
  * @csspart body - The container for *body* content
@@ -79,7 +85,7 @@ export class PfCard extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) plain = false;
 
-  #slots = new SlotController(this, 'header', null, 'footer');
+  #slots = new SlotController(this, 'header', 'title', null, 'footer');
 
   render() {
     return html`
@@ -88,6 +94,7 @@ export class PfCard extends LitElement {
                 part="header"
                 class="${classMap({ empty: this.#slots.isEmpty('header') })}">
           <slot name="header"></slot>
+          <slot id="title" name="title" ?hidden="${this.#slots.isEmpty('title')}"></slot>
         </header>
         <div id="body"
              part="body"