diff --git a/css/styles.css b/css/styles.css
index 160c7d74f56318e5d8c907cbba4b7333ec296db2..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;
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..84ada72187b3cc48b3f2879ee54e9b368f146716 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:20pm'
+ -
+ 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:20pm'
+ -
+ date_format: 'short-date'
+ date: '09-18-2020'
+ -
+ date_format: 'short-datetime'
+ date: '09-18-2020, - 4:20pm'
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 7421c8e71c888eda2dbcda39eda34701bc7e3509..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-short-month.md b/source/_patterns/02-base/date-formats/medium-date-short-month.md
deleted file mode 100644
index 5d4ceb22882116c7b24c27a038af13f880f1eb1e..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/medium-date-short-month.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Medium Date Short Month
----
diff --git a/source/_patterns/02-base/date-formats/medium-date-short-month.twig b/source/_patterns/02-base/date-formats/medium-date-short-month.twig
deleted file mode 100644
index f72a89be209ebfc163ceafe611858b1bf179f208..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/date-formats/medium-date-short-month.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--medium-date-short-month {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ month.short }}. {{ day.short }}, {{ year.long }}</span>
-{% endif %}
\ No newline at end of file
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 aec41c21ad9b934bd3c7de5672a23f14ee540f29..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/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.twig b/source/_patterns/04-components/card/card.twig
index 64622ca1ecb588a6c0e8d69943d1cfa98a740737..fe11e019cd1530cd45240ad5a203fa9a65c3b37c 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -5,41 +5,10 @@
<div class="card__header">
{% if date %}
<div class="card__date">
- {% if date_format == 'long_date' %}
- {% include "@base/date-formats/long-date.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'long_datetime' %}
- {% include "@base/date-formats/long-datetime.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'medium_date' %}
- {% include "@base/date-formats/medium-date.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'medium_date_short_month' %}
- {% include "@base/date-formats/medium-date-short-month.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'medium_datetime' %}
- {% include "@base/date-formats/medium-datetime.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'short_date' %}
- {% include "@base/date-formats/short-date.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'short_datetime' %}
- {% include "@base/date-formats/short-datetime.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': date
+ }%}
</div>
{% endif %}
<h{{ header_level }} class="card__title">
@@ -69,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 047864faa39274ffcad67e5f3bdedffa909f7188..4598076bfac4287821ec99edb39d25b921a407f2 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -6,8 +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_format: 'long_date'
+date: 'Friday, September 19, 2020'
+date_format: 'long-date'
read_more: true
show_hover: true
tags:
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 d57e49823db4f2eed22c103fef34e46202ef90d0..f42e5e9d7eddab32f321f15ab99e50159ba6b44f 100644
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
+++ b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
@@ -6,8 +6,8 @@
modifier_classes: teaser_modifier_classes,
title: title,
url: url,
- date_format: date_format,
date: date,
+ date_format: 'long-datetime',
tags: tags,
tag_type: 'simple',
sources: sources,
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 3e6fd66778405cc56290b1f6e52be49de10bf1ee..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,8 +1,7 @@
---
title: 'Blog Teaser title'
url: '#'
-date: 'Thursday, September 28, 2018'
-date_format: 'long_date'
+date: 'Friday, September 18, 2020'
author_name: 'Author Lastname'
author_link: '#'
tags:
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig b/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
index 06d0d57f3492f435550875a03d5033b153fe2e03..424373f10add913158a82bd03eab7f2e6e7926f3 100644
--- a/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
+++ b/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
@@ -7,6 +7,7 @@
title: title,
url: url,
date: date,
+ date_format: 'medium-date-short-month',
sources: sources,
img_element: img_element,
alt: alt,
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml b/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
index 198af11ba2d8686b1ff56391e227f9193bf24451..d869727212a2316985b42d216cdc47debd841e6d 100644
--- a/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
+++ b/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
@@ -1,8 +1,7 @@
---
title: 'Event Teaser title'
url: '#'
-date: 'AUG 14, 2020'
-date_format: 'long_datetime'
+date: 'SEP 18, 2020'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
diff --git a/source/_patterns/04-components/teaser/teaser.yml b/source/_patterns/04-components/teaser/teaser.yml
index 439d7b5673aa69e3a11e09ec3e16352d525f20c2..7060f05eeb9587afd545d5861f5f6f22e517d137 100644
--- a/source/_patterns/04-components/teaser/teaser.yml
+++ b/source/_patterns/04-components/teaser/teaser.yml
@@ -3,8 +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_format: 'long_date'
+date: 'Friday, September 18, 2020'
tags:
- url: '#'
title: 'Tag 1'