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 952d3d9b50320d83fe139e2f4368a0a92e27223d..fd0383b137f45f05e2eefafb4207c0a2cb09e5e4 100644
--- a/source/_patterns/04-components/card/card--node/card--node.twig
+++ b/source/_patterns/04-components/card/card--node/card--node.twig
@@ -4,23 +4,16 @@
{% set node_image_class = 'without-image' %}
{% endif %}
+{{ dd(node) }}
<div class="uw-node__{{ node_image_class }}">
{% include '@components/card/card.twig' with {
'type': type,
- 'title': node.title,
- 'sub_title': node.sub_title,
- 'featured_image': featured_image,
- 'hero': node.hero,
- 'date': node.date,
+ 'hero_image': node.hero_image,
+ 'header': node.header,
'tags': node.tags,
'content': node.content,
'sources': node.image.sources,
- 'img_element': node.image.img_element,
- 'image': node.image.uri,
- 'alt': node.image.alt,
- 'header_level': 2,
'show_hover': '',
- 'author': node.author,
'url': node.url,
'additional_info': node.additional_info,
'location_info': node.location_info,
diff --git a/source/_patterns/04-components/card/card-elements/_author.twig b/source/_patterns/04-components/card/card-elements/_author.twig
new file mode 100644
index 0000000000000000000000000000000000000000..804fe00a48916d304640d83e590b382035e6e073
--- /dev/null
+++ b/source/_patterns/04-components/card/card-elements/_author.twig
@@ -0,0 +1,8 @@
+<div class="card__author">
+ by
+ {% if author.link %}
+ <a href="{{ author.link }}">{{ author.name }}</a>
+ {% else %}
+ {{ author.name }}
+ {% endif %}
+</div>
diff --git a/source/_patterns/04-components/card/card-elements/_content.twig b/source/_patterns/04-components/card/card-elements/_content.twig
new file mode 100644
index 0000000000000000000000000000000000000000..653f2fd4b80d7863b4005cdc6bb51e20d0f60ac3
--- /dev/null
+++ b/source/_patterns/04-components/card/card-elements/_content.twig
@@ -0,0 +1,3 @@
+<div class="card__content">
+ {{ content }}
+</div>
diff --git a/source/_patterns/04-components/card/card-elements/_date.twig b/source/_patterns/04-components/card/card-elements/_date.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e5dbf9dfc6a545078858193ebc6539b9c79480c7
--- /dev/null
+++ b/source/_patterns/04-components/card/card-elements/_date.twig
@@ -0,0 +1,6 @@
+<div class="card__date">
+ {% include '@components/date/date.twig' with {
+ 'date_format': date_format,
+ 'date': date,
+ } %}
+</div>
diff --git a/source/_patterns/04-components/card/card-elements/_header.twig b/source/_patterns/04-components/card/card-elements/_header.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8149c1b89f5d6523918a0350c47b4abb1e3a58b4
--- /dev/null
+++ b/source/_patterns/04-components/card/card-elements/_header.twig
@@ -0,0 +1,27 @@
+<div class="card__header">
+ {% if header.date %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': date_format,
+ 'date': header.date,
+ } %}
+ {% endif %}
+
+ {% if show_title == 'yes' %}
+ {% include '@components/card/card-elements/_title.twig' with {
+ 'header_level': 2,
+ 'title': header.title,
+ } %}
+ {% endif %}
+
+ {% if header.position %}
+ {% include '@components/card/card-elements/_position.twig' with {
+ 'position': position
+ } %}
+ {% endif %}
+
+ {% if header.author %}
+ {% include '@components/card/card-elements/_author.twig' with {
+ 'author': header.author
+ } %}
+ {% endif %}
+</div>
diff --git a/source/_patterns/04-components/card/card-elements/_hero-image.twig b/source/_patterns/04-components/card/card-elements/_hero-image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9a40ad783a4c4cef1f6f197138ad1a6e96767d49
--- /dev/null
+++ b/source/_patterns/04-components/card/card-elements/_hero-image.twig
@@ -0,0 +1,2 @@
+<div class="card__featured-image" style="background-image: url({{ hero.img_element }});" role="img" aria-label="{{ hero.alt }}">
+</div>
diff --git a/source/_patterns/04-components/card/card-elements/_listing-image.twig b/source/_patterns/04-components/card/card-elements/_listing-image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..5fb2f3fc5b6afc7c9e184413fca5af4cbc4a69e8
--- /dev/null
+++ b/source/_patterns/04-components/card/card-elements/_listing-image.twig
@@ -0,0 +1,15 @@
+<div class="card__media">
+ {% if url %}
+ <a href="{{ url }}">
+ {% endif %}
+
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: listing_image.sources,
+ img_element: listing_image.img_element,
+ alt: listing_image.alt
+ }%}
+
+ {% if url %}
+ </a>
+ {% endif %}
+</div>
diff --git a/source/_patterns/04-components/card/card-elements/_position.twig b/source/_patterns/04-components/card/card-elements/_position.twig
new file mode 100644
index 0000000000000000000000000000000000000000..50b074bade44bb505a1a4831013236b3bd41aae1
--- /dev/null
+++ b/source/_patterns/04-components/card/card-elements/_position.twig
@@ -0,0 +1,3 @@
+<div class="card__position">
+ {{ position }}
+</div>
diff --git a/source/_patterns/04-components/card/card-elements/_title.twig b/source/_patterns/04-components/card/card-elements/_title.twig
new file mode 100644
index 0000000000000000000000000000000000000000..59160d13d17c1ed658689dc73a8f7c9b69529551
--- /dev/null
+++ b/source/_patterns/04-components/card/card-elements/_title.twig
@@ -0,0 +1,27 @@
+{% if header_level %}
+ <h{{ header_level }} class="card__title">
+{% else %}
+ <div class="card__title">
+ <strong>
+{% endif %}
+
+{% if url %}
+ <a href="{{ url }}">
+{% endif %}
+
+{{ title }}
+
+{% if url %}
+ </a>
+{% endif %}
+
+{% if header_level %}
+ </h{{ header_level }}>
+{% else %}
+ </strong>
+ </div>
+{% endif%}
+
+{% if sub_title %}
+ <span class="sub-title">{{ sub_title }}</span>
+{% endif %}
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 5b1102db086f99f106fbd0e08339fc0a94def5cb..fc93e624057281a8a16996bd2cc2c41d1d99fe39 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -9,84 +9,21 @@
<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ card_type }}" >
- {% 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>
+ {% if hero_image %}
+ {% include '@components/card/card-elements/_hero-image.twig' with {
+ 'hero': hero_image,
+ } %}
{% endif %}
<div class="card__body">
- {% if title or author or date or sub_title or position %}
- <div class="card__header">
- {% if date %}
- <div class="card__date">
- {% include '@components/date/date.twig' with {
- 'date_format': date_format,
- 'date': date,
- } %}
- </div>
- {% endif %}
-
- {% if show_title == 'yes' %}
- {% if header_level %}
- <h{{ header_level }} class="card__title">
- {% else %}
- <div class="card__title">
- <strong>
- {% endif %}
- {% if url %}
- <a href="{{ url }}">
- {% endif %}
- {{ title }}
- {% if url %}
- </a>
- {% endif %}
- </strong>
- {% if header_level %}
- </h{{ header_level }}>
- {% else %}
- </div>
- {% endif%}
-
- {% if sub_title %}
- <span class="sub-title">{{ sub_title }}</span>
- {% endif %}
- {% endif %}
-
- {% if position %}
- <div class="card__position">
- {{ position }}
- </div>
- {% endif %}
-
- {% if author %}
- <div class="card__author">
- by
- {% if author.link %}
- <a href="{{ author.link }}">{{ author.name }}</a>
- {% else %}
- {{ author.name }}
- {% endif %}
- </div>
- {% endif %}
- </div>
- {% endif %}
+ {% include '@components/card/card-elements/_header.twig' with {
+ 'header': header
+ } %}
- {% if not featured_image and (sources or img_element) %}
- <div class="card__media">
- {% if url %}
- <a href="{{ url }}">
- {% endif %}
-
- {% include "@components/responsive-image/responsive-image.twig" with {
- sources: sources,
- img_element: img_element,
- alt: alt
- }%}
-
- {% if url %}
- </a>
- {% endif %}
- </div>
+ {% if listing_image %}
+ {% include '@components/card/card-elements/_listing-image.twig' with {
+ 'listing_image': listing_image
+ } %}
{% endif %}
{% if image and not card_type == 'banner' %}
@@ -96,9 +33,9 @@
{% endif %}
{% if content %}
- <div class="card__content">
- {{ content }}
- </div>
+ {% include '@components/card/card-elements/_content.twig' with {
+ 'content': content
+ } %}
{% endif %}
</div>