diff --git a/css/styles.css b/css/styles.css
index 9b00c8b68c196345b11a821ae4741c2e196da5bc..89fc3aace556a6c365896ec84d16dd23a038f456 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1237,6 +1237,12 @@ svg:not(:root) {
width: 1px;
word-wrap: normal; }
+.uw-date-pl {
+ margin-bottom: 1.5rem; }
+
+.uw-date-pl h4 {
+ margin-bottom: 0.5rem; }
+
.uw-date {
background-color: #000;
clear: both;
@@ -4826,6 +4832,14 @@ picture {
.card--teaser .card__title a:active {
color: #757575; }
+.teaser--event .card__date {
+ margin-bottom: 0.5rem;
+ order: 1; }
+
+.teaser--event .card__title {
+ margin: 0;
+ order: 2; }
+
.uw-bg--black {
background-color: #000; }
diff --git a/source/_patterns/02-base/date-formats/_date-format.twig b/source/_patterns/02-base/date-formats/_date-format.twig
new file mode 100644
index 0000000000000000000000000000000000000000..408b9dfbf7387c001c5e8bd2500a86da60d7ad48
--- /dev/null
+++ b/source/_patterns/02-base/date-formats/_date-format.twig
@@ -0,0 +1,15 @@
+{% set date_modifier_classes -%}
+ uw-date uw-date--{{ date_format|replace({'-' : '_'})}} {{ date_modifier_classes }}
+{%- endset %}
+{% if is_demo %}
+<div class='uw-date-pl'>
+ <h4> {{ date_format }}:</h4>
+{% endif %}
+
+{% if date %}
+ <span class="{{ date_modifier_classes }}" >{{ date }}</span>
+{% endif %}
+
+{% if is_demo %}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/02-base/date-formats/_date-formats.scss b/source/_patterns/02-base/date-formats/_date-formats.scss
index d93e4a355b6331b1ed0e0703101b82d6785cabcc..fb794fddd13f40b8eaa71f794df0828e40ba8cd6 100644
--- a/source/_patterns/02-base/date-formats/_date-formats.scss
+++ b/source/_patterns/02-base/date-formats/_date-formats.scss
@@ -2,7 +2,12 @@
// Styles for Date formats.
$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
-
+.uw-date-pl{
+ margin-bottom: rem(gesso-spacing(md));
+}
+.uw-date-pl h4{
+ margin-bottom: rem(gesso-spacing(xs));
+}
.uw-date{
background-color:gesso-brand(org-default,uw-black,'primary');
clear: both;
diff --git a/source/_patterns/02-base/date-formats/date-formats.md b/source/_patterns/02-base/date-formats/date-formats.md
new file mode 100644
index 0000000000000000000000000000000000000000..97a29fed2eaee97c2196c6d927f82054cd95abe5
--- /dev/null
+++ b/source/_patterns/02-base/date-formats/date-formats.md
@@ -0,0 +1,3 @@
+---
+title: Date Formats
+---
diff --git a/source/_patterns/02-base/date-formats/date-formats.twig b/source/_patterns/02-base/date-formats/date-formats.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a476da7585519d9bfb8328448196b7cea977b8de
--- /dev/null
+++ b/source/_patterns/02-base/date-formats/date-formats.twig
@@ -0,0 +1,8 @@
+
+{% for date_format in date_formats %}
+ {% include '@base/date-formats/_date-format.twig' with {
+ 'date_format': date_format.date_format,
+ 'date': date_format.date,
+ 'is_demo': 'true'
+ }%}
+{% endfor %}
diff --git a/source/_patterns/02-base/date-formats/date-formats.yml b/source/_patterns/02-base/date-formats/date-formats.yml
index e73585af342da032ba571eb54339b644130b3b71..9fb7d41b7c5642dac8d2921cde1e77768b985c2b 100644
--- a/source/_patterns/02-base/date-formats/date-formats.yml
+++ b/source/_patterns/02-base/date-formats/date-formats.yml
@@ -1,2 +1,24 @@
---
-date_modifier_classes: ''
\ No newline at end of file
+date_modifier_classes: ''
+date_formats:
+ -
+ date_format: 'long-date'
+ date: 'Friday, September 18, 2020'
+ -
+ date_format: 'long-datetime'
+ date: 'Friday, September 18, 2020 - 4:20 PM'
+ -
+ date_format: 'medium-date'
+ date: 'September 18, 2018'
+ -
+ date_format: 'medium-date-short-month'
+ date: 'Sep. 18, 2020'
+ -
+ date_format: 'medium-datetime'
+ date: 'September 18, 2020 - 4:20 PM'
+ -
+ date_format: 'short-date'
+ date: '09-18-2020'
+ -
+ date_format: 'short-datetime'
+ date: '09-18-2020, - 4:20 PM'
diff --git a/source/_patterns/02-base/date-formats/long-date.md b/source/_patterns/02-base/date-formats/long-date.md
deleted file mode 100644
index f321c2727aefcdcf7e9f4c068716b3d517933da7..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/long-date.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Long Date
----
diff --git a/source/_patterns/02-base/date-formats/long-date.twig b/source/_patterns/02-base/date-formats/long-date.twig
deleted file mode 100644
index b51f4290c7191c57d94d400eb13b352bb9ef1529..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/long-date.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--long_date {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" >{{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/long-datetime.md b/source/_patterns/02-base/date-formats/long-datetime.md
deleted file mode 100644
index f440f9a3bb345a9fc6d7945da15ca860c2826428..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/long-datetime.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Long Datetime
----
diff --git a/source/_patterns/02-base/date-formats/long-datetime.twig b/source/_patterns/02-base/date-formats/long-datetime.twig
deleted file mode 100644
index c848132e735d021234aef104b605461f35fa43d4..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/long-datetime.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--long_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }} {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/medium-date.md b/source/_patterns/02-base/date-formats/medium-date.md
deleted file mode 100644
index da7a0e5108684fe80f07bb265475a5993966c838..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/medium-date.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Medium Date
----
diff --git a/source/_patterns/02-base/date-formats/medium-date.twig b/source/_patterns/02-base/date-formats/medium-date.twig
deleted file mode 100644
index 101720f36f10213bf1c9786a6379392fe3e93b13..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/medium-date.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--medium_date {{ modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ month.long }} {{ day.short }}, {{ year.long }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/medium-datetime.md b/source/_patterns/02-base/date-formats/medium-datetime.md
deleted file mode 100644
index 3c2ce9daa9f9ea1750d694099c28c2e856bc75a4..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/medium-datetime.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Medium Datetime
----
diff --git a/source/_patterns/02-base/date-formats/medium-datetime.twig b/source/_patterns/02-base/date-formats/medium-datetime.twig
deleted file mode 100644
index 7292a88eab702f7003b9a067692f6defa622e1f8..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/medium-datetime.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--medium_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ month.long }} {{ day.short }}, {{ year.long }} {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/short-date.md b/source/_patterns/02-base/date-formats/short-date.md
deleted file mode 100644
index 5a16025e4b3d7a71ec329873f4498524d5e1f9bc..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/short-date.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Short Date
----
diff --git a/source/_patterns/02-base/date-formats/short-date.twig b/source/_patterns/02-base/date-formats/short-date.twig
deleted file mode 100644
index e0ce246e1013e2acf4321895407d4c2d4aaea5a7..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/short-date.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--short_date {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" >{{ month.digit }}-{{ day.long }}-{{ year.long }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/short-datetime.md b/source/_patterns/02-base/date-formats/short-datetime.md
deleted file mode 100644
index 71101fd18e33c46842fd7c887f3f1f3bee1ead64..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/short-datetime.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Short Datetime
----
diff --git a/source/_patterns/02-base/date-formats/short-datetime.twig b/source/_patterns/02-base/date-formats/short-datetime.twig
deleted file mode 100644
index 65df49304aceb94a9aadac205976bcee570f17f0..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/short-datetime.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--short_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ month.digit }}-{{ day.long }}-{{ year.long }} {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/macros/uw.macro.twig b/source/_patterns/02-base/macros/uw.macro.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0f8f02ea8f8cbc75264fe637c42ecab90200c389
--- /dev/null
+++ b/source/_patterns/02-base/macros/uw.macro.twig
@@ -0,0 +1,18 @@
+{% macro readmore(url, title, label = "Read more", description_prefix = "about" ) %}
+ {% include '@components/readmore-link/readmore-link.twig' with {
+ 'url': url,
+ 'label': label,
+ 'description_prefix': description_prefix,
+ 'title': title
+ } %}
+{% endmacro %}
+
+{% macro tag(url, title, type = "full", size = "normal" ) %}
+ {% include '@components/tag/tag.twig' with {
+ 'url': url,
+ 'title': title,
+ 'type': type,
+ 'size': size,
+ 'faculty':faculty
+ } %}
+{% endmacro %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/card/card--feature/card--feature.twig b/source/_patterns/04-components/card/card--feature/card--feature.twig
index 8eb397182df2991b18887949e4d684a59333cfe2..85864c17e0078ef300f8e9a93b9165727614fc13 100644
--- a/source/_patterns/04-components/card/card--feature/card--feature.twig
+++ b/source/_patterns/04-components/card/card--feature/card--feature.twig
@@ -4,8 +4,10 @@
url: url,
footer: footer,
date: date,
+ date_format: date_format,
read_more: read_more,
tags: tags,
+ tag_type: tag_type,
sources: sources,
img_element: img_element,
alt: alt,
diff --git a/source/_patterns/04-components/card/card--feature/card--feature.yml b/source/_patterns/04-components/card/card--feature/card--feature.yml
index e96efa4cf7ace5d513974765b9dba86eaa9d1ab3..f0784504c059a1b3b7f9507ef13595c996704ee6 100644
--- a/source/_patterns/04-components/card/card--feature/card--feature.yml
+++ b/source/_patterns/04-components/card/card--feature/card--feature.yml
@@ -6,7 +6,8 @@ url: '#'
author_name: 'Author Lastname'
author_link: '#'
footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
-date: Thursday, September 28, 2018
+date: 'Friday, September 19, 2020 - 4:20 PM'
+date_format: 'long-datetime'
read_more: true
show_hover: true
tags:
diff --git a/source/_patterns/04-components/card/card.md b/source/_patterns/04-components/card/card.md
index 94716b10d9d8663eabe0c264448ce0bfd70f2c1a..a12859b2d5992e0bf080294f3bc84724040ade78 100644
--- a/source/_patterns/04-components/card/card.md
+++ b/source/_patterns/04-components/card/card.md
@@ -12,6 +12,14 @@ __Variables:__
* author_link: [string] URL for the author link.
* show_hover: [boolean] to show outline and shadow on hover
* date: [string] Date of the card.
+* date_format: [string] Choose the date format used for presentation.
+ * long-date
+ * long-datetime
+ * medium-date
+ * medium-datetime
+ * medium-date-short-month
+ * short-date
+ * short-datetime
* read_more: [boolean] Whether to show the read more link.
* footer: [string] Footer content of the card.
* sources: [string] URL for the srcset of picture tag inside of responsive-image.
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 9f528c98b7f02539694d859eae00d1fdeea8ed81..fe11e019cd1530cd45240ad5a203fa9a65c3b37c 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -1,13 +1,14 @@
-{% import '@components/tag/_tag_macro.twig' as macros %}
+{% import '@base/macros/uw.macro.twig' as macros %}
<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %}" >
<div class="card__body">
<div class="card__header">
{% if date %}
<div class="card__date">
- {% include "@base/date-formats/long-date.twig" with {
- modifier_classes: 'uw-date uw-date--long',
- } %}
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': date
+ }%}
</div>
{% endif %}
<h{{ header_level }} class="card__title">
@@ -37,7 +38,7 @@
sources: sources,
img_element: img_element,
alt: alt
- }%}
+ }%}
{% if url %}
</a>
{% endif %}
diff --git a/source/_patterns/04-components/card/card.yml b/source/_patterns/04-components/card/card.yml
index 164291eacbb4baf041b7169813a3c355b393ddf2..4598076bfac4287821ec99edb39d25b921a407f2 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -6,7 +6,8 @@ url: '#'
author_name: 'Author Lastname'
author_link: '#'
footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
-date: Thursday, September 28, 2018
+date: 'Friday, September 19, 2020'
+date_format: 'long-date'
read_more: true
show_hover: true
tags:
diff --git a/source/_patterns/04-components/tag-list/tag-list.twig b/source/_patterns/04-components/tag-list/tag-list.twig
index 79fc5a6c1c097ebf9e7bb63855dc2642747efe93..c3874febf9ceed9651bf6d5be45f2a1a951ea743 100644
--- a/source/_patterns/04-components/tag-list/tag-list.twig
+++ b/source/_patterns/04-components/tag-list/tag-list.twig
@@ -1,9 +1,9 @@
-{% import '@macros/gesso.macro.twig' as macros %}
+{% import '@base/macros/uw.macro.twig' as macros %}
<ul class="tag-list {{ modifier_classes }}">
{% for item in items %}
<li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">
- {{ macros.tag(item.url, item.title, item.type) }}
+ {{ macros.tag(item.url, item.title, tag_type) }}
</li>
{% endfor %}
</ul>
diff --git a/source/_patterns/04-components/teaser/teaser--blog/_teaser--blog.scss b/source/_patterns/04-components/teaser/teaser--blog/_teaser--blog.scss
index b7029bb1789feb297030cba5db4a22b4420aaf5e..daea109cac6f09333792ee645a4ca25b79974673 100644
--- a/source/_patterns/04-components/teaser/teaser--blog/_teaser--blog.scss
+++ b/source/_patterns/04-components/teaser/teaser--blog/_teaser--blog.scss
@@ -1,36 +1,28 @@
-// @file
-// Styles for teaser.
-
+//// @file
+//// Styles for blog teaser.
+//
//.teaser--blog{
// .card__body {
-// background: #ff1493;
// }
//
// .card__header{
-// background:#F00;
// }
//
// .card__date {
-// background: #ffa500;
// }
//
// .card__author{
-// background: #800080;
// }
//
// .card__title{
-// background: #adff2f;
// }
//
// .card__content {
-// background: #2f4f4f;
// }
//
// .card__media {
-// background: #fffacd;
// }
// .card__footer{
-// background: #ff0;
// .card__tags{
//
// }
@@ -42,4 +34,4 @@
// }
// }
//}
-
+//
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md
index 63be58ecf23a82b4c58d138fd95f7fce9687e437..619df899c1799912f86a85f0d63c83cab401ffca 100644
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md
+++ b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md
@@ -12,6 +12,14 @@ __Variables: (same form card)__
* author_link: [string] URL for the author link.
* show_hover: [boolean] to show outline and shadow on hover
* date: [string] Date of the card.
+* date_format: [string] Choose the date format used for presentation.
+ * long-date
+ * long-datetime
+ * medium-date
+ * medium-datetime
+ * medium-date-short-month
+ * short-date
+ * short-datetime
* sources: [string] URL for the srcset of picture tag inside of responsive-image.
* img_element: [string] Url to source of fall back image.
* alt: [string] Alt text to the image used in the picture tag or fallback image.
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
index a08cf5764f314a59b0227f0a108543e1e626d78f..f42e5e9d7eddab32f321f15ab99e50159ba6b44f 100644
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
+++ b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
@@ -3,18 +3,19 @@
{%- endset %}
{% include "@components/teaser/teaser.twig" with {
- modifier_classes: teaser_modifier_classes,
- title: title,
- url: url,
- date: date,
- tags: tags,
- sources: sources,
- img_element: img_element,
- alt: alt,
- show_hover: show_hover,
- content: content,
- header_level: '2',
- url: url,
- author_name: author_name,
- author_link: author_link,
+ modifier_classes: teaser_modifier_classes,
+ title: title,
+ url: url,
+ date: date,
+ date_format: 'long-datetime',
+ tags: tags,
+ tag_type: 'simple',
+ sources: sources,
+ img_element: img_element,
+ alt: alt,
+ show_hover: show_hover,
+ content: content,
+ header_level: '2',
+ author_name: author_name,
+ author_link: author_link
} %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
index 332f8841d65bea297cd229b6d396805f9504f936..f15cad12167c9b1ab71f06f03a7dd264153ed30d 100644
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
+++ b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
@@ -1,22 +1,18 @@
---
title: 'Blog Teaser title'
url: '#'
-date: Thursday, September 28, 2018
+date: 'Friday, September 18, 2020'
author_name: 'Author Lastname'
author_link: '#'
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'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
diff --git a/source/_patterns/04-components/teaser/teaser--event/_teaser--event.scss b/source/_patterns/04-components/teaser/teaser--event/_teaser--event.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f1a8fc637368565befed80e1b8ba424c7fa9c74a
--- /dev/null
+++ b/source/_patterns/04-components/teaser/teaser--event/_teaser--event.scss
@@ -0,0 +1,13 @@
+// @file
+// Styles for event teaser.
+
+.teaser--event{
+ .card__date {
+ margin-bottom: rem(gesso-spacing(xs));
+ order:1;
+ }
+ .card__title{
+ margin:0;
+ order:2;
+ }
+}
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.md b/source/_patterns/04-components/teaser/teaser--event/teaser--event.md
new file mode 100644
index 0000000000000000000000000000000000000000..cfc2ae281a8cf935666a604b912ac3c717d9dea6
--- /dev/null
+++ b/source/_patterns/04-components/teaser/teaser--event/teaser--event.md
@@ -0,0 +1,31 @@
+---
+el: .teaser--event
+title: Teaser Event
+---
+
+__Variables: (same form card)__
+* modifier_classes: [string] Classes to modify the default component styling.
+* title: [string] Title of the card.
+* header_level: [string] Set the level of herder <h?> tag for card
+* url: [string] URL of the card.
+* author_name: [string] Author name.
+* author_link: [string] URL for the author link.
+* show_hover: [boolean] to show outline and shadow on hover
+* date: [string] Date of the card.
+* date_format: [string] Choose the date format used for presentation.
+ * long-date
+ * long-datetime
+ * medium-date
+ * medium-datetime
+ * medium-date-short-month
+ * short-date
+ * short-datetime
+* sources: [string] URL for the srcset of picture tag inside of responsive-image.
+* img_element: [string] Url to source of fall back image.
+* alt: [string] Alt text to the image used in the picture tag or fallback image.
+* content: [string] Content of the card.
+* tags: [array] List of taxonomy tags
+ * type: [string] Type of the tag, it will add class ".tag--type".
+ * size: [string] Size of the tag, it will add class ".tag--size"
+ * url: [string] URL of the tag.
+ * title: [string] Title of the tag.
\ No newline at end of file
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig b/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b9afa8a292153bc12343e6db92f24fb65df1d796
--- /dev/null
+++ b/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
@@ -0,0 +1,17 @@
+{% set teaser_modifier_classes -%}
+ card--teaser teaser--event {{ modifier_classes }}
+{%- endset %}
+
+{% include "@components/teaser/teaser.twig" with {
+ modifier_classes: teaser_modifier_classes,
+ title: title,
+ url: url,
+ date: date,
+ date_format: 'long-datetime',
+ sources: sources,
+ img_element: img_element,
+ alt: alt,
+ show_hover: show_hover,
+ content: content,
+ header_level: '2',
+} %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml b/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c9d1e953d42f3a4dbb1ac09401f075a4870b8ae1
--- /dev/null
+++ b/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
@@ -0,0 +1,25 @@
+---
+title: 'Event Teaser title'
+url: '#'
+date: 'Friday, September 18, 2020 - 4:20 PM'
+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 for blog teaser photo'
+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>
+
diff --git a/source/_patterns/04-components/teaser/teaser.md b/source/_patterns/04-components/teaser/teaser.md
index 905f3d06dca5bdd172769be8714e0015163a8dd8..f0a2705ec44e7e306194f00f9099fac759e5f187 100644
--- a/source/_patterns/04-components/teaser/teaser.md
+++ b/source/_patterns/04-components/teaser/teaser.md
@@ -11,6 +11,14 @@ __Variables: (same form card)__
* author_name: [string] Author name.
* author_link: [string] URL for the author link.
* date: [string] Date of the card.
+* date_format: [string] Choose the date format used for presentation.
+ * long-date
+ * long-datetime
+ * medium-date
+ * medium-datetime
+ * medium-date-short-month
+ * short-date
+ * short-datetime
* read_more: [boolean] Whether to show the read more link.
* footer: [string] Footer content of the card.
* sources: [string] URL for the srcset of picture tag inside of responsive-image.
diff --git a/source/_patterns/04-components/teaser/teaser.twig b/source/_patterns/04-components/teaser/teaser.twig
index 621044175b7382b4a4a8a5992a7d79ab27c06726..44a54f429bf082adf6261bc3bab634bc8794b693 100644
--- a/source/_patterns/04-components/teaser/teaser.twig
+++ b/source/_patterns/04-components/teaser/teaser.twig
@@ -3,18 +3,19 @@
{%- endset %}
{% include "@components/card/card.twig" with {
- modifier_classes: teaser_modifier_classes,
- title: title,
- url: url,
- date: date,
- tags: tags,
- sources: sources,
- img_element: img_element,
- alt: alt,
- show_hover: show_hover,
- content: content,
- header_level: '2',
- url: url,
- author_name: author_name,
- author_link: author_link,
+ modifier_classes: teaser_modifier_classes,
+ title: title,
+ url: url,
+ date_format: date_format,
+ date: date,
+ tags: tags,
+ tag_type: tag_type,
+ sources: sources,
+ img_element: img_element,
+ alt: alt,
+ show_hover: show_hover,
+ content: content,
+ header_level: '2',
+ author_name: author_name,
+ author_link: author_link
} %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/teaser/teaser.yml b/source/_patterns/04-components/teaser/teaser.yml
index d480bc53718d7384ca568f73792d37e88c23b085..7060f05eeb9587afd545d5861f5f6f22e517d137 100644
--- a/source/_patterns/04-components/teaser/teaser.yml
+++ b/source/_patterns/04-components/teaser/teaser.yml
@@ -3,7 +3,7 @@ title: 'This is a Teaser title using the card component'
url: '#'
author_name: 'Author Lastname'
author_link: '#'
-date: Thursday, September 28, 2018
+date: 'Friday, September 18, 2020'
tags:
- url: '#'
title: 'Tag 1'