From f2fa2897a5566f3ba92a718ee916280dabc2dc9b Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 31 Oct 2024 18:38:05 -0500
Subject: [PATCH] docs(card): image card demo headers

---
 .../components/c-card/_c-card--image.hbs      |  2 +-
 .../components/c-card/c-card--images.hbs      | 48 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/lib/_imports/components/c-card/_c-card--image.hbs b/src/lib/_imports/components/c-card/_c-card--image.hbs
index 8b96e9d5..b81afdba 100644
--- a/src/lib/_imports/components/c-card/_c-card--image.hbs
+++ b/src/lib/_imports/components/c-card/_c-card--image.hbs
@@ -27,7 +27,7 @@
 
 {{else}}
 
-  <h3>Card - Image {{position}}</h3>
+  <h3 id="card-image-{{position}}">Card - Image {{position}}</h3>
   <p>{{> @text-of-one-paragraph-short }}</p>
   {{#if tall}}
   {{> @message tag="p" type="warning" scope="inline" content="Narrow images might not fill space available. Just use a wider image." }}
diff --git a/src/lib/_imports/components/c-card/c-card--images.hbs b/src/lib/_imports/components/c-card/c-card--images.hbs
index 36b6a4aa..4e2f3a33 100644
--- a/src/lib/_imports/components/c-card/c-card--images.hbs
+++ b/src/lib/_imports/components/c-card/c-card--images.hbs
@@ -10,41 +10,41 @@
 
 <h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
 <section class="o-section">
-    <h3>Transparent Card Image</h3>
+    <h3 id="card-image-transparent-default">Transparent Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" }}
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
-    <h3>Transparent Card Image with Link</h3>
+    <h3 id="card-image-transparent-default-link">Transparent Card Image with Link</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
     </section>
-    <h3>Contact Card with Image - Transparent</h3>
+    <h3 id="card-image-transparent-default-contact">Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
-    <h3>Plain Card Image</h3>
+    <h3 id="card-image-plain-default">Plain Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" }}
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
-    <h3>Plain Card Image with Link</h3>
+    <h3 id="card-image-plain-default-link">Plain Card Image with Link</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#"}}
         {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
         {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
     </section>
-    <h3>Contact Card with Image - Plain</h3>
+    <h3 id="card-image-plain-default-contact">Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
@@ -53,41 +53,41 @@
 <hr>
 <h2 id="section--light">Section - Light</h2>
 <section class="o-section o-section--style-light">
-    <h3>Transparent Card Image</h3>
+    <h3 id="card-image-transparent-light">Transparent Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" }}
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
-    <h3>Transparent Card Image with Link</h3>
+    <h3 id="card-image-transparent-light-link">Transparent Card Image with Link</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
     </section>
-    <h3>Contact Card with Image - Transparent</h3>
+    <h3 id="card-image-transparent-light-contact">Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
-    <h3>Plain Card Image</h3>
+    <h3 id="card-image-plain-light">Plain Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" }}
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
-    <h3>Plain Card Image with Link</h3>
+    <h3 id="card-image-plain-light-link">Plain Card Image with Link</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
         {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
         {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
     </section>
-    <h3>Contact Card with Image - Plain</h3>
+    <h3 id="card-image-plain-light-contact">Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
@@ -96,41 +96,41 @@
 <hr>
 <h2 id="section--muted">Section - Muted</h2>
 <section class="o-section o-section--style-muted">
-    <h3>Transparent Card Image</h3>
+    <h3 id="card-image-transparent-muted">Transparent Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" }}
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
-    <h3>Transparent Card Image with Link</h3>
+    <h3 id="card-image-transparent-muted-link">Transparent Card Image with Link</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
     </section>
-    <h3>Contact Card with Image - Transparent</h3>
+    <h3 id="card-image-transparent-muted-contact">Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
-    <h3>Plain Card Image</h3>
+    <h3 id="card-image-plain-muted">Plain Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" }}
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
-    <h3>Plain Card Image with Link</h3>
+    <h3 id="card-image-plain-muted-link">Plain Card Image with Link</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
         {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
         {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
     </section>
-    <h3>Contact Card with Image - Plain</h3>
+    <h3 id="card-image-plain-muted-contact">Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
@@ -139,41 +139,41 @@
 <hr>
 <h2 id="section--dark">Section - Dark</h2>
 <section class="o-section o-section--style-dark">
-    <h3>Transparent Card Image</h3>
+    <h3 id="card-image-transparent-dark">Transparent Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" }}
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
-    <h3>Transparent Card Image with Link</h3>
+    <h3 id="card-image-transparent-dark-link">Transparent Card Image with Link</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
         {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
     </section>
-    <h3>Contact Card with Image - Transparent</h3>
+    <h3 id="card-image-transparent-dark-contact">Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
-    <h3>Plain Card Image</h3>
+    <h3 id="card-image-plain-dark">Plain Card Image</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" }}
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
-    <h3>Plain Card Image with Link</h3>
+    <h3 id="card-image-plain-dark-link">Plain Card Image with Link</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
         {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
         {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
     </section>
-    <h3>Contact Card with Image - Plain</h3>
+    <h3 id="card-image-plain-dark-contact">Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}