diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md
index c41cec6f66..2b15997747 100644
--- a/docs/patterns/card/index.md
+++ b/docs/patterns/card/index.md
@@ -11,39 +11,9 @@ tags:
 </script>
 
 <style>
-  rh-card {
-    display: grid;
-    max-width: 360px;
-    &.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;
-    }
-  }
+.element-docs .card-patterns copy-permalink.h3 {
+  margin-block-start: 0;
+}
 </style>
 
 ## Overview
@@ -58,40 +28,164 @@ it's near. Several cards can be used together to group related information.
   information on how to use the card element.
 {% endalert %}
 
-## Alternative color scheme
-
-<rh-card class="alt">
-  <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">
-  <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 variant="primary" slot="footer"><a href="#">Footer</a></rh-cta>
-</rh-card>
-
-## Image title bar
-
-<rh-card class="bar full">
-  <img src="./kitten-900x300.jpeg" slot="header">
-  <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>
+## Patterns
+
+<section class="multi-column--min-400-wide card-patterns">
+
+<div>
+
+  ### Alternative color scheme
+
+  <style>
+    rh-card.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;
+    }
+  </style>
+
+  <rh-card class="alt">
+
+  Card's color scheme can be modified using the `--rh-color-surface-*`
+  Tokens. However, before modifying design tokens, first determine if one of
+  card's [existing color palettes](/elements/card/code/#attributes) should be used instead.
+
+  {#
+  Read more about color palettes and themes in the
+  [getting started](/get-started/color/) section.
+  #}
+
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+</div><div>
+
+  ### Image title bar
+
+  <style>
+    rh-card.image::part(header) {
+      padding: 0;
+      margin: 0;
+    }
+  </style>
+
+  <rh-card class="image">
+    <img src="./kitten-900x300.jpeg" slot="header">
+    <p>Use to add an image to the basic style above the text.
+       Secondary and Default calls to action may be used.</p>
+    <rh-cta slot="footer" variant="secondary">
+      <a href="#">Footer</a>
+    </rh-cta>
+  </rh-card>
+
+</div><div>
+
+  ### List
+  Use to display a short amount of content using various list styles. 
+  Secondary and Default calls to action may be used.
+
+</div><div>
+
+  ### Data
+  Use to display quick facts or short data points under a label. A Secondary 
+  call to action may be used or not.
+
+</div><div>
+
+  ### Logo
+  Use to display a customer logo in a variety of arrangements. A call to 
+  action is required, otherwise use a logo wall.
+
+</div><div>
+
+  ### Bar
+
+  <style>
+    rh-card.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);
+      flex-direction: row;
+      gap: var(--rh-space-lg);
+    }
+  </style>
+
+  <rh-card class="bar">
+    {# <rh-icon slot="header" set="ui" icon="information"></rh-icon> #}
+    <svg slot="header" width="var(--rh-size-icon-02)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path d="M16 0C7.178 0 0 7.178 0 16s7.178 16 16 16 16-7.178 16-16S24.822 0 16 0Zm1.25 23a1.25 1.25 0 1 1-2.5 0v-8a1.25 1.25 0 1 1 2.5 0v8ZM16 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"></path>
+    </svg>
+    <h2 slot="header">Card title</h2>
+
+  Use to add a small icon and a label group to the header section. A larger 
+  icon or a logo may be used.
+
+  Alternative title bar styles can be achieved by selecting [card's `header` CSS
+  Shadow Part](/elements/card/code/#parts).
+
+    <rh-cta variant="primary" slot="footer">
+      <a href="#">Footer</a>
+    </rh-cta>
+  </rh-card>
+
+</div><div>
+
+  ### Icon
+  Use to add an icon to the basic style above the text. Secondary and Default 
+  calls to action may be used.
+
+</div><div>
+
+  ### Asset
+  Use to display that an asset can be downloaded. An icon and label group or 
+  text may be used to describe the asset.
+
+</div><div>
+
+  ### Quote
+  Use to display a short quote with attribution text. Logos, images, and a 
+  Secondary call to action may be used or not.
+
+</div><div>
+
+  ### Avatars
+  Use to highlight a group of people who engage in an event. A label should be 
+  included, but including text is optional.
+
+</div><div>
+
+  ### Video
+  Use to trigger a video that will play in a [Modal dialog](/elements/dialog).
+  Different layout configurations may be used.
+
+</div><div>
+
+  ### Pricing
+  Use to outline the pricing and benefits of something. Elements may be 
+  removed or rearranged depending on content needs.
+
+</div><div>
+
+  ### Logo slider
+  Use to display more content about a company when expanded on hover or tap. A 
+  title and text should be included.
+
+</div><div>
+
+  ### Name slider
+  Use to display more content about a person when the tray expands. A title 
+  and text should be included.
+
+</div>
+</section>
 
 ## Custom Theming
 
@@ -105,7 +199,19 @@ Examples include:
 
 For more information, please see the [card css custom properties](/elements/card/code/#css-custom-properties).
 
-### Custom Light Theme
+<section class="multi-column--min-400-wide card-patterns">
+
+<div>
+
+  ### Custom Light Theme
+
+  <style>
+    rh-card.custom-light-theme {
+      --rh-color-border-subtle-on-light: #EF6461;
+      --rh-color-surface-lightest: #feeded;
+      --rh-color-text-primary-on-light: #30292F;
+    }
+  </style>
 
   <rh-card color-palette="light" class="custom-light-theme">
     <h2 slot="header">Card title</h2>
@@ -115,7 +221,17 @@ 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
+</div><div>
+
+  ### Custom Dark Theme
+
+  <style>
+    rh-card.custom-dark-theme {
+      --rh-color-border-subtle-on-dark: #5e40be;
+      --rh-color-surface-darkest: #261a4c;
+      --rh-color-text-primary-on-dark: #e8e4f5;
+    }
+  </style>
 
   <rh-card color-palette="dark" class="custom-dark-theme">
     <h2 slot="header">Card title</h2>
@@ -125,6 +241,9 @@ For more information, please see the [card css custom properties](/elements/card
     <rh-cta slot="footer"><a href="#">Footer</a></rh-cta>
   </rh-card>
 
+</div>
+</section>
+
 {% include 'feedback.html' %}
 
 
diff --git a/elements/rh-card/docs/20-guidelines.md b/elements/rh-card/docs/20-guidelines.md
index a49be97c4f..3d14e24a23 100644
--- a/elements/rh-card/docs/20-guidelines.md
+++ b/elements/rh-card/docs/20-guidelines.md
@@ -1,69 +1,13 @@
 ## Usage
-### Variants
 
-There are several card variants that can be used for a variety of use cases.
+Cards are used to display basic content or long paragraphs of text. Secondary and 
+Default calls to action may be used.
 
 {% alert %}
-  For examples of how to implement these patterns, see the [card patterns page](/patterns/card).
+  For examples of patterns which use or modify Card,
+  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.
-
-- #### List
-  Use to display a short amount of content using various list styles. 
-  Secondary and Default calls to action may be used.
-
-- #### Data
-  Use to display quick facts or short data points under a label. A Secondary 
-  call to action may be used or not.
-
-- #### Logo
-  Use to display a customer logo in a variety of arrangements. A call to 
-  action is required, otherwise use a logo wall.
-
-- #### Bar
-  Use to add a small icon and a label group to the header section. A larger 
-  icon or a logo may be used.
-
-- #### Icon
-  Use to add an icon to the basic style above the text. Secondary and Default 
-  calls to action may be used.
-
-- #### Image
-  Use to add an image to the basic style above the text. Secondary and Default 
-  calls to action may be used.
-
-- #### Asset
-  Use to display that an asset can be downloaded. An icon and label group or 
-  text may be used to describe the asset.
-
-- #### Quote
-  Use to display a short quote with attribution text. Logos, images, and a 
-  Secondary call to action may be used or not.
-
-- #### Avatars
-  Use to highlight a group of people who engage in an event. A label should be 
-  included, but including text is optional.
-
-- #### Video
-  Use to trigger a video that will play in a [Modal dialog]({{ 
-  '/elements/dialog' }}). Different layout configurations may be used.
-
-- #### Pricing
-  Use to outline the pricing and benefits of something. Elements may be 
-  removed or rearranged depending on content needs.
-
-- #### Logo slider
-  Use to display more content about a company when expanded on hover or tap. A 
-  title and text should be included.
-
-- #### Name slider
-  Use to display more content about a person when the tray expands. A title 
-  and text should be included.
-  {.multi-column--min-400-wide style="padding:0;list-style-type:none;margin-block:var(--rh-space-2xl) var(--rh-space-4xl);"}
-
 ### Content
   Cards have the potential to contain lots of content, like a combination of 
   text, links, images, multimedia, etc. Ensure content serves the use case, but