diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index 702e8dda7f8b622475cdd8de3942caa6a15c3e08..ad997fbdde72a0d19031257cbd0007c1269f2428 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -1,29 +1,132 @@
// @file
// Details element styles.
+@use '../../01-core' as *;
+
+//$summary-font-family: gesso-font-family(book);
+//$details-font-family: gesso-font-family(primary);
+
:where(details) {
+ @include uw-no-breakout();
+ @include svg-background(mobile-arrow-down);
background: var(--gray-2);
- border-radius: var(--radius-2);
- padding-block: var(--size-2);
- padding-inline: var(--size-3);
+ border: var(--size-xs) solid #bfbfbf;
+ border-bottom:var(--size-xs) solid var(--uw-black-primary);
+ border-radius: var(--radius-1);
+ box-shadow: var(--shadow-1);
+ color: var(--uw-black-primary);
+ font-family: var(--font-serif);
+ margin: var(--size-3) 0;
+ transition: box-shadow 300ms ease;
+ width:100%;
+ &[open] > .seven-details__summary {
+ color: var(--uw-black-primary);
+ }
+ [open] > & {
+ @include svg-background(mobile-arrow-up);
+ width:100%;
+ }
&[open] > summary {
- border-end-end-radius: 0;
- border-end-start-radius: 0;
- margin-bottom: var(--size-2);
+ color: var(--uw-black-primary);
+ }
+ &:hover {
+ box-shadow: var(--shadow-3);
+ }
+ &:focus-within {
+ box-shadow: var(--shadow-3);
+ }
+ &:first-child{
+ margin-top: 0;
}
-
p:last-child {
margin-bottom: 0;
}
+ // Fallback for browsers that don’t support details.
+ /* stylelint-disable-next-line selector-no-qualifying-type */
+ .js &:not([open]) > .details__content {
+ display: none;
+ }
}
:where(summary) {
- background: var(--gray-3);
- border-radius: var(--radius-2);
+ @include uw-no-breakout();
+ @include svg-background(mobile-arrow-down);
+ background: var(--gray-2);
+ background-position: right var(--size-2) center; // LTR
+ background-repeat: no-repeat;
+ background-size: rem(13px);
+ border-radius: var(--radius-1);
+ color: var(--uw-black-primary);
cursor: pointer;
+ display:block;
+ font-family: var(--font-sans);
+ font-size: var(--font-size-0);
font-weight: var(--font-weight-700);
- margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
- padding: var(--size-2) var(--size-3);
+ margin: 0;
+ line-height: 1.25;
+ outline: 0;
+ padding: var(--size-2);
+ transition: box-shadow 300ms ease;
touch-action: manipulation;
+ [open] > & {
+ @include svg-background(mobile-arrow-up);
+ width:100%;
+ }
+ &:hover,
+ &:focus{
+ color:var(--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 {
+ @include uw-no-breakout();
+ background: var(--uw-white-primary);
+ border: var(--size-xs) solid var(--gray-2);
+ border-top: 0;
+ padding: var(--size-2);
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ .uw-label{
+ margin-bottom:0;
+ margin-top: var(--size-2);
+ }
+}
+.details__description,
+.seven-details__description{
+ color: var(--uw-black-primary);
+ font-size: var(--font-size-00);
+ margin-bottom: var(--size-2);
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+.node--type{
+ &-uw-ct-contact{
+ .details {
+ max-width:600px;
+ }
+ }
+}
+.seven-details__wrapper {
+ padding: var(--size-2);
+ .uw-input,
+ .form-text{
+ width:100%;
+ }
}
diff --git a/src/patterns/01-core/elements/_html.scss b/src/patterns/01-core/elements/_html.scss
index 280a7b8261b6c2c558354696e92f191ccb520f9f..ade02eca7a63c54a51ea430a2d64c70c314aa490 100644
--- a/src/patterns/01-core/elements/_html.scss
+++ b/src/patterns/01-core/elements/_html.scss
@@ -12,8 +12,9 @@
block-size: 100%;
caret-color: var(--caret-color);
color: var(--text-0);
- font-family: var(--font-sans);
- line-height: var(--font-lineheight-4);
+ font-family: var(--font-serif);
+ font-size: var(--font-size-1);
+ line-height: var(--font-lineheight-2);
min-height: 100%;
scrollbar-color: var(--scrollbar-color) transparent;
text-size-adjust: none;
diff --git a/src/patterns/01-core/elements/_label.scss b/src/patterns/01-core/elements/_label.scss
index ccc880498a8735634c62b9a6f167025172fa2c07..e13d3b9e6866a9b3c26b97db86297798adb7498c 100644
--- a/src/patterns/01-core/elements/_label.scss
+++ b/src/patterns/01-core/elements/_label.scss
@@ -1,4 +1,9 @@
// @file
// Label element styles.
-// :where(label) {}
+ :where(label) {
+ font-family: var(--font-sans);
+ }
+.uw-label{
+ font-family: var(--font-sans);
+}
diff --git a/src/patterns/01-core/elements/_paragraph.scss b/src/patterns/01-core/elements/_paragraph.scss
index 4f64cc0927cc7b9afcb3103bf07904c317ae9990..1e2b23bc1fcdb3c043ab055addc732ccb9d475f4 100644
--- a/src/patterns/01-core/elements/_paragraph.scss
+++ b/src/patterns/01-core/elements/_paragraph.scss
@@ -2,8 +2,8 @@
// Paragraph styles.
:where(p) {
- font-size: var(--font-size-2);
- margin-bottom: var(--size-2);;
+ font-size: var(--font-size-1);
+ margin-bottom: var(--size-2);
margin-top: 0;
max-inline-size: var(--size-content-3);
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index dcac9a9fa1a80e4c06bd7961e938fb17b08b3603..3736415187bc52b77234b96a678656367b93fe47 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -3,6 +3,7 @@
@forward 'headings';
@forward 'image-replace';
@forward 'layout';
+@forward 'link';
@forward 'list';
@forward 'svg-background';
@forward 'svg-icon';
diff --git a/src/patterns/01-core/mixins/_link.scss b/src/patterns/01-core/mixins/_link.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6a83ac5768971fec8e358874170e98b466952067
--- /dev/null
+++ b/src/patterns/01-core/mixins/_link.scss
@@ -0,0 +1,50 @@
+// @file
+// Link mixins
+
+@mixin link($link, $hover: $link, $active: $hover, $visit: $link) {
+ color: $link;
+ text-decoration:underline;
+ &:visited {
+ color: $visit;
+ }
+ &:hover,
+ &:focus {
+ color: $hover;
+ text-decoration:none;
+
+ }
+ &:active {
+ color: $active;
+ }
+}
+@mixin link-no-underline($link, $hover: $link, $active: $hover, $visit: $link) {
+ color: $link;
+ text-decoration:none;
+ &:visited {
+ color: $visit;
+ }
+ &:hover,
+ &:focus {
+ color: $hover;
+ text-decoration:none;
+ }
+ &:active {
+ color: $active;
+ }
+}
+
+@mixin link-reverse($link, $hover: $link, $active: $hover, $visit: $link) {
+ color: $link;
+ text-decoration:none;
+ &:visited {
+ color: $visit;
+ }
+ &:hover,
+ &:focus {
+ color: $hover;
+ text-decoration:underline;
+ }
+ &:active {
+ color: $active;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_svg-background.scss b/src/patterns/01-core/mixins/_svg-background.scss
index b01a40d00850da0f13dba42d6c88dbd89c48a07f..51016d0a92c1acafbac5d80a83485241a7beaff2 100644
--- a/src/patterns/01-core/mixins/_svg-background.scss
+++ b/src/patterns/01-core/mixins/_svg-background.scss
@@ -7,3 +7,16 @@
background-size: 100%;
display: inline-block;
}
+
+
+//@mixin svg-background($image-name, $image-location: '../source/images/icons/') {
+// background-image: url($image-location + $image-name + '.svg');
+//}
+//
+//@mixin svg-background-color($image-color, $image-name, $image-location: '../source/images/icons/') {
+// background-color: $image-color;
+// -webkit-mask: url($image-location + $image-name + '.svg') no-repeat;
+// mask: url($image-location + $image-name + '.svg') no-repeat;
+// -webkit-mask-size: contain;
+// mask-size: contain;
+//}
diff --git a/src/patterns/02-base/macros/uw.macro.twig b/src/patterns/02-base/macros/uw.macro.twig
new file mode 100644
index 0000000000000000000000000000000000000000..32ce1edd4aaaff4958f770dc6f8fb5ae4e5a8a83
--- /dev/null
+++ b/src/patterns/02-base/macros/uw.macro.twig
@@ -0,0 +1,18 @@
+{% macro readmore(url, title, label = "Read more", description_prefix = "about" ) %}
+ {% include '@components/readmore-link/readmore-link.twig' with {
+ 'url': url,
+ 'label': label,
+ 'description_prefix': description_prefix,
+ 'title': title
+ } %}
+{% endmacro %}
+
+{% macro tag(url, title, type = "full", size = "normal" ) %}
+ {% include '@components/tag/tag.twig' with {
+ 'url': url,
+ 'title': title,
+ 'type': type,
+ 'size': size,
+ 'faculty':faculty
+ } %}
+{% endmacro %}
diff --git a/src/patterns/03-layouts/_index.scss b/src/patterns/03-layouts/_index.scss
index 4897734f56be7a870aa84be4707da495d6d2a874..7eb69aafe01f2d861d8a5cc1ff96d9665c9aff78 100644
--- a/src/patterns/03-layouts/_index.scss
+++ b/src/patterns/03-layouts/_index.scss
@@ -1,19 +1,10 @@
-// @file
-// Styles layouts
-
-@use 'content/content' as *;
-@use 'footer/footer' as *;
-@use 'grid/grid' as *;
-@use 'header/header' as *;
-@use 'region/region' as *;
-@use 'layout/layout' as *;
-@use 'layout/layout-base' as *;
-@use 'layout/layout--1-col/layout--1-col' as *;
-@use 'layout/layout--2-col/layout--2-col' as *;
-@use 'layout/layout--3-col/layout--3-col' as *;
-@use 'layout/layout--4-col/layout--4-col' as *;
-@use 'layout/layout--5-col/layout--5-col' as *;
-@use 'layout/layout--inverted-l-left/layout--inverted-l-left' as *;
-@use 'layout/layout--inverted-l-right/layout--inverted-l-right' as *;
-@use 'site-container/site-container' as *;
-@use 'site-footer/site-footer' as *;
+@forward 'content/content';
+@forward 'footer/footer';
+@forward 'grid/grid';
+@forward 'header/header';
+@forward 'layout/layout';
+@forward 'layout/layout-base';
+@forward 'node/node';
+@forward 'region/region';
+@forward 'site-container/site-container';
+@forward 'site-footer/site-footer';
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
index fb1c1d311f40c5101d1b7cc2616aa319f7135df1..e729d003858fa1a3fc809199131258bb58447ea7 100644
--- a/src/patterns/03-layouts/layout/_layout-base.scss
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -1,18 +1,21 @@
@use '../../01-core' as *;
+@use '../../03-layouts/layout/layout--1-col/layout--1-col' as *;
+@use '../../03-layouts/layout/layout--2-col/layout--2-col' as *;
+@use '../../03-layouts/layout/layout--3-col/layout--3-col' as *;
+@use '../../03-layouts/layout/layout--4-col/layout--4-col' as *;
+@use '../../03-layouts/layout/layout--5-col/layout--5-col' as *;
+@use '../../03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left' as *;
+@use '../../03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right' as *;
.layout__region {
.layout-builder &{
-
- //outline: 2px dashed #2f91da;
- outline: 2px dashed var(--blue-6);
+ outline: var(--size-sm) dashed var(--blue-6);
}
.pl & {
-
- //outline: 2px dashed #2f91da;
- outline: 2px dashed var(--blue-6);
- padding: 1.5rem;
+ outline: var(--size-sm) dashed var(--blue-6);
+ padding: var(--size-3);
text-align: center;
.pl-labels{
text-align: center;
diff --git a/src/patterns/03-layouts/node/_node.scss b/src/patterns/03-layouts/node/_node.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bb4134bb023099aaa8922493f4269b9515fe2799
--- /dev/null
+++ b/src/patterns/03-layouts/node/_node.scss
@@ -0,0 +1,117 @@
+// @file
+// Styles for node..
+
+@use '../../01-core' as *;
+
+$sidebar-width: 18.75rem;
+
+.uw-node {
+
+ &__grid {
+ display: block;
+ }
+
+ &__sidebar{
+ display: none;
+ }
+
+ // Reset the grid to become flexed when we have sidebar.
+ &.uw-node__with-sidebar {
+
+ .uw-node__grid {
+ display: flex;
+ flex-direction: column;
+ gap: var(--grid-gap);
+ justify-content: center;
+
+ .layout {
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ .uw-contained-width {
+ margin: 0 auto;
+ }
+
+ .uw-full-width {
+ width: 100vw;
+ }
+
+ @media(min-width: $screen-md) {
+ flex-direction: row;
+ gap: var(--grid-gap);
+
+ .layout {
+ padding-right: 0;
+ width: clamp(320px, 868px, calc(100vw - 347px));
+ }
+
+ .uw-contained-width {
+ padding-right: 0;
+ width: clamp(320px, 868px, calc(100vw - 347px));
+ }
+
+ /* Match the width of WCMS2's narrow: 496px */
+ .uw-contained-width--narrow {
+ padding-right: 0;
+ width: clamp(320px, 496px, calc(100vw - 347px));
+ }
+
+ /* Match the width of WCMS2's wide: 753px */
+ .uw-contained-width--wide {
+ padding-right: 0;
+ width: clamp(320px, 753px, calc(100vw - 347px));
+ }
+ }
+ }
+
+ .uw-node__sidebar {
+
+ // Turn on sidebar with display.
+ display: block;
+ padding: 0 var(--size-2);
+ width: 100%;
+
+ .layout {
+ padding: 0;
+ }
+
+ @media(min-width: $screen-md) {
+ padding: 0;
+ width: $sidebar-width;
+ .layout {
+ width: inherit;
+ }
+ }
+ }
+ }
+}
+
+// Class appears when full width content loads with sidebar on page
+.uw-section-has-full-width.uw-node__with-sidebar {
+
+ .uw-node__grid {
+ justify-content: space-between;
+
+ .uw-node__node {
+ width: 100%;
+
+ @media(min-width: $screen-md) {
+ padding-right: 0;
+ width: calc(100vw - 347px);
+ }
+ }
+
+ .uw-full-width {
+ max-width: inherit;
+ padding: 0;
+ width: 100%;
+ }
+ }
+
+ .uw-node__sidebar {
+ @media(min-width: $screen-md) {
+ padding: 0;
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/node/node.twig b/src/patterns/03-layouts/node/node.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9d282b3809db91468ffcad1ac682b73222edfe60
--- /dev/null
+++ b/src/patterns/03-layouts/node/node.twig
@@ -0,0 +1,28 @@
+{% if classes %}
+ {% set classes = classes %}
+{% else %}
+ {% set classes = [] %}
+{% endif %}
+
+{% if has_sidebar == 'Yes' %}
+ {% set classes = classes | merge(['uw-node', 'uw-node__with-sidebar']) %}
+{% else %}
+ {% set classes = classes | merge(['uw-node']) %}
+{% endif %}
+
+<div {{ attributes.addClass(classes) }}>
+ <div class="uw-node__grid">
+ <article class="uw-node__node">
+ {% block content %}
+ This is the node content
+ {% endblock %}
+ </article>
+ {% if has_sidebar == 'Yes' %}
+ <aside class="uw-node__sidebar">
+ {% block sidebar_content %}
+ This is the sidebar
+ {% endblock %}
+ </aside>
+ {% endif %}
+ </div>
+</div>
diff --git a/src/patterns/03-layouts/node/node.yml b/src/patterns/03-layouts/node/node.yml
new file mode 100644
index 0000000000000000000000000000000000000000..29602438bbd3855c909ab659b96aa0f675e04615
--- /dev/null
+++ b/src/patterns/03-layouts/node/node.yml
@@ -0,0 +1 @@
+has_sidebar: Yes
diff --git a/src/patterns/03-layouts/region/_region.scss b/src/patterns/03-layouts/region/_region.scss
index ee15e652b425b8425149485d1e796187045dc35a..2696024c9eef9ff1fab5959d2d858ff65cc481d0 100644
--- a/src/patterns/03-layouts/region/_region.scss
+++ b/src/patterns/03-layouts/region/_region.scss
@@ -3,8 +3,8 @@
.l-region {
.pl &{
- outline: 1px dashed var(--gray-4);
- padding: 1.5rem;
+ outline: var(--size-xs) dashed var(--gray-4);
+ padding: var(--size-3);
text-align: center;
}
}
diff --git a/src/patterns/03-layouts/site-footer/_site-footer.scss b/src/patterns/03-layouts/site-footer/_site-footer.scss
index 56770bc79177ec4cc03006595d672bb558d47d5b..26a3842215af430e48451bfd451cbaa36a580b77 100644
--- a/src/patterns/03-layouts/site-footer/_site-footer.scss
+++ b/src/patterns/03-layouts/site-footer/_site-footer.scss
@@ -1,7 +1,7 @@
@use '../../01-core' as *;
.uw-site-footer {
- background-color: var(--gray-3);
+ background-color: var(--uw-black-3);
&__wrapper {
@include layout-constrain;
display: grid;
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e1e5ee76f0bc45a383d4e7db07aa27714d05098c
--- /dev/null
+++ b/src/patterns/04-components/_index.scss
@@ -0,0 +1,3 @@
+@forward 'card/card';
+@forward 'tag-list/tag-list';
+@forward 'tag/tag';
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
new file mode 100644
index 0000000000000000000000000000000000000000..61d722b731223b68c0cfc6ab289d2cd39649a476
--- /dev/null
+++ b/src/patterns/04-components/card/_card.scss
@@ -0,0 +1,217 @@
+// @file
+// Styles for Cards..
+
+@use '../../01-core' as *;
+
+$card-accent-border-color: var(--uw-black-primary) !default;
+$card-link-color: var(--uw-black-primary) !default;
+$card-link-color-hover: var(--gray-5) !default;
+$card-meta-color: var(--gray-5) !default;
+$card-padding: var(--size-2) !default;
+
+.card {
+ width: 100%;
+
+ .views-row & {
+ height: 100%;
+ }
+
+ .uw-label {
+ display: block;
+ margin-top: var(--size-2);
+ }
+
+ &__catalog-tags {
+ padding-bottom: $card-padding;
+ }
+}
+
+// if card--show-hover class is present then show "
+.card--show-hover{
+ border-bottom: 3px solid $card-accent-border-color;
+ box-shadow: var(--shadow-1);
+ transition: box-shadow 300ms ease;
+
+ &:hover,
+ &:focus-within {
+ box-shadow: var(--shadow-3);
+ }
+}
+
+.card__image {
+ margin-bottom: $card-padding;
+
+ img {
+ display: block;
+ }
+
+ a {
+ background: var(--uw-black-primary);
+ display: block;
+
+ img {
+ -webkit-filter: opacity(100%);
+ filter: opacity(100%);
+ transition: filter;
+ }
+ &:hover,
+ &:focus {
+ img {
+ -webkit-filter: opacity(62%);
+ filter: opacity(62%);
+ transition:filter;
+ }
+ }
+ }
+}
+
+.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-no-breakout();
+ margin-bottom: var(--size-3);
+ 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: var(--uw-white-1);
+ 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 {
+ font-size: var(--font-size-1);
+ margin-bottom: var(--size-2);
+ position: relative;
+}
+
+.card__title {
+ margin: 0 0 var(--size-1) 0;
+ padding: 0;
+ width: 100%;
+
+ a {
+
+ @include link-reverse(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ }
+}
+
+.card__author {
+ @include uw-no-breakout();
+ font-family: var(--font-mono);
+ 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)
+ );
+ }
+}
+
+// body
+.card__body {
+ width: 100%;
+}
+
+.card__content {
+ margin-bottom: var(--size-3);
+ width: 100%;
+
+ &:empty {
+ margin-bottom:0;
+ }
+}
+
+
+.card__position {
+ color: var(--uw-black-primary);
+ 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 {
+ @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);
+ @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;
+ }
+}
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..e90e176ee962bd236061534dbdd7cf6fb54ce3cd
--- /dev/null
+++ b/src/patterns/04-components/card/card.yml
@@ -0,0 +1,28 @@
+---
+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: 'Tag1'
+ type: 'simple'
+ size: 'normal'
+ faculty: 'org-default'
+ - url: '#'
+ title: 'Tag2'
+ type: 'simple'
+ size: 'normal'
+ faculty: 'org-default'
+ - url: '#'
+ title: 'Tag3'
+ type: 'simple'
+ size: 'normal'
+ faculty: 'org-default'
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..4d11ae3f0a27702273c986b060d730bb5809fbf3
--- /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..61d13c7a50135270a2d35ade19ce6787ddf68d0e
--- /dev/null
+++ b/src/patterns/04-components/tag-list/_tag-list.scss
@@ -0,0 +1,11 @@
+@use '../../01-core' as *;
+
+.tag-list {
+ @include list-unstyled();
+}
+
+.tag-list__item {
+ display: inline-block;
+ margin-bottom: var(--size-05);
+ margin-right: var(--size-1);
+}
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..9c10d0e0ce648086e1592e77f4217bd52b2f60c7
--- /dev/null
+++ b/src/patterns/04-components/tag-list/tag-list.twig
@@ -0,0 +1,8 @@
+{% import '@base/macros/uw.macro.twig' as macros %}
+<ul class="tag-list {{ modifier_classes }}">
+ {% for item in items %}
+ <li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">
+ {{ macros.tag(item.url, item.title, item.type) }}
+ </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..d370f4760ebf0f5699b3a710b57478f1aaabfb2a
--- /dev/null
+++ b/src/patterns/04-components/tag-list/tag-list.yml
@@ -0,0 +1,66 @@
+items:
+ - url: '#'
+ title: 'Campus'
+ faculty: 'org-default'
+ type: 'full'
+ size: 'normal'
+ - url: '#'
+ title: 'UW Default'
+ faculty: 'org-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'
diff --git a/src/patterns/04-components/tag/_tag.scss b/src/patterns/04-components/tag/_tag.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2f1badee54bdbeb028902ec28af7914f2ae00727
--- /dev/null
+++ b/src/patterns/04-components/tag/_tag.scss
@@ -0,0 +1,157 @@
+// @file
+// Styles for Tags.
+
+@use '../../01-core' as *;
+
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
+$tag-font-family-small: var(--font-mono) !default;
+$tag-font-family-normal: var(--font-mono) !default;
+$tag-font-size-normal: var(--font-size-0) !default;
+$tag-font-size-small: var(--font-size-000) !default;
+
+
+.tag {
+ @include link-no-underline(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ background: none;
+ display: inline-block;
+ font-size: $tag-font-size-normal;
+ margin: 0 0 var(--size-1) 0;
+ padding: 0;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition:background 300ms ease-in;
+ &.token{
+ text-transform: inherit;
+ }
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+ &--normal{
+ font-family: $tag-font-family-normal;
+ font-size: $tag-font-size-normal;
+ }
+ &--small{
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+
+ }
+ &--full{
+ background: var(--uw-gold-3);
+ color: var(--uw-black-primary);
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+ padding: var(--size-1);
+ &:hover,
+ &:focus {
+ background: var(--uw-black-primary);
+ color: var(--uw-gold-3);
+ }
+ }
+ &--simple{
+ @include link-reverse(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ font-family: $tag-font-family-normal;
+ }
+
+
+
+
+
+ a{
+ @include link-no-underline(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ background:none;
+ display: inline-block;
+ font-size: $tag-font-size-normal;
+ margin: 0 0 var(--size-1) 0;
+ padding:0;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition:background 300ms ease;
+
+ &:hover,
+ &:focus {
+
+ }
+ }
+ &--normal{
+ a{
+ font-family: $tag-font-family-normal;
+ font-size: $tag-font-size-normal;
+ }
+ }
+ &--small{
+ a {
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+ }
+ }
+ &--full{
+ a {
+ background: var(--uw-gold-3);
+ color: var(--uw-black-primary);
+ font-family: $tag-font-family-small;
+ font-size: $tag-font-size-small;
+ padding: var(--size-1);
+
+ &:hover,
+ &:focus {
+ background: var(--uw-black-primary);
+ color: var(--uw-gold-3);
+ }
+ }
+ }
+ &--simple {
+ a {
+ @include link-reverse(
+ var(--uw-black-primary),
+ var(--uw-black-primary)
+ );
+ font-family: $tag-font-family-normal;
+ }
+ }
+}
+
+@each $faculty in $faculties {
+ .#{$faculty} {
+ a.tag--full{
+ @if $faculty == org-default {
+ background-color: var(--uw-black-primary);
+ color: var(--uw-gold-3);
+ &:hover,
+ &:focus {
+ background-color: var(--uw-gold-3);
+ color: var(--uw-black-primary);
+ }
+
+ }
+ //@else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc{
+ // background-color:gesso-brand($faculty,'primary');
+ // color: gesso-brand(org-default,uw-white,'primary');
+ // &:hover,
+ // &:focus {
+ // background-color: gesso-brand($faculty, 'light');
+ // color:gesso-brand($faculty,'primary');
+ // }
+ //}
+ //@else {
+ // background-color:gesso-brand($faculty,'primary');
+ // color: gesso-brand(org-default,uw-white,'primary');
+ // &:hover,
+ // &:focus {
+ // background-color: gesso-brand($faculty, 'lvl1');
+ // color:gesso-brand($faculty,'primary');
+ // }
+ //}
+ }
+ }
+}
diff --git a/src/patterns/04-components/tag/tag.md b/src/patterns/04-components/tag/tag.md
new file mode 100644
index 0000000000000000000000000000000000000000..e4ad446f722bcb73fe7fd36840b743971a59129a
--- /dev/null
+++ b/src/patterns/04-components/tag/tag.md
@@ -0,0 +1,23 @@
+---
+el: .tag
+title: Tag
+---
+
+__Variables:__
+* type: [string] Type of the tag
+ * full
+ * simple
+* size: [string] Size of the tag.
+ * small
+ * normal
+* url: [string] URL of the tag.
+* title: [string] Title of the tag.
+* faculty: [string] One of the faculty variables wrapping the tag will make
+ background color change
+ * org-ahs
+ * org-art
+ * org-eng
+ * org-env
+ * org-mat
+ * org-sci
+ * org-school
diff --git a/src/patterns/04-components/tag/tag.twig b/src/patterns/04-components/tag/tag.twig
new file mode 100644
index 0000000000000000000000000000000000000000..530b041e7330741f3fc14207d3ebeb620d1befdf
--- /dev/null
+++ b/src/patterns/04-components/tag/tag.twig
@@ -0,0 +1,27 @@
+{% set classes = [
+ 'tag',
+ type ? 'tag--' ~ type,
+ size ? 'tag--' ~ size
+] %}
+{% if is_demo %}
+<h4>This is a simple tag </h4>
+{% endif %}
+
+{% if faculty %}
+<span class="{{ faculty }}">
+{% endif %}
+ <a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">
+ {{ title }}
+ </a>
+{% if faculty %}
+</span>
+{% endif %}
+
+
+{% if is_demo %}
+<br>
+<h4>This is a full tag </h4>
+<a href="{{ url }}" class="tag tag--full tag--normal" rel="tag">
+ {{ title }}
+</a>
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/04-components/tag/tag.yml b/src/patterns/04-components/tag/tag.yml
new file mode 100644
index 0000000000000000000000000000000000000000..063342a20845f750bc834e04fdaf149e32e82e6b
--- /dev/null
+++ b/src/patterns/04-components/tag/tag.yml
@@ -0,0 +1,7 @@
+---
+is_demo: true
+url: '#'
+title: 'Community'
+type: 'simple'
+size: 'normal'
+faculty: 'org-default'
diff --git a/src/patterns/global.scss b/src/patterns/global.scss
index 7948a5159541eac76ef218f99a4de51e9cbbacc2..2e080ccd61deb73beaf8dbd8e0295a326f923a2e 100644
--- a/src/patterns/global.scss
+++ b/src/patterns/global.scss
@@ -6,3 +6,4 @@
@use '01-core/utilities' as *;
@use '01-core/elements' as *;
@use '03-layouts' as *;
+@use '04-components' as *;