diff --git a/source/_patterns/04-components/card/card--node/card--node.twig b/source/_patterns/04-components/card/card--node/card--node.twig
index 261ccb5d2c507c31b2324f3cb79e99a1b9723368..53f43d8e8ba288ef0514f80c975aae3b2ae2841a 100644
--- a/source/_patterns/04-components/card/card--node/card--node.twig
+++ b/source/_patterns/04-components/card/card--node/card--node.twig
@@ -29,5 +29,6 @@
     'groups': node.groups,
     'featured_image': featured_image,
     'card_type': 'node',
+    'hero': node.hero,
   } %}
 </div>
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 0e6616ce54c3410c18538ecde35ab41e090f425d..c410e4a0b9d02e5db8f3a3ff8cb15e03e24a70d9 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -9,8 +9,8 @@
 
 <article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ card_type }}" >
 
-  {% if featured_image == 'yes' and img_element %}
-    <div class="card__featured-image" style="background-image: url({{ img_element }});" role="img" aria-label="{{ alt }}">
+  {% if featured_image == 'yes' and hero.img_element %}
+    <div class="card__featured-image" style="background-image: url({{ hero.img_element }});" role="img" aria-label="{{ hero.alt }}">
     </div>
   {%  endif %}
 
diff --git a/source/_patterns/04-components/card/card.yml b/source/_patterns/04-components/card/card.yml
index db027095da575cf67890cb9901404bfcdf42ba6f..4839c8b4d8e58ebb0aaf40d530c66799b4640720 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -73,3 +73,6 @@ social_media:
     - text: 'LinkedIn'
       url: 'https://www.linkedin.com/edu/school?id=10875'
 social_media_placement: 'card-footer'
+hero:
+  img_element: '../../../../source/images/president/president_xlarge.jpg'
+  alt: 'Alternative hero text'