diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index bb50a96cd..daf427d79 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -15,9 +15,9 @@ icon: card
 
   <strong>Mittens</strong><br />
   This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
+  <small class="wa-caption-m">6 weeks old</small>
 
-  <div slot="footer">
+  <div slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating label="Rating"></wa-rating>
   </div>
@@ -27,16 +27,6 @@ icon: card
   .card-overview {
     width: 300px;
   }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
 </style>
 ```
 
@@ -65,9 +55,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
 
 ```html {.example}
 <wa-card with-header class="card-header">
-  <div slot="header">
+  <div slot="header" class="wa-split">
     Header Title
-    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
+    <wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
   </div>
 
   This card has a header. You can put all sorts of things in it!
@@ -78,19 +68,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
     max-width: 300px;
   }
 
-  .card-header [slot='header'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
   .card-header h3 {
     margin: 0;
   }
-
-  .card-header wa-icon-button {
-    font-size: var(--wa-font-size-m);
-  }
 </style>
 ```
 
@@ -103,7 +83,7 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
 <wa-card with-footer class="card-footer">
   This card has a footer. You can put all sorts of things in it!
 
-  <div slot="footer">
+  <div slot="footer" class="wa-split">
     <wa-rating></wa-rating>
     <wa-button variant="brand">Preview</wa-button>
   </div>
@@ -113,12 +93,6 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
   .card-footer {
     max-width: 300px;
   }
-
-  .card-footer [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
 </style>
 ```
 
@@ -153,7 +127,7 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="small">
   This is a small card.
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
@@ -162,7 +136,7 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="medium">
   This is a medium card (default).
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>
@@ -171,7 +145,7 @@ Use the `size` attribute to change a card's size.
 <wa-card with-footer size="large">
   This is a large card.
 
-  <footer slot="footer" class="wa-flank">
+  <footer slot="footer" class="wa-split">
     <wa-button variant="brand" pill>More Info</wa-button>
     <wa-rating></wa-rating>
   </footer>