@tacc/core-styles 2.18.0 → 2.20.0

package/src/lib/_imports/components/c-button/c-button.hbs

@@ -1,162 +1,159 @@
 <dl>
   {{#if supports.type}}
   <dt>Type</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--secondary</span>
-      </button>
-      {{#if small}}
-        <small>(no small primary allowed)</small>
-      {{else}}
-        <button class="c-button c-button--{{this._self.name}} c-button--primary"
-        {{#if disabled}}disabled{{/if}}>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--secondary</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--primary</span>
         </button>
-      {{/if}}
-      <button class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--tertiary</span>
-      </button>
-    </dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--tertiary</span>
+        </button>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--secondary</span>
-      </a>
-      {{#if small}}
-        <small>(no small primary allowed)</small>
-      {{else}}
-        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--secondary</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
           <span class="c-button__text">--primary</span>
         </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--tertiary</span>
+        </a>
+      </dd>
       {{/if}}
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--tertiary</span>
-      </a>
-    </dd>
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.states}}
+    {{#if supports.states}}
   <dt>States</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">default</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--is-busy
-        {{#if type}}{{type}}{{/if}}"
-        disabled>
-        <span class="c-button__text">--is-busy</span>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">default</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} 
+        {{#if type}}{{type}}{{/if}}" disabled>
+          <span class="c-button__text">disabled-attr</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}" disabled>
+          <span class="c-button__text">--is-busy</span>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">default</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
-        {{#if type}}{{type}}{{/if}}"
-        disabled tabindex="-1">
-        <span class="c-button__text">--is-busy</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">default</span>
+        </a>
+        <a disabled href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}">
+          <span class="c-button__text">disabled-attr</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}" disabled tabindex="-1">
+          <span class="c-button__text">--is-busy</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.icons}}
+    {{#if supports.icons}}
   <dt>Icons</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <i class="c-button__icon--before" aria-description="validate input">…</i>
-        <span class="c-button__text">__icon--before</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">__icon--after</span>
-        <i class="c-button__icon--after" aria-description="exit page">X</i>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <span class="c-button__text">__icon--before</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">__icon--after</span>
+          <i class="c-button__icon--after" aria-description="exit page">X</i>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <i class="c-button__icon--before" aria-description="validate input">…</i>
-        <span class="c-button__text">__icon--before</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">__icon--after</span>
-        <i class="c-button__icon--after" aria-description="exit page">X</i>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <span class="c-button__text">__icon--before</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">__icon--after</span>
+          <i class="c-button__icon--after" aria-description="exit page">X</i>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.width}}
+    {{#if supports.width}}
   <dt>Width</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-short</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-medium</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-long</span>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-short</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-medium</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-long</span>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-short</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-medium</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-long</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-short</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-medium</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-long</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.size}}
+    {{#if supports.size}}
   <dt>Size</dt>
   <dd>
     {{#if supports.size-small}}
@@ -164,8 +161,7 @@
       <dt><code>&lt;button&gt;</code></dt>
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--size-small
-          {{#if type}}{{type}}{{/if}}"
-          {{#if disabled}}disabled{{/if}}>
+          {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--size-small</span>
         </button>
       </dd>
@@ -174,8 +170,7 @@
       <dt><code>&lt;a&gt;</code></dt>
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--size-small
-          {{#if type}}{{type}}{{/if}}"
-          {{#if disabled}}disabled{{/if}}>
+          {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--size-small</span>
         </a>
       </dd>
@@ -185,5 +180,5 @@
     <small>(no small size allowed)</small>
     {{/if}}
   <dd>
-  {{/if}}
-</dl>
+    {{/if}}
+</dl>

package/src/lib/_imports/components/c-button.css

@@ -32,9 +32,6 @@
 :--c-button:where(:not(:--disabled)) {
   cursor: pointer; /* WARNING: Opinionated */
 }
-:--c-button:where(:not(:--c-button--as-link)) {
-  font-weight: var(--medium);
-}
 
 a:--c-button {
   text-decoration: none;
@@ -53,8 +50,6 @@ a:--c-button--is-busy {
 ) {
   color: var(--global-color-primary--dark);
   border-color: var(--global-color-primary--dark);
-
-  pointer-events: none;
 }
 :--c-button:--disabled:not(
   :--c-button--is-busy,

package/src/lib/_imports/components/c-card/_c-card--image-bottom-plain.hbs

@@ -0,0 +1,6 @@
+<article class="card--image-bottom c-card--plain">
+    <h3><a href="#">Card - Image Bottom</a></h3>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <img
+        src="https://www.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/43/1a/431abd68-5142-4fa2-a5d1-0644a19361b9/main-skeletalai-feature-1200x800-c-default.jpg__992x992_q85_subsampling-2.jpg" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-bottom-transparent.hbs

@@ -0,0 +1,6 @@
+<article class="card--image card--image-bottom">
+    <h3><a href="#">Card - Image Bottom</a></h3>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <img
+        src="https://www.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/43/1a/431abd68-5142-4fa2-a5d1-0644a19361b9/main-skeletalai-feature-1200x800-c-default.jpg__992x992_q85_subsampling-2.jpg" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-left-plain.hbs

@@ -0,0 +1,6 @@
+<article class="card--image-left c-card--plain">
+    <h3><a href="#">Card - Image Left</a></h3>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <img
+        src="https://www.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/1e/bb/1ebb892b-a975-43ee-af7b-9fdb254cc439/rattler-crop.jpg__576x576_q85_subsampling-2.jpg" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-left-transparent.hbs

@@ -0,0 +1,6 @@
+<article class="card--image card--image-left">
+    <h3><a href="#">Card - Image Left</a></h3>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <img
+        src="https://www.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/1e/bb/1ebb892b-a975-43ee-af7b-9fdb254cc439/rattler-crop.jpg__576x576_q85_subsampling-2.jpg" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-right-plain.hbs

@@ -0,0 +1,6 @@
+<article class="card--image-right c-card--plain">
+    <h3><a href="#">Card - Image Right</a></h3>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <img
+        src="https://www.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/1e/bb/1ebb892b-a975-43ee-af7b-9fdb254cc439/rattler-crop.jpg__576x576_q85_subsampling-2.jpg" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-right-transparent.hbs

@@ -0,0 +1,6 @@
+<article class="card--image card--image-right">
+    <h3><a href="#">Card - Image Right</a></h3>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <img
+        src="https://www.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/1e/bb/1ebb892b-a975-43ee-af7b-9fdb254cc439/rattler-crop.jpg__576x576_q85_subsampling-2.jpg" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-top-plain.hbs

@@ -0,0 +1,6 @@
+<article class="card--image-top c-card--plain">
+    <h3><a href="#">Card - Image Top</a></h3>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <img
+        src="https://www.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/43/1a/431abd68-5142-4fa2-a5d1-0644a19361b9/main-skeletalai-feature-1200x800-c-default.jpg__992x992_q85_subsampling-2.jpg" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-top-staff-plain.hbs

@@ -0,0 +1,8 @@
+<article class="card--image card--image-top c-card--plain">
+    <h4><a href="#">Bender Rodríguez</a></h4>
+    <p>Planet Express Worker</p>
+    <p>Anti-hero in Futurama</p>
+    <img class="img-fluid" width="234px" height="293px"
+        src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
+        title="University of Texas at Austin" class="img-fluid">
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-top-staff-transparent.hbs

@@ -0,0 +1,8 @@
+<article class="card--image card--image-top">
+    <h4><a href="#">Bender Rodríguez</a></h4>
+    <p>Planet Express Worker</p>
+    <p>Anti-hero in Futurama</p>
+    <img class="img-fluid" width="234px" height="293px"
+        src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
+        title="University of Texas at Austin" class="img-fluid">
+</article>

package/src/lib/_imports/components/c-card/_c-card--image-top-transparent.hbs

@@ -0,0 +1,6 @@
+<article class="card--image card--image-top">
+    <h3><a href="#">Card - Image Top</a></h3>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <img
+        src="https://www.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/43/1a/431abd68-5142-4fa2-a5d1-0644a19361b9/main-skeletalai-feature-1200x800-c-default.jpg__992x992_q85_subsampling-2.jpg" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--many-variable.hbs

@@ -35,6 +35,10 @@
     <h3>Card - {{this._self.label}}</h3>
 
     <p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
+
+    <li><a href="#">List Item A</a></li>
+    <li><a href="#">List Item B</a></li>
+    <li><a href="#">List Item C</a></li>
 </article>
 <article class="c-card c-card--{{this._self.name}}">
     <h3>Card - {{this._self.label}}</h3>

package/src/lib/_imports/components/c-card/_c-card--one-with-grid.hbs

@@ -21,7 +21,6 @@
     {{> @c-card--one-transparent }}
     {{> @c-card--one-plain }}
     {{> @c-card--one-standard }}
-    {{> @c-card--one-image }}
   </div>
 </article>
 

package/src/lib/_imports/components/c-card/c-card--frontera.hbs

@@ -1,3 +1,5 @@
+<section class="o-section">
+
 <!-- FAQ: Not using {{this._self.name}} because class is frontera-about-page -->
 <div class="o-grid o-grid--col-min-width">
   <a href="#" class="c-card c-card--frontera-about-page">
@@ -46,3 +48,5 @@
     <h3>Style ▸ Image + Text</h3>
   </div>
 </div>
+
+</section>

package/src/lib/_imports/components/c-card/c-card--images.hbs

@@ -0,0 +1,107 @@
+<h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
+<section class="o-section">
+    <h3>Transparent Card Image</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-transparent }}
+        {{> @c-card--image-bottom-transparent }}
+        {{> @c-card--image-right-transparent }}
+        {{> @c-card--image-left-transparent }}
+    </section>
+    <h3>Contact Card with Image - Transparent</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-staff-transparent }}
+    </section>
+
+    <h3>Plain Card Image</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-plain }}
+        {{> @c-card--image-bottom-plain }}
+        {{> @c-card--image-right-plain }}
+        {{> @c-card--image-left-plain }}
+    </section>
+    <h3>Contact Card with Image - Plain</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-staff-plain }}
+    </section>
+</section>
+<hr>
+<h2 id="section--null">Section - Light</h2>
+<section class="o-section o-section--style-light">
+    <h3>Transparent Card Image</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-transparent }}
+        {{> @c-card--image-bottom-transparent }}
+        {{> @c-card--image-right-transparent }}
+        {{> @c-card--image-left-transparent }}
+    </section>
+    <h3>Contact Card with Image - Transparent</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-staff-transparent }}
+    </section>
+
+    <h3>Plain Card Image</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-plain }}
+        {{> @c-card--image-bottom-plain }}
+        {{> @c-card--image-right-plain }}
+        {{> @c-card--image-left-plain }}
+    </section>
+    <h3>Contact Card with Image - Plain</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-staff-plain }}
+    </section>
+</section>
+<hr>
+<h2 id="section--null">Section - Muted</h2>
+<section class="o-section o-section--style-muted">
+    <h3>Transparent Card Image</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-transparent }}
+        {{> @c-card--image-bottom-transparent }}
+        {{> @c-card--image-right-transparent }}
+        {{> @c-card--image-left-transparent }}
+    </section>
+    <h3>Contact Card with Image - Transparent</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-staff-transparent }}
+    </section>
+
+    <h3>Plain Card Image</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-plain }}
+        {{> @c-card--image-bottom-plain }}
+        {{> @c-card--image-right-plain }}
+        {{> @c-card--image-left-plain }}
+    </section>
+    <h3>Contact Card with Image - Plain</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-staff-plain }}
+    </section>
+</section>
+<hr>
+<h2 id="section--null">Section - Dark</h2>
+<section class="o-section o-section--style-dark">
+    <h3>Transparent Card Image</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-transparent }}
+        {{> @c-card--image-bottom-transparent }}
+        {{> @c-card--image-right-transparent }}
+        {{> @c-card--image-left-transparent }}
+    </section>
+    <h3>Contact Card with Image - Transparent</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-staff-transparent }}
+    </section>
+
+    <h3>Plain Card Image</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-plain }}
+        {{> @c-card--image-bottom-plain }}
+        {{> @c-card--image-right-plain }}
+        {{> @c-card--image-left-plain }}
+    </section>
+    <h3>Contact Card with Image - Plain</h3>
+    <section class="o-section o-grid o-grid--col-min-width" id="image-cards">
+        {{> @c-card--image-top-staff-plain }}
+    </section>
+</section>

package/src/lib/_imports/components/c-card/c-card.demo.images.css

@@ -0,0 +1,36 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* To allow the image max-height to not be 100% for the demo */
+.o-grid img {
+    max-height: unset;
+}
+
+/* Rid margin-bottom on last section */
+.o-section>:last-child {
+    margin-bottom: var(--global-space--bootstrap-gap);
+}
+
+/* create a two column grid (cleaner look) */
+#image-cards {
+    grid-template-columns: 1fr 1fr;
+}
+
+/* get rid of margin for inner-sections */
+section > section {
+    margin: unset;
+}
+
+/* Contact card adjustments */
+:is(.card, .c-card, [class*="card--"]) h4 {
+    margin-bottom: 0.375em;
+}
+
+:is(.card, .c-card, [class*="card--"]) p {
+    margin-top: 0px;
+    margin-bottom: 10px;
+}
+
+.card--image-top {
+    max-width: fit-content;
+}
+

package/src/lib/_imports/components/c-card/config.yml

@@ -24,6 +24,3 @@ variants:
     status: deprecated
     📝 name: using "frontera-about-page" breaks the demo
     label: Frontera About Page
-    context:
-      supportStyles:
-        - ../../assets/components/c-card--frontera-about-page.css