ISTWCMS-5647: adding card teaser

src/patterns/04-components/card/card--teaser/_card--teaser.scss

+.card__teaser {
+  @include uw-flex-grid(card);
+
+  .views-row & {
+    height:100%;
+  }
+
+  .uw-label {
+    display: block;
+    margin-top: 1rem;
+  }
+
+  .card__tags {
+    margin: inherit;
+    margin-top: auto;
+    padding: 0;
+  }
+
+  .uw-node__without-image & {
+    .card__header,
+    .card__footer {
+      padding: 0;
+    }
+  }
+
+  &--profile {
+
+    .card {
+      &__image {
+        margin:0;
+        max-width:5rem;
+      }
+
+      &__header {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        //grid-template-rows: minmax(3rem, auto);
+        .uw-image__profiles {
+          grid-column: 1/2;
+          grid-row: 1 / 3;
+          margin-right: 1rem;
+        }
+
+        .card__position {
+          grid-column: 2/3;
+          grid-row: 2/3;
+        }
+
+        .card__title {
+          grid-column: 2/3;
+          grid-row: 1/2;
+          margin: 0;
+        }
+      }
+
+      &__body {
+        grid-column: 1/3;
+      }
+    }
+  }
+}

src/patterns/04-components/card/card--teaser/_card--teaser.twig

+{% if type and (type == 'header' or type == 'footer') %}
+  {% set show_hover = '' %}
+{% else %}
+  {% set show_hover = 'true' %}
+{% endif %}
+
+{% set modifier_classes = 'teaser--' ~ teaser.bundle %}
+
+{% include '@components/card/card.twig' with {
+  'bundle': node.bundle,
+  'modifier_classes': modifier_classes,
+  'type': type,
+  'url': teaser.url,
+  'header': teaser.header,
+  'image': teaser.image,
+  'content': teaser.content,
+  'footer': teaser.footer,
+  'tags': teaser.tags,
+  'show_hover': show_hover,
+} %}

src/patterns/04-components/card/card--teaser/card--teaser.twig

+<h2>Teaser - Blog</h2>
+{% include '@components/card/card--teaser/_card--teaser.twig' with {
+  'teaser': teasers.blog,
+  'type': 'teaser'
+} %}
+
+<h2>Teaser - Event</h2>
+{% include '@components/card/card--teaser/_card--teaser.twig' with {
+  'teaser': teasers.events,
+  'type': 'teaser'
+} %}
+
+<h2>Teaser - News</h2>
+{% include '@components/card/card--teaser/_card--teaser.twig' with {
+  'teaser': teasers.news,
+  'type': 'teaser'
+} %}

src/patterns/04-components/card/card--teaser/card--teaser.yml

+teasers:
+  blog:
+    url: '#'
+    bundle: 'blog'
+    header:
+      date:
+        0: 'Friday, September 19, 2020'
+      title: 'Blog Teaser'
+      author:
+        name: 'Blog Author'
+        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'
+    image:
+      type: 'listing_image'
+      sources:
+        - srcset: '/images/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '/images/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>'
+  news:
+    url: '#'
+    bundle: 'news'
+    header:
+      date:
+        0: 'Friday, September 19, 2020'
+      title: 'News Teaser'
+      author:
+        name: 'News Author'
+        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'
+    image:
+      type: 'listing_image'
+      sources:
+        - srcset: '/images/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '/images/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>'
+  events:
+    url: '#'
+    bundle: 'event'
+    header:
+      date:
+        0: 'Friday, September 19, 2020'
+      title: 'Event Teaser'
+    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'
+    image:
+      type: 'listing_image'
+      sources:
+        - srcset: '/images/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '/images/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '/images/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>'