ISTWCMS-5194: banners should look the same in all content types, Pattern lab...

 ISTWCMS-5194: banners should look the same in all content types, Pattern lab card appearance and card_banner presentation and yaml updates.  ISTWCMS-4868:additional css to make the banner's strong tag consistant. ISTWCMS-5081: Date and Title should get proper hero styling.

source/_patterns/04-components/card/_card.scss

@@ -29,24 +29,66 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 .card--show-hover{
   border-bottom: 3px solid $card-accent-border-color;
   box-shadow: gesso-box-shadow(1);
+  padding: $card-padding;
   transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
   &:hover,
   &:focus-within {
     box-shadow: gesso-box-shadow(3);
   }
 }
-.card__featured-image{
-  background-position:center center;
-  background-repeat:no-repeat;
+.card__image{}
+.card__featured-image {
+  align-items: center;
+  background-position: center center;
+  background-repeat: no-repeat;
   background-size: cover;
-  height:45rem;
+  display: grid;
+  height: 45rem;
+  justify-items: center;
   min-height: 44rem;
+  position: relative;
+  .card__header {
+    align-self: end;
+    margin-bottom: 0;
+    margin-top: 0;
+    max-width: $max-width;
+    padding: 0 gesso-spacing(md);
+    @include xl {
+      padding: 0;
+    }
+
 
+    .card__date {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+
+    .card__title {
+      background: gesso-brand(org-default, uw-white, primary);
+      font-size: gesso-font-size(8);
+      margin-bottom: 0;
+      margin-top: 0;
+      padding: gesso-spacing(sm) gesso-spacing(md);
+    }
+
+    .card__sub-title {
+      background: gesso-brand(org-default, uw-white, primary);
+      font-size: gesso-font-size(4);
+      margin-bottom: 0;
+      margin-top: 0;
+      padding: gesso-spacing(xs) gesso-spacing(md);
+    }
+
+    .card__author {
+      background: gesso-brand(org-default, uw-white, primary);
+      margin-bottom: 0;
+      margin-top: 0;
+      padding: gesso-spacing(xs) gesso-spacing(md);
+    }
+  }
 }
-// top
 .card__header{
   @include uw-no-breakout();
-  color: $card-meta-color;
   margin-bottom: rem(gesso-spacing(xs));
   width: 100%;
 
@@ -66,9 +108,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
     );
   }
 }
-.card__sub-title{
-
-}
+.card__sub-title{}
 .card__author{
   @include uw-no-breakout();
   font-family: gesso-font-family(systemmedium);
@@ -84,15 +124,10 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 }
 // body
 .card__body {
-  @include uw-flex-grid();
-  //background:$test-color-10;
-  gap:inherit;
-  padding: $card-padding;
-  width: 100%;
+
 
 }
 .card__content {
-  //background:$test-color-9;
   margin-bottom: rem(gesso-spacing(md));
   width: 100%;
 }
@@ -135,17 +170,8 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 
 // footer
 .card__footer {
-  @include uw-no-breakout();
-  margin-top: auto;
-  padding: rem(gesso-spacing(md));
-  width: 100%;
 
-  > div {
-    margin-bottom: rem(gesso-spacing(sm));
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
+  width: 100%;
 }
 .card__tags{
   width: 100%;
@@ -159,8 +185,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   width: 100%;
 }
 
-
-
+// Have not worked on card feature.
 .card--feature {
   .card__body {
     padding-top: $card-padding;

source/_patterns/04-components/card/card--banner/_card--banner.scss

@@ -4,100 +4,119 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
   .#{$faculty} {
     // If the UW branding group
     @if $faculty == org-default {
-      .card.banner{
-        .card__header{
-          background-color: rgba(0,0,0,.8);
+        .card__banner--caption{
+          background-color:$uw-black;
+          @include small {
+            background-color: rgba(0,0,0,.8);
+          }
+          a {
+            color: $uw-gold;
+            &:hover {
+              color: $uw-gold;
+            }
+          }
         }
-        .sub-title{
+        .card__banner--sub-title  {
           color: $uw-white;
         }
-        .card__title {
+        .card__banner--title {
           color: $uw-gold;
-
-          a {
-            color: $uw-gold;
-          }
         }
-
       }
-
-    }
     @else {
-      .card.banner{
-        .card__header{
-          background: rgba(gesso-brand($faculty, 'primary'), 0.8);
+        .card__banner--caption{
+            background:gesso-brand($faculty, 'primary');
+            @include small {
+              background: rgba(gesso-brand($faculty, 'primary'), 0.8);
+            }
+            a {
+            color:gesso-brand($faculty, 'lvl1');
+            &:hover {
+              color:gesso-brand($faculty, 'lvl1');
+            }
+          }
         }
-        .sub-title{
+        .card__banner--sub-title  {
           color:gesso-brand($faculty, 'lvl1');
         }
-        .card__title {
+        .card__banner--title  {
           color:gesso-brand($faculty, 'lvl1');
 
-          a {
-            color:gesso-brand($faculty, 'lvl1');
-          }
         }
       }
     }
-  }
 }
-.card.banner {
-
+.card__banner {
   .card__body {
+    padding:inherit;
+  }
+}
+.card__banner--image {
     margin-bottom: 0;
     padding: 0;
-    position:relative;
-
+    position: relative;
+}
+.card__banner--caption {
+  display: block;
+  height: auto;
+  margin-bottom: 0;
+  opacity: 1;
+  padding: 1rem 2rem;
+  position:relative;
+  @include small{
+    bottom:0;
+    position:absolute;
   }
-  .card__header {
-
-    bottom: 0;
-    display: block;
-    height: auto;
-    margin-bottom:0;
-    opacity: 1;
-    padding: 1rem 2rem;
-    position: absolute;
-    text-align: center;
-    width: 100%;
-    z-index: gesso-z-index(overlay);
-    .card__title {
-      font-family: $header-font-family;
-      font-size: gesso-font-size(6);
-      line-height: 1.25;
-      margin:0;
-      strong{
-        font-weight:400;
-      }
-    }
-
-    .sub-title {
-      font-family:gesso-font-family(book);
-      font-size: gesso-font-size(0);
-      line-height:1;
-
-    }
+  text-align: center;
+  width: 100%;
+  z-index: gesso-z-index(overlay);
+  strong{
+    font-weight:400;
   }
-
-  .card__media {
-
-    margin-bottom: 0;
-    order:inherit;
-    a {
-      display:block;
+  a {
+    text-decoration: none;
+    &:hover {
+    text-decoration: underline;
     }
   }
-
-  .card__title {
-    a {
-      font-family: $header-font-family;
-      font-weight: 400;
-      letter-spacing: .045rem;
-      text-align: center;
-      text-decoration: none;
-      &:hover {
-        text-decoration: underline;
-      }
+}
+.card__banner--title {
+  display: block;
+  font-family: $header-font-family;
+  font-size: gesso-font-size(6);
+  font-weight: 400;
+  letter-spacing: .045rem;
+  line-height: 1.25;
+  margin: 0;
+  text-align: center;
+  width:auto;
+}
+.card__banner--sub-title {
+  display: block;
+  font-family: gesso-font-family(book);
+  font-size: gesso-font-size(0);
+  line-height: 1.25;
+  width:auto;
+}
+.card__banner--media {
+  background:$uw-black;
+  margin-bottom: 0;
+  order: inherit;
+  a {
+    background:$uw-black;
+    display: block;
+    opacity:1;
+    transition-delay: 0s;
+    transition-duration: .2s;
+    transition-property: color,background-color,border-color,opacity;
+    transition-timing-function: linear;
+    &:hover{
+      opacity:0.6;
+      transition-delay: 0s;
+      transition-duration: .2s;
+      transition-property: color,background-color,border-color,opacity;
+      transition-timing-function: linear;
     }
+
   }
 }

source/_patterns/04-components/card/card--banner/card--banner.twig

@@ -3,5 +3,6 @@
     'banner': image,
     'show_header': 'no',
     'type': 'banner',
+    'faculty': faculty,
   } %}
 {% endfor %}

source/_patterns/04-components/card/card--banner/card--banner.yml

@@ -3,7 +3,7 @@ banners:
     -
       sources:
         -
-          srcset: '../../../../source/images/president/president_xlarge.jpg'
+          srcset: '../../../../source/images/president/original.jpg'
           media: 'all and (min-width: 63.19rem)'
           type: 'image/jpeg'
         -
@@ -22,53 +22,9 @@ banners:
           srcset: '../../../../source/images/president/president_xsmall.jpg'
           media: 'all and (min-width: 15rem)'
           type: 'image/jpeg'
-      img_element: '../../../../source/images/president/president_xlarge.jpg'
+      img_element: '../../../../source/images/president/original.jpg'
       alt: 'Alternative text'
       big_text: 'Image1'
       small_text: 'Caption 1'
       link: 'http://google.ca'
-    -
-      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'
-      big_text: 'Image2'
-    -
-      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'
-      big_text: 'Image3'
-      link: 'http://google.ca'
-  autoplay: 1
-  slide_speed: 7000
-  style: 'full-width'
-  transition_speed: 400
+      faculty: 'org-default'

source/_patterns/04-components/card/card--node/_card--node.scss

@@ -9,59 +9,17 @@
     .card__footer {
       margin:0 auto;
       max-width: $max-width;
-    }
-  }
-  .card__featured-image {
-    align-items: center;
-    display: grid;
-    justify-items: center;
-    position: relative;
-
-    .card__header {
-      align-self: end;
-      margin-bottom: 0;
-      margin-top: 0;
-      max-width: $max-width;
-      padding: 0 gesso-spacing(md);
+      padding: 0 gesso-spacing(sm);
       @include xl{
         padding: 0;
       }
-
-
-      .card__date {
-        margin-bottom: 0;
-        margin-top: 0;
-      }
-
-      .card__title {
-        background: gesso-brand(org-default, uw-white, primary);
-        font-size: gesso-font-size(8);
-        margin-bottom: 0;
-        margin-top: 0;
-        padding: gesso-spacing(sm) gesso-spacing(md);
-      }
-
-      .card__sub-title {
-        background: gesso-brand(org-default, uw-white, primary);
-        font-size: gesso-font-size(4);
-        margin-bottom: 0;
-        margin-top: 0;
-        padding: gesso-spacing(xs) gesso-spacing(md);
-      }
-
-      .card__author {
-        background: gesso-brand(org-default, uw-white, primary);
-        margin-bottom: 0;
-        margin-top: 0;
-        padding: gesso-spacing(xs) gesso-spacing(md);
-      }
     }
   }
   .card__footer{
-    padding: gesso-spacing(xs) gesso-spacing(md);
+    margin-bottom: rem(gesso-spacing(md));
+    padding: 0 gesso-spacing(sm);
+    @include xl{
+      padding: 0;
+    }
   }
 }
-// Why is this in here ?
-.uw-main > div > .action-links{
-  margin:0 !important;
-}

source/_patterns/04-components/card/card--node/card--node-news-item.twig

+{% if node.hero_image and node.hero_image.img_element %}
+  {% set node_image_class =  'with-image' %}
+{% else %}
+  {% set node_image_class =  'without-image' %}
+{% endif %}
+
+
+<div class="uw-node__{{ node_image_class }}">
+  {% include '@components/card/card.twig' with {
+    'url': news.url,
+    'type': type,
+    'show_hover': '',
+    'header': news.header,
+    'hero_image': news.hero_image,
+    'content': news.content,
+    'footer': news.footer,
+  } %}
+</div>

source/_patterns/04-components/card/card--node/card--node-news-item.yml

+---
+modifier_classes: ''
+header_level: '2'
+type: 'news-item'
+news:
+  url: '#'
+  header:
+    date:
+      0: 'Friday, September 19, 2020'
+    title: 'NEWS TITTLE title 1'
+    author:
+      name: 'Author Lastname'
+      link: '#'
+  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'
+#  listing_image:
+#    img_element: '../../../../source/images/president/president_xlarge.jpg'
+#    alt: 'Alternative listing image text.'
+  hero_image:
+    img_element: '../../../../source/images/president/original.jpg'
+    alt: 'Alternative hero text'

source/_patterns/04-components/card/card--node/card--node.yml

 ---
 modifier_classes: ''
 header_level: '2'
+type: 'node'
+show_title: 'no'
 node:
   url: '#'
   header:
     date:
       0: 'Friday, September 19, 2020'
-    title: 'This is a Card title'
+    title: 'Blog Teaser title 1'
     author:
       name: 'Author Lastname'
       link: '#'
-  tags:
-    tag1:
+  footer:
+    tags:
       -
         url: '#'
         title: 'Tag 1'
@@ -28,7 +30,6 @@ node:
         url: '#'
         title: 'Tag 4'
         type: 'simple'
-    tag2:
       -
         url: '#'
         title: 'Tag 5'
@@ -60,20 +61,9 @@ node:
   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:
+  listing_image:
     img_element: '../../../../source/images/president/president_xlarge.jpg'
-    alt: 'Alternative hero text'
-type: 'node'
+    alt: 'Alternative listing image text.'
+#  hero_image:
+#    img_element: '../../../../source/images/president/president_xlarge.jpg'
+#    alt: 'Alternative hero text'

source/_patterns/04-components/card/card--teaser/_card--teaser.scss

 .card__teaser{
-
+  .uw-node__without-image &{
+    .card__header,
+    .card__footer {
+        padding: 0;
+    }
+  }
 }

source/_patterns/04-components/card/card--teaser/card--teaser.twig

@@ -10,7 +10,6 @@
   'header': teaser.header,
   'listing_image': teaser.listing_image,
   'content': teaser.content,
-  'tags': teaser.tags,
+  'footer': teaser.footer,
   'show_hover': show_hover,
-  'type': type,
 } %}

source/_patterns/04-components/card/card--teaser/card--teaser.yml

+---
+modifier_classes: ''
+header_level: '2'
+type: 'teaser'
+show_hover: 'yes'
+teaser:
+  url: '#'
+  header:
+    date:
+      0: 'Friday, September 19, 2020'
+    title: 'Blog Teaser title 1'
+    author:
+      name: 'Author Lastname'
+      link: '#'
+  footer:
+    tags:
+      -
+        url: '#'
+        title: 'Tag 1'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 2'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 3'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 4'
+        type: 'simple'
+      -
+        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>'
+  listing_image:
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative listing image text.'
+#  hero_image:
+#    img_element: '../../../../source/images/president/president_xlarge.jpg'
+#    alt: 'Alternative hero text'

source/_patterns/04-components/card/card-elements/_banner.twig

-<div class="card__banner--image">
+<div class="card__banner--image {{ image.faculty }}">
+  {% if image.link %}
+  <div class="card__banner--media">
+    <a href="{{ image.link }}">
+    {% endif %}
 
+      {% include "@components/responsive-image/responsive-image.twig" with {
+        sources: image.sources,
+        img_element: listing_image.img_element,
+        alt: listing_image.alt
+      }%}
+
+      {% if image.link %}
+    </a>
+  </div>
+
+  {% endif %}
   {% if image.big_text or image.small_text %}
-    <div class="card__banner--titles">
+    <div class="card__banner--caption">
       {% if image.big_text %}
+      <strong>
+      {% if image.link %}
+        <a href="{{ image.link }}">
+      {% endif %}
         <span class="card__banner--title">
           {{ image.big_text }}
         </span>
+        {% if image.link %}
+        </a>
+        {% endif %}
       {% endif %}
+      </strong>
       {% if image.small_text %}
         <span class="card__banner--sub-title">
           {{ image.small_text }}
@@ -15,17 +38,4 @@
     </div>
   {% endif %}
 
-  {% if image.url %}
-    <a href="{{ image.url }}">
-  {% endif %}
-
-  {% include "@components/responsive-image/responsive-image.twig" with {
-    sources: image.sources,
-    img_element: listing_image.img_element,
-    alt: listing_image.alt
-  }%}
-
-  {% if url %}
-    </a>
-  {% endif %}
 </div>

source/_patterns/04-components/card/card.twig

 {% import '@base/macros/uw.macro.twig' as macros %}
 
-<article class="card{% if type %} card__{{ type }}{% endif %}{% if show_hover %} card--show-hover {% endif %}" >
+<article class="card{% if type %} card__{{ type }}{% endif %}{% if modifiier_classes %} card__{{ modifiier_classes }}{% endif %} {% if show_hover %} card--show-hover {% endif %}" >
 
   {% if hero_image %}
     <div class="card__image">
@@ -26,7 +26,7 @@
     } %}
   {% endif %}
 
-  {% if content or banner or listing_image %}
+  {% if content or banner %}
     <div class="card__body">
 
       {% if banner %}

source/_patterns/04-components/card/card.yml

 ---
 modifier_classes: ''
 header_level: '2'
+type: 'node'
 url: '#'
+show_title: 'yes'
 header:
   date:
     0: 'Friday, September 19, 2020'
-  title: 'This is a Card title'
+  title: 'Card  title 1'
   author:
     name: 'Author Lastname'
     link: '#'
-tags:
-  tag1:
+footer:
+  tags:
     -
       url: '#'
       title: 'Tag 1'
@@ -27,19 +29,18 @@ tags:
       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'
+    -
+      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)'
@@ -59,20 +60,9 @@ sources:
 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:
+listing_image:
   img_element: '../../../../source/images/president/president_xlarge.jpg'
-  alt: 'Alternative hero text'
-type: 'card'
+  alt: 'Alternative listing image text.'
+#hero_image:
+#  img_element: '../../../../source/images/president/president_xlarge.jpg'
+#  alt: 'Alternative hero text'

source/_patterns/04-components/content-grid-list/content-grid-list.twig

@@ -7,25 +7,35 @@
         {% if views %}
           <div class ="views-row">
         {% endif %}
-        {% include "@components/card/card.twig" with {
-          modifier_classes: item.modifier_classes,
-          title: item.title,
-          header_level: '2',
-          url: item.url,
-          footer: item.footer,
-          date: item.date,
-          date_format: item.date_format,
-          read_more: item.read_more,
-          tags: item.tags,
-          tag_type: item.tag_type,
-          sources: item.sources,
-          img_element: item.img_element,
-          alt: item.alt,
-          content: item.content,
-          show_hover: true,
-          author_name: item.author_name,
-          author_link: item.author_link
-        } %}
+{#        {% include "@components/card/card.twig" with {#}
+{#          modifier_classes: item.modifier_classes,#}
+{#          title: item.title,#}
+{#          header_level: '2',#}
+{#          url: item.url,#}
+{#          footer: item.footer,#}
+{#          date: item.date,#}
+{#          date_format: item.date_format,#}
+{#          read_more: item.read_more,#}
+{#          tags: item.tags,#}
+{#          tag_type: item.tag_type,#}
+{#          sources: item.sources,#}
+{#          img_element: item.img_element,#}
+{#          alt: item.alt,#}
+{#          content: item.content,#}
+{#          show_hover: true,#}
+{#          author_name: item.author_name,#}
+{#          author_link: item.author_link#}
+{#        } %}#}
+      {% include '@components/card/card.twig' with {
+        'url': item.url,
+        'type': item.type,
+        'show_hover': '',
+        'header': item.header,
+        'hero_image': item.hero_image,
+        'listing_image': item.listing_image,
+        'content': item.content,
+        'footer': item.footer,
+      } %}
         {% if views %}
           </div>
         {% endif %}