diff --git a/src/lib/_imports/components/c-card/_c-card--image-bottom-plain.hbs b/src/lib/_imports/components/c-card/_c-card--image-bottom-plain.hbs
deleted file mode 100644
index 00d5f7b52..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-bottom-plain.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-bottom-transparent.hbs b/src/lib/_imports/components/c-card/_c-card--image-bottom-transparent.hbs
deleted file mode 100644
index f106690db..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-bottom-transparent.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-left-plain.hbs b/src/lib/_imports/components/c-card/_c-card--image-left-plain.hbs
deleted file mode 100644
index bde545549..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-left-plain.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-left-transparent.hbs b/src/lib/_imports/components/c-card/_c-card--image-left-transparent.hbs
deleted file mode 100644
index 7f1c1ebbe..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-left-transparent.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-right-plain.hbs b/src/lib/_imports/components/c-card/_c-card--image-right-plain.hbs
deleted file mode 100644
index 7baa5bf27..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-right-plain.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-right-transparent.hbs b/src/lib/_imports/components/c-card/_c-card--image-right-transparent.hbs
deleted file mode 100644
index 9e519ff0c..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-right-transparent.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-top-plain.hbs b/src/lib/_imports/components/c-card/_c-card--image-top-plain.hbs
deleted file mode 100644
index ab7982f5d..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-top-plain.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-top-staff-plain.hbs b/src/lib/_imports/components/c-card/_c-card--image-top-staff-plain.hbs
deleted file mode 100644
index cd4507e5a..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-top-staff-plain.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-top-staff-transparent.hbs b/src/lib/_imports/components/c-card/_c-card--image-top-staff-transparent.hbs
deleted file mode 100644
index 05fef1b93..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-top-staff-transparent.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image-top-transparent.hbs b/src/lib/_imports/components/c-card/_c-card--image-top-transparent.hbs
deleted file mode 100644
index 7d6dd1051..000000000
--- a/src/lib/_imports/components/c-card/_c-card--image-top-transparent.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/_c-card--image.hbs b/src/lib/_imports/components/c-card/_c-card--image.hbs
new file mode 100644
index 000000000..33ed51f9d
--- /dev/null
+++ b/src/lib/_imports/components/c-card/_c-card--image.hbs
@@ -0,0 +1,19 @@
+<article class="c-card c-card--{{variant}} c-card--image-{{position}}">
+{{#if is-staff}}
+
+  <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"
+  />
+
+{{else}}
+
+  <h3>Card - Image {{position}}</h3>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+  <img src="{{> @img-url wide=wide tall=tall medium=true }}" />
+
+{{/if}}
+</article>
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 3e3bb7c84..63670d982 100644
--- a/src/lib/_imports/components/c-card/c-card--images.hbs
+++ b/src/lib/_imports/components/c-card/c-card--images.hbs
@@ -2,26 +2,26 @@
 <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 }}
+        {{> @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>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 }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
     </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 }}
+        {{> @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>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 }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
     </section>
 </section>
 <hr>
@@ -29,26 +29,26 @@
 <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 }}
+        {{> @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>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 }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
     </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 }}
+        {{> @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>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 }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
     </section>
 </section>
 <hr>
@@ -56,26 +56,26 @@
 <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 }}
+        {{> @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>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 }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
     </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 }}
+        {{> @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>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 }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
     </section>
 </section>
 <hr>
@@ -83,25 +83,25 @@
 <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 }}
+        {{> @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>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 }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
     </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 }}
+        {{> @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>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 }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
     </section>
 </section>
\ No newline at end of file
diff --git a/src/lib/_imports/components/c-card/config.yml b/src/lib/_imports/components/c-card/config.yml
index fdf96b3d6..10db09dfa 100644
--- a/src/lib/_imports/components/c-card/config.yml
+++ b/src/lib/_imports/components/c-card/config.yml
@@ -12,8 +12,8 @@ variants:
     status: backup
   - name: standard-3
     status: backup
-  # - name: image
-  #   status: prototype
+  - name: images
+    status: wip
   - name: docs
     status: ready
     context: