diff --git a/src/patterns/04-components/card/card--node/_card--node.scss b/src/patterns/04-components/card/card--node/_card--node.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4aa523e02a8fa2c309d384bd1fa27e00334d9324
--- /dev/null
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -0,0 +1,192 @@
+.card__node {
+ > .card__header,
+ > .card__footer {
+ margin: 0 auto;
+ max-width: $max-width;
+ }
+
+ .uw-node__without-image & {
+ .card__header,
+ .card__footer {
+ margin: 0 auto;
+ max-width: $max-width;
+ padding: 0 gesso-spacing(sm);
+ @include xl {
+ padding: 0;
+ }
+ }
+ }
+ .card__tags {
+ margin: 1rem auto;
+ max-width: $max-width;
+ padding: 0 gesso-spacing(sm);
+ @include xl {
+ padding: 0;
+ }
+ }
+ .card__footer {
+ margin-bottom: rem(gesso-spacing(md));
+ margin-top: auto;
+ padding: 0 gesso-spacing(sm);
+ @include xl {
+ padding: 0;
+ }
+ }
+
+ // CSS for specific node card presentations:
+ &--web-page{
+ // Currently this is PL demo only
+ // needs to be implemented correctly when webpage has media.
+ .uw-node__with-image & {
+ .card__featured-image{
+ align-items: center;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ display: grid;
+ height: 45rem;
+ justify-items: center;
+ min-height: 44rem;
+ position: relative;
+
+ .card__header {
+ @include uw-contained-width(75rem);
+ align-self:flex-end;
+ margin-bottom:4rem;
+ margin-top: 0;
+ .card__title {
+ background: rgba(0,0,0,0.50);
+ color:#fff;
+ margin-bottom: 0;
+ margin-top: 2rem;
+ padding: gesso-spacing(md) gesso-spacing(md);
+ }
+ }
+ }
+ }
+ }
+ // CSS for specific node card presentations:
+ &--contact {
+ display: grid;
+ gap: $grid-gap;
+
+ .card__content {
+ .layout {
+ padding: 0;
+ }
+ }
+
+ @include medium {
+ display: grid;
+ gap: 2rem;
+ grid-template-columns: 10rem 1fr;
+ }
+
+ .card__image {
+ grid-column: 1 / 3;
+ grid-row: 1 / 10;
+ @include medium {
+ grid-column: 1 / 2;
+ }
+ }
+
+ .card__header,
+ .card__body,
+ .card__footer {
+ grid-column: 1 / 3;
+ @include medium {
+ grid-column: 2 / 3;
+ }
+ padding: 0;
+ }
+
+ .uw-node__without-image & {
+ @include medium {
+ grid-template-columns: 100%;
+ }
+
+ .card__header,
+ .card__body,
+ .card__footer {
+ grid-column: 1 / 2;
+ }
+ }
+ }
+
+ // CSS for specific node card presentations:
+ &--blog,
+ &--news-item,
+ &--event {
+ .uw-node__without-image & {
+ @include uw-contained-width();
+ padding:0;
+ }
+ .uw-node__with-image & {
+ .card__featured-image {
+ align-items: center;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ display: grid;
+ height: 45rem;
+ justify-items: center;
+ min-height: 44rem;
+ position: relative;
+ .card__header {
+ // Width is experimental to match one of the wide-width in
+ // layouts for small width page look.
+ @include uw-contained-width(49.0625rem);
+ align-self: end;
+ margin-bottom: 0;
+ margin-top: 0;
+ .card__date {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+ .card__title {
+ background: gesso-brand(org-default, uw-white, primary);
+ font-size: gesso-font-size(8);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: gesso-spacing(sm) gesso-spacing(sm);
+ }
+ .card__sub-title {
+ background: gesso-brand(org-default, uw-white, primary);
+ font-size: gesso-font-size(4);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: gesso-spacing(xs) gesso-spacing(sm);
+ }
+ .card__author {
+ background: gesso-brand(org-default, uw-white, primary);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: gesso-spacing(xs) gesso-spacing(sm);
+ }
+ }
+ }
+ .card__footer,
+ .card__tags {
+ // Width is experimental to match one of the max-widths in
+ // layouts for narrower width page look.
+ @include uw-contained-width(47.0625rem);
+ }
+ }
+ // CSS for displaying the title within the node :
+ }
+
+ &--opportunity{
+ .uw-node__without-image &{
+ .card__header{
+ margin-bottom:gesso-spacing(md);
+ }
+ }
+ }
+ &--project{
+ .card__footer{
+ .card__tags{
+ padding:0;
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/card/card--node/_card--node.twig b/src/patterns/04-components/card/card--node/_card--node.twig
new file mode 100644
index 0000000000000000000000000000000000000000..2eeeb815a1a2f61de3c95a8dbaf5ef59166fd24d
--- /dev/null
+++ b/src/patterns/04-components/card/card--node/_card--node.twig
@@ -0,0 +1,23 @@
+{% if node.media or node.image %}
+ {% set node_image_class = 'with-image' %}
+{% else %}
+ {% set node_image_class = 'without-image' %}
+{% endif %}
+
+{% set modifier_classes = 'node--' ~ node.bundle %}
+
+<div class="uw-node__{{ node_image_class }}">
+ {% include '@components/card/card.twig' with {
+ 'url': node.url,
+ 'type': type,
+ 'show_hover': '',
+ 'header': node.header,
+ 'show_header': show_header,
+ 'media': node.media,
+ 'image': node.image,
+ 'content': node.content,
+ 'footer': node.footer,
+ 'tags': node.tags,
+ 'ical': node.ical,
+ } %}
+</div>
diff --git a/src/patterns/04-components/card/card--node/card--node.twig b/src/patterns/04-components/card/card--node/card--node.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a7594da6d9cbd02b0a9e19ed0e98f094f90a3cd7
--- /dev/null
+++ b/src/patterns/04-components/card/card--node/card--node.twig
@@ -0,0 +1,45 @@
+<h2>Node - basic</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+ 'node': node_webpage,
+ 'type': 'node'
+} %}
+<h2>Node - with media</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+ 'node': node_webpage_media,
+ 'type': 'node'
+} %}
+<h2>Node - Blog (without media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+ 'node': node_blog,
+ 'type': 'node'
+} %}
+
+<h2>Node - Blog (with media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+ 'node': node_blog_media,
+ 'type': 'node'
+} %}
+
+<h2>Node - Event (without media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+ 'node': node_event,
+ 'type': 'node'
+} %}
+
+<h2>Node - Event (with media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+ 'node': node_event_media,
+ 'type': 'node'
+} %}
+
+<h2>Node - News (without media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+ 'node': node_news,
+ 'type': 'node'
+} %}
+
+<h2>Node - News (with media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+ 'node': node_news_media,
+ 'type': 'node'
+} %}
diff --git a/src/patterns/04-components/card/card-elements/_author.twig b/src/patterns/04-components/card/card-elements/_author.twig
new file mode 100644
index 0000000000000000000000000000000000000000..804fe00a48916d304640d83e590b382035e6e073
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_author.twig
@@ -0,0 +1,8 @@
+<div class="card__author">
+ by
+ {% if author.link %}
+ <a href="{{ author.link }}">{{ author.name }}</a>
+ {% else %}
+ {{ author.name }}
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_date.twig b/src/patterns/04-components/card/card-elements/_date.twig
new file mode 100644
index 0000000000000000000000000000000000000000..249478b4ca615114ca7a86b4d3bbd03460a8a38f
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_date.twig
@@ -0,0 +1,64 @@
+<div class="card__date">
+
+ {% for d in date %}
+ {% if date|length > 1 and loop.index0 == 0 %}
+ <details class="uw-date-details">
+ <summary role="button" aria-controls="edit-future-dates-collapsible" aria-expanded="false" aria-pressed="false" class="uw-date-details__summary">
+ {% endif %}
+ {% if modifier_classes != 'node--opportunity' %}
+ <span class="uw-date">
+ {% endif %}
+ {% if d.all_day %}
+ {% if d.start_date %}
+ {% set ddate = d.start_date %}
+ {% else %}
+ {% set ddate = d.date %}
+ {% endif %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'long',
+ 'date': ddate,
+ } %} (all day)
+ {% elseif d.date_range %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'long_with_time',
+ 'date': d.start_date,
+ } %}
+ -
+ {% if d.same_day %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'time_only',
+ 'date': d.end_date,
+ } %}
+ {% else %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'long_with_time',
+ 'date': d.end_date,
+ } %}
+ {% endif %}
+
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'timezone',
+ 'date': d.start_date,
+ } %}
+
+ {% else %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': date_format,
+ 'date': d.date,
+ } %}
+ {% endif %}
+
+ {% if date|length > 1 and loop.index0 == 0 %}
+ </summary>
+ {% endif %}
+
+ {% if date|length > 1 and loop.last %}
+ </details>
+ {% endif %}
+
+ {% if modifier_classes != 'node--opportunity' %}
+ </span>
+ {% endif %}
+
+ {% endfor %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_hero-image.twig b/src/patterns/04-components/card/card-elements/_hero-image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f81c66fc6a77bd4ee1e53f834ba10142c41d2c0f
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_hero-image.twig
@@ -0,0 +1,19 @@
+<style>
+
+ {% for source in hero_image.sources|reverse %}
+ @media only screen and {{ source.media | replace({'all and': ''}) }} {
+ .card__featured-image {
+ background-image: url("{{ source.srcset | replace({ ' 1x': '' }) }}");
+ }
+ }
+ {% endfor %}
+</style>
+
+<div class="card__featured-image" role="img" aria-label="{{ hero_image.alt }}">
+ {% if header %}
+ {% include '@components/card/card-elements/_header.twig' with {
+ 'header': header,
+ 'show_title': 'yes',
+ } %}
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_media.twig b/src/patterns/04-components/card/card-elements/_media.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f5a1b733e290532a2e5b0a9c540006dd3baeae3d
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_media.twig
@@ -0,0 +1,21 @@
+<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>
diff --git a/src/patterns/04-components/card/card-elements/_title.twig b/src/patterns/04-components/card/card-elements/_title.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4ce1193924af4e8b3b86af2c343066cb5d305808
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_title.twig
@@ -0,0 +1,28 @@
+{% if header_level %}
+<h{{ header_level }} class="card__title">
+ {% else %}
+ <div class="card__title">
+ <strong>
+ {% endif %}
+
+
+ {% if url and type != 'node' %}
+ <a href="{{ url }}">
+ {% endif %}
+
+ {{ title }}
+
+ {% if url and type != 'node' %}
+ </a>
+ {% endif %}
+
+ {% if header_level %}
+</h{{ header_level }}>
+{% else %}
+ </strong>
+ </div>
+{% endif%}
+
+{% if sub_title %}
+ <span class="card__sub-title">{{ sub_title }}</span>
+{% endif %}
diff --git a/src/patterns/04-components/date/_date.scss b/src/patterns/04-components/date/_date.scss
new file mode 100644
index 0000000000000000000000000000000000000000..76fee9248ae885fab07b30eded381df6d3cc5839
--- /dev/null
+++ b/src/patterns/04-components/date/_date.scss
@@ -0,0 +1,120 @@
+.uw-date {
+ width:auto;
+
+ @include large {
+ margin-left:inherit;
+ }
+}
+
+.uw-date-details{
+ box-sizing: border-box;
+ display: inline-block;
+
+ .uw-date {
+ box-sizing: border-box;
+ display:block;
+ padding: rem(gesso-spacing(xs)) rem(gesso-spacing(sm));
+
+ &:first-child {
+ padding: rem(gesso-spacing(xs)) 2.75rem rem(gesso-spacing(xs)) rem(gesso-spacing(sm));
+ }
+
+ text-transform: uppercase;
+ }
+
+ &[open] {
+ background-color: transparent !important;
+
+ .card__node--event & {
+ margin-bottom:2rem;
+ }
+
+ position: absolute;
+ width:calc(100%);
+ z-index: gesso-z-index(content);
+
+ @include xs {
+ width:inherit;
+ }
+ }
+}
+
+.uw-date-details__summary {
+ .uw-date {
+ background:inherit;
+ }
+
+ background-position: right 0.75rem center; // LTR
+ background-repeat: no-repeat;
+ background-size: rem(13px);
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ padding:0;
+
+ .block-uw-cbl-multi-type-list & {
+ background-position: right 0.5rem center; // LTR
+ }
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+}
+
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci';
+@each $faculty in $faculties {
+ .#{$faculty} {
+ @if $faculty == org-default {
+
+ .uw-date-details {
+ background-color: gesso-brand(org-default, uw-gold, 'primary');
+
+ .uw-date {
+ background-color: gesso-brand(org-default, uw-gold, 'primary');
+ }
+
+ &[open] {
+ .uw-date-details__summary {
+ @include svg-background(mobile-arrow-up);
+ //width:100%;
+ }
+ }
+ }
+
+ .uw-date-details__summary {
+ .uw-date {
+ background:inherit;
+ }
+
+ @include svg-background(mobile-arrow-down);
+ background-color: gesso-brand(org-default, uw-gold,'primary');
+ color: gesso-brand(org-default,uw-black,'primary');
+ }
+ } @else {
+ .uw-date-details {
+ background-color: gesso-brand($faculty, 'primary');
+
+ .uw-date {
+ background-color: gesso-brand($faculty, 'primary');
+ }
+
+ &[open] {
+ .uw-date-details__summary {
+ @include svg-background(mobile-arrow-up-w);
+ //width:100%;
+ }
+ }
+ }
+
+ .uw-date-details__summary{
+ .uw-date{
+ background:inherit;
+ }
+
+ @include svg-background(mobile-arrow-down-w);
+ background-color:gesso-brand($faculty, 'primary');
+ color: gesso-brand(org-default, uw-white, 'primary');
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/date/_date.twig b/src/patterns/04-components/date/_date.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b471acaa7004381dd2a9f1c31897a2479d5936c4
--- /dev/null
+++ b/src/patterns/04-components/date/_date.twig
@@ -0,0 +1,23 @@
+{% if date_format == 'long' %}
+ {{ date|date('l, F j, Y') }}
+{% endif %}
+
+{% if date_format == 'standard' %}
+ {{ date|date('F j, Y') }}
+{% endif %}
+
+{% if date_format == 'long_with_time' %}
+ {{ date|date('l, F j, Y g:i a') }}
+{% endif %}
+
+{% if date_format == 'time_only' %}
+ {{ date|date('g:i a') }}
+{% endif %}
+
+{% if date_format == 'timezone' %}
+ {{ date|date('T') }}
+{% endif %}
+
+{% if date_format == 'month_only' %}
+ {{ date|date('F Y') }}
+{% endif %}
diff --git a/src/patterns/04-components/date/date.js b/src/patterns/04-components/date/date.js
new file mode 100644
index 0000000000000000000000000000000000000000..b9b93d13eb00586bff4029b565f44daf35eecf17
--- /dev/null
+++ b/src/patterns/04-components/date/date.js
@@ -0,0 +1,30 @@
+(function ($, Drupal) {
+ 'use strict';
+ Drupal.behaviors.uwdate = {
+ attach: function () {
+ $(document).ready(
+ function () {
+
+ $('.uw-date-details').each(
+ function () {
+
+ var findHeight = $(this).find($('.uw-date-details__summary .uw-date'));
+ var dateHeight = findHeight.outerHeight(true) + 'px';
+
+ // On click set the height of parent card__date.
+ // allow for no jump when 2 lines
+
+ $(this) .on(
+ 'click', function () {
+ // Get the parent and set min-height.
+ $(this).parent('.card__date').css('min-height', dateHeight);
+
+ }
+ );
+ }
+ );
+ }
+ );
+ }
+ };
+})(jQuery, Drupal);
diff --git a/src/patterns/04-components/date/date.twig b/src/patterns/04-components/date/date.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e9e91aa6863a91f2fe603617d8f0335c3fb0cf83
--- /dev/null
+++ b/src/patterns/04-components/date/date.twig
@@ -0,0 +1,49 @@
+{% if pattern_lab %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Standard (date_format: standard)'
+ } %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'standard',
+ 'date': date()
+ } %}
+
+ {% include '@components/label/label.twig' with {
+ 'label': 'Long (date_format: long)'
+ } %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'long',
+ 'date': date()
+ } %}
+
+ {% include '@components/label/label.twig' with {
+ 'label': 'Long with time (date_format: long_with_time)'
+ } %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'long_with_time',
+ 'date': date()
+ } %}
+
+ {% include '@components/label/label.twig' with {
+ 'label': 'Time only (date_format: time_only)'
+ } %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'time_only',
+ 'date': date()
+ } %}
+
+ {% include '@components/label/label.twig' with {
+ 'label': 'Timezone (date_format: timezone)'
+ } %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'timezone',
+ 'date': date()
+ } %}
+
+ {% include '@components/label/label.twig' with {
+ 'label': 'Month only (date_format: month_only)'
+ } %}
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'month_only',
+ 'date': date()
+ } %}
+{% endif %}