Compare revisions

Eric Bremner · Eric Bremner · Eric Bremner · Martin Leblanc · Kevin Paxman · Kevin Paxman
--- a/source/_data/design-tokens.artifact.yml
+++ b/source/_data/design-tokens.artifact.yml
@@ -212,7 +212,7 @@ gesso:
      background: "#0071BC"
      text: "#fff"
    table:
-      border: "#757575"
+      border: "#ccc"
      background: "#fff"
      background-head: "#eee"
      background-foot: "#eee"
@@ -250,20 +250,20 @@ gesso:
        stack: georgia, "droid serif", "Times New Roman", Times, serif
      secondary:
        name: Secondary
-        stack: BureauGrot, impact, "avenir next condensed heavy", "Droid Sans",
-          sans-serif;
+        stack: BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid
+          Sans", sans-serif;
      book:
        name: Book
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy",
+          "Droid Sans", sans-serif'
      condensed:
        name: Condensed
-        stack: BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans",
-          sans-serif
+        stack: BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed
+          heavy", "Droid Sans", sans-serif
      condensedbook:
        name: Condensed-Book
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
      system:
        name: System  Typ1451-Regular
        stack: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -330,38 +330,38 @@ gesso:
        font-size: 41.056px
        font-weight: 400
      h1:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
        font-size: 41.056px
        font-weight: 400
        line-height: 1.1
      h2:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
        font-size: 28.832px
        font-weight: 400
        line-height: 1.1
      h3:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
        font-size: 22.784px
        font-weight: 400
        line-height: 1.1
      h4:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
        font-size: 20.256px
        font-weight: 400
        line-height: 1.1
      h5:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
        font-size: 18px
        font-weight: 400
        line-height: 1.1
      h6:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
        font-size: 16px
        font-weight: 400
        line-height: 1.1

--- a/source/_meta/_00-head.mustache
+++ b/source/_meta/_00-head.mustache
@@ -4,7 +4,13 @@
    <title>{{ title }}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
-
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap"
+          media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
    <link rel="stylesheet" href="../../../../css/style.css?{{ cacheBuster }}" media="all" />
    <link rel="stylesheet" href="../../../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />


--- a/source/_meta/_00-head.twig
+++ b/source/_meta/_00-head.twig
@@ -7,8 +7,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{{ page_title }} | {{ site_name }}</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
    <link rel="stylesheet" href="../../../../css/styles.css?{{ cacheBuster }}" media="all">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css?{{ cacheBuster }}" media="all">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css?{{ cacheBuster }}" media="all">

--- a/source/_meta/_02-basic-head.twig
+++ b/source/_meta/_02-basic-head.twig
@@ -7,8 +7,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{{ page_title }} | {{ site_name }}</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
    <link rel="stylesheet" href="../../../css/styles.css?{{ cacheBuster }}" media="all">
    <script src="../../../js/libraries/modernizr.min.js?v=3.3.1"></script>
    <link rel="stylesheet" href="../../../css/pattern-lab.css?{{ cacheBuster }}" media="all">

--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -254,7 +254,7 @@ $gesso: (
      text: #fff,
    ),
    table: (
-      border: #757575,
+      border: #ccc,
      background: #fff,
      background-head: #eee,
      background-foot: #eee,
@@ -300,19 +300,19 @@ $gesso: (
      ),
      secondary: (
        name: Secondary,
-        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
+        stack: 'BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
      ),
      book: (
        name: Book,
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
      ),
      condensed: (
        name: Condensed,
-        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: 'BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
      ),
      condensedbook: (
        name: Condensed-Book,
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
      ),
      system: (
        name: 'System  Typ1451-Regular',
@@ -386,37 +386,37 @@ $gesso: (
        font-weight: 400,
      ),
      h1: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 41.056px,
        font-weight: 400,
        line-height: 1.1,
      ),
      h2: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 28.832px,
        font-weight: 400,
        line-height: 1.1,
      ),
      h3: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 22.784px,
        font-weight: 400,
        line-height: 1.1,
      ),
      h4: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 20.256px,
        font-weight: 400,
        line-height: 1.1,
      ),
      h5: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 18px,
        font-weight: 400,
        line-height: 1.1,
      ),
      h6: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 16px,
        font-weight: 400,
        line-height: 1.1,

--- a/source/_patterns/00-config/config.design-tokens.yml
+++ b/source/_patterns/00-config/config.design-tokens.yml
@@ -212,7 +212,7 @@ gesso:
      background: brand.blue.base
      text: grayscale.white
    table:
-      border: grayscale.gray-5
+      border: grayscale.gray-3
      background: grayscale.white
      background-head: grayscale.gray-2
      background-foot: grayscale.gray-2
@@ -250,16 +250,16 @@ gesso:
        stack: 'georgia, "droid serif", "Times New Roman", Times, serif'
      secondary:
        name: Secondary
-        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
+        stack: 'BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
      book:
        name: Book
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
      condensed:
        name: Condensed
-        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: 'BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
      condensedbook:
        name: Condensed-Book
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
      system:
        name: System  Typ1451-Regular
        stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'

--- a/source/_patterns/01-global/02-typography/typography.twig
+++ b/source/_patterns/01-global/02-typography/typography.twig
+{# Due to barlow being a fallback font from google this allows the fonts to be displayed in pattern lab #}
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;500&display=swap');
+</style>
 {% for webfont in webfonts %}
  <div class="pattern-lab-font">
    <h3 class="pattern-lab-font__family" style="{{ webfont.style }}">{{ webfont.family_name }}</h3>

--- a/source/_patterns/01-global/02-typography/typography.yml
+++ b/source/_patterns/01-global/02-typography/typography.yml
@@ -32,6 +32,28 @@ webfonts:
      font_name: 'georgia'
      font_weight: '700'
      font_style: 'normal'
+-
+  family_name: 'Barlow'
+  style: 'font-family: Barlow, sans-serif;'
+  font:
+    -
+      font_preview_character: 'Aa'
+      font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+      font_preview_style: 'font-family: Barlow; font-weight: 400; font-style: normal;'
+      font_name: 'Barlow'
+      font_weight: 'normal'
+      font_style: 'normal'
+-
+  family_name: 'Barlow Condensed'
+  style: 'font-family:"Barlow Condensed", sans-serif;'
+  font:
+    -
+      font_preview_character: 'Aa'
+      font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+      font_preview_style: "font-family: 'Barlow Condensed'; font-weight: 500; font-style: normal;"
+      font_name: 'Barlow Condensed'
+      font_weight: 'medium'
+      font_style: 'normal'
 -
  family_name: 'BureauGrot'
  style: 'font-family: "BureauGrot", serif;'
@@ -204,7 +226,8 @@ webfonts:
    -
      font_preview_character: 'Aa'
      font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
-      font_preview_style: "font-family: fdsu-rwd; font-weight: 400; font-style: normal;"
+      font_preview_style: 'font-family: fdsu-rwd; font-weight: 400; font-style: normal;'
      font_name: 'fdsu-rwd'
      font_weight: 'normal'
      font_style: 'normal'
+
--- a/source/_patterns/02-base/02-html-elements/24-table/_table.scss
+++ b/source/_patterns/02-base/02-html-elements/24-table/_table.scss
@@ -2,26 +2,24 @@
 // Table styles.

 caption {
-  margin-bottom: rem(gesso-spacing(xxs));
+  font-size: gesso-base-font-size();
+  font-style:italic;
+  padding: gesso-spacing(xs);
 }

-// col {}
-
-// colgroup {}
-
 table {
  border-collapse: collapse;
  border-spacing: 0;
-  margin-bottom: rem(gesso-spacing(xs));
-  min-width: 100%;
-}
+  margin: rem(gesso-spacing(xs)) 0;
+  max-width: 100%;
+  width: 100%;

-// tbody {}
+}

 td {
  background-color: gesso-color(table, background);
  border: 1px solid gesso-color(table, border);
-  padding: rem(gesso-spacing(sm));
+  padding: gesso-spacing(xs);
 }

 tfoot {
@@ -32,10 +30,14 @@ tfoot {
 }

 th {
-  background-color: gesso-color(table, background);
+  background-color: gesso-color(table, background-head);
  border: 1px solid gesso-color(table, border);
-  padding: rem(gesso-spacing(sm));
+  font-style:italic;
+  padding: gesso-spacing(xs);
  text-align: left;
+  &[scope="row"] {
+    background-color: gesso-color(table, background-head);
+  }
 }

 thead {

--- a/source/_patterns/04-components/card/_card.scss
+++ b/source/_patterns/04-components/card/_card.scss
@@ -8,12 +8,17 @@ $card-meta-color: gesso-color(ui, generic, text-dark) !default;
 $card-padding: rem(gesso-spacing(sm)) !default;

 .card {
-
  width: 100%;

-  .views-row &{
-    height:100%;
+  .views-row & {
+    height: 100%;
+  }
+
+  .uw-label {
+    display: block;
+    margin-top: 1rem;
  }
+
  &__catalog-tags {
    padding-bottom: rem(gesso-spacing(sm));
  }
@@ -25,12 +30,13 @@ $card-padding: rem(gesso-spacing(sm)) !default;
  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__image{}
+
 .card__featured-image {
  align-items: center;
  background-position: center center;
@@ -41,6 +47,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
  justify-items: center;
  min-height: 44rem;
  position: relative;
+
  .card__header {
    align-self: end;
    margin-bottom: 0;
@@ -51,7 +58,6 @@ $card-padding: rem(gesso-spacing(sm)) !default;
      padding: 0;
    }

-
    .card__date {
      margin-bottom: 0;
      margin-top: 0;
@@ -81,16 +87,19 @@ $card-padding: rem(gesso-spacing(sm)) !default;
    }
  }
 }
+
 .card__header{
  @include uw-no-breakout();
  margin-bottom: rem(gesso-spacing(xs));
  width: 100%;

 }
+
 .card__date {
  font-size: rem(gesso-font-size(0));
  margin-bottom: rem(gesso-spacing(sm));
 }
+
 .card__title {
  margin:rem(gesso-spacing(xs)) 0;
  padding:0;
@@ -102,13 +111,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
    );
  }
 }
-.card__sub-title{}
+
 .card__author{
  @include uw-no-breakout();
  font-family: gesso-font-family(systemmedium);
  font-size: gesso-font-size(-1);
  margin-top: 0;
  padding: 0 0 gesso-spacing(xs) 0;
+
  a {
    @include link(
        $card-link-color,
@@ -116,10 +126,12 @@ $card-padding: rem(gesso-spacing(sm)) !default;
    );
  }
 }
+
 // body
 .card__body {
  width: 100%;
 }
+
 .card__content {
  margin-bottom: rem(gesso-spacing(md));
  width: 100%;
@@ -127,13 +139,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
    margin-bottom:0;
  }
 }
+
 .card__media {
  //background:$test-color-4;
  margin-bottom: rem(gesso-spacing(md));
  order:-1;
  width: 100%;
-  a {

+  a {
    display:inline-block;
    height: 100%;
    width: 100%;
@@ -146,6 +159,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
      }
    }
  }
+
  img {
    //-webkit-filter: grayscale(0);
    //filter: grayscale(0);
@@ -168,16 +182,17 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 .card__footer {
  width: 100%;
 }
+
 .card__tags{
  margin:0;
  padding:0;
  width: 100%;
-
-
 }
+
 .card__readmore {
  text-align: right;
 }
+
 .card__social{
  max-width:20rem;
  width: 100%;
@@ -190,17 +205,12 @@ $card-padding: rem(gesso-spacing(sm)) !default;
  }

  .card__media {
-
    margin-bottom: 0;
  }

  @include breakpoint(gesso-breakpoint(md)) {
    flex-direction: row;

-    .card__title {
-
-    }
-
    .card__body {
      max-width: 600px;
      padding: $card-padding 2vw 0;

--- a/source/_patterns/04-components/card/card--node/card--node.twig
+++ b/source/_patterns/04-components/card/card--node/card--node.twig
@@ -12,7 +12,7 @@
    'type': type,
    'show_hover': '',
    'header': node.header,
-    'hero_image': node.hero_image,
+    'media': node.media,
    'image': node.image,
    'content': node.content,
    'footer': node.footer,

--- a/source/_patterns/04-components/card/card-elements/_media.twig
+++ b/source/_patterns/04-components/card/card-elements/_media.twig
+<div class="card__media">
+
+  {% if media.type == 'banner' %}
+    {% include '@components/banners/banners.twig' with {
+      'banners': media.media
+    } only %}
+  {% endif %}
+
+  {% if media.type == 'image' %}
+    {% include '@components/card/card-elements/_hero-image.twig' with {
+      'hero_image': media.media,
+      'header': header
+    } %}
+  {% endif %}
+
+  {% if media.type == 'remote_video' %}
+    {% include '@components/remote-video/remote-video.twig' with {
+      'remote_video': media.media
+    } %}
+  {% endif %}
+</div>
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
 {% import '@base/macros/uw.macro.twig' as macros %}

+{% if type == 'teaser' %}
+  {% set show_title = 'yes' %}
+{% elseif media and media.type == 'image' %}
+  {% set show_title = 'no' %}
+{% else %}
+  {% set show_title = 'no' %}
+{% endif %}
+
 <article class="card{% if type %} card__{{ type }}{% endif %}{% if modifier_classes %} card__{{ modifier_classes }}{% endif %}{% if show_hover %} card--show-hover {% endif %}" >

-  {% if hero_image %}
-    <div class="card__image">
-      {% include '@components/card/card-elements/_hero-image.twig' with {
-        'hero_image': hero_image,
-        'header': header
-      } %}
-    </div>
+  {% if media %}
+    {% include '@components/card/card-elements/_media.twig' with {
+      'media': media,
+      'header': header,
+    } %}
  {% endif %}

  {% if image %}
@@ -17,10 +23,10 @@
    } %}
  {% endif %}

-  {% if header and not hero_image %}
+  {% if header and show_title == 'yes' %}
    {% include '@components/card/card-elements/_header.twig' with {
      'header': header,
-      'show_title': type == 'teaser' ? 'yes' : 'no'
+      'show_title': show_title,
    } %}
  {% endif %}
No results found