diff --git a/source/_patterns/04-components/banners/banners.js b/source/_patterns/04-components/banners/banners.js
index d7419fb41ba9485a4719f291611b163da1c1dc82..a90fdc60153a88b3ac2d35a47e15706951a001dc 100644
--- a/source/_patterns/04-components/banners/banners.js
+++ b/source/_patterns/04-components/banners/banners.js
@@ -8,7 +8,7 @@
$(document).ready(function () {
// Step through each FF on the page.
- $('.card.banner').each(function () {
+ $('.card__banner').each(function () {
// Get the number of items for the carousel, if any.
var num_of_items = 1;
diff --git a/source/_patterns/04-components/card/card--node/card--node.yml b/source/_patterns/04-components/card/card--node/card--node.yml
new file mode 100644
index 0000000000000000000000000000000000000000..285c45e3fe9a836c8331e058ad058481860042f0
--- /dev/null
+++ b/source/_patterns/04-components/card/card--node/card--node.yml
@@ -0,0 +1,79 @@
+---
+modifier_classes: ''
+header_level: '2'
+node:
+ url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'This is a Card title'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ tags:
+ tag1:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ tag2:
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ social_media:
+ menu_tree:
+ - text: 'Facebook'
+ url: 'https://www.facebook.com/university.waterloo'
+ - text: 'Twitter'
+ url: 'https://twitter.com/uWaterloo'
+ - text: 'YouTube'
+ url: 'https://www.youtube.com/user/uwaterloo'
+ - text: 'Instagram'
+ url: 'https://www.instagram.com/uofwaterloo/'
+ - text: 'LinkedIn'
+ url: 'https://www.linkedin.com/edu/school?id=10875'
+ social_media_placement: 'card-footer'
+ hero_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative hero text'
+type: 'node'
diff --git a/source/_patterns/04-components/card/card-elements/_banner.twig b/source/_patterns/04-components/card/card-elements/_banner.twig
index 64db59fd2c4c653c2a383bbd08606c566159179a..3cd7896ad40c229c354d58dbedae73c470993970 100644
--- a/source/_patterns/04-components/card/card-elements/_banner.twig
+++ b/source/_patterns/04-components/card/card-elements/_banner.twig
@@ -1,19 +1,20 @@
-{% if image.big_text or image.small_text %}
- <div class="card__header">
- {% if image.big_text %}
- <div class="card__title">
- {{ image.big_text }}
- </div>
- {% endif %}
- {% if image.small_text %}
- <span class="sub-title">
- {{ image.small_text }}
- </span>
- {% endif %}
- </div>
-{% endif %}
+<div class="card__banner--image">
+
+ {% if image.big_text or image.small_text %}
+ <div class="card__banner--titles">
+ {% if image.big_text %}
+ <span class="card__banner--title">
+ {{ image.big_text }}
+ </span>
+ {% endif %}
+ {% if image.small_text %}
+ <span class="card__banner--sub-title">
+ {{ image.small_text }}
+ </span>
+ {% endif %}
+ </div>
+ {% endif %}
-<div class="card__banner">
{% if image.url %}
<a href="{{ image.url }}">
{% endif %}
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 5b058e378b530f96e3f58b0accdc61550ef97a2e..cec81378653aa8dc8a58748cbf4b02598ee285e3 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -11,7 +11,7 @@
{% set show_header = 'yes' %}
{% endif %}
-<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
+<article class="card{% if type %} card__{{ type }}{% endif %}{% if show_hover %} card--show-hover {% endif %}" >
{% if hero_image %}
{% include '@components/card/card-elements/_hero-image.twig' with {
diff --git a/source/_patterns/04-components/card/card.yml b/source/_patterns/04-components/card/card.yml
index 4839c8b4d8e58ebb0aaf40d530c66799b4640720..fe8dca9da19939cfcdcc3020044a672d42b21cbe 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -1,15 +1,14 @@
---
modifier_classes: ''
-title: 'This is a Card title'
header_level: '2'
url: '#'
-author_name: 'Author Lastname'
-author_link: '#'
-footer:
-date: 'Friday, September 19, 2020'
-date_format: 'long-date'
-read_more: true
-show_hover: true
+header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'This is a Card title'
+ author:
+ name: 'Author Lastname'
+ link: '#'
tags:
tag1:
-
@@ -73,6 +72,7 @@ social_media:
- text: 'LinkedIn'
url: 'https://www.linkedin.com/edu/school?id=10875'
social_media_placement: 'card-footer'
-hero:
+hero_image:
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative hero text'
+type: 'card'