diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
new file mode 100644
index 0000000000000000000000000000000000000000..794bfefe5faf41ec18ba20b376ff78aa732473a1
--- /dev/null
+++ b/src/patterns/04-components/card/_card.scss
@@ -0,0 +1,259 @@
+// @file
+// Styles for Cards.
+
+$card-accent-border-color: gesso-color(ui, generic, accent) !default;
+$card-link-color: gesso-color(text, on-light) !default;
+$card-link-color-hover: gesso-color(ui, generic, text-dark) !default;
+$card-meta-color: gesso-color(ui, generic, text-dark) !default;
+$card-padding: rem(gesso-spacing(sm)) !default;
+
+.card {
+ width: 100%;
+
+ .views-row & {
+ height: 100%;
+ }
+
+ .uw-label {
+ display: block;
+ margin-top: 1rem;
+ }
+
+ &__catalog-tags {
+ // TODO: change of ohana functions/mixins.
+ //padding-bottom: rem(gesso-spacing(sm));
+ }
+}
+
+// if card--show-hover class is present then show "
+.card--show-hover{
+ border-bottom: 3px solid $card-accent-border-color;
+ // TODO: change of ohana functions/mixins.
+ //box-shadow: gesso-box-shadow(1);
+ padding: $card-padding;
+ // TODO: change of ohana functions/mixins.
+ //transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+
+ &:hover,
+ &:focus-within {
+ // TODO: change of ohana functions/mixins.
+ //box-shadow: gesso-box-shadow(3);
+ }
+}
+
+.card__image {
+ // TODO: change of ohana functions/mixins.
+ //margin-bottom: rem(gesso-spacing(sm));
+
+ img {
+ display: block;
+ }
+
+ a {
+ // TO-DO: replace with ohana color.
+ background: #000;
+ display: block;
+
+ img {
+ -webkit-filter: opacity(100%);
+ filter: opacity(100%);
+ // TODO: change of ohana functions/mixins.
+ //transition: filter gesso-duration(shortest) gesso-easing(ease-in);
+ }
+
+ &:hover,
+ &:focus {
+ img {
+ -webkit-filter: opacity(62%);
+ filter: opacity(62%);
+ // TODO: change of ohana functions/mixins.
+ //transition:filter gesso-duration(shortest) gesso-easing(ease-in);
+ }
+ }
+ }
+}
+
+.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{
+
+ // TODO: change of ohana functions/mixins.
+ //@include uw-no-breakout();
+ // TODO: change of ohana functions/mixins.
+ //margin-bottom: rem(gesso-spacing(xs));
+ width: 100%;
+
+ .card__node--event & {
+ display:grid;
+ grid-template-columns: 1fr auto;
+
+ .card__author {
+ grid-column: 1/2;
+ }
+
+ .card__date {
+ grid-column: 1/2;
+ }
+
+ .card__title {
+ grid-column: 1/2;
+ }
+
+ .view-interact {
+ background-color: $uw-white;
+ grid-column: 2/3;
+ grid-row: 2/3;
+ margin: 0;
+ padding: 1rem 1rem 0 0;
+
+ .uw-node__without-image & {
+ grid-column: 2/3;
+ grid-row: inherit;
+ margin-bottom: 1rem;
+ padding: 0;
+ }
+ }
+ }
+}
+
+.card__date {
+ // TODO: change of ohana functions/mixins.
+ //font-size: rem(gesso-font-size(0));
+ // TODO: change of ohana functions/mixins.
+ //margin-bottom: rem(gesso-spacing(sm));
+ position: relative;
+}
+
+.card__title {
+ margin: 0 0 rem(gesso-spacing(xs)) 0;
+ padding: 0;
+ width: 100%;
+
+ a {
+ // TODO: change of ohana functions/mixins.
+ //@include link-reverse(
+ // $card-link-color,
+ // $card-link-color-hover
+ //);
+ }
+}
+
+.card__author {
+
+ // TODO: change of ohana functions/mixins.
+ //@include uw-no-breakout();
+ // TODO: change of ohana functions/mixins.
+ //font-family: gesso-font-family(systemmedium);
+ // TODO: change of ohana functions/mixins.
+ //font-size: gesso-font-size(-1);
+ margin-top: 0;
+ // TODO: change of ohana functions/mixins.
+ //padding: 0 0 gesso-spacing(xs) 0;
+
+ a {
+ // TODO: change of ohana functions/mixins.
+ //@include link(
+ // $card-link-color,
+ // $card-link-color-hover
+ //);
+ }
+}
+
+// body
+.card__body {
+ width: 100%;
+}
+
+.card__content {
+ // TODO: change of ohana functions/mixins.
+ //margin-bottom: rem(gesso-spacing(md));
+ width: 100%;
+
+ &:empty {
+ margin-bottom:0;
+ }
+}
+
+
+.card__position {
+ color: $uw-black;
+ font-size: 1.26562rem;
+}
+
+// footer
+.card__footer {
+ width: 100%;
+}
+
+.card__tags {
+ margin:0;
+ padding:0;
+ width: 100%;
+}
+
+.card__readmore {
+ text-align: right;
+}
+
+.card__social {
+ max-width: 20rem;
+ width: 100%;
+}
+
+.card__project{
+ &-members--content {
+ // TODO: change of ohana functions/mixins.
+ //@include uw-flex-grid();
+ .card__project-member {
+ // TODO: change of ohana functions/mixins.
+ //@include flex(1 1 auto);
+ // TODO: change of ohana functions/mixins.
+ //@include flex-grow(1);
+ width: 45%;
+ }
+ @include medium {
+ .card__project-member {
+ // TODO: change of ohana functions/mixins.
+ //@include flex(1 1 auto);
+ // TODO: change of ohana functions/mixins.
+ //@include flex-grow(1);
+ width: 20%;
+ }
+ }
+ }
+}
+
+// Have not worked on card feature.
+.card--feature {
+
+ .card__body {
+ padding-top: $card-padding;
+ }
+
+ .card__media {
+ margin-bottom: 0;
+ }
+
+ // TODO: change of ohana functions/mixins.
+ //@include breakpoint(gesso-breakpoint(md)) {
+ // flex-direction: row;
+ //
+ // .card__body {
+ // max-width: 600px;
+ // padding: $card-padding 2vw 0;
+ // }
+ //
+ // .card__media {
+ // order: initial;
+ // }
+ //}
+}
diff --git a/src/patterns/04-components/card/card-elements/_content.twig b/src/patterns/04-components/card/card-elements/_content.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9ae8d47fc1e5f188049347989d6995664a3b4908
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_content.twig
@@ -0,0 +1 @@
+<div class="card__content">{{ content }}</div>
diff --git a/src/patterns/04-components/card/card-elements/_footer-elements.twig b/src/patterns/04-components/card/card-elements/_footer-elements.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e1fba64ddb44da0d996d58f269b1ac101d192446
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_footer-elements.twig
@@ -0,0 +1,115 @@
+{% if footer.service_information %}
+ {% include '@components/card/card-elements/_service-information.twig' with {
+ 'info': footer.service_information
+ } %}
+{% endif %}
+
+{% if footer.service_details %}
+ {% include '@components/card/card-elements/_service-details.twig' with {
+ 'service_details': footer.service_details
+ } %}
+{% endif %}
+
+{% if footer.service_hours %}
+ {% include '@components/card/card-elements/_service-hours.twig' with {
+ 'service_hours': footer.service_hours
+ } %}
+{% endif %}
+
+{% if footer.contact_info %}
+ {% include '@components/card/card-elements/_contact-info.twig' with {
+ 'contact_info': footer.contact_info
+ } %}
+{% endif %}
+
+{% if footer.contact_for %}
+ {% include '@components/card/card-elements/_contact-for.twig' with {
+ 'contact_for': footer.contact_for
+ } %}
+{% endif %}
+
+{% if footer.groups %}
+ {% include '@components/card/card-elements/_groups.twig' with {
+ 'groups': footer.groups.groups
+ } %}
+{% endif %}
+
+{% if footer.opportunity_dates %}
+ {% include '@components/card/card-elements/_opportunity-dates.twig' with {
+ 'dates': footer.opportunity_dates
+ } %}
+{% endif %}
+
+{% if footer.opportunity_details %}
+ {% include '@components/card/card-elements/_opportunity-details.twig' with {
+ 'opportunity_details': footer.opportunity_details
+ }%}
+{% endif %}
+
+{% if footer.links %}
+ {% include '@components/card/card-elements/_links.twig' with {
+ 'links': footer.links
+ }%}
+{% endif %}
+
+{% if footer.location_info %}
+ {% include '@components/card/card-elements/_location-info.twig' with {
+ 'location_info': footer.location_info
+ }%}
+{% endif %}
+
+{% if footer.additional_info %}
+ {% include '@components/card/card-elements/_additional-info.twig' with {
+ 'additional_info': footer.additional_info
+ } %}
+{% endif %}
+
+{% if footer.posted %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Date posted'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long',
+ 'date': footer.posted
+ } %}
+{% endif %}
+
+{% if footer.deadline %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Application deadline'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long_with_time',
+ 'date': footer.deadline
+ } %}
+{% endif %}
+
+{% if footer.opportunity_type %}
+ {% include '@components/card/card-elements/_opportunity-type.twig' with {
+ 'opportunity_type': footer.opportunity_type
+ } %}
+{% endif %}
+
+{% if footer.project_details %}
+ {% include '@components/card/card-elements/_project-details.twig' with {
+ 'project_details': footer.project_details
+ } %}
+{% endif %}
+
+{% if footer.timeline %}
+ {% include '@components/card/card-elements/_timeline.twig' with {
+ 'timeline': footer.timeline
+ } %}
+{% endif %}
+
+{% if footer.project_members %}
+ {% include '@components/card/card-elements/_project-members.twig' with {
+ 'project_members': footer.project_members
+ } %}
+{% endif %}
+
+{% if footer.tags %}
+ {% include '@components/card/card-elements/_tags.twig' with {
+ 'tags': footer.tags,
+ } %}
+{% endif %}
diff --git a/src/patterns/04-components/card/card-elements/_header.twig b/src/patterns/04-components/card/card-elements/_header.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c2a5357833d1adffef2768f9ddbbd046b3a93b7f
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_header.twig
@@ -0,0 +1,90 @@
+<div class="card__header">
+
+ {% if bundle == 'uw_ct_profile' %}
+ {% if image %}
+ <div class="uw-image__profiles">
+ {% include '@components/card/card-elements/_image.twig' with {
+ 'image': image,
+ 'bundle': bundle
+ } %}
+ </div>
+ {% endif %}
+ {% endif %}
+
+ {% if header.date %}
+
+ {% if type == 'event' %}
+ {% set date_format = 'long_with_time' %}
+ {% else %}
+ {% set date_format = 'long' %}
+ {% endif %}
+
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': date_format,
+ 'date': header.date,
+ 'type': type,
+ } %}
+ {% endif %}
+
+ {% if header.title and show_title == 'yes' %}
+ {% include '@components/card/card-elements/_title.twig' with {
+ 'header_level': 2,
+ 'title': header.title,
+ 'type': type
+ } %}
+ {% endif %}
+
+ {% if header.position %}
+ {% include '@components/card/card-elements/_position.twig' with {
+ 'position': header.position
+ } %}
+ {% endif %}
+
+ {% if header.author %}
+ {% include '@components/card/card-elements/_author.twig' with {
+ 'author': header.author
+ } %}
+ {% endif %}
+
+ {% if header.posted %}
+ {% include '@components/label/label.twig' with {
+ 'label': 'Date posted'
+ } %}
+ {% include '@components/card/card-elements/_date.twig' with {
+ 'date_format': 'long',
+ 'date': header.posted
+ } %}
+ {% endif %}
+
+ {% if header.opportunity_type %}
+ {% include '@components/card/card-elements/_opportunity-type.twig' with {
+ 'opportunity_type': header.opportunity_type
+ } %}
+ {% endif %}
+
+ {% if header.employment_type %}
+ {% include '@components/card/card-elements/_employment-type.twig' with {
+ 'employment_type': header.employment_type
+ } %}
+ {% endif %}
+
+ {% if header.rate_of_pay or header.rate_of_pay_type %}
+ {% include '@components/card/card-elements/_rate-of-pay.twig' with {
+ 'rate_of_pay': header.rate_of_pay,
+ 'rate_of_pay_type': header.rate_of_pay_type
+ } %}
+ {% endif %}
+
+ {% if header.job_id %}
+ {% include '@components/card/card-elements/_job-id.twig' with {
+ 'job_id': header.job_id
+ } %}
+ {% endif %}
+
+ {% if ical %}
+ {% include '@components/view/view-interact/view-interact.twig' with {
+ 'ical': ical
+ }%}
+ {% endif %}
+
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_link.twig b/src/patterns/04-components/card/card-elements/_link.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e022bf2aaf37a46a75c222cfad094a02a39e58c1
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_link.twig
@@ -0,0 +1,8 @@
+<div class="card__link card__link--{{ link_type }}">
+ {% include '@components/label/label.twig' with {
+ 'label': label
+ } %}
+ {% include '@components/links/links.twig' with {
+ 'links': links
+ } %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_links.twig b/src/patterns/04-components/card/card-elements/_links.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ec03d45e80392a6bc07456f4ae90ce1c79c3f80b
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_links.twig
@@ -0,0 +1,61 @@
+<div class="card__contact-links">
+ {% embed '@components/details/details.twig' with {
+ 'is_open': TRUE,
+ }%}
+ {% block details_summary %}
+ Links
+ {% endblock %}
+
+ {% block details_content %}
+
+ {% if links.profile %}
+ {% include '@components/card/card-elements/_link.twig' with {
+ 'label': 'Link to profile',
+ 'link_type': 'profile',
+ 'links': links.profile
+ } %}
+ {% endif %}
+
+ {% if links.webpage %}
+ {% include '@components/card/card-elements/_link.twig' with {
+ 'label': 'Link to personal webpage',
+ 'link_type': 'personal-webpage',
+ 'links': links.webpage
+ } %}
+ {% endif %}
+
+ {% if links.link_to_contact %}
+ {% include '@components/card/card-elements/_link.twig' with {
+ 'label': 'Contact information',
+ 'link_type': 'link-to-contact',
+ 'links': links.link_to_contact
+ } %}
+ {% endif %}
+
+ {% if links.application %}
+ {% include '@components/card/card-elements/_link.twig' with {
+ 'label': 'Link to application',
+ 'link_type': 'application',
+ 'links': links.application
+ } %}
+ {% endif %}
+
+ {% if links.additional_info %}
+ {% include '@components/card/card-elements/_link.twig' with {
+ 'label': 'Link to additional information',
+ 'link_type': 'additional-info',
+ 'links': links.additional_info
+ } %}
+ {% endif %}
+
+ {% if links.contact %}
+ {% include '@components/card/card-elements/_link.twig' with {
+ 'label': 'Contact for additional informationn',
+ 'link_type': 'contact-for',
+ 'links': links.contact
+ } %}
+ {% endif %}
+
+ {% endblock %}
+ {% endembed %}
+</div>
diff --git a/src/patterns/04-components/card/card-elements/_tags.twig b/src/patterns/04-components/card/card-elements/_tags.twig
new file mode 100644
index 0000000000000000000000000000000000000000..33d119c296a88b40e1ac1dd28c74178d1f02ccc7
--- /dev/null
+++ b/src/patterns/04-components/card/card-elements/_tags.twig
@@ -0,0 +1,5 @@
+<div class="card__tags">
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: tags
+ } %}
+</div>
diff --git a/src/patterns/04-components/card/card.twig b/src/patterns/04-components/card/card.twig
new file mode 100644
index 0000000000000000000000000000000000000000..afeaabad181200454357eb8bbe591efeb3590b57
--- /dev/null
+++ b/src/patterns/04-components/card/card.twig
@@ -0,0 +1,85 @@
+{% if show_header is null %}
+ {% set show_header = 'yes' %}
+{% endif %}
+
+{% if type == 'teaser' %}
+ {% set show_title = 'yes' %}
+{% elseif media and media.type == 'image' %}
+ {% set show_title = 'no' %}
+ {% set show_header = 'no' %}
+{% else %}
+ {% set show_title = 'no' %}
+{% endif %}
+
+{% if show_image is null %}
+ {% set show_image = 'yes' %}
+{% endif %}
+
+<article class="card{% if type %} card__{{ type }} {% endif %}{% if modifier_classes %} card__{{ modifier_classes }}{% endif %}{% if show_hover %} card--show-hover{% endif %}" {% if type == 'banner' %} id="{{ type }}{{ loop.index }}-{{ banners.uuid }}"{% endif %}>
+ {% if media %}
+ {% include '@components/card/card-elements/_media.twig' with {
+ 'media': media,
+ 'header': header,
+ } %}
+ {% endif %}
+
+ {% if image and show_image == 'yes' and bundle != 'uw_ct_profile' %}
+ {% include '@components/card/card-elements/_image.twig' with {
+ 'image': image
+ } %}
+ {% endif %}
+
+ {% if header and show_header == 'yes' %}
+ {% include '@components/card/card-elements/_header.twig' with {
+ 'header': header,
+ 'show_title': show_title,
+ 'type': type,
+ 'image': image,
+ 'bundle': bundle
+ } %}
+ {% endif %}
+
+ {% if content or banner %}
+ <div class="card__body">
+ {% if banner %}
+ {% include '@components/card/card-elements/_banner.twig' with {
+ 'banner': banner,
+ } %}
+ {% endif %}
+
+ {% if content %}
+ {% include '@components/card/card-elements/_content.twig' with {
+ 'content': content,
+ } %}
+ {% endif %}
+ </div>
+ {% endif %}
+
+ {% if footer %}
+ <div class="card__footer">
+
+ {% include '@components/card/card-elements/_footer-elements.twig' with {
+ 'footer': footer
+ } %}
+
+ {% if read_more and url %}
+ <div class="card__readmore">
+ {{ macros.readmore(url, title) }}
+ </div>
+ {% endif %}
+
+ {% if social_media %}
+ <div class="card__social {{ social_media_placement }}">
+ {% include "@components/menu/menu--social/menu--social.twig" %}
+ </div>
+ {% endif %}
+ </div>
+ {% endif %}
+
+ {% if tags %}
+ {% include '@components/card/card-elements/_tags.twig' with {
+ 'tags': tags
+ } %}
+ {% endif %}
+
+</article>
diff --git a/src/patterns/04-components/card/card.yml b/src/patterns/04-components/card/card.yml
new file mode 100644
index 0000000000000000000000000000000000000000..44fe7d48f07ae1556c176d3160c968f8ea3ce7b2
--- /dev/null
+++ b/src/patterns/04-components/card/card.yml
@@ -0,0 +1,22 @@
+---
+url: '#'
+show_title: 'yes'
+footer:
+ links:
+ webpage:
+ 0:
+ uri: '#'
+ title: 'Test'
+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>'
+header:
+ title: 'Card Title'
+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/details/_details.scss b/src/patterns/04-components/details/_details.scss
new file mode 100644
index 0000000000000000000000000000000000000000..241fd52b5a2acd214fa64f3df04cce0669c4cece
--- /dev/null
+++ b/src/patterns/04-components/details/_details.scss
@@ -0,0 +1,154 @@
+// @file
+// Styles for collapsible details.
+
+$details-background-color: gesso-color(ui, generic, background-light) !default;
+$details-background-color-hover: gesso-color(ui, generic, background) !default;
+$details-content-background-color: gesso-color(background, site) !default;
+$details-padding: gesso-spacing(sm) !default;
+$details-text-color: gesso-color(text, on-light) !default;
+$summary-font-family: gesso-font-family(book);
+$details-font-family: gesso-font-family(primary);
+// 'details' can appear as a modernizr class on the html tag, so this
+// class is limited to only the details element
+/* stylelint-disable-next-line selector-no-qualifying-type */
+.uw-details,
+.seven-details {
+ background-color: #fcfcfa;
+ border: 1px solid #bfbfbf;
+ border-bottom: 1px solid $card-accent-border-color;
+ border-radius: inherit;
+ // TODO: change to ohana functions/mixins.
+ //box-shadow: gesso-box-shadow(0);
+ // TODO: change to ohana functions/mixins.
+ //margin: rem(gesso-spacing(md)) 0;
+ // TODO: change to ohana functions/mixins.
+ //transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+ width:100%;
+
+ &[open] > .seven-details__summary {
+ // TODO: change to ohana functions/mixins.
+ //color: gesso-brand(org-default,uw-black,'primary');
+ }
+
+ &:hover {
+ // TODO: change to ohana functions/mixins.
+ //box-shadow: gesso-box-shadow(1);
+ }
+
+ &:focus-within {
+ // TODO: change to ohana functions/mixins.
+ //box-shadow: gesso-box-shadow(1);
+ }
+
+ &:first-child{
+ margin-top: 0;
+ }
+
+ // Fallback for browsers that don’t support details.
+ /* stylelint-disable-next-line selector-no-qualifying-type */
+ .js &:not([open]) > .details__content {
+ display: none;
+ }
+}
+
+.seven-details__summary,
+.details__summary {
+ // TODO: change to ohana functions/mixins.
+ //@include uw-no-breakout();
+ // TODO: change to ohana functions/mixins.
+ //@include svg-background(mobile-arrow-down);
+ background-color: $details-background-color;
+ background-position: right 1rem center; // LTR
+ background-repeat: no-repeat;
+ background-size: rem(13px);
+ // TODO: change to ohana functions/mixins.
+ //color: gesso-brand(org-default,uw-black,'primary');
+ cursor: pointer;
+ display: block;
+ font-family: $summary-font-family;
+ // TODO: change to ohana functions/mixins.
+ //font-size: rem(gesso-font-size(-1));
+ line-height: 1.25;
+ outline: 0;
+ padding: $details-padding;
+ text-shadow: 0 1px 0 #fff;
+ // TODO: change to ohana functions/mixins.
+ //transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+
+ @if $support-for-rtl {
+ [dir='rtl'] & {
+ background-position: left $details-padding center;
+ // TODO: change to ohana functions/mixins.
+ //padding-left: gesso-spacing(xl);
+ padding-right: $details-padding;
+ }
+ }
+
+ [open] > & {
+ // TODO: change to ohana functions/mixins.
+ //@include svg-background(mobile-arrow-up);
+ }
+
+ &:hover,
+ &:focus{
+ // TODO: change to ohana functions/mixins.
+ //color: gesso-brand(org-default,uw-black,'primary');
+ }
+ &:first-child{
+ margin-top: 0;
+ }
+ &::-webkit-details-marker {
+ display: none;
+ }
+}
+
+.details__fallback-link {
+ display: block;
+ outline: 0;
+ text-decoration: none;
+}
+
+.details__content {
+ // TODO: change to ohana functions/mixins.
+ //@include uw-no-breakout();
+ background: $details-content-background-color;
+ border: 1px solid $details-background-color;
+ border-top: 0;
+ padding: $details-padding;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ .uw-label{
+ margin-bottom:0;
+ margin-top:rem(gesso-spacing(sm));
+ }
+}
+
+.details__description,
+.seven-details__description{
+ color: $details-text-color;
+ // TODO: change to ohana functions/mixins.
+ //font-size: rem(gesso-font-size(-1));
+ // TODO: change to ohana functions/mixins.
+ //margin-bottom: rem(gesso-spacing(sm));
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+.node--type{
+ &-uw-ct-contact{
+ .details {
+ max-width:600px;
+ }
+ }
+}
+
+.seven-details__wrapper {
+ padding: 1rem;
+ .uw-input,
+ .form-text{
+ width:100%;
+ }
+}
diff --git a/src/patterns/04-components/details/details.twig b/src/patterns/04-components/details/details.twig
new file mode 100644
index 0000000000000000000000000000000000000000..cba4bcd7ade58788a2afc3dbf1cf8d1d37188827
--- /dev/null
+++ b/src/patterns/04-components/details/details.twig
@@ -0,0 +1,12 @@
+<details class="uw-details" {% if is_open %} open{% endif %}>
+ <summary class="details__summary">
+ {% block details_summary %}
+ Summary
+ {% endblock %}
+ </summary>
+ <div class="details__content">
+ {% block details_content %}
+ Content
+ {% endblock %}
+ </div>
+</details>
diff --git a/src/patterns/04-components/details/details.yml b/src/patterns/04-components/details/details.yml
new file mode 100644
index 0000000000000000000000000000000000000000..12b8565991d7b40972752edec47370aa440950e0
--- /dev/null
+++ b/src/patterns/04-components/details/details.yml
@@ -0,0 +1,5 @@
+details_classes: 'seven-details'
+details_summary: 'Details summary'
+details_description: 'Details description'
+details_content: |-
+ <p>Details content</p>
diff --git a/src/patterns/04-components/label/label.twig b/src/patterns/04-components/label/label.twig
new file mode 100644
index 0000000000000000000000000000000000000000..787662a98cbd07ca7877ff934f423bfcbcfd85b1
--- /dev/null
+++ b/src/patterns/04-components/label/label.twig
@@ -0,0 +1 @@
+<span class="uw-label">{{ label }}:</span>
diff --git a/src/patterns/04-components/links/links.twig b/src/patterns/04-components/links/links.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7c1d21442221d43defd148992cbd2d0cf0f97f15
--- /dev/null
+++ b/src/patterns/04-components/links/links.twig
@@ -0,0 +1,9 @@
+{% for link in links %}
+ <a href="{{ link.uri }}">
+ {% if link.title %}
+ {{ link.title }}
+ {% else %}
+ {{ link.uri }}
+ {% endif %}
+ </a>
+{% endfor %}
diff --git a/src/patterns/04-components/tag-list/_tag-list.scss b/src/patterns/04-components/tag-list/_tag-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fc4d490beb8f14f3a66c393137729b12c8f70527
--- /dev/null
+++ b/src/patterns/04-components/tag-list/_tag-list.scss
@@ -0,0 +1,12 @@
+.tag-list {
+ // TODO: change of ohana functions/mixins.
+ //@include list-clean();
+}
+
+.tag-list__item {
+ display: inline-block;
+ // TODO: change of ohana functions/mixins.
+ //margin-bottom: rem(gesso-spacing(xxs));
+ // TODO: change of ohana functions/mixins.
+ //margin-right: rem(gesso-spacing(xs));
+}
diff --git a/src/patterns/04-components/tag-list/tag-list.twig b/src/patterns/04-components/tag-list/tag-list.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0d5e334295d221b16ac238bf6e15c159c1e435d0
--- /dev/null
+++ b/src/patterns/04-components/tag-list/tag-list.twig
@@ -0,0 +1,7 @@
+<ul class="tag-list {{ modifier_classes }}">
+ {% for item in items %}
+ <li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">
+ {{ macros.tag(item.url, item.title, tag_type) }}
+ </li>
+ {% endfor %}
+</ul>
diff --git a/src/patterns/04-components/tag-list/tag-list.yml b/src/patterns/04-components/tag-list/tag-list.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3d1ec9769a9462ffbc191b153c86ab093c3c34ac
--- /dev/null
+++ b/src/patterns/04-components/tag-list/tag-list.yml
@@ -0,0 +1,65 @@
+items:
+ - url: '#'
+ title: 'Campus'
+ faculty: 'org-default'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'UW Default'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'Science'
+ faculty: 'org-sci'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'Engineering'
+ faculty: 'org-eng'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'Environment'
+ faculty: 'org-env'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'Math'
+ faculty: 'org-mat'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'Art'
+ faculty: 'org-art'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'Health'
+ faculty: 'org-ahs'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'School'
+ faculty: 'org-school'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'St. Jeromes'
+ faculty: 'org-stj'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'St. Pauls'
+ faculty: 'org-stp'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'Renison'
+ faculty: 'org-ren'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'Conrad Grebel'
+ faculty: 'org-cgc'
+ type: 'full'
+ size: 'normal'