diff --git a/src/patterns/01-core/_index.scss b/src/patterns/01-core/_index.scss
index 35b88a498989d92faeaa4e7bd18bd750c66ad769..bec6da1d4e9a9ce3c7cd999830197abe4ac896d1 100644
--- a/src/patterns/01-core/_index.scss
+++ b/src/patterns/01-core/_index.scss
@@ -1,2 +1,3 @@
@forward 'mixins';
@forward 'props/media';
+@forward 'props/colors';
diff --git a/src/patterns/01-core/mixins/_headings.scss b/src/patterns/01-core/mixins/_headings.scss
index a1180588e19f8be0e48691c65e552e3345c1c945..c6a93e78071fd0084b44a691b6d9c134860c4192 100644
--- a/src/patterns/01-core/mixins/_headings.scss
+++ b/src/patterns/01-core/mixins/_headings.scss
@@ -33,7 +33,6 @@
@mixin heading-1 {
@include heading-base;
font-size: var( --font-size-8);
- max-inline-size: var(--size-header-1);
}
@mixin heading-2 {
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index 868ad676c3cd1e83600681910b96ea3078d242d9..34de27d9ae09b0d5b9c3e1d4cc6adce0141f9f37 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -219,7 +219,20 @@
--orange-9: #d9480f;
}
-
+$faculties_colours: (
+ 'org-default': --uw-gold,
+ 'org-ahs': --ahs-primary,
+ 'org-art': --art-primary,
+ 'org-eng': --eng-primary,
+ 'org-env': --env-primary,
+ 'org-mat': --mat-primary,
+ 'org-sci': --sci-primary,
+ 'org-school': --school-primary,
+ 'org-stp': --stp-primary,
+ 'org-cgc': --cgc-primary,
+ 'org-stj': --stj-primary,
+ 'org-ren': --ren-primary
+);
//Swatches
.pl-colors .color-demo > div > div{
diff --git a/src/patterns/01-core/props/_layout.scss b/src/patterns/01-core/props/_layout.scss
index d3c0ae367c9037ebbde87162734386912001de47..897c62fb2d037188909bd70b360934ad5d111f9e 100644
--- a/src/patterns/01-core/props/_layout.scss
+++ b/src/patterns/01-core/props/_layout.scss
@@ -1,6 +1,8 @@
:where(html) {
- --layout-gutter: var(--size-4);
+ --layout-gutter: var(--size-2);
--layout-max-width: 75rem;
- --grid-gutter: var(--size-4);
+ --layout-wide-max-width: 47.0625rem;
+ --grid-gutter: var(--size-2);
--grid-gap: var(--size-4);
+ --max-width: 47.0625rem;
}
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 712db14ed90868e2bef8a47e98055cb650e8f83e..f896bdf47c626539d3a81369e526fa9d35025a41 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -1,7 +1,9 @@
@forward 'blockquote/blockquote';
@forward 'button/button';
@forward 'card/card';
+@forward 'card/card--node/card--node';
@forward 'contact-info/contact-info';
+@forward 'date/date';
@forward 'image/image';
@forward 'menu/menu';
@forward 'menu/menu--footer/menu--footer';
diff --git a/src/patterns/04-components/call-to-action/_call-to-action.scss b/src/patterns/04-components/call-to-action/_call-to-action.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aaece3ed3c47480da892d1b340d61472c6242b80
--- /dev/null
+++ b/src/patterns/04-components/call-to-action/_call-to-action.scss
@@ -0,0 +1,188 @@
+$faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
+
+@each $faculty in $faculties {
+ .uw-cta {
+ .#{$faculty} {
+ .uw-cta__text--big {
+
+ @if $faculty == org-default {
+ color: $uw-gold;
+ }
+
+ @else if $faculty == neutral {
+ color: $uw-grey;
+ }
+
+ @else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc {
+ color: gesso-brand($faculty, 'light');
+ }
+ @else {
+ color: gesso-brand($faculty, 'lvl1');
+ }
+ }
+ }
+
+ &__aside.#{$faculty} {
+ a {
+ &:hover,
+ &:focus {
+ @if $faculty == org-default {
+ background-color: $uw-gold;
+
+ .uw-cta__text--big,
+ .uw-cta__text--small,
+ .uw-cta__text--medium {
+ color: $uw-black;
+ }
+ }
+
+ @else if $faculty == neutral {
+ background-color: $uw-grey;
+
+ .uw-cta__text--big {
+ color: $uw-white;
+ }
+ }
+
+ @else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc {
+ background-color: gesso-brand($faculty, 'light');
+
+ .uw-cta__text--big,
+ .uw-cta__text--small,
+ .uw-cta__text--medium,
+ a {
+ color: darken(gesso-brand($faculty, 'primary'), 5%)
+ }
+ }
+
+ @else {
+ background-color: gesso-brand($faculty, 'lvl1');
+
+ .uw-cta__text--big,
+ .uw-cta__text--small,
+ .uw-cta__text--medium {
+ color: gesso-brand($faculty, 'lvl4');
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.uw-cta__center-wrapper {
+ align-items: center;
+ display: inline-flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+}
+
+.uw-cta {
+ clear: both;
+ height: 100%;
+ width: 100%;
+
+ &.uw-contained-width {
+ @include uw-contained-width;
+ padding: 0;
+ }
+
+ .uw-cta__aside {
+ background-color: $uw-black;
+ border: 1px solid #fff;
+ flex: 1 0 100%;
+
+ .layout--uw-2-col &,
+ .layout--uw-3-col &,
+ .layout--uw-4-col &,
+ .layout--uw-5-col & {
+ flex: 1 0 100%;
+ }
+
+ @include small {
+ flex: 1 0 50%;
+ }
+
+ @include large {
+ flex: 1 0 30%;
+ }
+
+ @include xxl {
+ flex: 1 0 25%;
+ }
+ }
+
+ .uw-cta__aside:last-child {
+ margin: 0;
+ }
+}
+
+.uw-cta__link {
+ border: 0;
+ bottom:0;
+ display: block;
+ font-family:gesso-font-family(condensedbook);
+ height:100%;
+ left:0;
+ min-height:6.25rem;
+ padding: 0;
+ position:relative;
+ right:0;
+ text-decoration: none;
+ top:0;
+ width: 100%;
+
+ &:hover {
+ text-decoration: none;
+ }
+}
+
+.uw-cta__text {
+ font-family:gesso-font-family(condensedbook);
+ text-align: center;
+
+ &--big {
+ font-size:rem(gesso-font-size(3));
+ letter-spacing: 0.05rem;
+ line-height: 1.2;
+ padding: 0 rem(gesso-spacing(xxs)) 0.313rem rem(gesso-spacing(xxs));
+ }
+
+ &--medium {
+ color: $uw-white;
+ font-size:rem(gesso-font-size(0));
+ line-height: 1.2;
+ padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
+ text-transform: uppercase;
+ }
+
+ &--small {
+ color: $uw-white;
+ font-family:gesso-font-family(systemmedium);
+ font-size:rem(gesso-font-size(-2));
+ line-height: 1;
+ padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
+ text-transform: uppercase;
+ }
+}
+
+@each $faculty in $faculties {
+
+ .call-to-action-theme-#{$faculty}{
+
+ display: table-cell;
+ margin: 1px;
+ vertical-align: middle;
+ }
+}
+
+.uw-cta__wrapper {
+ display: table;
+ float: left;
+ height: 6.25rem;
+ width: 100%;
+}
diff --git a/src/patterns/04-components/call-to-action/call-to-action.twig b/src/patterns/04-components/call-to-action/call-to-action.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c3e4088c15e6dbd2f495ddf191d6abb6c60b98a1
--- /dev/null
+++ b/src/patterns/04-components/call-to-action/call-to-action.twig
@@ -0,0 +1,31 @@
+<div class="uw-cta {{ width }}">
+ <div class="uw-cta__center-wrapper">
+
+ {% for cta in ctas %}
+
+ <aside class="uw-cta__aside {{ cta.theme }}">
+
+ {% if cta.link %}
+ <a href="{{ cta.link }}" class="uw-cta__link">
+ {% endif %}
+
+ <div class="uw-cta__wrapper">
+ <div class="call-to-action-theme-{{ cta.theme }}">
+ {% for detail in cta.details %}
+
+ <div class="uw-cta__text uw-cta__text--{{ detail.type }}">{{ detail.text }}</div>
+
+ {% endfor %}
+ </div>
+ </div>
+
+ {% if cta.link %}
+ </a>
+ {% endif %}
+
+ </aside>
+
+ {% endfor %}
+
+ </div>
+</div>
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index 61d722b731223b68c0cfc6ab289d2cd39649a476..34fe34b50f617d02becd00d87e20ce2de8a73892 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -27,7 +27,7 @@ $card-padding: var(--size-2) !default;
}
// if card--show-hover class is present then show "
-.card--show-hover{
+.card--show-hover {
border-bottom: 3px solid $card-accent-border-color;
box-shadow: var(--shadow-1);
transition: box-shadow 300ms ease;
@@ -54,6 +54,7 @@ $card-padding: var(--size-2) !default;
filter: opacity(100%);
transition: filter;
}
+
&:hover,
&:focus {
img {
@@ -76,8 +77,10 @@ $card-padding: var(--size-2) !default;
min-height: 44rem;
position: relative;
}
+
.card__header{
@include uw-no-breakout();
+
margin-bottom: var(--size-3);
width: 100%;
@@ -86,26 +89,26 @@ $card-padding: var(--size-2) !default;
grid-template-columns: 1fr auto;
.card__author {
- grid-column: 1/2;
+ grid-column: 1 / 2;
}
.card__date {
- grid-column: 1/2;
+ grid-column: 1 / 2;
}
.card__title {
- grid-column: 1/2;
+ grid-column: 1 / 2;
}
.view-interact {
background-color: var(--uw-white-1);
- grid-column: 2/3;
- grid-row: 2/3;
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
margin: 0;
- padding: 1rem 1rem 0 0;
+ padding: var(--size-2) var(--size-2) 0 0;
.uw-node__without-image & {
- grid-column: 2/3;
+ grid-column: 2 / 3;
grid-row: inherit;
margin-bottom: 1rem;
padding: 0;
@@ -128,8 +131,8 @@ $card-padding: var(--size-2) !default;
a {
@include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--uw-black-primary),
+ var(--uw-black-primary)
);
}
}
@@ -140,10 +143,11 @@ $card-padding: var(--size-2) !default;
font-size: var(--font-size-1);
margin-top: 0;
padding: 0 0 var(--size-1) 0;
+
a {
@include link(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--uw-black-primary),
+ var(--uw-black-primary)
);
}
}
@@ -162,7 +166,6 @@ $card-padding: var(--size-2) !default;
}
}
-
.card__position {
color: var(--uw-black-primary);
font-size: 1.26562rem;
@@ -174,8 +177,8 @@ $card-padding: var(--size-2) !default;
}
.card__tags {
- margin:0;
- padding:0;
+ margin: 0;
+ padding: 0;
width: 100%;
}
@@ -188,14 +191,17 @@ $card-padding: var(--size-2) !default;
width: 100%;
}
-.card__project{
+.card__project {
+
&-members--content {
@include uw-flex-grid();
+
.card__project-member {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
}
+
@media(min-width: $screen-md) {
.card__project-member {
@include flex(1 1 auto);
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..43570cde698d4ec0c2215a11beafdf860d91f59e
--- /dev/null
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -0,0 +1,216 @@
+@use '../../../01-core' as *;
+
+.block-page-title-block {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: var(--layout-max-width);
+}
+
+.card__node {
+ > .card__header,
+ > .card__footer {
+ margin: 0 auto;
+ max-width: var(--layout-max-width);
+ }
+
+ .uw-node__without-image & {
+ .card__header,
+ .card__footer {
+ margin: 0 auto;
+ max-width: var(--layout-max-width);
+ padding: 0 var(--size-2);
+
+ @media(min-width: $screen-xl) {
+ padding: 0;
+ }
+ }
+ }
+ .card__tags {
+ margin: var(--size-2) auto;
+ max-width: var(--layout-max-width);
+ padding: 0 var(--size-2);
+
+ @media(min-width: $screen-xl) {
+ padding: 0;
+ }
+ }
+ .card__footer {
+ margin-bottom: var(--size-3);
+ margin-top: auto;
+ padding: 0 var(--size-2);
+
+ @media(min-width: $screen-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(var(--layout-max-width));
+ 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: var(--size-4);
+ padding: var(--size-3) var(--size-3);
+ }
+ }
+ }
+ }
+ }
+ // CSS for specific node card presentations:
+ &--contact {
+ display: grid;
+ gap: var(--grid-gap);
+
+ .card__content {
+ .layout {
+ padding: 0;
+ }
+ }
+
+ @media(min-width: $screen-md) {
+ display: grid;
+ gap: var(--size-4);
+ grid-template-columns: var(--size-20) 1fr;
+ }
+
+ .card__image {
+ grid-column: 1 / 3;
+ grid-row: 1 / 10;
+
+ @media(min-width: $screen-md) {
+ grid-column: 1 / 2;
+ }
+ }
+
+ .card__header,
+ .card__body,
+ .card__footer {
+ grid-column: 1 / 3;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ }
+ padding: 0;
+ }
+
+ .uw-node__without-image & {
+ @media(min-width: $screen-md) {
+ 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: var(--uw-white);
+ font-size: var(--font-size-8);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: var(--size-2);
+ }
+
+ .card__sub-title {
+ background: var(--uw-white);
+ font-size: var(--font-size-4);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: var(--size-1) var(--size-2);
+ }
+
+ .card__author {
+ background: var(--uw-white);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: var(--size-1) var(--size-2);
+ }
+ }
+ }
+
+ .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(var(--layout-wide-max-width));
+ }
+ }
+ // CSS for displaying the title within the node :
+ }
+
+ &--opportunity {
+ .uw-node__without-image & {
+ .card__header {
+ margin-bottom: var(--size-3);
+ }
+ }
+ }
+
+ &--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--node/card--node.yml b/src/patterns/04-components/card/card--node/card--node.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c00175f04f78c9ee3bbf97da5cba0ba2689084e6
--- /dev/null
+++ b/src/patterns/04-components/card/card--node/card--node.yml
@@ -0,0 +1,225 @@
+---
+node_webpage:
+ url: '#'
+ bundle: 'web-page'
+ header:
+ title: 'Card Title'
+ content: '<p class="layout uw-contained-width">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>'
+node_webpage_media:
+ url: '#'
+ bundle: 'web-page'
+ media:
+ 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'
+ type: 'image'
+ header:
+ title: 'This is a title overlay, inside of card header sent to the card media section'
+ content: '<p class="layout uw-contained-width">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>'
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+node_blog:
+ url: '#'
+ bundle: 'blog'
+ header:
+ title: 'Blog with no media'
+ date:
+ 0: 'Wednesday, December 7, 2021'
+ author:
+ name: 'Blog Author'
+ link: '#'
+ content: '<p class="layout uw-contained-width">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>'
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+node_blog_media:
+ url: '#'
+ bundle: 'blog'
+ media:
+ media:
+ 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'
+ type: 'image'
+ header:
+ title: 'Blog with media'
+ date:
+ 0: 'Wednesday, December 7, 2021'
+ author:
+ name: 'Blog Author'
+ link: '#'
+ content: '<p class="layout uw-contained-width--wide">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>'
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+node_event:
+ url: '#'
+ bundle: 'event'
+ header:
+ title: 'Event without media'
+ date:
+ 0: 'Wednesday, December 7, 2021'
+ content: '<p class="layout uw-contained-width">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>'
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+node_event_media:
+ url: '#'
+ bundle: 'event'
+ media:
+ media:
+ 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'
+ type: 'image'
+ header:
+ title: 'Event with media'
+ date:
+ 0: 'Wednesday, December 7, 2021'
+ content: '<p class="layout uw-contained-width--wide">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>'
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+node_news:
+ url: '#'
+ bundle: 'news-item'
+ header:
+ title: 'News without media'
+ date:
+ 0: 'Wednesday, December 7, 2021'
+ author:
+ name: 'News Author'
+ link: '#'
+ content: '<p class="layout uw-contained-width">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>'
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+node_news_media:
+ url: '#'
+ bundle: 'news-item'
+ media:
+ 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'
+ type: 'image'
+ header:
+ title: 'News with media'
+ date:
+ 0: 'Wednesday, December 7, 2021'
+ author:
+ name: 'News Author'
+ link: '#'
+ content: '<p class="layout uw-contained-width--wide">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>'
+ tags:
+ - url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ - url: '#'
+ title: 'Tag 3'
+ type: 'simple'
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>'
diff --git a/src/patterns/04-components/card/card-elements/_additional-info.twig b/src/patterns/04-components/card/card-elements/_additional-info.twig
new file mode 100644
index 0000000000000000000000000000000000000000..364c8ba1b37d0463e4bd47b67d8812cb42e7066b
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_additional-info.twig
@@ -0,0 +1,45 @@
+<div class="card__additional-info">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ } %}
+ {% block details_summary %}
+ Additional Information
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if additional_info.host %}
+ <span class="uw-label">Host:</span>
+ {% include '@components/links/links.twig' with {
+ 'links': additional_info.host
+ } %}
+ {% endif %}
+
+ {% if additional_info.event_website %}
+ <span class="uw-label">Event website:</span>
+ {% include '@components/links/links.twig' with {
+ 'links': additional_info.event_website
+ } %}
+ {% endif %}
+
+ {% if additional_info.cost %}
+ <span class="uw-label">Cost:</span>
+ {{ additional_info.cost }}
+ {% endif %}
+
+ {% if additional_info.tags %}
+ {% for key,tag in additional_info.tags %}
+ <span class="uw-label">{{ key }}:</span>
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: tag
+ } %}
+ {% endfor %}
+ {% endif %}
+
+ {% if additional_info.info %}
+ {{ additional_info.info }}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
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/_banner.twig b/src/patterns/04-components/card/card-elements/_banner.twig
new file mode 100644
index 0000000000000000000000000000000000000000..450b126ca3443a49b9037deb754cfb1753283648
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_banner.twig
@@ -0,0 +1,39 @@
+<div class="card__banner--image">
+ {% if image.link %}
+ <a href="{{ image.link }}">
+ {% endif %}
+ <div class="card__banner--media">
+ {% if listing_image.img_element %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: listing_image.img_element,
+ alt: listing_image.alt
+ }%}
+ {% else %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: image.img_element,
+ alt: image.alt
+ }%}
+ {% endif %}
+ </div>
+ {% if image.big_text or image.small_text %}
+ <div class="card__banner--caption">
+ {% if image.big_text %}
+ <strong>
+ <span class="card__banner--title">
+ {{ image.big_text }}
+ </span>
+ {% endif %}
+ </strong>
+ {% if image.small_text %}
+ <span class="card__banner--sub-title">
+ {{ image.small_text }}
+ </span>
+ {% endif %}
+ </div>
+ {% endif %}
+ {% if image.link %}
+ </a>
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_contact-for.twig b/src/patterns/04-components/card/card-elements/_contact-for.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3c981fa14b003644bc7314c63c3e8b78033ad7d3
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_contact-for.twig
@@ -0,0 +1,15 @@
+<div class="card__contact-for">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Contact for
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__contact-for-content">
+ {{ contact_for.contact }}
+ </div>
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_contact-info.twig b/src/patterns/04-components/card/card-elements/_contact-info.twig
new file mode 100644
index 0000000000000000000000000000000000000000..83041d586ed6fb3fa65e4df0c61a13e6d8de2128
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_contact-info.twig
@@ -0,0 +1,28 @@
+<div class="card__contact-info">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Contact Information
+ {% endblock %}
+
+ {% block details_content %}
+ {% if contact_info.email %}
+ <div class="card__contact-info--email">
+ <a href="mailto:{{ contact_info.email }}">{{ contact_info.email }}</a>
+ </div>
+ {% endif %}
+ {% if contact_info.phone %}
+ <div class="card__contact-info--phone">
+ {{ contact_info.phone }}
+ </div>
+ {% endif %}
+ {% if contact_info.location %}
+ <div class="card__contact-info--location">
+ <span class="uw-label">Location:</span>
+ {{ contact_info.location }}
+ </div>
+ {% endif %}
+ {% endblock %}
+ {% endembed %}
+</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..9ae8a30ece39b89ef3e9d7a620ceb2993346d49c
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_date.twig
@@ -0,0 +1,68 @@
+<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/_employment-type.twig b/src/patterns/04-components/card/card-elements/_employment-type.twig
new file mode 100644
index 0000000000000000000000000000000000000000..08ec08cb19840fabc395ded084499e2bf8922c30
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_employment-type.twig
@@ -0,0 +1,6 @@
+{% include '@components/label/label.twig' with {
+ 'label': 'Employment type'
+} %}
+{% include "@components/tag-list/tag-list.twig" with {
+ items: employment_type
+} %}
diff --git a/src/patterns/04-components/card/card-elements/_groups.twig b/src/patterns/04-components/card/card-elements/_groups.twig
new file mode 100644
index 0000000000000000000000000000000000000000..1434e9aecaeb8c423daab3d15dae765bbc85caf7
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_groups.twig
@@ -0,0 +1,21 @@
+<div class="card__groups">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Groups
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__groups-list">
+ {% for group in groups %}
+ {% if loop.index0 > 0 %}
+ , {{ group.title }}
+ {% else %}
+ {{ group.title }}
+ {% endif %}
+ {% endfor %}
+ </div>
+ {% endblock %}
+ {% endembed %}
+</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/_image.twig b/src/patterns/04-components/card/card-elements/_image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0b4be901b6f37ad44ff6261e9a6b49e0af6e4ce9
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_image.twig
@@ -0,0 +1,15 @@
+<div class="card__image">
+ {% if image.type == 'listing_image' %}
+ {% include '@components/card/card-elements/_listing-image.twig' with {
+ 'listing_image': image
+ } %}
+ {% endif %}
+
+ {% if image.type == 'portrait' %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: image.img_element,
+ alt: image.alt
+ }%}
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_job-id.twig b/src/patterns/04-components/card/card-elements/_job-id.twig
new file mode 100644
index 0000000000000000000000000000000000000000..68af3ffaedd08ccaf9408a4d29f089c84c1584f7
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_job-id.twig
@@ -0,0 +1,4 @@
+{% include '@components/label/label.twig' with {
+ 'label': 'Job id'
+} %}
+{{ job_id }}
diff --git a/src/patterns/04-components/card/card-elements/_listing-image.twig b/src/patterns/04-components/card/card-elements/_listing-image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..be9cae0c2545c10c79ba17ddabbcf98433107d33
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_listing-image.twig
@@ -0,0 +1,13 @@
+{% if url %}
+ <a href="{{ url }}">
+{% endif %}
+
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: listing_image.sources,
+ img_element: listing_image.img_element,
+ alt: listing_image.alt
+ }%}
+
+{% if url %}
+ </a>
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_location-info.twig b/src/patterns/04-components/card/card-elements/_location-info.twig
new file mode 100644
index 0000000000000000000000000000000000000000..67453d1ffa682df74fde8cf7a4c354cb46537869
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_location-info.twig
@@ -0,0 +1,45 @@
+{% set address = location_info.address %}
+{% set map = location_info.map %}
+{% set map_link = location_info.map_link %}
+
+<div class="card__location">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Location Information
+ {% endblock %}
+
+ {% block details_content %}
+ {% if address %}
+ <div class="card__address">
+ <span class="uw-label">Location Address:</span>
+ {% if address.organization %}
+ {{ address.organization }}<br />
+ {% endif %}
+ {% if address.address_line1 %}
+ {{ address.address_line1 }}<br />
+ {% endif %}
+ {% if address.address_line2 %}
+ {{ address.address_line2 }}<br />
+ {% endif %}
+ {% if address.locality or address.administrative_area or address.country_code or address.postal_code %}
+ {% if address.locality %}{{ address.locality }}{% if address.administrative_area %}, {% endif %}{% endif %}{% if address.administrative_area %}{{ address.administrative_area }}{% endif %}{% if address.country_code and (address.locality or address.administrative_area) %}, {% endif %}{% if address.country_code %}{{ address.country_code }}{% endif %}{% if address.postal_code and (address.locality or address.administrative_area or address.country_code) %} {% endif %}{% if address.postal_code %}{{ address.postal_code }}{% endif %}
+ {% endif %}
+ </div>
+ {% endif %}
+ {% if map %}
+ <div class="card__map">
+ <span class="uw-label">Location coordinates:</span>
+ {{ map }}
+ </div>
+ {% endif %}
+ {% if map_link %}
+ <div class="card__map-link">
+ <span class="uw-label"> Link to map:</span>
+ <a href="{{ map_link.uri }}">{{ map_link.uri }}</a>
+ </div>
+ {% endif %}
+ {% endblock %}
+ {% endembed %}
+</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/_opportunity-dates.twig b/src/patterns/04-components/card/card-elements/_opportunity-dates.twig
new file mode 100644
index 0000000000000000000000000000000000000000..504fb4494ca83a0b50e6d30be3bc97ee0166e963
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_opportunity-dates.twig
@@ -0,0 +1,53 @@
+<div class="card__opportunity-dates">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Dates
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if dates.posted %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Date posted'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long',
+ 'date': dates.posted
+ } %}
+ {% endif %}
+
+ {% if dates.deadline %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Application deadline'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long_with_time',
+ 'date': dates.deadline
+ } %}
+ {% endif %}
+
+ {% if dates.start_date %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Start date'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long',
+ 'date': dates.start_date
+ } %}
+ {% endif %}
+
+ {% if dates.end_date %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'End date'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long',
+ 'date': dates.end_date
+ } %}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_opportunity-details.twig b/src/patterns/04-components/card/card-elements/_opportunity-details.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7607ff58d67686049d04c6e9b89f70119ad3a13d
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_opportunity-details.twig
@@ -0,0 +1,35 @@
+<div class="card__opportunity-details">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Details
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if opportunity_details.posted_by %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Posted by (department/office)'
+ } %}
+ {{ opportunity_details.posted_by }}
+ {% endif %}
+
+ {% if opportunity_details.number_of_positions %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Number of positions'
+ } %}
+ {{ opportunity_details.number_of_positions }}
+ {% endif %}
+
+ {% if opportunity_details.reports_to %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Reports to'
+ } %}
+ {{ opportunity_details.reports_to }}
+ {% endif %}
+
+ {% endblock %}
+
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_opportunity-type.twig b/src/patterns/04-components/card/card-elements/_opportunity-type.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4a28ef794f897d3e4b10523dc081bd24dba8c922
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_opportunity-type.twig
@@ -0,0 +1,6 @@
+{% include '@components/label/label.twig' with {
+ 'label': 'Opportunity type'
+} %}
+{% include "@components/tag-list/tag-list.twig" with {
+ items: opportunity_type
+} %}
diff --git a/src/patterns/04-components/card/card-elements/_portrait.twig b/src/patterns/04-components/card/card-elements/_portrait.twig
new file mode 100644
index 0000000000000000000000000000000000000000..86bf32afd5fd7f2c789f59c8c836bc54b000087a
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_portrait.twig
@@ -0,0 +1,3 @@
+<div class="card__portrait">
+ <img src="{{ image.uri }}" alt="{{ image.alt }}" />
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_position.twig b/src/patterns/04-components/card/card-elements/_position.twig
new file mode 100644
index 0000000000000000000000000000000000000000..50b074bade44bb505a1a4831013236b3bd41aae1
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_position.twig
@@ -0,0 +1,3 @@
+<div class="card__position">
+ {{ position }}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_project-details.twig b/src/patterns/04-components/card/card-elements/_project-details.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9c06b2adfc9c11669fee84ea466f073ecae0f604
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_project-details.twig
@@ -0,0 +1,33 @@
+{% if project_details | length > 0 %}
+ <div class="card__project-details">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Project details
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__project-details--status">
+ {% include '@components/label/label.twig' with {
+ 'label': 'Status'
+ } %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: project_details.status
+ } %}
+ </div>
+
+ {% if project_details.topics %}
+ <div class="card__project-details--topics">
+ {% include '@components/label/label.twig' with {
+ 'label': 'Topics'
+ } %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: project_details.topics
+ } %}
+ </div>
+ {% endif %}
+ {% endblock %}
+ {% endembed %}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_project-members.twig b/src/patterns/04-components/card/card-elements/_project-members.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0ca7450921cd0e5f65a65873b0e98d9b198c9e38
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_project-members.twig
@@ -0,0 +1,39 @@
+{% if project_members | length > 0 %}
+ <div class="card__project-members">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Project members
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__project-members--content">
+ {% for member in project_members %}
+ <div class="card__project-member">
+ {% if member.link %}
+ <a href="{{ member.link }}">
+ {% endif %}
+
+ {% if member.roles %}
+ {% set roles = '' %}
+ {% for role in member.roles %}
+ {% if loop.index0 > 0 %}
+ {% set roles = roles ~ ', ' %}
+ {% endif %}
+ {% set roles = roles ~ role.title %}
+ {% endfor %}
+ {{ member.name }} ({{ roles }})
+ {% else %}
+ {{ member.name }}
+ {% endif %}
+ {% if member.link %}
+ </a>
+ {% endif %}
+ </div>
+ {% endfor %}
+ </div>
+ {% endblock %}
+ {% endembed %}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_rate-of-pay.twig b/src/patterns/04-components/card/card-elements/_rate-of-pay.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e7ad547440e923f6e0e97391752b79b921fde3d3
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_rate-of-pay.twig
@@ -0,0 +1,10 @@
+{% include '@components/label/label.twig' with {
+ 'label': 'Rate of pay'
+} %}
+{% if rate_of_pay and rate_of_pay_type %}
+ {{ rate_of_pay }} ({{ rate_of_pay_type[0].title }})
+{% elseif rate_of_pay_type %}
+ {{ rate_of_pay_type }}
+{% else %}
+ {{ rate_of_pay }}
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_service-details.twig b/src/patterns/04-components/card/card-elements/_service-details.twig
new file mode 100644
index 0000000000000000000000000000000000000000..160b6c0dff56d16b4a99723d0ec9b9c4e21c6c51
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_service-details.twig
@@ -0,0 +1,72 @@
+<div class="card__service-details">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE
+ } %}
+ {% block details_summary %}
+ Service Details
+ {% endblock %}
+
+ {% block details_content %}
+ {% if service_details.popularity %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Popularity'
+ } %}
+ {{ service_details.popularity }}
+ {% endif %}
+
+ {% if service_details.use_service %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'What can use this service'
+ } %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: service_details.use_service
+ } %}
+ {% endif %}
+
+ {% if service_details.whats_available %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'What\'s available'
+ } %}
+ {% for wa in service_details.whats_available %}
+ {{ wa }}<br />
+ {% endfor %}
+ {% endif %}
+
+ {% if service_details.request_service %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'How to request this service'
+ } %}
+ {{ service_details.request_service }}
+ {% endif %}
+
+ {% if service_details.minimum_notice %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Minimum notice to use this service'
+ } %}
+ {{ service_details.minimum_notice }}
+ {% endif %}
+
+ {% if service_details.average_length %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Average length of time to complete request'
+ } %}
+ {{ service_details.average_length }}
+ {% endif %}
+
+ {% if service_details.pricing_cost %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Pricing/Cost'
+ } %}
+ {{ service_details.pricing_cost }}
+ {% endif %}
+
+ {% if service_details.support %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Support for this service'
+ } %}
+ {{ service_details.support }}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_service-hours.twig b/src/patterns/04-components/card/card-elements/_service-hours.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6fc3e11f174d834a7e066adf014171321519a875
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_service-hours.twig
@@ -0,0 +1,24 @@
+<div class="card__service-details">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE
+ } %}
+ {% block details_summary %}
+ Service Hours
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if service_hours.hours %}
+ {{ service_hours.hours }}
+ {% endif %}
+
+ {% if service_hours.hours_notes %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'General notes about service hours'
+ } %}
+ {{ service_hours.hours_notes }}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_service-information.twig b/src/patterns/04-components/card/card-elements/_service-information.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9105935ddd369e2c4674b963d02b1b552b6c098f
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_service-information.twig
@@ -0,0 +1,29 @@
+<div class="card__service-information">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE
+ } %}
+ {% block details_summary %}
+ Service Information
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if info.status %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Status'
+ } %}
+ {{ info.status }}
+ {% endif %}
+
+ {% if info.categories %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Categories'
+ } %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: info.categories
+ } %}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_timeline.twig b/src/patterns/04-components/card/card-elements/_timeline.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3d702b0ba1f7488ee3393d5324752f17ac227e1f
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_timeline.twig
@@ -0,0 +1,23 @@
+<div class="card__timeline">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Project time line
+ {% endblock %}
+
+ {% block details_content %}
+ <div class="card__timeline--content">
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'standard',
+ 'date': timeline.start_date,
+ } %}
+ to
+ {% include '@components/date/_date.twig' with {
+ 'date_format': 'standard',
+ 'date': timeline.end_date,
+ } %}
+ </div>
+ {% endblock %}
+ {% endembed %}
+</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..500675300716169f29c783c05678741c0e086e58
--- /dev/null
+++ b/src/patterns/04-components/date/_date.scss
@@ -0,0 +1,134 @@
+@use '../../01-core' as *;
+
+.uw-date {
+ width:auto;
+
+ @media(min-width: $screen-lg) {
+ margin-left:inherit;
+ }
+}
+
+.uw-date-details{
+ box-sizing: border-box;
+ display: inline-block;
+
+ .uw-date {
+ box-sizing: border-box;
+ display:block;
+ padding: var(--size-1) var(--size-2);
+
+ &:first-child {
+ padding: var(--size-1) 2.75rem var(--size-1) var(--size-2);
+ }
+
+ text-transform: uppercase;
+ }
+
+ &[open] {
+ background-color: transparent !important;
+
+ .card__node--event & {
+ margin-bottom: var(--size-4);
+ }
+
+ position: absolute;
+ width: calc(100%);
+ z-index: var(--layer-content);
+
+ @media(min-width: $screen-xs) {
+ width: inherit;
+ }
+ }
+}
+
+.uw-date-details__summary {
+
+ .uw-date {
+ background: inherit;
+ }
+
+ background-position: right var(--size-105) center; // LTR
+ background-repeat: no-repeat;
+ background-size: 13px;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: inline-block;
+ padding: 0;
+
+ .block-uw-cbl-multi-type-list & {
+ background-position: right var(--size-1) center; // LTR
+ }
+
+ &::-webkit-details-marker {
+ display: none;
+ }
+}
+
+.uw-date {
+ background-color: var(--uw-gold);
+ color: var(--uw-black);
+ clear: both;
+ display: inline-block;
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-00);
+ padding: var(--size-1) var(--size-2);
+ text-transform: uppercase;
+}
+
+@each $faculty, $colour in $faculties_colours {
+ .#{$faculty} {
+
+ @if $faculty == org-default {
+
+ .uw-date {
+ background-color: var($colour);
+ color: var(--uw-black);
+ }
+
+ .uw-date-details {
+ background-color: var($colour);
+
+ &[open] {
+ .uw-date-details__summary {
+ @include svg-background(mobile-arrow-up);
+ }
+ }
+ }
+
+ .uw-date-details__summary {
+ .uw-date {
+ background: inherit;
+ }
+
+ @include svg-background(mobile-arrow-down);
+ background-color: var($colour);
+ color: var(--uw-black);
+ }
+ } @else {
+ .uw-date {
+ background-color: var($colour);
+ color: var(--uw-white);
+ }
+
+ .uw-date-details {
+ background-color: var($colour);
+
+ &[open] {
+ .uw-date-details__summary {
+ @include svg-background(mobile-arrow-up-w);
+ }
+ }
+ }
+
+ .uw-date-details__summary{
+ .uw-date{
+ background:inherit;
+ }
+
+ @include svg-background(mobile-arrow-down-w);
+ background-color: var($colour);
+ color: var(--uw-white);
+ }
+ }
+ }
+}
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 %}
diff --git a/src/patterns/04-components/responsive-image/_responsive-image.scss b/src/patterns/04-components/responsive-image/_responsive-image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d6c9de4193e6edf931f70be33e17e25885aa93bb
--- /dev/null
+++ b/src/patterns/04-components/responsive-image/_responsive-image.scss
@@ -0,0 +1,7 @@
+picture {
+ img {
+ width: 100%;
+ }
+
+ width: 100%;
+}
diff --git a/src/patterns/04-components/responsive-image/images/president_large.jpg b/src/patterns/04-components/responsive-image/images/president_large.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..edde98fb5c89edab7661b69ce5d7cd1ed88dc3ae
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_large.jpg differ
diff --git a/src/patterns/04-components/responsive-image/images/president_medium.jpg b/src/patterns/04-components/responsive-image/images/president_medium.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..aacb50b0216283b3fe454902c4273eca11704eae
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_medium.jpg differ
diff --git a/src/patterns/04-components/responsive-image/images/president_small.jpg b/src/patterns/04-components/responsive-image/images/president_small.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9fa83aa31540a2ed4aa44cda9f2e0f03691c5c0f
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_small.jpg differ
diff --git a/src/patterns/04-components/responsive-image/images/president_xlarge.jpg b/src/patterns/04-components/responsive-image/images/president_xlarge.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..63021afba8dda6967b5c4dad4527be0f9f89d997
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_xlarge.jpg differ
diff --git a/src/patterns/04-components/responsive-image/images/president_xsmall.jpg b/src/patterns/04-components/responsive-image/images/president_xsmall.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f3bf3a7e1af55ccb832f53d5d0200177707300c0
Binary files /dev/null and b/src/patterns/04-components/responsive-image/images/president_xsmall.jpg differ
diff --git a/src/patterns/04-components/responsive-image/responsive-image.twig b/src/patterns/04-components/responsive-image/responsive-image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b8dcefa0fb139723fd13eb785c63313f5adcb926
--- /dev/null
+++ b/src/patterns/04-components/responsive-image/responsive-image.twig
@@ -0,0 +1,19 @@
+{% if output_image_tag %}
+ {{ img_element }}
+{% else %}
+ <picture class="uw-picture">
+ {% if sources %}
+ {#
+ Internet Explorer 9 doesn't recognise source elements that are wrapped in
+ picture tags. See http://scottjehl.github.io/picturefill/#ie9
+ #}
+ <!--[if IE 9]><video style="display: none;"><![endif]-->
+ {% for source in sources %}
+ <source srcset="{{ source.srcset|raw }}" media="{{ source.media }}" type="{{ source.type }}" />
+ {% endfor %}
+ <!--[if IE 9]></video><![endif]-->
+ {% endif %}
+ {# The controlling image, with the fallback image in srcset. #}
+ <img class="uw-picture__fallback" src="{{ img_element }}" alt="{{ alt }}">
+ </picture>
+{% endif %}
diff --git a/src/patterns/04-components/responsive-image/responsive-image.yml b/src/patterns/04-components/responsive-image/responsive-image.yml
new file mode 100644
index 0000000000000000000000000000000000000000..91faf6963a2c530689f6066c30bb85c456c7edd4
--- /dev/null
+++ b/src/patterns/04-components/responsive-image/responsive-image.yml
@@ -0,0 +1,18 @@
+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'