diff --git a/packages/web/src/scss/components/Card/index.html b/packages/web/src/scss/components/Card/index.html
index 9d4b927f90..26fa2d5b9c 100644
--- a/packages/web/src/scss/components/Card/index.html
+++ b/packages/web/src/scss/components/Card/index.html
@@ -1,644 +1,104 @@
 {{#> web/layout/default title="Card" parentPageName="Components" }}
 
 <section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">General Options</h2>
-  <div class="docs-Stack docs-Stack--stretch">
 
-    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+  <div class="Container">
 
-      <article class="Card Card--vertical">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Eyebrow title</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Basic card
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <div class="link-primary link-underlined">Read more</div>
-          <!-- End user content -->
-        </div>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Eyebrow title</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Boxed card
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--auto CardMedia--expanded">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Eyebrow title</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Boxed card, expanded media
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <button type="button" class="Button Button--medium Button--primary">Primary</button>
-          <button type="button" class="Button Button--medium Button--secondary">Secondary</button>
-        </footer>
-      </article>
-
-    </div>
+    <h2 class="docs-Heading">General Options</h2>
 
-  </div>
-</section>
-
-<section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Content Options</h2>
-  <div class="docs-Stack docs-Stack--stretch">
+    <div class="docs-Stack docs-Stack--stretch">
 
-    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
 
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Content options</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Image and text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardLogo">
-          <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
-            {{> web/assets/jobBoardLogo }}
+        <article class="Card Card--vertical">
+          <div class="CardMedia CardMedia--auto">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
           </div>
-        </div>
-        <div class="CardBody CardBody--selectable">
-          <div class="CardEyebrow">Content options</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Image, logo and selectable text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
+          <div class="CardBody">
+            <div class="CardEyebrow">Eyebrow title</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Basic card
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            <video
-              src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
-              poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg"
-              controls
-              muted
-              playsinline
-            ></video>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+            <div class="link-primary link-underlined">Read more</div>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Content options</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#">
-              Video and text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardArtwork CardArtwork--alignmentXLeft">
-          <!-- User content, no component classes -->
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#file" />
-          </svg>
-          <!-- End user content -->
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Content options</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Artwork and text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardBody">
-          <div class="CardEyebrow">Content options</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-          <ul class="pl-1000">
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Consectetuer adipiscing elit</li>
-            <li>Aenean fermentum risus id tortor</li>
-          </ul>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardBody">
-          <div class="CardEyebrow">Content options</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Text only
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-          <ul class="pl-1000">
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Consectetuer adipiscing elit</li>
-            <li>Aenean fermentum risus id tortor</li>
-          </ul>
-          <!-- End user content -->
-        </div>
-      </article>
-
-    </div>
-
-  </div>
-</section>
-
-<section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Logo</h2>
-  <div class="docs-Stack docs-Stack--stretch">
-
-    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+        </article>
 
-      <article class="Card Card--vertical">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardLogo">
-          <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
-            {{> web/assets/jobBoardLogo }}
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Logo</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Basic card with media and logo
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardLogo">
-          <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
-            {{> web/assets/jobBoardLogo }}
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--auto">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Logo</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Boxed card with media and logo
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--auto CardMedia--expanded">
-          <div class="CardMedia__canvas">
+          <div class="CardBody">
+            <div class="CardEyebrow">Eyebrow title</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Boxed card
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardLogo">
-          <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
-            {{> web/assets/jobBoardLogo }}
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Logo</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Boxed card with expanded media and logo
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-    </div>
-
-  </div>
-</section>
-
-<section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Horizontal Card Layout</h2>
-  <div class="docs-Stack docs-Stack--stretch">
-
-    <div class="Grid Grid--cols-1 Grid--desktop--cols-2">
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
 
-      <article class="Card Card--horizontal Card--boxed">
-        <div class="CardMedia CardMedia--medium CardMedia--expanded">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--auto CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Horizontal card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Media and text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontal Card--boxed">
-        <div class="CardMedia CardMedia--medium CardMedia--expanded">
-          <div class="CardMedia__canvas">
+          <div class="CardBody">
+            <div class="CardEyebrow">Eyebrow title</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Boxed card, expanded media
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardLogo">
-          <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
-            {{> web/assets/jobBoardLogo }}
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Horizontal card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Media, logo and text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontal Card--boxed">
-        <div class="CardArtwork CardArtwork--alignmentXLeft">
-          <!-- User content, no component classes -->
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#file" />
-          </svg>
-          <!-- End user content -->
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Horizontal card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Artwork and text
-          </h4>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontal Card--boxed">
-        <div class="CardArtwork CardArtwork--alignmentXLeft">
-          <!-- User content, no component classes -->
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#file" />
-          </svg>
-          <!-- End user content -->
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Horizontal card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Artwork and text
-          </h4>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-    </div>
-
-  </div>
-</section>
-
-<section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Reversed Horizontal Card Layout</h2>
-  <div class="docs-Stack docs-Stack--stretch">
-
-    <div class="Grid Grid--cols-1 Grid--desktop--cols-2">
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <button type="button" class="Button Button--medium Button--primary">Primary</button>
+            <button type="button" class="Button Button--medium Button--secondary">Secondary</button>
+          </footer>
+        </article>
 
-      <article class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardMedia CardMedia--medium CardMedia--expanded">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Horizontal reversed card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Media and text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardMedia CardMedia--medium CardMedia--expanded">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardLogo">
-          <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
-            {{> web/assets/jobBoardLogo }}
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Horizontal reversed card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Media, logo and text
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardArtwork CardArtwork--alignmentXLeft">
-          <!-- User content, no component classes -->
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#file" />
-          </svg>
-          <!-- End user content -->
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Horizontal reversed card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Artwork and text
-          </h4>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardArtwork CardArtwork--alignmentXLeft">
-          <!-- User content, no component classes -->
-          <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#file" />
-          </svg>
-          <!-- End user content -->
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Horizontal reversed card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Artwork and text
-          </h4>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
+      </div>
 
     </div>
 
   </div>
+
 </section>
 
 <section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Responsive Card Layout</h2>
-  <div class="docs-Stack docs-Stack--stretch">
-
-    <div class="Grid Grid--cols-1 Grid--desktop--cols-2">
-
-      <article class="Card Card--vertical Card--tablet--horizontal Card--desktop--horizontalReversed Card--boxed">
-        <div class="CardMedia CardMedia--medium">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardLogo">
-          <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
-            {{> web/assets/jobBoardLogo }}
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Responsive card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Vertical → horizontal → reversed horizontal
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--tablet--horizontal Card--desktop--horizontalReversed Card--boxed">
-        <div class="CardMedia CardMedia--medium CardMedia--expanded">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardLogo">
-          <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
-            {{> web/assets/jobBoardLogo }}
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Responsive card layout</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Vertical → horizontal → reversed horizontal, expanded media
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
 
-    </div>
+  <div class="Container">
 
-  </div>
-</section>
+    <h2 class="docs-Heading">Content Options</h2>
 
-<section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Media Options</h2>
-  <div class="docs-Stack docs-Stack--stretch">
+    <div class="docs-Stack docs-Stack--stretch">
 
-    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4" style="grid-auto-flow: dense">
-      <div class="GridItem d-grid" style="--grid-item-row-end-desktop: span 2">
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
 
         <article class="Card Card--vertical Card--boxed">
           <div class="CardMedia CardMedia--auto">
@@ -649,10 +109,10 @@ <h2 class="docs-Heading">Media Options</h2>
             </div>
           </div>
           <div class="CardBody">
-            <div class="CardEyebrow">Media options</div>
+            <div class="CardEyebrow">Content options</div>
             <h4 class="CardTitle CardTitle--heading">
               <a href="#" class="CardLink">
-                Auto size
+                Image and text
               </a>
             </h4>
             <!-- User content, no component classes -->
@@ -665,22 +125,24 @@ <h4 class="CardTitle CardTitle--heading">
           </footer>
         </article>
 
-      </div>
-      <div class="GridItem d-grid" style="--grid-item-row-end-desktop: span 2">
-
         <article class="Card Card--vertical Card--boxed">
-          <div class="CardMedia CardMedia--auto CardMedia--expanded CardMedia--filledHeight">
+          <div class="CardMedia CardMedia--auto">
             <div class="CardMedia__canvas">
               <!-- User content, no component classes -->
               {{> web/assets/spiritCoverOnBrand }}
               <!-- End user content -->
             </div>
           </div>
-          <div class="CardBody">
-            <div class="CardEyebrow">Media options</div>
+          <div class="CardLogo">
+            <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </div>
+          <div class="CardBody CardBody--selectable">
+            <div class="CardEyebrow">Content options</div>
             <h4 class="CardTitle CardTitle--heading">
               <a href="#" class="CardLink">
-                Auto size, expanded
+                Image, logo and selectable text
               </a>
             </h4>
             <!-- User content, no component classes -->
@@ -693,22 +155,25 @@ <h4 class="CardTitle CardTitle--heading">
           </footer>
         </article>
 
-      </div>
-      <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2">
-
-        <article class="Card Card--horizontal Card--boxed">
-          <div class="CardMedia CardMedia--medium">
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--auto">
             <div class="CardMedia__canvas">
               <!-- User content, no component classes -->
-              {{> web/assets/spiritCoverOnBrand }}
+              <video
+                src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+                poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg"
+                controls
+                muted
+                playsinline
+              ></video>
               <!-- End user content -->
             </div>
           </div>
           <div class="CardBody">
-            <div class="CardEyebrow">Media options</div>
+            <div class="CardEyebrow">Content options</div>
             <h4 class="CardTitle CardTitle--heading">
-              <a href="#" class="CardLink">
-                Medium size
+              <a href="#">
+                Video and text
               </a>
             </h4>
             <!-- User content, no component classes -->
@@ -721,22 +186,19 @@ <h4 class="CardTitle CardTitle--heading">
           </footer>
         </article>
 
-      </div>
-      <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2">
-
-        <article class="Card Card--horizontal Card--boxed">
-          <div class="CardMedia CardMedia--medium CardMedia--filledHeight">
-            <div class="CardMedia__canvas">
-              <!-- User content, no component classes -->
-              {{> web/assets/spiritCoverOnBrand }}
-              <!-- End user content -->
-            </div>
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardArtwork CardArtwork--alignmentXLeft">
+            <!-- User content, no component classes -->
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
+            </svg>
+            <!-- End user content -->
           </div>
           <div class="CardBody">
-            <div class="CardEyebrow">Media options</div>
+            <div class="CardEyebrow">Content options</div>
             <h4 class="CardTitle CardTitle--heading">
               <a href="#" class="CardLink">
-                Medium size, filled height
+                Artwork and text
               </a>
             </h4>
             <!-- User content, no component classes -->
@@ -749,26 +211,21 @@ <h4 class="CardTitle CardTitle--heading">
           </footer>
         </article>
 
-      </div>
-      <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2; --grid-item-column-end-desktop: span 4">
-
-        <article class="Card Card--horizontal Card--boxed">
-          <div class="CardMedia CardMedia--medium CardMedia--expanded">
-            <div class="CardMedia__canvas">
-              <!-- User content, no component classes -->
-              {{> web/assets/spiritCoverOnBrand }}
-              <!-- End user content -->
-            </div>
-          </div>
+        <article class="Card Card--vertical Card--boxed">
           <div class="CardBody">
-            <div class="CardEyebrow">Media options</div>
+            <div class="CardEyebrow">Content options</div>
             <h4 class="CardTitle CardTitle--heading">
               <a href="#" class="CardLink">
-                Medium size, expanded
+                Text
               </a>
             </h4>
             <!-- User content, no component classes -->
-            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+            <ul class="pl-1000">
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Consectetuer adipiscing elit</li>
+              <li>Aenean fermentum risus id tortor</li>
+            </ul>
             <!-- End user content -->
           </div>
           <footer class="CardFooter CardFooter--alignmentXLeft">
@@ -777,562 +234,1196 @@ <h4 class="CardTitle CardTitle--heading">
           </footer>
         </article>
 
-      </div>
-    </div>
-
-  </div>
-</section>
-
-<section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Media Sizes</h2>
-  <div class="docs-Stack docs-Stack--stretch">
-
-    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3 mb-1200">
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardBody">
+            <div class="CardEyebrow">Content options</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Text only
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+            <ul class="pl-1000">
+              <li>Lorem ipsum dolor sit amet</li>
+              <li>Consectetuer adipiscing elit</li>
+              <li>Aenean fermentum risus id tortor</li>
+            </ul>
+            <!-- End user content -->
+          </div>
+        </article>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Logo</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+
+        <article class="Card Card--vertical">
+          <div class="CardMedia CardMedia--auto">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardLogo">
+            <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Logo</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Basic card with media and logo
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--auto">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardLogo">
+            <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Logo</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Boxed card with media and logo
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--auto CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardLogo">
+            <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Logo</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Boxed card with expanded media and logo
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Horizontal Card Layout</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--desktop--cols-2">
+
+        <article class="Card Card--horizontal Card--boxed">
+          <div class="CardMedia CardMedia--medium CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Horizontal card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Media and text
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontal Card--boxed">
+          <div class="CardMedia CardMedia--medium CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardLogo">
+            <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Horizontal card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Media, logo and text
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontal Card--boxed">
+          <div class="CardArtwork CardArtwork--alignmentXLeft">
+            <!-- User content, no component classes -->
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
+            </svg>
+            <!-- End user content -->
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Horizontal card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Artwork and text
+            </h4>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontal Card--boxed">
+          <div class="CardArtwork CardArtwork--alignmentXLeft">
+            <!-- User content, no component classes -->
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
+            </svg>
+            <!-- End user content -->
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Horizontal card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Artwork and text
+            </h4>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Reversed Horizontal Card Layout</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--desktop--cols-2">
+
+        <article class="Card Card--horizontalReversed Card--boxed">
+          <div class="CardMedia CardMedia--medium CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Horizontal reversed card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Media and text
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontalReversed Card--boxed">
+          <div class="CardMedia CardMedia--medium CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardLogo">
+            <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Horizontal reversed card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Media, logo and text
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontalReversed Card--boxed">
+          <div class="CardArtwork CardArtwork--alignmentXLeft">
+            <!-- User content, no component classes -->
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
+            </svg>
+            <!-- End user content -->
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Horizontal reversed card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Artwork and text
+            </h4>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontalReversed Card--boxed">
+          <div class="CardArtwork CardArtwork--alignmentXLeft">
+            <!-- User content, no component classes -->
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
+            </svg>
+            <!-- End user content -->
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Horizontal reversed card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Artwork and text
+            </h4>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Responsive Card Layout</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--desktop--cols-2">
+
+        <article class="Card Card--vertical Card--tablet--horizontal Card--desktop--horizontalReversed Card--boxed">
+          <div class="CardMedia CardMedia--medium">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardLogo">
+            <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Responsive card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Vertical → horizontal → reversed horizontal
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--vertical Card--tablet--horizontal Card--desktop--horizontalReversed Card--boxed">
+          <div class="CardMedia CardMedia--medium CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardLogo">
+            <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Responsive card layout</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Vertical → horizontal → reversed horizontal, expanded media
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Media Options</h2>
 
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--small CardMedia--expanded">
-          <div class="CardMedia__canvas">
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4" style="grid-auto-flow: dense">
+        <div class="GridItem d-grid" style="--grid-item-row-end-desktop: span 2">
+
+          <article class="Card Card--vertical Card--boxed">
+            <div class="CardMedia CardMedia--auto">
+              <div class="CardMedia__canvas">
+                <!-- User content, no component classes -->
+                {{> web/assets/spiritCoverOnBrand }}
+                <!-- End user content -->
+              </div>
+            </div>
+            <div class="CardBody">
+              <div class="CardEyebrow">Media options</div>
+              <h4 class="CardTitle CardTitle--heading">
+                <a href="#" class="CardLink">
+                  Auto size
+                </a>
+              </h4>
+              <!-- User content, no component classes -->
+              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+              <!-- End user content -->
+            </div>
+            <footer class="CardFooter CardFooter--alignmentXLeft">
+              <a href="#" class="Button Button--medium Button--primary">Primary</a>
+              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+            </footer>
+          </article>
+
+        </div>
+        <div class="GridItem d-grid" style="--grid-item-row-end-desktop: span 2">
+
+          <article class="Card Card--vertical Card--boxed">
+            <div class="CardMedia CardMedia--auto CardMedia--expanded CardMedia--filledHeight">
+              <div class="CardMedia__canvas">
+                <!-- User content, no component classes -->
+                {{> web/assets/spiritCoverOnBrand }}
+                <!-- End user content -->
+              </div>
+            </div>
+            <div class="CardBody">
+              <div class="CardEyebrow">Media options</div>
+              <h4 class="CardTitle CardTitle--heading">
+                <a href="#" class="CardLink">
+                  Auto size, expanded
+                </a>
+              </h4>
+              <!-- User content, no component classes -->
+              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+              <!-- End user content -->
+            </div>
+            <footer class="CardFooter CardFooter--alignmentXLeft">
+              <a href="#" class="Button Button--medium Button--primary">Primary</a>
+              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+            </footer>
+          </article>
+
+        </div>
+        <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2">
+
+          <article class="Card Card--horizontal Card--boxed">
+            <div class="CardMedia CardMedia--medium">
+              <div class="CardMedia__canvas">
+                <!-- User content, no component classes -->
+                {{> web/assets/spiritCoverOnBrand }}
+                <!-- End user content -->
+              </div>
+            </div>
+            <div class="CardBody">
+              <div class="CardEyebrow">Media options</div>
+              <h4 class="CardTitle CardTitle--heading">
+                <a href="#" class="CardLink">
+                  Medium size
+                </a>
+              </h4>
+              <!-- User content, no component classes -->
+              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+              <!-- End user content -->
+            </div>
+            <footer class="CardFooter CardFooter--alignmentXLeft">
+              <a href="#" class="Button Button--medium Button--primary">Primary</a>
+              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+            </footer>
+          </article>
+
+        </div>
+        <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2">
+
+          <article class="Card Card--horizontal Card--boxed">
+            <div class="CardMedia CardMedia--medium CardMedia--filledHeight">
+              <div class="CardMedia__canvas">
+                <!-- User content, no component classes -->
+                {{> web/assets/spiritCoverOnBrand }}
+                <!-- End user content -->
+              </div>
+            </div>
+            <div class="CardBody">
+              <div class="CardEyebrow">Media options</div>
+              <h4 class="CardTitle CardTitle--heading">
+                <a href="#" class="CardLink">
+                  Medium size, filled height
+                </a>
+              </h4>
+              <!-- User content, no component classes -->
+              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+              <!-- End user content -->
+            </div>
+            <footer class="CardFooter CardFooter--alignmentXLeft">
+              <a href="#" class="Button Button--medium Button--primary">Primary</a>
+              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+            </footer>
+          </article>
+
+        </div>
+        <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2; --grid-item-column-end-desktop: span 4">
+
+          <article class="Card Card--horizontal Card--boxed">
+            <div class="CardMedia CardMedia--medium CardMedia--expanded">
+              <div class="CardMedia__canvas">
+                <!-- User content, no component classes -->
+                {{> web/assets/spiritCoverOnBrand }}
+                <!-- End user content -->
+              </div>
+            </div>
+            <div class="CardBody">
+              <div class="CardEyebrow">Media options</div>
+              <h4 class="CardTitle CardTitle--heading">
+                <a href="#" class="CardLink">
+                  Medium size, expanded
+                </a>
+              </h4>
+              <!-- User content, no component classes -->
+              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+              <!-- End user content -->
+            </div>
+            <footer class="CardFooter CardFooter--alignmentXLeft">
+              <a href="#" class="Button Button--medium Button--primary">Primary</a>
+              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+            </footer>
+          </article>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Media Sizes</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3 mb-1200">
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--small CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Media size</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Small
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Media size</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Small
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--medium CardMedia--expanded">
-          <div class="CardMedia__canvas">
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--medium CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Media size</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Medium
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--large CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Media size</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Large
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardMedia CardMedia--auto CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Media size</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Auto
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+      </div>
+
+      <div class="Grid Grid--cols-1">
+
+        <article class="Card Card--horizontal Card--boxed">
+          <div class="CardMedia CardMedia--small CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Media size</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Small
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontal Card--boxed">
+          <div class="CardMedia CardMedia--medium CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Media size</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Medium
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontal Card--boxed">
+          <div class="CardMedia CardMedia--large CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Media size</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Large
+              </a>
+            </h4>
+            <!-- User content, no component classes -->
+            <p>Lorem ipsum dolor sit amet.</p>
+            <!-- End user content -->
+          </div>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--horizontal Card--boxed">
+          <div class="CardMedia CardMedia--auto CardMedia--expanded">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              {{> web/assets/spiritCoverOnBrand }}
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <div class="CardEyebrow">Media size</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Auto
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Media size</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Medium
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--large CardMedia--expanded">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+      </div>
+
+    </div>
+
+  </div>
+
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Title Options</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+
+        <article class="Card Card--vertical">
+          <div class="CardMedia CardMedia--auto">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              <a href="#" aria-hidden="true">
+                {{> web/assets/spiritCoverOnBrand }}
+              </a>
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <h4 class="CardTitle">
+              <a href="#" class="link-primary">
+                Body-style primary link
+              </a>
+            </h4>
+          </div>
+        </article>
+
+        <article class="Card Card--vertical">
+          <div class="CardMedia CardMedia--auto">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              <a href="#" aria-hidden="true">
+                {{> web/assets/spiritCoverOnBrand }}
+              </a>
+              <!-- End user content -->
+            </div>
+          </div>
+          <div class="CardBody">
+            <h4 class="CardTitle">
+              <a href="#" class="link-secondary">
+                Body-style secondary link
+              </a>
+            </h4>
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Media size</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Large
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardMedia CardMedia--auto CardMedia--expanded">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
+        </article>
+
+        <article class="Card Card--vertical">
+          <div class="CardMedia CardMedia--auto">
+            <div class="CardMedia__canvas">
+              <!-- User content, no component classes -->
+              <a href="#" aria-hidden="true">
+                {{> web/assets/spiritCoverOnBrand }}
+              </a>
+              <!-- End user content -->
+            </div>
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Media size</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Auto
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
+          <div class="CardBody">
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#">
+                Heading-style primary link
+              </a>
+            </h4>
+          </div>
+        </article>
+
+      </div>
 
     </div>
 
-    <div class="Grid Grid--cols-1">
+  </div>
 
-      <article class="Card Card--horizontal Card--boxed">
-        <div class="CardMedia CardMedia--small CardMedia--expanded">
-          <div class="CardMedia__canvas">
-            <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
-            <!-- End user content -->
-          </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Media size</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Small
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontal Card--boxed">
-        <div class="CardMedia CardMedia--medium CardMedia--expanded">
-          <div class="CardMedia__canvas">
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+
+    <h2 class="docs-Heading">Footer Alignment</h2>
+
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardBody">
+            <div class="CardEyebrow">Footer alignment</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Left
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Media size</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Medium
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontal Card--boxed">
-        <div class="CardMedia CardMedia--large CardMedia--expanded">
-          <div class="CardMedia__canvas">
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardBody">
+            <div class="CardEyebrow">Footer alignment</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Center
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Media size</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Large
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--horizontal Card--boxed">
-        <div class="CardMedia CardMedia--auto CardMedia--expanded">
-          <div class="CardMedia__canvas">
+          <footer class="CardFooter CardFooter--alignmentXCenter">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardBody">
+            <div class="CardEyebrow">Footer alignment</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Right
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            {{> web/assets/spiritCoverOnBrand }}
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <div class="CardEyebrow">Media size</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Auto
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
+          <footer class="CardFooter CardFooter--alignmentXRight">
+            <a href="#" class="Button Button--medium Button--primary">Primary</a>
+            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
+          </footer>
+        </article>
+
+      </div>
     </div>
 
   </div>
+
 </section>
 
 <section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Title Options</h2>
-  <div class="docs-Stack docs-Stack--stretch">
 
-    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+  <div class="Container">
+
+    <h2 class="docs-Heading">Footer Content</h2>
 
-      <article class="Card Card--vertical">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
+    <div class="docs-Stack docs-Stack--stretch">
+
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardBody">
+            <div class="CardEyebrow">Footer content</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Links
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            <a href="#" aria-hidden="true">
-              {{> web/assets/spiritCoverOnBrand }}
-            </a>
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <h4 class="CardTitle">
-            <a href="#" class="link-primary">
-              Body-style primary link
-            </a>
-          </h4>
-        </div>
-      </article>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#" class="link-primary">Primary</a>
+            <a href="#" class="link-secondary">Secondary</a>
+          </footer>
+        </article>
 
-      <article class="Card Card--vertical">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardBody">
+            <div class="CardEyebrow">Footer content</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Icon buttons
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            <a href="#" aria-hidden="true">
-              {{> web/assets/spiritCoverOnBrand }}
-            </a>
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <h4 class="CardTitle">
-            <a href="#" class="link-secondary">
-              Body-style secondary link
-            </a>
-          </h4>
-        </div>
-      </article>
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
+              <span class="accessibility-hidden">Add</span>
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#add" />
+              </svg>
+            </button>
+            <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
+              <span class="accessibility-hidden">Edit</span>
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#edit" />
+              </svg>
+            </button>
+            <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
+              <span class="accessibility-hidden">Help</span>
+              <svg width="24" height="24" aria-hidden="true">
+                <use xlink:href="/assets/icons/svg/sprite.svg#help" />
+              </svg>
+            </button>
+          </footer>
+        </article>
 
-      <article class="Card Card--vertical">
-        <div class="CardMedia CardMedia--auto">
-          <div class="CardMedia__canvas">
+        <article class="Card Card--vertical Card--boxed">
+          <div class="CardBody">
+            <div class="CardEyebrow">Footer content</div>
+            <h4 class="CardTitle CardTitle--heading">
+              <a href="#" class="CardLink">
+                Custom footer
+              </a>
+            </h4>
             <!-- User content, no component classes -->
-            <a href="#" aria-hidden="true">
-              {{> web/assets/spiritCoverOnBrand }}
-            </a>
+            <p>Lorem ipsum dolor sit amet.</p>
             <!-- End user content -->
           </div>
-        </div>
-        <div class="CardBody">
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#">
-              Heading-style primary link
+          <footer class="CardFooter CardFooter--alignmentXLeft">
+            <a href="#jiri-barta" class="link-primary link-not-underlined">
+              <div class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYStretch">
+                <div class="UNSTABLE_Avatar UNSTABLE_Avatar--large" aria-label="Profile of Jiří Bárta">
+                  <img src="https://media.licdn.com/dms/image/v2/C4D03AQG7vmijKairYA/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1620064696692?e=1737590400&v=beta&t=r0jUkDJnh8reIhDzUaMsofW__vgNhLlydEiK8K5RMYU" alt="Jiří Bárta" aria-hidden="true" />
+                </div>
+                <div>
+                  <div class="typography-body-small-semibold text-primary">Jiří Bárta</div>
+                  <div class="typography-body-small-regular text-tertiary">Senior UI Designer</div>
+                </div>
+              </div>
             </a>
-          </h4>
-        </div>
-      </article>
+          </footer>
+        </article>
 
+      </div>
     </div>
 
   </div>
+
 </section>
 
 <section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Footer Alignment</h2>
-  <div class="docs-Stack docs-Stack--stretch">
 
-    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+  <div class="Container">
 
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardBody">
-          <div class="CardEyebrow">Footer alignment</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Left
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardBody">
-          <div class="CardEyebrow">Footer alignment</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Center
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXCenter">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardBody">
-          <div class="CardEyebrow">Footer alignment</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Right
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXRight">
-          <a href="#" class="Button Button--medium Button--primary">Primary</a>
-          <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
-        </footer>
-      </article>
+    <h2 class="docs-Heading">Text Cards</h2>
 
-    </div>
-  </div>
-</section>
+    <div class="docs-Stack docs-Stack--stretch">
 
-<section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Footer Content</h2>
-  <div class="docs-Stack docs-Stack--stretch">
+      <ul
+        class="Grid Grid--cols-2 Grid--desktop--cols-4"
+        style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000); --grid-spacing-y-tablet: var(--spirit-space-1100)"
+      >
 
-    <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">
+        <li class="Card Card--vertical">
+          <div class="CardBody">
+            <div class="CardEyebrow">Eyebrow title</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Text card heading
+            </h4>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+          </div>
+        </li>
 
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardBody">
-          <div class="CardEyebrow">Footer content</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Links
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#" class="link-primary">Primary</a>
-          <a href="#" class="link-secondary">Secondary</a>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardBody">
-          <div class="CardEyebrow">Footer content</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Icon buttons
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
-            <span class="accessibility-hidden">Add</span>
-            <svg width="24" height="24" aria-hidden="true">
-              <use xlink:href="/assets/icons/svg/sprite.svg#add" />
-            </svg>
-          </button>
-          <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
-            <span class="accessibility-hidden">Edit</span>
-            <svg width="24" height="24" aria-hidden="true">
-              <use xlink:href="/assets/icons/svg/sprite.svg#edit" />
-            </svg>
-          </button>
-          <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
-            <span class="accessibility-hidden">Help</span>
-            <svg width="24" height="24" aria-hidden="true">
-              <use xlink:href="/assets/icons/svg/sprite.svg#help" />
-            </svg>
-          </button>
-        </footer>
-      </article>
-
-      <article class="Card Card--vertical Card--boxed">
-        <div class="CardBody">
-          <div class="CardEyebrow">Footer content</div>
-          <h4 class="CardTitle CardTitle--heading">
-            <a href="#" class="CardLink">
-              Custom footer
-            </a>
-          </h4>
-          <!-- User content, no component classes -->
-          <p>Lorem ipsum dolor sit amet.</p>
-          <!-- End user content -->
-        </div>
-        <footer class="CardFooter CardFooter--alignmentXLeft">
-          <a href="#jiri-barta" class="link-primary link-not-underlined">
-            <div class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYStretch">
-              <div class="UNSTABLE_Avatar UNSTABLE_Avatar--large" aria-label="Profile of Jiří Bárta">
-                <img src="https://media.licdn.com/dms/image/v2/C4D03AQG7vmijKairYA/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1620064696692?e=1737590400&v=beta&t=r0jUkDJnh8reIhDzUaMsofW__vgNhLlydEiK8K5RMYU" alt="Jiří Bárta" aria-hidden="true" />
-              </div>
-              <div>
-                <div class="typography-body-small-semibold text-primary">Jiří Bárta</div>
-                <div class="typography-body-small-regular text-tertiary">Senior UI Designer</div>
-              </div>
-            </div>
-          </a>
-        </footer>
-      </article>
+        <li class="Card Card--vertical">
+          <div class="CardBody">
+            <div class="CardEyebrow">Eyebrow title</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Text card heading
+            </h4>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+          </div>
+        </li>
+
+        <li class="Card Card--vertical">
+          <div class="CardBody">
+            <div class="CardEyebrow">Eyebrow title</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Text card heading
+            </h4>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+          </div>
+        </li>
+
+        <li class="Card Card--vertical">
+          <div class="CardBody">
+            <div class="CardEyebrow">Eyebrow title</div>
+            <h4 class="CardTitle CardTitle--heading">
+              Text card heading
+            </h4>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
+          </div>
+        </li>
+
+      </ul>
 
     </div>
+
   </div>
+
 </section>
 
 <section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Text Cards</h2>
-  <div class="docs-Stack docs-Stack--stretch">
-
-    <ul
-      class="Grid Grid--cols-2 Grid--desktop--cols-4"
-      style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000); --grid-spacing-y-tablet: var(--spirit-space-1100)"
-    >
-
-      <li class="Card Card--vertical">
-        <div class="CardBody">
-          <div class="CardEyebrow">Eyebrow title</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Text card heading
-          </h4>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-        </div>
-      </li>
-
-      <li class="Card Card--vertical">
-        <div class="CardBody">
-          <div class="CardEyebrow">Eyebrow title</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Text card heading
-          </h4>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-        </div>
-      </li>
-
-      <li class="Card Card--vertical">
-        <div class="CardBody">
-          <div class="CardEyebrow">Eyebrow title</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Text card heading
-          </h4>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-        </div>
-      </li>
-
-      <li class="Card Card--vertical">
-        <div class="CardBody">
-          <div class="CardEyebrow">Eyebrow title</div>
-          <h4 class="CardTitle CardTitle--heading">
-            Text card heading
-          </h4>
-          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
-        </div>
-      </li>
 
-    </ul>
+  <div class="Container">
 
-  </div>
-</section>
+    <h2 class="docs-Heading">Custom Cards</h2>
 
-<section class="UNSTABLE_Section">
-  <h2 class="docs-Heading">Custom Cards</h2>
-  <div class="docs-Stack docs-Stack--stretch">
+    <div class="docs-Stack docs-Stack--stretch">
 
-    <ul class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4">
+      <ul class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4">
 
-      <li class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardArtwork">
-          <a href="#" class="CardLink">
-            <div class="PartnerLogo PartnerLogo--small">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-        </div>
-        <div class="CardBody">
-          <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
-        </div>
-      </li>
+        <li class="Card Card--horizontalReversed Card--boxed">
+          <div class="CardArtwork">
+            <a href="#" class="CardLink">
+              <div class="PartnerLogo PartnerLogo--small">
+                {{> web/assets/jobBoardLogo }}
+              </div>
+            </a>
+          </div>
+          <div class="CardBody">
+            <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
+          </div>
+        </li>
 
-      <li class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardArtwork">
-          <a href="#" class="CardLink">
-            <div class="PartnerLogo PartnerLogo--small">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-        </div>
-        <div class="CardBody">
-          <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
-        </div>
-      </li>
+        <li class="Card Card--horizontalReversed Card--boxed">
+          <div class="CardArtwork">
+            <a href="#" class="CardLink">
+              <div class="PartnerLogo PartnerLogo--small">
+                {{> web/assets/jobBoardLogo }}
+              </div>
+            </a>
+          </div>
+          <div class="CardBody">
+            <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
+          </div>
+        </li>
 
-      <li class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardArtwork">
-          <a href="#" class="CardLink">
-            <div class="PartnerLogo PartnerLogo--small">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-        </div>
-        <div class="CardBody">
-          <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
-        </div>
-      </li>
+        <li class="Card Card--horizontalReversed Card--boxed">
+          <div class="CardArtwork">
+            <a href="#" class="CardLink">
+              <div class="PartnerLogo PartnerLogo--small">
+                {{> web/assets/jobBoardLogo }}
+              </div>
+            </a>
+          </div>
+          <div class="CardBody">
+            <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
+          </div>
+        </li>
 
-      <li class="Card Card--horizontalReversed Card--boxed">
-        <div class="CardArtwork">
-          <a href="#" class="CardLink">
-            <div class="PartnerLogo PartnerLogo--small">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-        </div>
-        <div class="CardBody">
-          <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
-        </div>
-      </li>
+        <li class="Card Card--horizontalReversed Card--boxed">
+          <div class="CardArtwork">
+            <a href="#" class="CardLink">
+              <div class="PartnerLogo PartnerLogo--small">
+                {{> web/assets/jobBoardLogo }}
+              </div>
+            </a>
+          </div>
+          <div class="CardBody">
+            <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
+          </div>
+        </li>
+
+      </ul>
 
-    </ul>
+    </div>
 
   </div>
+
 </section>
 
 {{/web/layout/default }}