diff --git a/src/patterns/04-components/card/card--teaser/_card--teaser.scss b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
new file mode 100644
index 0000000000000000000000000000000000000000..40388933ec8571b5cf18abb64c39fab30365d3fd
--- /dev/null
+++ b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
@@ -0,0 +1,61 @@
+.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;
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/card/card--teaser/_card--teaser.twig b/src/patterns/04-components/card/card--teaser/_card--teaser.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e3189e704df398694ac325bd159fced44c5a8c34
--- /dev/null
+++ b/src/patterns/04-components/card/card--teaser/_card--teaser.twig
@@ -0,0 +1,20 @@
+{% 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,
+} %}
diff --git a/src/patterns/04-components/card/card--teaser/card--teaser.twig b/src/patterns/04-components/card/card--teaser/card--teaser.twig
new file mode 100644
index 0000000000000000000000000000000000000000..1d6228a39bf233e2e80ebe8fda7f639998fc02da
--- /dev/null
+++ b/src/patterns/04-components/card/card--teaser/card--teaser.twig
@@ -0,0 +1,17 @@
+<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'
+} %}
diff --git a/src/patterns/04-components/card/card--teaser/card--teaser.yml b/src/patterns/04-components/card/card--teaser/card--teaser.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ec5d1512aa9b24f59ddf9153689330360d2ee2e9
--- /dev/null
+++ b/src/patterns/04-components/card/card--teaser/card--teaser.yml
@@ -0,0 +1,181 @@
+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>'