diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css
index 859272bf8..83d8181d4 100644
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -76,10 +76,20 @@
   }
 }
 
+/* Make these slots "full width"  */
+::slotted([slot='header']),
+::slotted([slot='footer']) {
+  flex-grow: 1;
+}
+
+/* Push slots to sides when the action slots renders */
+.has-actions {
+  justify-content: space-between;
+}
+
 .header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   border-block-end-style: inherit;
   border-block-end-color: var(--wa-color-surface-border);
   border-block-end-width: var(--wa-panel-border-width);
@@ -94,7 +104,6 @@
 .footer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   border-block-start-style: inherit;
   border-block-start-color: var(--wa-color-surface-border);
   border-block-start-width: var(--wa-panel-border-width);
diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts
index 2eabca454..f01ec6dd2 100644
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -69,15 +69,30 @@ export default class WaCard extends WebAwesomeElement {
     // Vertical Orientation
     return html`
       <slot name="media" part="media" class="media"></slot>
-      <header part="header" class="header">
-        <slot name="header"></slot>
-        <slot name="header-actions"></slot>
-      </header>
+
+      ${this.hasSlotController.test('header-actions')
+        ? html`
+          <header part="header" class="header has-actions">
+            <slot name="header"></slot>
+            <slot name="header-actions"></slot>
+          </header>`
+        : html`
+          <header part="header" class="header">
+            <slot name="header"></slot>
+            </header>`
+      }
+
       <slot part="body" class="body"></slot>
-      <footer part="footer" class="footer">
-        <slot name="footer"></slot>
-        <slot name="footer-actions"></slot>
-      </footer>
+      ${this.hasSlotController.test('footer-actions')
+        ? html`
+          <footer part="footer" class="footer has-actions">
+            <slot name="footer"></slot>
+            <slot name="footer-actions"></slot>
+          </footer>`
+        : html`
+          <footer part="footer" class="footer">
+            <slot name="footer"></slot>
+          </footer>`}
     `;
   }
 }