diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md
index 57d7ef78d1..c41cec6f66 100644
--- a/docs/patterns/card/index.md
+++ b/docs/patterns/card/index.md
@@ -6,47 +6,46 @@ tags:
 ---
 
 <script type="module">
-import '@rhds/elements/rh-card/rh-card.js';
-import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
 </script>
 
 <style>
   rh-card {
     display: grid;
     max-width: 360px;
-    &.bar {
-      &::part(header) {
-        background-color: var(--_header-background-color);
-        text-transform: uppercase;
-        font-weight: var(--rh-font-weight-heading-regular, 300);
-        font-size: var(--rh-font-size-body-text-md, 1rem);
-      }
-      &.alt {
-        --rh-card-background-color: #f0f0f0;
-        &[color-palette^="light"] {
-          --rh-card-background-color: #f0f0f0;
-        }
-        &[color-palette^="dark"] {
-          --rh-card-background-color: #3c3f42;
-        } 
-      }
-      &.full::part(header) {
-        padding-inline: 0;
-        padding-block: 0;
-      }
-      &.custom-light-theme {
-        --rh-color-border-subtle-on-light: #EF6461;
-        --rh-color-surface-lightest: #feeded;
-        --rh-color-text-primary-on-light: #30292F;
-      }
-      &.custom-dark-theme {
-        --rh-color-border-subtle-on-dark: #5e40be;
-        --rh-color-surface-darkest: #261a4c;
-        --rh-color-text-primary-on-dark: #e8e4f5;
-      }
+    &.bar::part(header) {
+      margin: 0;
+      text-transform: uppercase;
+      padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
+      background-color: var(--_header-bg, var(--rh-color-surface-light, #e0e0e0));
+      font-weight: var(--rh-font-weight-heading-regular, 300);
+      font-size: var(--rh-font-size-body-text-md, 1rem);
+    }
+    &.full::part(header) {
+      padding: 0;
+    }
+    &.alt {
+      --rh-color-surface-light: #f0f0f0;
+      --rh-color-surface-lighter: #f0f0f0;
+      --rh-color-surface-lightest: #f0f0f0;
+      --rh-color-surface-dark: #3c3f42;
+      --rh-color-surface-darker: #3c3f42;
+      --rh-color-surface-darkest: #3c3f42;
+    }
+    &.custom-light-theme {
+      --rh-color-border-subtle-on-light: #EF6461;
+      --rh-color-surface-lightest: #feeded;
+      --rh-color-text-primary-on-light: #30292F;
+    }
+    &.custom-dark-theme {
+      --rh-color-border-subtle-on-dark: #5e40be;
+      --rh-color-surface-darkest: #261a4c;
+      --rh-color-text-primary-on-dark: #e8e4f5;
     }
   }
 </style>
+
 ## Overview
 
 A card formats content in a small, contained space. It can be used to display a 
@@ -59,34 +58,7 @@ it's near. Several cards can be used together to group related information.
   information on how to use the card element.
 {% endalert %}
 
-## Sample pattern
-
-<rh-card>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend 
-    elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel 
-    dapibus risus. Nullam aliquam felis orci, eget cursus mi lacinia quis. 
-    Vivamus at felis sem.</p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-## Sample - Slotted Title
-
-<rh-card>
-  <h2 slot="header">Headline, sm</h2>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend 
-    elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel 
-    dapibus risus. Nullam aliquam felis orci, eget cursus milacinia quis. 
-    Vivamus at felis sem.
-  </p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-## Sample - alternative color scheme
+## Alternative color scheme
 
 <rh-card class="alt">
   <p>
@@ -101,22 +73,6 @@ it's near. Several cards can be used together to group related information.
   </rh-cta>
 </rh-card>
 
-## Sample - title bar
-
-<rh-card class="bar">
-  <h2 slot="header">Headline, sm</h2>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend 
-    elit sed est egestas, a
-    sollicitudin mauris tincidunt. Pellentesque vel dapibus risus. Nullam 
-    aliquam felis orci, eget cursus mi
-    lacinia quis. Vivamus at felis sem.
-  </p>
-  <rh-cta variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
 ## Title bar
 
 <rh-card class="bar">
@@ -137,29 +93,7 @@ it's near. Several cards can be used together to group related information.
   <rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
 </rh-card>
 
-## Style
-
-A card can be used in light and dark themes.
-
-### Theme
-
-<rh-card color-palette="light">
-  <h2 slot="header">Card title</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit 
-    libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id 
-    elit. Donec id elit non mi porta gravida at eget metus.</p>
-  <rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
-</rh-card>
-
-<rh-card color-palette="dark">
-  <h2 slot="header">Card title</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit 
-    libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id 
-    elit. Donec id elit non mi porta gravida at eget metus.</p>
-  <rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
-</rh-card>
-
-### Custom Theming
+## Custom Theming
 
 To customize a card the design tokens must be altered.  These design tokens are different depending on the context for the card (light or dark theme).
 
@@ -171,8 +105,7 @@ Examples include:
 
 For more information, please see the [card css custom properties](/elements/card/code/#css-custom-properties).
 
-
-#### Custom Light Theme
+### Custom Light Theme
 
   <rh-card color-palette="light" class="custom-light-theme">
     <h2 slot="header">Card title</h2>
@@ -182,7 +115,7 @@ For more information, please see the [card css custom properties](/elements/card
     <rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
   </rh-card>
 
-#### Custom Dark Theme
+### Custom Dark Theme
 
   <rh-card color-palette="dark" class="custom-dark-theme">
     <h2 slot="header">Card title</h2>
@@ -195,17 +128,5 @@ For more information, please see the [card css custom properties](/elements/card
 {% include 'feedback.html' %}
 
 
-## Usage
-
-### Character count
-  The recommended maximum character count for the elements of a card are listed below and include spaces.
-
-  | Element {style="width: 50%" } | Character count |
-  |-------------------------------|-----------------|
-  | Title                         | 20              |
-  | Headline                      | 50              | 
-  | Body text                     | 165             |
-  | Footer                        | 55              |
-
 [element]: /elements/card
 
diff --git a/elements/rh-card/docs/20-guidelines.md b/elements/rh-card/docs/20-guidelines.md
index e5cb778e79..a49be97c4f 100644
--- a/elements/rh-card/docs/20-guidelines.md
+++ b/elements/rh-card/docs/20-guidelines.md
@@ -1,7 +1,12 @@
 ## Usage
 ### Variants
+
 There are several card variants that can be used for a variety of use cases.
 
+{% alert %}
+  For examples of how to implement these patterns, see the [card patterns page](/patterns/card).
+{% endalert %}
+
 - #### Basic
   Use to display basic content or long paragraphs of text. Secondary and 
   Default calls to action may be used.