diff --git a/src/patterns/01-core/elements/_blockquote.scss b/src/patterns/01-core/elements/_blockquote.scss
index 77910a557c9f58b265dd8d7c69b09e81726ac0ab..017c3f5e356c0de99280a2d5e6b58848d0b7f878 100644
--- a/src/patterns/01-core/elements/_blockquote.scss
+++ b/src/patterns/01-core/elements/_blockquote.scss
@@ -2,14 +2,13 @@
// Blockquote styles.
:where(blockquote) {
- border-inline-start-width: var(--border-size-3);
- display: grid;
- font-size: var(--font-size-2);
- gap: var(--size-3);
- margin: 0 0 var(--size-5);
- max-inline-size: var(--size-content-2);
- padding-block: var(--size-3);
- padding-inline: var(--size-4);
+ //border-inline-start-width: var(--border-size-3);
+ //display: grid;
+ //gap: var(--size-3);
+ //margin: 0 0 var(--size-5);
+ //max-inline-size: var(--size-content-2);
+ //padding-block: var(--size-3);
+ //padding-inline: var(--size-4);
* + & {
margin-top: var(--size-5);
diff --git a/src/patterns/01-core/elements/_body.scss b/src/patterns/01-core/elements/_body.scss
index b43409f0738ccc643fa652dbb0272a9aa9926c92..ab0ccc5041020d81be3f6c7f2c0d62125f3c20e3 100644
--- a/src/patterns/01-core/elements/_body.scss
+++ b/src/patterns/01-core/elements/_body.scss
@@ -2,9 +2,18 @@
// Body styles.
:where(body) {
+ background-color: var(--var-uw-white);
+ color: var(--uw-black);
+ font-family: var(--font-primary);
+ font-size: var(--font-size-0);
+ line-height: var(--font-lineheight-4);
margin: 0;
min-block-size: 100%;
padding: 0;
scrollbar-gutter: stable both-edges;
word-wrap: break-word;
}
+body.has-open-mobile-menu {
+ overflow: hidden;
+ -webkit-overflow-scrolling: touch;
+}
diff --git a/src/patterns/01-core/elements/_definition-list.scss b/src/patterns/01-core/elements/_definition-list.scss
index d1bb03f3ac8588eccf24f986f0183edbeb7544bd..ea36152d86a1c0262377eb6423452d2adb1a750d 100644
--- a/src/patterns/01-core/elements/_definition-list.scss
+++ b/src/patterns/01-core/elements/_definition-list.scss
@@ -2,23 +2,15 @@
// Definition list styles.
:where(dd) {
- max-inline-size: var(--size-content-2);
- margin-bottom: var(--size-4);
+ margin-bottom: var(--size-1);
- dt + & {
- margin-top: 0;
- }
}
:where(dt) {
font-weight: var(--font-weight-700);
- max-inline-size: var(--size-header-3);
-
- &:not(:first-of-type) {
- margin-block-start: var(--size-5);
- }
}
:where(dl) {
- font-size: var(--font-size-2);
+ font-size: var(--font-size-0);
+ margin: 0 0 var(--size-1);
}
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index b4f60b319db68eca02cc04774e50fd3581fb1ac9..de2c96a49cc5402f50f6d81021e25ddfd7e5ce0e 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -3,9 +3,6 @@
@use '../../01-core' as *;
-//$summary-font-family: gesso-font-family(book);
-//$details-font-family: gesso-font-family(primary);
-
:where(details) {
@include uw-no-breakout();
background: var(--gray-2);
@@ -59,9 +56,9 @@
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);
+ font-family: var(--font-book);
+ font-size: var(--font-size-00);
+ font-weight: var(--font-weight-3300);
margin: 0;
line-height: 1.25;
outline: 0;
diff --git a/src/patterns/01-core/elements/_fieldset.scss b/src/patterns/01-core/elements/_fieldset.scss
index 1fb0cff07942c8a22e07fbf2083668947776efa8..8553d148a72dec2c50db740bab231fd21c1e791d 100644
--- a/src/patterns/01-core/elements/_fieldset.scss
+++ b/src/patterns/01-core/elements/_fieldset.scss
@@ -1,7 +1,78 @@
// @file
// Fieldset element styles.
-:where(fieldset) {
- border-radius: var(--radius-2);
- border: var(--border-size-1) solid var(--gray-4);
+:where(fieldset),
+.fieldset {
+ background:transparent;
+ border: var(--gray-3) solid var(--size-xs);
+ clear: both;
+ margin-bottom:var(--size-4);
+ padding: var(--size-2);
+ position: relative;
+ legend {
+ border: 0;
+ box-sizing: border-box;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-2);
+ font-weight: 300;
+ margin: var(--size-1) 0;
+ max-width: 100%;
+ padding: 0;
+ position: relative;
+ white-space: normal;
+ }
+ /* stylelint-disable-next-line selector-no-qualifying-type */
+ &.webform-type-fieldset{
+ background: var(--gray-1);
+ padding: var(--size-2);
+ > legend{
+
+ border-radius: 2px;
+ font-family: var(--font-condensedbook);
+ margin: var(--size-2) 0;
+ min-width:0;
+ padding:0;
+ position: relative;
+ top:0;
+ }
+ }
+
+ &:hover {
+ > legend {
+ background-color: transparent;
+ }
+ }
+ .fieldset-invisible{
+ clear: both;
+ &:hover {
+ > legend {
+ margin-bottom: 0.7rem;
+ padding-top: var(--size-2);
+
+ }
+ }
+
+ > legend {
+ font-weight:400;
+ margin-bottom: 0.7rem;
+ padding-top:var(--size-2);
+
+ }
+ }
+ .fieldset-wrapper {
+ .webform-container-inline {
+ .fieldset-invisible {
+ display: inline-block;
+ }
+ }
+ }
+}
+.captcha {
+ margin: rem(gesso-spacing(md)) 0;
+}
+
+.layout-builder-configure-section {
+ fieldset {
+ background-color: initial;
+ }
}
diff --git a/src/patterns/01-core/elements/_figure.scss b/src/patterns/01-core/elements/_figure.scss
index d1a8d778ec56ff0db55ba9573a30f8ba97336a7a..ac1d94ff1eca4e419ef40aba92efa8f0819ece70 100644
--- a/src/patterns/01-core/elements/_figure.scss
+++ b/src/patterns/01-core/elements/_figure.scss
@@ -1,4 +1,6 @@
// @file
// Figure element styles.
-// :where(figure) {}
+ :where(figure) {
+ margin: 0 0 var(--size-2);
+ }
diff --git a/src/patterns/01-core/elements/_form.scss b/src/patterns/01-core/elements/_form.scss
index c6989741a18bfe0e32cd1aaa1e0dc796b615130e..7dfeeffe75f7211d864aea49406e11b31d663b6e 100644
--- a/src/patterns/01-core/elements/_form.scss
+++ b/src/patterns/01-core/elements/_form.scss
@@ -1,4 +1,161 @@
// @file
// Form element styles.
-// :where(form) {}
+@use '../../01-core' as *;
+
+ :where(form) {
+ font-family: var(--font-book);
+ font-size: var(--font-size-0);
+ @media(min-width: $screen-md) {
+ font-size: var(--font-size-00);
+ }
+ font-weight:400;
+ }
+// Don’t style button elements, since they’re often styled as links for
+// accessible widgets. Use the .button class in components/button.
+button {
+ overflow: visible;
+}
+
+.desription,
+.webform-element-description{
+ color: var(--gray-5);
+ font-family: var(--font-book);
+ font-size: var(--font-size-00);
+ margin: var(--size-05) 0;
+}
+
+
+
+[data-drupal-selector="edit-moderation-state-wrapper"]{
+
+ background-color:#ffebc5;
+ padding: var(--size-2);
+ .form-item-moderation-state-0-current{
+ font-style:italic;
+ label{
+ font-size: var(--font-size-0);
+ font-style:normal;
+ margin-bottom:0;
+ }
+ }
+}
+// Login screen making width 35rem.
+.user-login-form{
+ margin:0;
+ max-width:35rem;
+
+}
+// uw custon label css
+.webform-client-form {
+ margin-top:var(--size-105);
+}
+
+.form-required::after {
+ color:#e00;
+ content: "*";
+ display:inline-block;
+ font-family: var(--font-system);
+ font-size: var(--font-size-2);
+ font-weight:300;
+ margin-left: var(--size-sm);
+}
+
+// CSS for form overrides
+//.uw-site-container {
+// // the bottom fixed admin tab with site container:
+// .node-uw-ct-web-page-delete-form,
+// .layout-region-node-footer__content,
+// .node-layout-builder-form,
+// .entity-view-display-layout-builder-form,
+// .layout-builder-discard-changes,
+// .node-confirm-form
+// {
+// .form-actions {
+// background: gesso-color(ui, generic, background-lighter);
+// border-top:1px solid gesso-color(ui, generic, background);
+// bottom: 0;
+// box-shadow: gesso-box-shadow(6);
+// display:flex;
+// height:auto;
+// left: 0;
+// margin: 0;
+// padding: 0.5rem;
+// position: fixed;
+// width: 100%;
+// z-index: gesso-z-index(overlay);
+// [data-drupal-selector="edit-preview-toggle"]{
+// order:10;
+// }
+// .button{
+// margin:0.25rem 0;
+// max-width:7rem;
+// }
+// @include medium {
+// .button{
+// margin-bottom:1rem ;
+// }
+// gap:$form-gap;
+// height:4rem;
+// }
+//
+// .form-item-toggle-content-preview {
+// margin-top:1rem;
+// }
+// input [type='submit']{
+// margin-top:0;
+// }
+//
+// .form-wrapper input[type="submit"] {
+// margin-top:0;
+// }
+// }
+// }
+//
+// .webform-submission-form{
+// .form-actions{
+// display:flex;
+// gap:1rem;
+// margin:0.25rem 0;
+// .button{
+// @include button();
+// height:inherit;
+// margin:inherit;
+// }
+// }
+// }
+// // custom form actions
+// .layout-region-node-footer__content .form-actions{
+// .button[data-drupal-selector="edit-cancel"]{
+// margin-left:0 !important;
+// }
+// @include medium {
+// grid-template-columns:8rem 8rem 8rem 8rem;
+// grid-template-rows:auto;
+// row-gap: 1rem;
+// }
+// }
+// // custom form actions
+// .layout-builder-discard-changes .form-actions,
+// .node-uw-ct-web-page-delete-form .form-actions{
+// .button[data-drupal-selector="edit-cancel"]{
+// margin-left:0 !important;
+// }
+// @include medium {
+// grid-template-columns:8rem 8rem;
+// grid-template-rows:auto;
+// row-gap: 1rem;
+// }
+// }
+// // custom form actions
+// .entity-view-display-layout-builder-form .form-actions{
+// .button[data-drupal-selector="edit-cancel"]{
+// margin-left:0 !important;
+// }
+// @include medium {
+// grid-template-columns:8rem 8rem 15rem;
+// grid-template-rows:auto;
+// row-gap: 1rem;
+// }
+// }
+//}
diff --git a/src/patterns/01-core/elements/_horizontal-rule.scss b/src/patterns/01-core/elements/_horizontal-rule.scss
index 49ce9b08c08e53c5269879453f5213a0d0570bbe..3e5d8941ef3535648a9e73711bda7d8624af65af 100644
--- a/src/patterns/01-core/elements/_horizontal-rule.scss
+++ b/src/patterns/01-core/elements/_horizontal-rule.scss
@@ -2,7 +2,9 @@
// Horizontal rule styles.
:where(hr) {
- background-color: var(--gray-3);
- height: var(--border-size-2);
- margin-block: var(--size-fluid-2);
+ border: var(--size-xs) solid var(--gray-4);
+ box-sizing: content-box;
+ height: 0;
+ margin: var(--size-3) 0;
+ padding-bottom: -1px;
}
diff --git a/src/patterns/01-core/elements/_html.scss b/src/patterns/01-core/elements/_html.scss
index ade02eca7a63c54a51ea430a2d64c70c314aa490..77713a98c1d6754b927a517e0b96a3d407c45a6f 100644
--- a/src/patterns/01-core/elements/_html.scss
+++ b/src/patterns/01-core/elements/_html.scss
@@ -10,14 +10,11 @@
accent-color: var(--accent-color);
background-color: white;
block-size: 100%;
+ box-sizing: border-box;
caret-color: var(--caret-color);
- color: var(--text-0);
- 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;
+ text-size-adjust: 100%;
@media screen and (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
@@ -27,3 +24,11 @@
overflow: hidden;
}
}
+.no-scroll {
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ position: fixed;
+ right: 0;
+ top: 0;
+}
diff --git a/src/patterns/01-core/elements/_iframe.scss b/src/patterns/01-core/elements/_iframe.scss
index b2e5088cbd8bdf4d5050867479f591916ac9bc1f..2ff946bc345a583fbc92b368f21bdf8485446727 100644
--- a/src/patterns/01-core/elements/_iframe.scss
+++ b/src/patterns/01-core/elements/_iframe.scss
@@ -2,6 +2,7 @@
// Iframe element styles.
:where(iframe) {
+ border: 0;
display: block;
@media print {
diff --git a/src/patterns/01-core/elements/_inline-elements.scss b/src/patterns/01-core/elements/_inline-elements.scss
index 8606797428dbd599a8f33dfc831f72d5f69d4be0..ba35270766837c37a4ff7ab2fd73eddf60b08328 100644
--- a/src/patterns/01-core/elements/_inline-elements.scss
+++ b/src/patterns/01-core/elements/_inline-elements.scss
@@ -10,17 +10,20 @@
transition-timing-function: var(--ease-in-out-2);
&:where([href]) {
- color: var(--indigo-5);
- text-decoration-color: var(--indigo-5);
+ color: var(--gray-6);
+ text-decoration-color: var(--gray-1);
&:where(:hover) {
- color: var(--indigo-9);
- text-decoration-color: var(--indigo-9);
+ color: var(--uw-black);
+ text-decoration-color: var(--uw-black);
+ }
+ &:where(:focus) {
+ color: var(--uw-black);
+ text-decoration-color: var(--uw-black);
}
-
&:where(:visited) {
- color: var(--indigo-5);
- text-decoration-color: var(--indigo-5);
+ color: var(--gray-6);
+ text-decoration-color: var(--gray-6);
}
}
@@ -60,7 +63,11 @@
:where(abbr) {
text-decoration-color: var(--blue-5);
text-underline-offset: var(--size-xs);
-
+ &[title] {
+ border-bottom: 0;
+ text-decoration: underline;
+ text-decoration: underline dotted;
+ }
&:hover {
cursor: help;
}
@@ -78,7 +85,7 @@
:where(cite) {
color: var(--gray-6);
- font-family: var(--font-sans);
+ font-family: var(--font-primary);
font-size: var(--font-size-0);
font-style: normal;
font-weight: var(--font-weight-600);
@@ -114,7 +121,9 @@
}
:where(mark) {
+ background: var(--yellow-6);
border-radius: var(--radius-2);
+ color: var(--uw-black);
padding-inline: var(--size-1);
}
diff --git a/src/patterns/01-core/elements/_input.scss b/src/patterns/01-core/elements/_input.scss
index e3450a4e15307c8d3229434f1cf7590da4dd9e5e..87a6a001d57b7e10735c15169c3c1843ea451b3e 100644
--- a/src/patterns/01-core/elements/_input.scss
+++ b/src/patterns/01-core/elements/_input.scss
@@ -1,34 +1,43 @@
// @file
// Input element styles.
+$uw-input-padding: 0.46667rem;
:where(input) {
+ border: var(--size-xs) solid var(--gray-3);
+ box-shadow: inset 0 var(--size-xs) 3px var(--gray-3);
+ box-sizing: border-box;
color: inherit;
cursor: pointer;
- font-size: inherit;
+ font-family:var(--font-systemmedium);
+ font-size: var(--font-size-0);
font: inherit;
letter-spacing: inherit;
- padding-block: var(--size-1);
- padding-inline: var(--size-2);
+ padding: $uw-input-padding;
+ max-width:inherit;
touch-action: manipulation;
+ &:focus {
+ border: var(--size-xs) solid var(--gray-5) !important;
+ box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 0 5px rgba(104,104,104,.7);
+ outline: var(--gray-5);
+ }
}
:where(input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])) {
background-color: var(--gray-1);
- border-radius: var(--radius-2);
- margin-inline-end: var(--size-1);
+ border-radius: var(--radius-1);
}
// Checkbox, Options input
:where(input[type="checkbox"], input[type="radio"]) {
- block-size: var(--size-4);
- inline-size: var(--size-4);
+ block-size: var(--size-3);
+ inline-size: var(--size-3);
}
// file input
:where(input[type="file"]) {
align-self: flex-start;
background-color: white;
- border-radius: var(--radius-2);
+ border-radius: var(--radius-1);
border-color: var(--gray-3);
border-style: solid;
border-width: var(--border-size-1);
diff --git a/src/patterns/01-core/elements/_label.scss b/src/patterns/01-core/elements/_label.scss
index e13d3b9e6866a9b3c26b97db86297798adb7498c..6627567e07087a2b6746d559cc05df35067bc0a1 100644
--- a/src/patterns/01-core/elements/_label.scss
+++ b/src/patterns/01-core/elements/_label.scss
@@ -2,8 +2,21 @@
// Label element styles.
:where(label) {
- font-family: var(--font-sans);
+ font-family: var(--font-condensedbook);
}
+label,
+.label,
.uw-label{
- font-family: var(--font-sans);
+ display:block;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-2);
+ font-weight:normal;
+ form &{
+ margin-bottom: var(--size-1);
+ }
+ abbr {
+ display: inline;
+ font-size: var(--font-size-1);
+ }
+
}
diff --git a/src/patterns/01-core/elements/_legend.scss b/src/patterns/01-core/elements/_legend.scss
index 93f8db693ea538f87b8bb8dfc7784a37b7350710..73dfe9a6e803a9955c8a9dcbc6a0a7e7fa1e9d5f 100644
--- a/src/patterns/01-core/elements/_legend.scss
+++ b/src/patterns/01-core/elements/_legend.scss
@@ -6,8 +6,12 @@
box-sizing: border-box;
color: inherit;
display: table;
- margin: 0;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-2);
+ font-weight: 300;
+ margin: var(--size-1) 0;
max-width: 100%;
padding: 0;
+ position: relative;
white-space: normal;
}
diff --git a/src/patterns/01-core/elements/_list-item.scss b/src/patterns/01-core/elements/_list-item.scss
index 475d0e0c076b1a4b2ed6a8d9046a8ae52e21fe23..dc7df5f675d88cc04eb8b251272cc762a745586f 100644
--- a/src/patterns/01-core/elements/_list-item.scss
+++ b/src/patterns/01-core/elements/_list-item.scss
@@ -2,9 +2,16 @@
// List item styles.
:where(li) {
- max-inline-size: var(--size-content-2);
+ font-size: var(--font-size-0);
+ margin-bottom: var(--size-1);
padding-inline-start: var(--size-1);
+ &:last-child {
+ margin-bottom: 0;
+ }
+ > *:last-child {
+ margin-bottom: 0;
+ }
@media print {
page-break-inside: avoid;
}
diff --git a/src/patterns/01-core/elements/_menu.scss b/src/patterns/01-core/elements/_menu.scss
index 137c7cda25d4753cee7ad7c6ded8bb5ff96e1f0e..343cccac24420db9ad9b8604805ce5d4ff6bd4db 100644
--- a/src/patterns/01-core/elements/_menu.scss
+++ b/src/patterns/01-core/elements/_menu.scss
@@ -2,7 +2,5 @@
// Menu element styles.
:where(menu) {
- display: flex;
- gap: var(--size-3);
- padding-inline-start: 0;
+
}
diff --git a/src/patterns/01-core/elements/_option.scss b/src/patterns/01-core/elements/_option.scss
index f145df1055dc3c537fb4cdb937b2b5dc6a0080d0..17f3627ca1fa3ac346c1274dad77750318b2745f 100644
--- a/src/patterns/01-core/elements/_option.scss
+++ b/src/patterns/01-core/elements/_option.scss
@@ -1,7 +1,15 @@
// @file
// Options element styles.
-// :where(option) {}
+ :where(option) {
+ display: inline;
+ font-family:gesso-font-family(book);
+ font-size: gesso-font-size(0);
+ font-weight: gesso-font-weight(regular);
+ letter-spacing:inherit;
+ margin-left: 0.2rem;
+ padding-left:0.25rem;
+ }
:where(optgroup) {
font-family: inherit;
diff --git a/src/patterns/01-core/elements/_ordered-list.scss b/src/patterns/01-core/elements/_ordered-list.scss
index 612b7693c88b9a1921c29300ad35eeaa3df3baf4..3187b8fd51a705d46e89780ca0a5850c461aba83 100644
--- a/src/patterns/01-core/elements/_ordered-list.scss
+++ b/src/patterns/01-core/elements/_ordered-list.scss
@@ -2,6 +2,72 @@
// Ordered list styles.
:where(ol) {
- font-size: var(--font-size-2);
+ font-size: var(--font-size-0);
padding-inline-start: var(--size-4);
+ margin: 0 0 var(--size-2);
+ ol{
+ list-style-type: lower-alpha;
+ margin: (var(--size-2) / 2) 0 0;
+ li ol {
+ list-style-type: lower-roman;
+ }
+ }
+}
+
+.lower-alpha {
+ list-style-type: lower-alpha;
+ li ol {
+ list-style-type: lower-alpha;
+ }
+}
+.upper-alpha{
+ list-style-type: upper-alpha;
+ li ol {
+ list-style-type: upper-alpha;
+ }
+}
+.lower-roman {
+ list-style-type: lower-roman;
+ li ol {
+ list-style-type: lower-roman;
+ }
+}
+.upper-roman{
+ list-style-type: upper-roman;
+ li ol {
+ list-style-type: upper-roman;
+ }
+}
+.decimal {
+ list-style: decimal outside none;
+ margin: 0;
+ padding: 0 0 var(--size-2) var(--size-2);
+
+ li {
+ counter-increment: item;
+ display: table;
+ margin: var(--size-1) 0;
+
+ &::before {
+ content: counters(item, ".") ". ";
+ display: table-cell;
+ padding-right: 0.6rem;
+ }
+
+ li {
+ margin: 0.5rem 0;
+
+ li::before {
+ content: counters(item, ".") " ";
+ }
+ }
+
+ ol {
+ counter-reset: item;
+ list-style: square outside none;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ }
+ }
}
diff --git a/src/patterns/01-core/elements/_paragraph.scss b/src/patterns/01-core/elements/_paragraph.scss
index 1e2b23bc1fcdb3c043ab055addc732ccb9d475f4..41502ec774caa2ae1a66bcdbaff4cc361be3532e 100644
--- a/src/patterns/01-core/elements/_paragraph.scss
+++ b/src/patterns/01-core/elements/_paragraph.scss
@@ -2,10 +2,8 @@
// Paragraph styles.
:where(p) {
- font-size: var(--font-size-1);
- margin-bottom: var(--size-2);
- margin-top: 0;
- max-inline-size: var(--size-content-3);
+ font-size: var(--font-size-0);
+ margin: 0 0 var(--size-2);
@media print {
orphans: 3;
diff --git a/src/patterns/01-core/elements/_preformatted-text.scss b/src/patterns/01-core/elements/_preformatted-text.scss
index 33d3bfa60cff304c640efc1b3f2d43cb759d13e4..aaaac3f9611e867fc4cffd403ac238ec73cfdc44 100644
--- a/src/patterns/01-core/elements/_preformatted-text.scss
+++ b/src/patterns/01-core/elements/_preformatted-text.scss
@@ -3,8 +3,10 @@
:where(pre) {
font-family: var(--font-mono);
+ margin: 0 0 var(--size-1);
max-inline-size: max-content;
min-inline-size: 0;
+ overflow: auto;
white-space: pre;
@media print {
diff --git a/src/patterns/01-core/elements/_section.scss b/src/patterns/01-core/elements/_section.scss
index b7e9ee688fb332a0a259d43cb4d2b48ae1c2f22e..cf29810e082d9e2a8d01f525a5740f6a64419fd9 100644
--- a/src/patterns/01-core/elements/_section.scss
+++ b/src/patterns/01-core/elements/_section.scss
@@ -2,3 +2,6 @@
// Section element styles.
//:where( section) {}
+.l-section {
+ margin-bottom: var(--size-8);
+}
diff --git a/src/patterns/01-core/elements/_select.scss b/src/patterns/01-core/elements/_select.scss
index 3c1292c7ac5aba3c955106e85e9c0d1dc85ed385..c37f88a7a3f6de6c43d92a4ae8ba38e4b71812e5 100644
--- a/src/patterns/01-core/elements/_select.scss
+++ b/src/patterns/01-core/elements/_select.scss
@@ -1,15 +1,30 @@
// @file
// Select element styles.
+@use '../../01-core' as *;
+
:where(select) {
+ @include svg-background(select-arrows);
background-color: var(--gray-2);
+ background-position: right 10px center; // LTR
+ background-repeat: no-repeat;
+ background-size: 20px;
border-radius: var(--radius-2);
color: inherit;
cursor: pointer;
+ font-family: var(--font-systemmedium);
font-size: inherit;
- font: inherit;
letter-spacing: inherit;
- padding-block: .75ch;
- padding-inline: 1.25ch 0;
+ //padding-block: .75ch;
+ //padding-inline: 1.25ch 0;
+ padding-right:10px; // LTR
touch-action: manipulation;
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 #000;
+ }
+
+ &::-ms-expand {
+ display: none;
+ }
}
diff --git a/src/patterns/01-core/elements/_svg.scss b/src/patterns/01-core/elements/_svg.scss
index e63382c71387c11388d97c8f66061be38fa8421f..9775923beae40d5db6e4ad1c50493c67b5f6d7db 100644
--- a/src/patterns/01-core/elements/_svg.scss
+++ b/src/patterns/01-core/elements/_svg.scss
@@ -18,4 +18,7 @@
&:where(:not([width])) {
inline-size: var(--size-10);
}
+ &:not(:root) {
+ overflow: hidden;
+ }
}
diff --git a/src/patterns/01-core/elements/_table.scss b/src/patterns/01-core/elements/_table.scss
index 4ff02b55aaecc8270d8ebc3bc461434fe8410572..aa714af8ff0a7fd16226c2e390a0c1da98438df9 100644
--- a/src/patterns/01-core/elements/_table.scss
+++ b/src/patterns/01-core/elements/_table.scss
@@ -3,44 +3,53 @@
:where(caption) {
color: var(--gray-5);
- padding-bottom: var(--size-1);
- padding-top: var(--size-1);
- text-align: left;
+ font-size: var(--font-size-0);
+ font-style:italic;
+ padding: var(--size-1);
+
}
:where(table) {
border-collapse: collapse;
- border-color: var(--gray-2);
- caption-side: bottom;
- color: var(--gray-8);
- margin-bottom: var(--size-2);
+ border-spacing: 0;
+ max-width: 100%;
vertical-align: top;
width: 100%;
+}
- > :not(caption) > * > * {
- background-color: transparent;
- border-bottom-width: var(--border-size-1);
- padding: var(--size-1);
- }
+//:where(thead, tbody, tfoot, tr, td, th) {
+// border-color: inherit;
+//}
- > tbody {
- vertical-align: inherit;
+tfoot {
+ td,
+ th {
+ background-color: var(--gray-2);
}
+}
- > thead {
- vertical-align: bottom;
+th {
+ background-color: var(--gray-2);
+ border: var(--size-xs) solid var(--gray-3);
+ font-style:italic;
+ padding: var(--size-1);
+ text-align: left;
+ &[scope="row"] {
+ background-color: var(--gray-2);
}
+}
- > :not(:first-child) {
- border-top-color: currentColor;
- border-top-width: var(--border-size-2);
+thead {
+ td,
+ th {
+ background-color: var(--gray-2);
}
}
-
-:where(thead, tbody, tfoot, tr, td, th) {
- border-color: inherit;
+td {
+ background-color: var(--uw-white);
+ border: var(--size-xs) solid var(--gray-3);
+ padding: var(--size-1)
}
-
:where(thead) {
@media print {
display: table-header-group;
diff --git a/src/patterns/01-core/elements/_textarea.scss b/src/patterns/01-core/elements/_textarea.scss
index ad52287d17b846ec6aaaefbdb31ec8473b30a29b..1cdfcbb526f3c65f121b3b42580b9904c15ff498 100644
--- a/src/patterns/01-core/elements/_textarea.scss
+++ b/src/patterns/01-core/elements/_textarea.scss
@@ -3,12 +3,12 @@
:where(textarea) {
background-color: var(--gray-2);
- border-radius: var(--radius-2);
color: inherit;
cursor: pointer;
font-size: inherit;
font: inherit;
letter-spacing: inherit;
+ overflow:auto;
padding-block: var(--size-1);
padding-inline: var(--size-2);
resize: block;
diff --git a/src/patterns/01-core/elements/_universal.scss b/src/patterns/01-core/elements/_universal.scss
index be2e32b161c4c902aa00dbac83f8dccb4066319d..a2fee85b8dbd9444459ac77c604c2d01e8981aa2 100644
--- a/src/patterns/01-core/elements/_universal.scss
+++ b/src/patterns/01-core/elements/_universal.scss
@@ -21,7 +21,7 @@
}
:where(:focus-visible) {
- outline-color: var(--indigo-7);
+ outline-color: var(--uw-black);
outline-offset: 5px;
transition: outline-offset 145ms var(--ease-2);
}
diff --git a/src/patterns/01-core/elements/_unordered-list.scss b/src/patterns/01-core/elements/_unordered-list.scss
index 5c39180e0596617d95206ada984d2ed48a722f9f..675ab4fb8bb228c8dc036f147da52e828296a3cd 100644
--- a/src/patterns/01-core/elements/_unordered-list.scss
+++ b/src/patterns/01-core/elements/_unordered-list.scss
@@ -2,6 +2,48 @@
// Unordered list styles.
:where(ul) {
- font-size: var(--font-size-2);
- padding-inline-start: var(--size-4);
+
+ font-size: var(--font-size-0);
+ list-style-type: disc;
+ margin: 0 0 var(--size-2);
+ padding: 0 0 0 var(--size-4); // LTR
+ ul {
+ list-style-type: circle;
+ margin: (var(--size-2) / 2) 0 0;
+ li > ul {
+ list-style-type: disc;
+
+ }
+ }
+ //padding-inline-start: var(--size-4);
+}
+.disc {
+ list-style: disc;
+ ul {
+ list-style-type: disc;
+
+ li > ul {
+ list-style-type: disc;
+ }
+ }
+}
+.square {
+ list-style: square;
+ ul {
+ list-style-type: square;
+
+ li > ul {
+ list-style-type: square;
+ }
+ }
+}
+.circle {
+ list-style-type: circle;
+ ul {
+ list-style-type: circle;
+
+ li > ul {
+ list-style-type: circle;
+ }
+ }
}
diff --git a/src/patterns/01-core/font-face/_index.scss b/src/patterns/01-core/font-face/_index.scss
index 4d5fab90f55c364820c05d6e1715274a05bc9bea..7b453e70f09b6870d67a6f0ff3e653356d4b5790 100644
--- a/src/patterns/01-core/font-face/_index.scss
+++ b/src/patterns/01-core/font-face/_index.scss
@@ -40,14 +40,6 @@
src: url('/fonts/Bureau_Grot-Wide_Book.eot'), url('/fonts/Bureau_Grot-Wide_Book.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Wide_Book.woff2') format('woff2'), url('/fonts/Bureau_Grot-Wide_Book.woff') format('woff'), url('/fonts/Bureau_Grot-Wide_Book.ttf') format('truetype'), url('/fonts/Bureau_Grot-Wide_Book.svg#Bureau_Grot-Wide_Book') format('svg');
}
-@font-face {
- font-family: 'iconic';
- font-style: normal;
- font-weight: normal;
- src: url("/fonts/iconic.eot");
- src: url("/fonts/iconic.eot?#iefix") format("embedded-opentype"), url("../fonts/iconic.svg#iconic") format("svg"), url("/fonts/iconic.woff") format("woff"), url("/fonts/iconic.ttf") format("truetype");
-}
-
/* Complete 1451 */
@font-face {
@@ -105,3 +97,6 @@
font-weight: normal;
src: url("/fonts/lineto-typ1451-lightalternate.eot"), url("/fonts/lineto-typ1451-lightalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-lightalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-lightalternate.woff") format("woff");
}
+.pl-typography .gap{
+ margin: var(--size-8) auto;
+}
diff --git a/src/patterns/01-core/mixins/_button.scss b/src/patterns/01-core/mixins/_button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9eea1db5377a46940186bbe306ed456c20f75751
--- /dev/null
+++ b/src/patterns/01-core/mixins/_button.scss
@@ -0,0 +1,150 @@
+// @file
+// Button styles
+
+$button-border-radius: 0 !default;
+$button-background-color: var(--gray-5) !default;
+$button-background-color-active: var(--gray-5) !default;
+$button-background-color-disabled: var(--gray-2) !default;
+$button-background-color-hover: var(--gray-2) !default;
+$button-background-image: none !default;
+$button-text-color: var(--uw-white) !default;
+$button-text-color-active: var(--uw-white) !default;
+$button-text-color-disabled: var(--gray-4) !default;
+$button-text-color-hover: var(--gray-6) !default;
+$button-text-shadow: none !default;
+$button-font-size: var(--font-size-1) !default;
+
+@mixin button(
+ $color-background: $button-background-color,
+ $color-text: $button-text-color,
+ $color-background-hover: $button-background-color-hover,
+ $color-text-hover: $button-text-color-hover,
+ $color-background-active: $button-background-color-active,
+ $color-text-active: $button-text-color-active,
+ $color-background-disabled: $button-background-color-disabled,
+ $color-text-disabled: $button-text-color-disabled,
+ $border-radius: $button-border-radius,
+ $font-size: $button-font-size
+) {
+ background-color: $color-background;
+ background-image:$button-background-image;
+ border: 0;
+ border-radius: $border-radius;
+ box-shadow:none;
+ color: $color-text;
+ cursor: pointer;
+ display: inline-block;
+ font-family: var(--font-condensedbook);
+ font-size: $button-font-size;
+ font-weight: var(--font-weight-300);
+ letter-spacing: var(--font-letterspacing-2);
+ line-height: var(--font-lineheight-4);
+ max-width:18.125rem;
+ padding: var(--size-2) var(--size-4);
+ text-align: center;
+ text-decoration: none;
+ text-shadow:$button-text-shadow;
+ text-transform:uppercase;
+ transition: background 200ms ease-in;
+ vertical-align: top;
+ white-space: normal;
+ width:100%;
+ &:visited {
+ color: $color-text;
+ }
+
+ &:hover,
+ &:focus {
+ background-color: $color-background-hover;
+ background-image:$button-background-image;
+ border: 0;
+ box-shadow: none !important;
+ color: $color-text-hover;
+ outline: none !important;
+ text-decoration: none;
+
+ }
+
+ &:active {
+ background-color: $color-background-active;
+ background-image:$button-background-image;
+ color: $color-text-active;
+ outline: none !important;
+ }
+
+ &[disabled] {
+ background-color: $color-background-disabled;
+ background-image:$button-background-image;
+ color: $color-text-disabled;
+ cursor: default;
+ pointer-events: none;
+ }
+}
+
+
+@mixin button-reset(
+ $color-background: inherit,
+ $color-text: inherit,
+ $color-background-hover: inherit,
+ $color-text-hover: inherit,
+ $color-background-active: inherit,
+ $color-text-active: inherit,
+ $color-background-disabled: inherit,
+ $color-text-disabled: inherit,
+ $border-radius: inherit,
+ $font-size: inherit
+) {
+ background-color: $color-background;
+ background-image:$button-background-image;
+ border: 0;
+ border-radius: $border-radius;
+ box-shadow:none;
+ color: $color-text;
+ cursor: pointer;
+ display: inherit;
+ font-family: inherit;
+ font-size: $font-size;
+ font-weight: inherit;
+ letter-spacing: inherit;
+ line-height: inherit;
+ max-width: inherit;
+ padding: 0;
+ text-align: inherit;
+ text-decoration: inherit;
+ text-shadow:inherit;
+ text-transform:inherit;
+ transition: inherit;
+ vertical-align: inherit;
+ white-space: inherit;
+ width: inherit;
+ &:visited {
+ color: $color-text;
+ }
+
+ &:hover,
+ &:focus {
+ background-color: $color-background-hover;
+ background-image:$button-background-image;
+ border: 0;
+ box-shadow: none !important;
+ color: $color-text-hover;
+ outline: none !important;
+ text-decoration: none;
+
+ }
+
+ &:active {
+ background-color: $color-background-active;
+ background-image:$button-background-image;
+ color: $color-text-active;
+ outline: none !important;
+ }
+
+ &[disabled] {
+ background-color: $color-background-disabled;
+ background-image:$button-background-image;
+ color: $color-text-disabled;
+ cursor: default;
+ pointer-events: none;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_headings.scss b/src/patterns/01-core/mixins/_headings.scss
index cfcd62abd057db7b63d69ae972497b410a25b6cf..a1180588e19f8be0e48691c65e552e3345c1c945 100644
--- a/src/patterns/01-core/mixins/_headings.scss
+++ b/src/patterns/01-core/mixins/_headings.scss
@@ -2,14 +2,13 @@
// Typography mixins
@mixin heading-base {
- color: var(--gray-9);
- font-family: var(--font-sans);
- font-weight: var(--font-weight-900);
+ color: inherit;
+ font-family: var(--font-condensedbook);
+ font-weight: var(--font-weight-400);
hyphens: none;
line-height: var(--font-lineheight-4);
margin: 0 0 var(--size-1);
text-rendering: optimizeLegibility;
-
@media print {
orphans: 3;
page-break-after: avoid;
@@ -20,6 +19,7 @@
}
}
+ // Add top margin when headers are preceded by other elements (p, ul, etc.)
* + & {
margin-top: var(--size-2);
}
@@ -32,36 +32,31 @@
@mixin heading-1 {
@include heading-base;
- font-size: var(--font-size-10);
+ font-size: var( --font-size-8);
max-inline-size: var(--size-header-1);
}
@mixin heading-2 {
@include heading-base;
- font-size: var(--font-size-8);
- max-inline-size: var(--size-header-2);
+ font-size: var(--font-size-5);
}
@mixin heading-3 {
@include heading-base;
- font-size: var(--font-size-6);
- max-inline-size: var(--size-header-3);
+ font-size: var(--font-size-3);
}
@mixin heading-4 {
@include heading-base;
- font-size: var(--font-size-5);
- max-inline-size: var(--size-header-3);
+ font-size: var(--font-size-0);
}
@mixin heading-5 {
@include heading-base;
- font-size: var(--font-size-3);
- max-inline-size: var(--size-header-3);
+ font-size: var(--font-size-00);
}
@mixin heading-6 {
@include heading-base;
- font-size: var(--font-size-1);
- max-inline-size: var(--size-header-3);
+ font-size: var(--font-size-000);
}
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index 3736415187bc52b77234b96a678656367b93fe47..12cb9174c3990b15a0dd34f3d4e493fced562502 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -1,4 +1,5 @@
@forward 'accessiblity';
+@forward 'button';
@forward 'clearfix';
@forward 'headings';
@forward 'image-replace';
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index bdbaa1b00078832b819ef274ca5d6da7ebe0d3fb..868ad676c3cd1e83600681910b96ea3078d242d9 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -218,3 +218,12 @@
--orange-8: #e8590c;
--orange-9: #d9480f;
}
+
+
+
+//Swatches
+.pl-colors .color-demo > div > div{
+ background-color: rgba(0,0,0,0.6);
+ font-family: var(--font-systembold);
+ font-size: var(--font-size-000);
+}
diff --git a/src/patterns/01-core/props/_fonts.scss b/src/patterns/01-core/props/_fonts.scss
index fef85f4b5ec49ff3eaf99873420f53ceeeceead9..edcbdac949d5b5d3f128995854d12e300d97ab0c 100644
--- a/src/patterns/01-core/props/_fonts.scss
+++ b/src/patterns/01-core/props/_fonts.scss
@@ -1,8 +1,16 @@
:where(html) {
- --font-sans: Helvetica, sans-serif;
- --font-serif: Georgia, 'Times New Roman', Times, serif;
- --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
- --font-mono: Menlo, Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
+ --font-book: 'BureauGrot Book', 'Barlow', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ --font-condensed: 'BureauGrotCond', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ --font-condensedbook: 'BureauGrotCond Book', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ --font-sans: BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+ --font-serif: georgia, 'droid serif', 'Times New Roma', Times, serif;
+ --font-system: Typ1451-Regular,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-systemlight: Typ1451-Light,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-systemmedium: Typ1451-Medium,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-systembold: Typ1451-Bold,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-mono: Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
+ --font-primary: georgia, 'droid serif', 'Times New Roma', Times, serif;
+ --font-secondary: BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
--font-weight-100: 100;
--font-weight-200: 200;
--font-weight-300: 300;
@@ -39,7 +47,7 @@
--font-lineheight-1: 1.1;
--font-lineheight-2: 1.25;
--font-lineheight-3: 1.375;
- --font-lineheight-4: 1.5;
+ --font-lineheight-4: 1.425;
--font-lineheight-5: 1.75;
--font-lineheight-6: 2;
--font-letterspacing-0: -0.05em;
diff --git a/src/patterns/01-core/utilities/_index.scss b/src/patterns/01-core/utilities/_index.scss
index 26d28f7cfbda68eff69997ba66243adbbbb1e5ee..0472442a5c7ce423e6c6d337190a1db224adb8a6 100644
--- a/src/patterns/01-core/utilities/_index.scss
+++ b/src/patterns/01-core/utilities/_index.scss
@@ -1,3 +1,4 @@
@forward 'accessibility';
@forward 'constrain';
@forward 'clearfix';
+@forward 'pl-override';
diff --git a/src/patterns/01-core/utilities/_pl-override.scss b/src/patterns/01-core/utilities/_pl-override.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2ccf6bf81b956e76ba53746ba7b1c4e37d35decc
--- /dev/null
+++ b/src/patterns/01-core/utilities/_pl-override.scss
@@ -0,0 +1,17 @@
+@use '../../01-core' as *;
+
+.pl-c-pattern__extra-toggle,
+.pl-js-pattern-extra-toggle{
+ border: var(--size-xs) solid var(--gray-4) !important;
+ border-size: var(--size-xs) var(--size-xs) 0 var(--size-xs);
+ box-shadow: none !important;
+ font-size:inherit !important;
+ &:hover{
+ border: var(--size-xs) solid var(--gray-6) !important;
+ }
+}
+.pl-c-code-copy-btn,
+.pl-js-code-copy-btn{
+ width:inherit;
+ max-width: 4rem;
+}
diff --git a/src/patterns/02-base/aspects/aspects.twig b/src/patterns/02-base/aspects/aspects.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ee2c6d00684f560543c1171bfd97c609d23190fd
--- /dev/null
+++ b/src/patterns/02-base/aspects/aspects.twig
@@ -0,0 +1,13 @@
+<section class="pl-aspect-ratio">
+ <div class="just-for-gap">
+ <h3>Aspect Ratios</h3>
+ <article class="aspect-demo">
+ <div style="aspect-ratio: var(--ratio-square)">box</div>
+ <div style="aspect-ratio: var(--ratio-landscape)">landscape</div>
+ <div style="aspect-ratio: var(--ratio-portrait)">portrait</div>
+ <div style="aspect-ratio: var(--ratio-widescreen)">widescreen</div>
+ <div style="aspect-ratio: 1.6180/1">golden ratio</div>
+ <div style="aspect-ratio: 18/5">ultrawide</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/borders/borders.twig b/src/patterns/02-base/borders/borders.twig
new file mode 100644
index 0000000000000000000000000000000000000000..2ceea2083c27bb3fe7edd96b9e0a1b11a5ab1c8d
--- /dev/null
+++ b/src/patterns/02-base/borders/borders.twig
@@ -0,0 +1,24 @@
+<section class="pl-borders">
+ <div class="just-for-gap">
+ <h3>Border Size</h3>
+ <article class="border-demo">
+ <div style="border-width: var(--border-size-1);">1</div>
+ <div style="border-width: var(--border-size-2);">2</div>
+ <div style="border-width: var(--border-size-3);">3</div>
+ <div style="border-width: var(--border-size-4);">4</div>
+ <div style="border-width: var(--border-size-5);">5</div>
+ </article>
+ </div>
+
+ <div class="just-for-gap">
+ <h3>Border Radius</h3>
+ <article class="border-demo">
+ <div style="border-radius: var(--radius-1);">1</div>
+ <div style="border-radius: var(--radius-2);">2</div>
+ <div style="border-radius: var(--radius-3);">3</div>
+ <div style="border-radius: var(--radius-4);">4</div>
+ <div style="border-radius: var(--radius-5);">5</div>
+ <div style="border-radius: var(--radius-round);">round</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/colors/colors.js b/src/patterns/02-base/colors/colors.js
deleted file mode 100644
index 0b2431b2e2d33c33f545cae581aee538e3c7dae9..0000000000000000000000000000000000000000
--- a/src/patterns/02-base/colors/colors.js
+++ /dev/null
@@ -1,14 +0,0 @@
-// var p = $("body");
-//
-// p.blinker();
-//
-// p.bind({
-// // pause blinking on mouseenter
-// mouseenter: function(){
-// $(this).data("blinker").pause();
-// },
-// // resume blinking on mouseleave
-// mouseleave: function(){
-// $(this).data("blinker").blinkagain();
-// }
-// });
diff --git a/src/patterns/01-core/font-face/fonts.twig b/src/patterns/02-base/fonts/fonts.twig
similarity index 100%
rename from src/patterns/01-core/font-face/fonts.twig
rename to src/patterns/02-base/fonts/fonts.twig
diff --git a/src/patterns/01-core/font-face/fonts.yml b/src/patterns/02-base/fonts/fonts.yml
similarity index 100%
rename from src/patterns/01-core/font-face/fonts.yml
rename to src/patterns/02-base/fonts/fonts.yml
diff --git a/src/patterns/02-base/macros/uw.macro.twig b/src/patterns/02-base/macros/_uw.macro.twig
similarity index 100%
rename from src/patterns/02-base/macros/uw.macro.twig
rename to src/patterns/02-base/macros/_uw.macro.twig
diff --git a/src/patterns/02-base/media/media.twig b/src/patterns/02-base/media/media.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d768096298c1a259d0f32572c34097a80b06a04b
--- /dev/null
+++ b/src/patterns/02-base/media/media.twig
@@ -0,0 +1,14 @@
+<section class="pl-media">
+ <div class="just-for-gap">
+ <h3>Audio</h3>
+ <article class="media-demo">
+ <audio controls="">audio</audio>
+ </article>
+ </div>
+ <div class="just-for-gap">
+ <h3>Video</h3>
+ <article class="media-demo">
+ <video controls="">video</video>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/shadows/shadows.twig b/src/patterns/02-base/shadows/shadows.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b02fecd0b64ab713e4b54d9df3d61b09353d6103
--- /dev/null
+++ b/src/patterns/02-base/shadows/shadows.twig
@@ -0,0 +1,24 @@
+<section class="pl-shadows">
+ <div class="just-for-gap">
+ <h3>Box Shadow</h3>
+ <article class="shadow-demo">
+ <div style="box-shadow: var(--shadow-1);">Shadow 1</div>
+ <div style="box-shadow: var(--shadow-2);">Shadow 2</div>
+ <div style="box-shadow: var(--shadow-3);">Shadow 3</div>
+ <div style="box-shadow: var(--shadow-4);">Shadow 4</div>
+ <div style="box-shadow: var(--shadow-5);">Shadow 5</div>
+ <div style="box-shadow: var(--shadow-6);">Shadow 6</div>
+ </article>
+ </div>
+
+ <div class="just-for-gap">
+ <h3>Inner Shadow</h3>
+ <article class="shadow-demo">
+ <div style="box-shadow: var(--inner-shadow-0);">Inner Shadow 1</div>
+ <div style="box-shadow: var(--inner-shadow-1);">Inner Shadow 2</div>
+ <div style="box-shadow: var(--inner-shadow-2);">Inner Shadow 3</div>
+ <div style="box-shadow: var(--inner-shadow-3);">Inner Shadow 4</div>
+ <div style="box-shadow: var(--inner-shadow-4);">Inner Shadow 5</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/sizes/sizes.twig b/src/patterns/02-base/sizes/sizes.twig
new file mode 100644
index 0000000000000000000000000000000000000000..902ae258032cf28c38801508b07b622e8e9cca09
--- /dev/null
+++ b/src/patterns/02-base/sizes/sizes.twig
@@ -0,0 +1,22 @@
+<section class="pl-sizes">
+ <table class="sizes-demo">
+ <thead>
+ <tr>
+ <th>Size</th>
+ <th>REM</th>
+ <th>PX</th>
+ <th>Example</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for item in spacing %}
+ <tr>
+ <td>{{ item.size }}</td>
+ <td>{{ item.rem }}</td>
+ <td>{{ item.px }}</td>
+ <td><div style="block-size:{{ item.rem }}; background-color: gray;"></div></td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+</section>
diff --git a/src/patterns/02-base/sizes/sizes.yml b/src/patterns/02-base/sizes/sizes.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9f449f0810cb4e945c2f5a01cfea52db6896fd3c
--- /dev/null
+++ b/src/patterns/02-base/sizes/sizes.yml
@@ -0,0 +1,47 @@
+---
+spacing:
+ - size: --size-xs
+ px: 1px
+ rem: 0.063rem
+ - size: --size-sm
+ px: 2px
+ rem: 0.125rem
+ - size: --size-05
+ px: 4px
+ rem: 0.25rem
+ - size: --size-1
+ px: 8px
+ rem: 0.5rem
+ - size: --size-105
+ px: 12px
+ rem: 0.75rem
+ - size: --size-2
+ px: 16px
+ rem: 1rem
+ - size: --size-205
+ px: 20px
+ rem: 1.25rem
+ - size: --size-3
+ px: 24px
+ rem: 1.5rem
+ - size: --size-4
+ px: 32px
+ rem: 2rem
+ - size: --size-5
+ px: 40px
+ rem: 2.5rem
+ - size: --size-6
+ px: 48px
+ rem: 3rem
+ - size: --size-7
+ px: 56px
+ rem: 3.5rem
+ - size: --size-8
+ px: 64px
+ rem: 4rem
+ - size: --size-9
+ px: 72px
+ rem: 4.5rem
+ - size: --size-10
+ px: 80px
+ rem: 5rem
diff --git a/src/patterns/02-base/typography/typography.twig b/src/patterns/02-base/typography/typography.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b04c6778476b871c38c6d8189f88246b66648ac3
--- /dev/null
+++ b/src/patterns/02-base/typography/typography.twig
@@ -0,0 +1,478 @@
+<section class="pl-typography">
+ <div class="gap">
+ <h3>Headings</h3>
+ <article class="typography-demo">
+ <h1>Heading Level 1</h1>
+ <h2>Heading Level 2</h2>
+ <h3>Heading Level 3</h3>
+ <h4>Heading Level 4</h4>
+ <h5>Heading Level 5</h5>
+ <h6>Heading Level 6</h6>
+ <h1><a href="{{ url }}">Heading Level 1 Link</a></h1>
+ <h2><a href="{{ url }}">Heading Level 2 Link</a></h2>
+ <h3><a href="{{ url }}">Heading Level 3 Link</a></h3>
+ <h4><a href="{{ url }}">Heading Level 4 Link</a></h4>
+ <h5><a href="{{ url }}">Heading Level 5 Link</a></h5>
+ <h6><a href="{{ url }}">Heading Level 6 Link</a></h6>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Paragraphs</h3>
+ <article class="typography-demo">
+ <p>A paragraph (from the Greek paragraphos, “to write beside†or “written besideâ€) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
+ <p>This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer sucessive paragraphs indented with no margins between them.</p>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Blockquotes</h3>
+ <article class="typography-demo">
+ {% block blockquote %}
+ {% include "@components/blockquote/blockquote.twig" with {
+ 'text': blockquote.text,
+ 'attribution': blockquote.attribution
+ }%}
+ {% endblock %}
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Lists</h3>
+ <article class="typography-demo">
+ <h4>Definition List</h4>
+ <dl>
+ <dt>Definition List</dt>
+ <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
+ <dt>This is a term.</dt>
+ <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
+ <dt>Here is another term.</dt>
+ <dd>And it gets a definition too, which is this line.</dd>
+ <dt>Here is a term that shares a definition with the term below.</dt>
+ <dt>Here is a term that shares a definition with the term above.</dt>
+ <dd>And they both get the same definition too, which is this line.</dd>
+ </dl>
+
+ <h4>Ordered List</h4>
+ <ol>
+ <li>This is a list item in an ordered list</li>
+ <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
+ <li>
+ Lists can be nested inside of each other
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li>This is the last list item</li>
+ </ol>
+ <h4>Ordered List (Upper Alpha)</h4>
+ <ol class="upper-alpha">
+ <li>This is a list item in an ordered list</li>
+ <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
+ <li>
+ Lists can be nested inside of each other
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li>This is the last list item</li>
+ </ol>
+ <h4>Ordered List (Lower Alpha)</h4>
+ <ol class="lower-alpha">
+ <li>This is a list item in an ordered list</li>
+ <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
+ <li>
+ Lists can be nested inside of each other
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li>This is the last list item</li>
+ </ol>
+ <h4>Ordered List (Upper Roman)</h4>
+ <ol class="upper-roman">
+ <li>This is a list item in an ordered list</li>
+ <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
+ <li>
+ Lists can be nested inside of each other
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li>This is the last list item</li>
+ </ol>
+ <h4>Ordered List (Lower Roman)</h4>
+ <ol class="lower-roman">
+ <li>This is a list item in an ordered list</li>
+ <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
+ <li>
+ Lists can be nested inside of each other
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li>This is the last list item</li>
+ </ol>
+
+ <h4>Unordered List</h4>
+ <ul>
+ <li>This is a list item in an unordered list</li>
+ <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
+ <li>
+ Lists can be nested inside of each other
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an unordered list</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>This is the last list item</li>
+ </ul>
+ <h4>Unordered List (disc)</h4>
+ <ul class="disc">
+ <li>This is a list item in an unordered list</li>
+ <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
+ <li>
+ Lists can be nested inside of each other
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an unordered list</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>This is the last list item</li>
+ </ul>
+ <h4>Unordered List (square)</h4>
+ <ul class="square">
+ <li>This is a list item in an unordered list</li>
+ <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
+ <li>
+ Lists can be nested inside of each other
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an unordered list</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>This is the last list item</li>
+ </ul>
+ <h4>Unordered List (cirlce)</h4>
+ <ul class="circle">
+ <li>This is a list item in an unordered list</li>
+ <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
+ <li>
+ Lists can be nested inside of each other
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an unordered list</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>This is the last list item</li>
+ </ul>
+ </article>
+ </div>
+ <div class="gap">
+ <h3>Details</h3>
+ <article class="typography-demo">
+ {% block details%}
+ {% include "@components/details/details.twig" with {
+ 'is_open' : details.is_open,
+ 'details_classes': details.details.classes,
+ 'details_content': details.details_content,
+ 'details_description': details.details_description,
+ 'details_summary': details.details_summary,
+ }%}
+ {% endblock %}
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Horizontal rules</h3>
+ <article class="typography-demo">
+ <hr>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Code</h3>
+ <article class="typography-demo">
+ <p>Keybord input: <kbd>Cmd</kbd></p>
+ <p>Inline code:<code><div>code</div></code></p>
+ <p>Sample output: <samp>This is sample output from a computer program</samp></p>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Pre-formatted text</h3>
+ <article class="typography-demo">
+ <pre>
+ P R E F O R M A T T E D T E X T
+ ! " # $ % & ' ( ) * + , - . /
+ 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
+ @ A B C D E F G H I J K L M N O
+ P Q R S T U V W X Y Z [ \ ] ^ _
+ ` a b c d e f g h i j k l m n o
+ p q r s t u v w x y z { | } ~
+ </pre>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Inline elements</h3>
+ <article class="typography-demo">
+ <p><a href="{{ url }}">This is a text link</a></p>
+ <p><strong>Strong is used to indicate strong importance</strong></p>
+ <p><em>This text has added emphasis</em></p>
+ <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
+ <p>The <i>i element</i> is text that is set off from the normal text</p>
+ <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
+ <p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
+ <p><s>This text has a strikethrough</s></p>
+ <p>Superscript<sup>®</sup></p>
+ <p>Subscript for things like H<sub>2</sub>O</p>
+ <p><small>This small text is small for for fine print, etc.</small></p>
+ <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
+ <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
+ <p><cite>This is a citation</cite></p>
+ <p>The <dfn>dfn element</dfn> indicates a definition.</p>
+ <p>The <mark>mark element</mark> indicates a highlight</p>
+ <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
+ <p>The <time>time element</time>, such as <time>10:00pm</time></p>
+ </article>
+ </div>
+
+<div class="gap">
+ <h3>Table</h3>
+ <article class="typography-demo">
+ <table>
+ <caption>Table caption</caption>
+ <thead>
+ <tr>
+ <th>Table Heading A</th>
+ <th>Table Heading B</th>
+ <th>Table Heading C</th>
+ <th>Table Heading D</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Table Footer A</th>
+ <th>Table Footer B</th>
+ <th>Table Footer C</th>
+ <th>Table Footer D</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Table Cell A1</td>
+ <td>Table Cell B1</td>
+ <td>Table Cell C1</td>
+ <td>Table Cell D1</td>
+ </tr>
+ <tr>
+ <td>Table Cell A2</td>
+ <td>Table Cell B2</td>
+ <td>Table Cell C2</td>
+ <td>Table Cell D2</td>
+ </tr>
+ <tr>
+ <td>Table Cell A3</td>
+ <td>Table Cell B3</td>
+ <td>Table Cell C3</td>
+ <td>Table Cell D3</td>
+ </tr>
+ <tr>
+ <td>Table Cell A4</td>
+ <td>Table Cell B4</td>
+ <td>Table Cell C4</td>
+ <td>Table Cell D4</td>
+ </tr>
+ </tbody>
+ </table>
+ <table>
+ <caption>Table caption</caption>
+ <tbody>
+ <tr>
+ <th scope="row">Table Heading 1</th>
+ <td>Table Cell A1</td>
+ <td>Table Cell B1</td>
+ <td>Table Cell C1</td>
+ <td>Table Cell D1</td>
+ </tr>
+ <tr>
+ <th scope="row">Table Heading 2</th>
+ <td>Table Cell A2</td>
+ <td>Table Cell B2</td>
+ <td>Table Cell C2</td>
+ <td>Table Cell D2</td>
+ </tr>
+ <tr>
+ <th scope="row">Table Heading 3</th>
+ <td>Table Cell A3</td>
+ <td>Table Cell B3</td>
+ <td>Table Cell C3</td>
+ <td>Table Cell D3</td>
+ </tr>
+ <tr>
+ <th scope="row">Table Heading 4</th>
+ <td>Table Cell A4</td>
+ <td>Table Cell B4</td>
+ <td>Table Cell C4</td>
+ <td>Table Cell D4</td>
+ </tr>
+ </tbody>
+ </table>
+ <table>
+ <caption>Table caption</caption>
+ <thead>
+ <tr>
+ <th></th>
+ <th scope="col">Table Heading A</th>
+ <th scope="col">Table Heading B</th>
+ <th scope="col">Table Heading C</th>
+ <th scope="col">Table Heading D</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th></th>
+ <th scope="col">Table Footer A</th>
+ <th scope="col">Table Footer B</th>
+ <th scope="col">Table Footer C</th>
+ <th scope="col">Table Footer D</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <th scope="row">Table Heading 1</th>
+ <td>Table Cell A1</td>
+ <td>Table Cell B1</td>
+ <td>Table Cell C1</td>
+ <td>Table Cell D1</td>
+ </tr>
+ <tr>
+ <th scope="row">Table Heading 2</th>
+ <td>Table Cell A2</td>
+ <td>Table Cell B2</td>
+ <td>Table Cell C2</td>
+ <td>Table Cell D2</td>
+ </tr>
+ <tr>
+ <th scope="row">Table Heading 3</th>
+ <td>Table Cell A3</td>
+ <td>Table Cell B3</td>
+ <td>Table Cell C3</td>
+ <td>Table Cell D3</td>
+ </tr>
+ <tr>
+ <th scope="row">Table Heading 4</th>
+ <td>Table Cell A4</td>
+ <td>Table Cell B4</td>
+ <td>Table Cell C4</td>
+ <td>Table Cell D4</td>
+ </tr>
+ </tbody>
+ </table>
+
+ </article>
+</div>
diff --git a/src/patterns/02-base/typography/typography.yml b/src/patterns/02-base/typography/typography.yml
new file mode 100644
index 0000000000000000000000000000000000000000..452877204e7f8e138bfdc23c15ae225e71d5259a
--- /dev/null
+++ b/src/patterns/02-base/typography/typography.yml
@@ -0,0 +1,10 @@
+blockquote:
+ text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file3</p><p>This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
+ attribution: 'This is the attribution'
+details:
+ is_open: true
+ details_classes: 'uw-pattern-lab'
+ details_summary: 'Details summary title here'
+ details_description: 'Details description'
+ details_content: |-
+ <p>Details content can be anything you want it to be</p>
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index e1e5ee76f0bc45a383d4e7db07aa27714d05098c..2a4bacb79903126b9d18f7f500f71e3518df8b43 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -1,3 +1,7 @@
+@forward 'blockquote/blockquote';
+@forward 'button/button';
@forward 'card/card';
+@forward 'image/image';
+@forward 'svg/svg';
@forward 'tag-list/tag-list';
@forward 'tag/tag';
diff --git a/src/patterns/04-components/blockquote/_blockquote.scss b/src/patterns/04-components/blockquote/_blockquote.scss
new file mode 100644
index 0000000000000000000000000000000000000000..16aefd7d56b2519a5e99c7e3cffa24fa3bbe2777
--- /dev/null
+++ b/src/patterns/04-components/blockquote/_blockquote.scss
@@ -0,0 +1,72 @@
+.uw-blockquote {
+ background-color: var(--gray-1);
+ color: var(--uw-black);
+
+ &__wrapper {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ padding: var(--size-4) 0;
+ text-align: center;
+ }
+
+ &__text {
+ display: inline-block;
+ p{
+ font-size: var(--font-size-4);
+ }
+ max-width: 640px;
+ padding: 0 var(--size-5);
+ position: relative;
+ text-align: left;
+
+ &::before {
+ color: var(--gray-5);
+ content: "\201C";
+ font-size: var(--font-size-14);
+ left: 0;
+ line-height: 5.2rem;
+ position: absolute;
+ top: -10px;
+ }
+
+ &::after {
+ bottom: 5px;
+ color: var(--gray-5);
+ content: "\201D";
+ font-size: var(--font-size-14);
+ line-height: 0;
+ position: absolute;
+ right: 0;
+ }
+ }
+
+ &__attribution {
+ display: block;
+
+ &--wrapper {
+ display: inline-block;
+ font-size: var(--font-size-0);
+ max-width: 640px;
+ padding: 0 var(--size-2);
+ position: relative;
+ text-align: left;
+ }
+
+
+
+ cite {
+ color: var(--uw-black);
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-1);
+ font-weight: normal;
+ text-align: left;
+ text-transform:uppercase;
+ > :first-child::before{
+ content: "\2014";
+ display:inline-block;
+ padding-right:var(--size-1);
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/blockquote/blockquote.twig b/src/patterns/04-components/blockquote/blockquote.twig
new file mode 100644
index 0000000000000000000000000000000000000000..cb705197b312886e8658800f4816d623d1fac111
--- /dev/null
+++ b/src/patterns/04-components/blockquote/blockquote.twig
@@ -0,0 +1,16 @@
+<blockquote class="uw-blockquote">
+ <div class="uw-blockquote__wrapper">
+ <div class="uw-blockquote__text">
+ {{ blockquote.text }}
+ </div>
+ {% if blockquote.attribution %}
+ <footer class="uw-blockquote__attribution">
+ <div class="uw-blockquote__attribution--wrapper">
+ <cite>
+ {{ blockquote.attribution }}
+ </cite>
+ </div>
+ </footer>
+ {% endif %}
+ </div>
+</blockquote>
diff --git a/src/patterns/04-components/blockquote/blockquote.yml b/src/patterns/04-components/blockquote/blockquote.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e6bcd6f7c5418343ff751e48139d380c59337158
--- /dev/null
+++ b/src/patterns/04-components/blockquote/blockquote.yml
@@ -0,0 +1,3 @@
+blockquote:
+ text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file3</p><p>This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
+ attribution: 'This is the attribution'
diff --git a/src/patterns/04-components/button/_button.scss b/src/patterns/04-components/button/_button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6e05c1934a2d3b93db32b445fbffad11cd548d5
--- /dev/null
+++ b/src/patterns/04-components/button/_button.scss
@@ -0,0 +1,94 @@
+// @file
+// Styles for Button.
+
+@use '../../01-core' as *;
+
+.button,
+ button{
+ @include button();
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--danger {
+ background-color: var(--red-9);
+ color: var(--uw-white);
+
+ &:hover,
+ &:focus {
+ background-color: var(--cgc-3);
+ color: var(--uw-white);
+
+ }
+
+ &:active {
+ background-color: var(--cgc-4);
+ color: var(--uw-white);
+ }
+}
+
+// This custom button class, included as an example, is not output by Drupal by default.
+.button--medium {
+ font-size: var(--font-size-000);
+ max-width: var(--size-20);
+ padding: var(--size-1);
+ &:hover,
+ &:focus {
+ padding: var(--size-1);
+ }
+}
+
+// This custom button class, included as an example, is not output by Drupal by default.
+.button--small {
+ font-size: var(--font-size-0000);
+ max-width: var(--size-12);
+ padding: var(--size-05);
+ &:hover,
+ &:focus {
+ padding: var(--size-05);
+ }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--primary {
+ background-color: var(--green-8);
+ color: var(--uw-white);
+ &:hover,
+ &:focus {
+ background-color: var(--green-9);
+ color: var(--uw-white);
+ }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--secondary {
+ background-color: var(--blue-5);
+ color: var(--uw-white);
+ &:hover,
+ &:focus {
+ background-color: var(--blue-9);
+ color: var(--uw-white);
+ }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--cancel,
+.button[data-drupal-selector="edit-cancel"]{
+ background-color: var(--orange-5);
+ color: var(--uw-white);
+ &:hover,
+ &:focus {
+ background-color: var(--orange-8);
+ color: var(--uw-white);
+ }
+}
+// Css within pattern lab.
+.pattern-lab-content .mobile-menu-button,
+.pl-c-pattern__extra-toggle{
+ max-width:inherit;
+ width:auto;
+
+}
+.pl-c-pattern .pl-c-demo button,
+.pl-c-pattern .pl-c-demo .button{
+ margin: 0 0 var(--size-1);
+}
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.md b/src/patterns/04-components/button/button--cancel/button--cancel.md
new file mode 100644
index 0000000000000000000000000000000000000000..f547601f67fbac97069876a5772b7ab0cc3fdb0b
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.md
@@ -0,0 +1,12 @@
+---
+el: .button--cancel
+title: Cancel Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.twig b/src/patterns/04-components/button/button--cancel/button--cancel.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4b1078a769bc5400f37513648f15df61acca5f42
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--cancel {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.yml b/src/patterns/04-components/button/button--cancel/button--cancel.yml
new file mode 100644
index 0000000000000000000000000000000000000000..cffef5d967c6f37bd0919e290a222e0a10a59cbc
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Cancel'
+text_demo: 'Cancel (Link)'
diff --git a/src/patterns/04-components/button/button--danger/button--danger.md b/src/patterns/04-components/button/button--danger/button--danger.md
new file mode 100644
index 0000000000000000000000000000000000000000..90d99731ad5136597e128c3f7732929ac79a5e0b
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.md
@@ -0,0 +1,12 @@
+---
+el: .button--danger
+title: Danger Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--danger/button--danger.twig b/src/patterns/04-components/button/button--danger/button--danger.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f0c8362acf11d2e72652c7cb54bbf1113159193f
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--danger {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--danger/button--danger.yml b/src/patterns/04-components/button/button--danger/button--danger.yml
new file mode 100644
index 0000000000000000000000000000000000000000..51477bd36f6829c80f9484c21f20917f1da4e9fc
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Delete'
+text_demo: 'Delete (Link)'
diff --git a/src/patterns/04-components/button/button--large/button--large.md b/src/patterns/04-components/button/button--large/button--large.md
new file mode 100644
index 0000000000000000000000000000000000000000..22fe954d6e6165f02d2088a9971a667f0bcd0c5f
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.md
@@ -0,0 +1,12 @@
+---
+el: .button--large
+title: Large Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--large/button--large.twig b/src/patterns/04-components/button/button--large/button--large.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9d395daaf63a5eee18d4493364d8d3040eff225e
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--large {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--large/button--large.yml b/src/patterns/04-components/button/button--large/button--large.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7c8ac2d6302f02ef52ce5164f90dc380ad446c0b
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Submit'
+text_demo: 'Link'
diff --git a/src/patterns/04-components/button/button--medium/button--medium.md b/src/patterns/04-components/button/button--medium/button--medium.md
new file mode 100644
index 0000000000000000000000000000000000000000..6123ac5a27e826c2bd68488096a677ab158b4062
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.md
@@ -0,0 +1,12 @@
+---
+el: .button--medium
+title: Medium Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--medium/button--medium.twig b/src/patterns/04-components/button/button--medium/button--medium.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8a3419dab0e072baa45462adccc49cb817f70bb7
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--medium {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--medium/button--medium.yml b/src/patterns/04-components/button/button--medium/button--medium.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e1cb4ffa7f98b1d91a8823e62099c9ec2204bea
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
diff --git a/src/patterns/04-components/button/button--primary/button--primary.md b/src/patterns/04-components/button/button--primary/button--primary.md
new file mode 100644
index 0000000000000000000000000000000000000000..2b4fc2b72828e284a35d3e897d525d7a64641ed5
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.md
@@ -0,0 +1,12 @@
+---
+el: .button--primary
+title: Primary Button (save)
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--primary/button--primary.twig b/src/patterns/04-components/button/button--primary/button--primary.twig
new file mode 100644
index 0000000000000000000000000000000000000000..cf637b5fe61e4daab28a9db4229fb8788374e398
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--primary {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--primary/button--primary.yml b/src/patterns/04-components/button/button--primary/button--primary.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fb053e630bc3004c9605bb512f9788e0b92c5cf1
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Save'
+text_demo: 'Save Button'
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.md b/src/patterns/04-components/button/button--secondary/button--secondary.md
new file mode 100644
index 0000000000000000000000000000000000000000..a423e1d6f6dd82e492e73c93e775ff7009c2c871
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.md
@@ -0,0 +1,12 @@
+---
+el: .button--secondary
+title: Secondary Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.twig b/src/patterns/04-components/button/button--secondary/button--secondary.twig
new file mode 100644
index 0000000000000000000000000000000000000000..83e711079ae8b44cede77dc4adba12a40b8dc523
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--secondary {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
\ No newline at end of file
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.yml b/src/patterns/04-components/button/button--secondary/button--secondary.yml
new file mode 100644
index 0000000000000000000000000000000000000000..cebf6161d8481520069c560cf3810095ece9cfb2
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Revert'
+text_demo: 'Revert Button'
diff --git a/src/patterns/04-components/button/button--small/button--small.md b/src/patterns/04-components/button/button--small/button--small.md
new file mode 100644
index 0000000000000000000000000000000000000000..860993d4bb3174412697a26e271559fb7b4ee41c
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.md
@@ -0,0 +1,12 @@
+---
+el: .button--small
+title: Small Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--small/button--small.twig b/src/patterns/04-components/button/button--small/button--small.twig
new file mode 100644
index 0000000000000000000000000000000000000000..bb01b13dfcb1363e4591edfb4dd0e29297d2f8ae
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--small {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--small/button--small.yml b/src/patterns/04-components/button/button--small/button--small.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e1cb4ffa7f98b1d91a8823e62099c9ec2204bea
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
diff --git a/src/patterns/04-components/button/button.md b/src/patterns/04-components/button/button.md
new file mode 100644
index 0000000000000000000000000000000000000000..43ac105ef900bb8657f6a6add8674de92a2d9fe1
--- /dev/null
+++ b/src/patterns/04-components/button/button.md
@@ -0,0 +1,12 @@
+---
+el: .button
+title: Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button.twig b/src/patterns/04-components/button/button.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8f0149a9ed5d3d5ca54fdc3714284f7e6c67da46
--- /dev/null
+++ b/src/patterns/04-components/button/button.twig
@@ -0,0 +1,83 @@
+{% if is_demo %}
+ <div class="pl-c-demo">
+{% endif %}
+{% if is_button_tag %}
+ <button
+ {% if data_type_name %}
+ data-value-{{ data_type_name }}="{{ data_type_value }}"
+ {% endif %}
+
+ {% if is_disabled %}
+ disabled
+ {% endif %}
+
+ {% if type %}
+ type="{{ type }}"
+ {% endif %}
+
+ {% if autofocus %}
+ autofocus="{{ autofocus }}"
+ {% endif %}
+
+ {% if formaction %}
+ formaction=" {{ formaction }}"
+ {% endif %}
+
+ {% if form %}
+ form="{{form}}"
+ {% endif %}
+
+ {% if formenctype %}
+ formenctype="{{ formenctype }}"
+ {% endif %}
+
+ {% if formmethod %}
+ formmethod=" {{ formmethod }}"
+ {% endif %}
+
+ {% if formtarget %}
+ formtarget=" {{ formtarget }}"
+ {% endif %}
+
+ {% if name %}
+ name="{{ name }}"
+ {% endif %}
+
+ {% if formenctype %}
+ formenctype="{{ formenctype }}"
+ {% endif %}
+
+ {% if value %}
+ value="{{ value }}"
+ {% endif %}
+
+ {% if formnovalidate %}
+ formnovalidate
+ {% endif %}
+
+ {% if btnclick %}
+ onclick="{{ btnclick }}"
+ {% endif %}
+
+ class="button {{ modifier_classes }}"
+ >
+ {{ text }}
+ </button>
+{% else %}
+ <a {% if aria %} aria-{{ aria_type_name }}="{{ aria_type_value}}" {% endif %} {% if data_type_name %} data-{{ data_type_name }}="{{ data_type_value }}"{% endif %} {% if btn_id %} id="{{ btn_id }}" {% endif %} class="button {{ modifier_classes }}" href="{{ url }}" {% if btnclick %} onclick="{{ btnclick }}" {% endif %} {% if target %}target="{{ target }}" {% endif %}>
+ {{ text }}
+ </a>
+{% endif %}
+
+{% if is_demo %}
+ <br>
+
+ <a href="{{ url }}" class="button {{ modifier_classes }}">{{ text_demo }}</a>
+ <br>
+
+ <button class="button {{ modifier_classes }}" disabled>Disabled {{ text }}</button>
+{% endif %}
+
+{% if is_demo %}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/button/button.yml b/src/patterns/04-components/button/button.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5a1d8353928892b3f512d98fe4f8d6fbeb77a277
--- /dev/null
+++ b/src/patterns/04-components/button/button.yml
@@ -0,0 +1,19 @@
+---
+is_button_tag: true
+is_demo: true
+is_disabled: false
+autofocus: false
+formaction: 'form_action'
+form: 'form_id'
+formmethod: ''
+formtarget: 'form_target'
+name: ''
+formenctype: ''
+value: ''
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
+type: ''
+modifier_classes: ''
+btnclick : |
+ alert('Hello World!');
diff --git a/src/patterns/04-components/button/buttons.js b/src/patterns/04-components/button/buttons.js
new file mode 100644
index 0000000000000000000000000000000000000000..0172b28a6457e1a4bb4851a38a3fe24d2601cd4a
--- /dev/null
+++ b/src/patterns/04-components/button/buttons.js
@@ -0,0 +1,66 @@
+/**
+* @file
+* Javascript for buttons
+
+**/
+
+(function ($, Drupal) {
+ 'use strict';
+ Drupal.behaviors.buttons = {
+ attach: function (context, settings) {
+ // Only show the show/hide button if the user is logged in
+ //on the "view", "layout", or "latest version" tabs.
+ // (We have picked elements that should only exist on those pages,
+ // and only when the user has editing access.
+ //
+ $(document).ready(
+ function () {
+ /**
+ * Javascript for toggleTabs
+ * Allows for buttons to be used.
+ * @var {Object}
+ * @var {Object}
+ * @var {Object}
+ * @returns {boolean} css for toggle.
+ */
+ function toggleTabs() {
+ var x = document.getElementById('block-tabs');
+ var y = document.getElementsByClassName('uw-content-moderation')[0];
+ var z = document.getElementById('edit-moderation-state-wrapper');
+
+ if (x.style.display === 'none') {
+ x.style.display = 'block';
+ }
+ else {
+ x.style.display = 'none';
+ }
+ if (y) {
+ if (y.style.display === 'none') {
+ y.style.display = 'block';
+ }
+ else {
+ y.style.display = 'none';
+ }
+ }
+ if (z) {
+ if (z.style.display === 'none') {
+ z.style.display = 'block';
+ }
+ else {
+ z.style.display = 'none';
+ }
+ }
+ }
+
+ if ($('.user-logged-in .uw-content-moderation, .user-logged-in #edit-moderation-state-wrapper, .user-logged-in #block-tabs a.is-active[href$=\'latest\']').length) {
+ $('.uw-show-hide').show().on(
+ 'click', function () {
+ toggleTabs();
+ }
+ );
+ }
+ }
+ );
+ }
+ };
+})(jQuery, Drupal);
diff --git a/src/patterns/04-components/caption/_caption.scss b/src/patterns/04-components/caption/_caption.scss
new file mode 100644
index 0000000000000000000000000000000000000000..66732e893f9b91bc6bd65807956cdc3c414cce37
--- /dev/null
+++ b/src/patterns/04-components/caption/_caption.scss
@@ -0,0 +1,10 @@
+.uw-caption {
+ .caption {
+ background: var(--gray-2);
+ border: solid var(--size-xs) var(--neutral-1);
+ color: var(--uw-black);
+ font-family: var(--font-system);
+ font-size: var(--font-size-000);
+ padding: var(--size-1);
+ }
+}
diff --git a/src/patterns/04-components/caption/caption.twig b/src/patterns/04-components/caption/caption.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3f95a57dabf68dd37f12385eb4312a11ab1360e7
--- /dev/null
+++ b/src/patterns/04-components/caption/caption.twig
@@ -0,0 +1,3 @@
+<div class="uw-caption">
+ <p class="caption">{{ caption }}</p>
+</div>
\ No newline at end of file
diff --git a/src/patterns/04-components/caption/caption.yml b/src/patterns/04-components/caption/caption.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8b8eeb55cc2a34aa732999a115afb58b3a43f38e
--- /dev/null
+++ b/src/patterns/04-components/caption/caption.yml
@@ -0,0 +1 @@
+caption: 'This is some caption text'
diff --git a/src/patterns/04-components/details/details.twig b/src/patterns/04-components/details/details.twig
index cba4bcd7ade58788a2afc3dbf1cf8d1d37188827..5dabdab5a3257e499f67fdee2cd2cb6845714d3d 100644
--- a/src/patterns/04-components/details/details.twig
+++ b/src/patterns/04-components/details/details.twig
@@ -1,12 +1,16 @@
-<details class="uw-details" {% if is_open %} open{% endif %}>
+<details class="uw-details {{ details_classes }}" {% if details.is_open %} open{% endif %}>
<summary class="details__summary">
{% block details_summary %}
- Summary
+
+ {{ details_summary }}
+
{% endblock %}
</summary>
<div class="details__content">
{% block details_content %}
- Content
+
+ {{ details_content }}
+
{% endblock %}
</div>
</details>
diff --git a/src/patterns/04-components/fieldset/fieldset.twig b/src/patterns/04-components/fieldset/fieldset.twig
new file mode 100644
index 0000000000000000000000000000000000000000..1d75b8693173304e43706654b790709962218402
--- /dev/null
+++ b/src/patterns/04-components/fieldset/fieldset.twig
@@ -0,0 +1,11 @@
+<fieldset class="fieldset fieldset--default">
+ <legend class="fieldset__legend">
+ <span class="fieldset__legend-text">{{ legend }}</span>
+ </legend>
+ <div class="fieldset__content">
+ {{ content }}
+ <div class="fieldset__description">
+ {{ description }}
+ </div>
+ </div>
+</fieldset>
diff --git a/src/patterns/04-components/fieldset/fieldset.yml b/src/patterns/04-components/fieldset/fieldset.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4ec9e28e3cdc50c6ebd03b6ced2753c85005033f
--- /dev/null
+++ b/src/patterns/04-components/fieldset/fieldset.yml
@@ -0,0 +1,6 @@
+---
+legend: 'Fieldset'
+content: |-
+ <p>Fieldset content goes here…</p>
+description: |-
+ <p>The description for this fieldset.</p>
diff --git a/src/patterns/04-components/form-item/form-item.scss b/src/patterns/04-components/form-item/form-item.scss
new file mode 100644
index 0000000000000000000000000000000000000000..35910576a9983092ac0820600c5a9b1f107dd3cf
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item.scss
@@ -0,0 +1,216 @@
+// @file
+// Styles for form items.
+
+@use '../../01-core' as *;
+
+.form-item {
+ margin: 0 0 var(--size-3);
+}
+
+.form-item__label {
+ display: inline-block;
+ //font-family: var(--font-system);
+ //font-size: var(--font-size-2);
+ //margin-bottom: var(--size-1);
+
+ .is-disabled > & {
+ opacity: 0.35;
+ }
+}
+
+.form-item__fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+.form-item__description {
+ color: var(--gray-6);
+ font-family: var(--font-system);
+ font-size: var(--font-size-0);
+ margin-top: var(--size-1);
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+
+.form-item__required-marker::before {
+ color: #e00;
+ content: '*';
+}
+
+.form-item__color,
+.form-item__date,
+.form-item__email,
+.form-item__month,
+.form-item__number,
+.form-item__password,
+.form-item__search,
+.form-item__select,
+.form-item__tel,
+.form-item__text,
+.form-item__textarea,
+.form-item__time,
+.form-item__url,
+.form-item__week {
+ appearance: none;
+ border-color: var(--gray-3);
+ border-style: solid;
+ border-width: var(--border-size-1);
+ display: block;
+ font-family: var(--font-system);
+ font-size: var(--font-size-1);
+ max-width: 100%;
+ padding: var(--size-1) var(--size-2);
+ transition: background-color 200ms ease-in-out, border 200ms ease-in-out;
+
+ &:hover {
+ background-color: white;
+ border-color: var(--gray-5);
+ border-style: solid;
+ border-width: var(--border-size-1);
+ }
+
+ &:disabled {
+ cursor: default;
+ opacity: 0.35;
+
+ &:hover,
+ &:focus {
+ background-color: var(--gray-1);
+ border-color: var(--gray-3);
+ border-style: solid;
+ border-width: var(--border-size-1);
+ }
+ }
+
+ .is-full-width > & {
+ width: 100%;
+ }
+}
+
+// Form Item: Textarea
+.form-item__textarea {
+ height: auto;
+}
+
+// Form Item: Checkbox
+.form-item--checkbox,
+.form-item--radio {
+ display: flex;
+ margin-bottom: var(--size-2);
+
+ .form-item__label {
+ align-self: center;
+ cursor: pointer;
+ margin-bottom: 0;
+ }
+}
+
+// Form Item: Range
+.form-item--range {
+ .form-item__range {
+ display: block;
+ max-inline-size: 100%;
+ }
+}
+
+// Form Item: File
+.form-item--file {
+ .form-item__file {
+ appearance: none;
+ background-clip: padding-box;
+ font-family: var(--font-system);
+ font-size: var(--font-size-0);
+ font-weight: var(--font-weight-400);
+ line-height: var(--font-lineheight-4);
+ overflow: hidden;
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
+
+ &::file-selector-button {
+ background-color: var(--gray-2);
+ border-color: inherit;
+ border-inline-end-width: 1px;
+ border-radius: 0;
+ border-style: solid;
+ border-width: 0;
+ color: var(--gray-9);
+ margin-inline-end: var(--size-2);
+ margin: var(--size-1) var(--size-2);
+ padding: var(--size-105) var(--size-2);
+ pointer-events: none;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ }
+
+ &:hover:not(:disabled):not([readonly])::file-selector-button {
+ background-color: var(--gray-2);
+ }
+
+ &::-webkit-file-upload-button {
+ background-color: var(--gray-2);
+ border-color: inherit;
+ border-inline-end-width: 1px;
+ border-radius: 0;
+ border-style: solid;
+ border-width: 0;
+ color: var(--gray-9);
+ margin-inline-end: var(--size-2);
+ margin: var(--size-1) var(--size-2);
+ padding: var(--size-105) var(--size-2);
+ pointer-events: none;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ }
+
+ &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+ background-color: var(--gray-2);
+ }
+ }
+}
+
+// Form Item: Color
+.form-item--color {
+ .form-item__color {
+ height: auto;
+ max-inline-size: var(--size-6);
+ padding: var(--size-1);
+
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
+
+ &::-moz-color-swatch {
+ height: 1.25em;
+ }
+
+ &::-webkit-color-swatch {
+ height: 1.25em;
+ }
+ }
+}
+
+// Form Item: Select
+.form-item--select {
+ .form-item__select {
+ //@include svg-background('/img/select-arrows.svg');
+ //background-position: right var(--size-2) center; // LTR
+ //background-repeat: no-repeat;
+ //background-size: var(--size-3);
+ //display: block;
+ //padding-right: var(--size-12);
+
+ // Remove inner focus styling on Firefox.
+ &:-moz-focusring {
+ //color: transparent;
+ //text-shadow: 0 0 0 black;
+ }
+
+ &::-ms-expand {
+ //display: none;
+ }
+ }
+}
diff --git a/src/patterns/04-components/form-item/form-item.twig b/src/patterns/04-components/form-item/form-item.twig
new file mode 100644
index 0000000000000000000000000000000000000000..bd729510b975b383f513b916c6afab05714810d9
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item.twig
@@ -0,0 +1,69 @@
+{{ attach_library('ohana/form-item') }}
+
+{% set classes = [
+ 'form-item',
+ type ? 'form-item--' ~ type|clean_class,
+ name ? 'form-item--id-' ~ name|clean_class,
+ 'js-form-item',
+ type ? 'js-form-type-' ~ type|clean_class,
+ name ? 'js-form-item-' ~ name|clean_class,
+ errors ? 'has-error' : '',
+ disabled == 'disabled' or is_disabled ? 'is-disabled',
+ required == 'required' or is_required ? 'is-required',
+ label_display not in ['after', 'before'] ? 'has-no-label',
+ label_display not in ['invisible'] and label_display in ['after'] ? 'has-visible-label-after',
+ is_full_width ? 'is-full-width',
+ attributes ? attributes.class,
+]|join(' ')|trim %}
+
+{% set description_classes = [
+ 'form-item__description',
+ description_display == 'invisible' ? 'u-visually-hidden',
+ description.attributes ? description.attributes.class,
+]|join(' ')|trim %}
+
+<div class="{{ classes }}" {{ attributes ? attributes|without('class') }}>
+ {% if label_display in ['before', 'invisible'] %}
+ {{ label }}
+ {% endif %}
+
+ {% if prefix or suffix %}
+ <div class="form-item__element">
+ {% endif %}
+
+ {% if prefix %}
+ <span class="form-item__prefix">{{ prefix }}</span>
+ {% endif %}
+
+ {% if description_display == 'before' and description.content %}
+ <div class="{{ description_classes }}" {{ description.attributes ? description.attributes|without('class') }}>
+ {{ description.content }}
+ </div>
+ {% endif %}
+
+ {{ children }}
+
+ {% if suffix %}
+ <span class="form-item__suffix">{{ suffix }}</span>
+ {% endif %}
+
+ {% if prefix or suffix %}
+ </div>
+ {% endif %}
+
+ {% if label_display == 'after' %}
+ {{ label }}
+ {% endif %}
+
+ {% if errors %}
+ <div class="form-item__error-message">
+ {{ errors }}
+ </div>
+ {% endif %}
+
+ {% if description_display in ['after', 'invisible'] and description.content %}
+ <div class="{{ description_classes }}" {{ description.attributes ? description.attributes|without('class') }}>
+ {{ description.content }}
+ </div>
+ {% endif %}
+</div>
diff --git a/src/patterns/04-components/form-item/form-item~checkbox.yml b/src/patterns/04-components/form-item/form-item~checkbox.yml
new file mode 100644
index 0000000000000000000000000000000000000000..af491ccd9b6737550b13832dcff06ff74a84da2b
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~checkbox.yml
@@ -0,0 +1,15 @@
+---
+type: 'checkbox'
+name: 'checkbox'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'after'
+label: '<label class="form-item__label" for="checkbox">Checkbox</label>'
+description_display: 'after'
+description:
+ content: ''
+prefix: ''
+suffix: ''
+children: '<input class="form-item__checkbox" id="checkbox" type="checkbox">'
diff --git a/src/patterns/04-components/form-item/form-item~color.yml b/src/patterns/04-components/form-item/form-item~color.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9360768de04a831f40d18e4842c264da3ebe0521
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~color.yml
@@ -0,0 +1,15 @@
+---
+type: 'color'
+name: 'color'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-color">Color picker</label>'
+description_display: 'after'
+description:
+ content: ''
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__color" id="edit-color" type="color" value="#1090ff">'
diff --git a/src/patterns/04-components/form-item/form-item~date.yml b/src/patterns/04-components/form-item/form-item~date.yml
new file mode 100644
index 0000000000000000000000000000000000000000..abe9904b08a38592c5c72f80174f8b726abdbc71
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~date.yml
@@ -0,0 +1,15 @@
+---
+type: 'date'
+name: 'date'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-date">Date</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__date" id="edit-date" type="date" data-drupal-date-format="Y-m-d">'
diff --git a/src/patterns/04-components/form-item/form-item~email.yml b/src/patterns/04-components/form-item/form-item~email.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ab95a8921f64f753a01f44567ae04a0dee04259e
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~email.yml
@@ -0,0 +1,15 @@
+---
+type: 'email'
+name: 'email'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-email">Email</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__email" id="edit-email" type="email" size="60" maxlength="128" placeholder="email@example.com">'
diff --git a/src/patterns/04-components/form-item/form-item~file.yml b/src/patterns/04-components/form-item/form-item~file.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c16cf31028de142b487828e3d04e3c0769b74043
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~file.yml
@@ -0,0 +1,15 @@
+---
+type: 'file'
+name: 'file'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-file">Default file input example</label>'
+description_display: 'after'
+description:
+ content: ''
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__file" id="edit-file" type="file" size="60" maxlength="128" accept="image/*">'
diff --git a/src/patterns/04-components/form-item/form-item~month.yml b/src/patterns/04-components/form-item/form-item~month.yml
new file mode 100644
index 0000000000000000000000000000000000000000..3acf6b22c31fa0492f350cf984e59e5a5c88059d
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~month.yml
@@ -0,0 +1,15 @@
+---
+type: 'month'
+name: 'month'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-month">Month</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__month" id="edit-month" type="month" size="12">'
diff --git a/src/patterns/04-components/form-item/form-item~number.yml b/src/patterns/04-components/form-item/form-item~number.yml
new file mode 100644
index 0000000000000000000000000000000000000000..644da19f087cfb158a44881b1f7e58fcb7c88e29
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~number.yml
@@ -0,0 +1,15 @@
+---
+type: 'number'
+name: 'number'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-number">Number</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__number" id="edit-number" type="number" placeholder="Placeholder" step="1">'
diff --git a/src/patterns/04-components/form-item/form-item~password.yml b/src/patterns/04-components/form-item/form-item~password.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ad06b7b07749c90f497d42267281696f0a6e2a21
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~password.yml
@@ -0,0 +1,15 @@
+---
+type: 'password'
+name: 'password'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-password">Password</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="form-item__password" id="edit-password" type="password" size="60" maxlength="128">'
diff --git a/src/patterns/04-components/form-item/form-item~radio.yml b/src/patterns/04-components/form-item/form-item~radio.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ee39bee072ed230b232242ba4a9288d73a57b576
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~radio.yml
@@ -0,0 +1,15 @@
+---
+type: 'radio'
+name: 'radio'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'after'
+label: '<label class="form-item__label" for="radio">Option</label>'
+description_display: 'after'
+description:
+ content: ''
+prefix: ''
+suffix: ''
+children: '<input class="form-item__radio" id="radio" type="radio">'
diff --git a/src/patterns/04-components/form-item/form-item~range.yml b/src/patterns/04-components/form-item/form-item~range.yml
new file mode 100644
index 0000000000000000000000000000000000000000..01b256c6bf14ad6b438fc384d0fb06100d34134f
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~range.yml
@@ -0,0 +1,15 @@
+---
+type: 'range'
+name: 'range'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-range">Range</label>'
+description_display: 'after'
+description:
+ content: ''
+prefix: ''
+suffix: ''
+children: '<input class="form-item__range" id="edit-range" type="range" step="1" max="100">'
diff --git a/src/patterns/04-components/form-item/form-item~search.yml b/src/patterns/04-components/form-item/form-item~search.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a86eeb0891de36b5ea1e4659099d0dce2499cf1c
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~search.yml
@@ -0,0 +1,15 @@
+---
+type: 'search'
+name: 'search'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-search">Search</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="form-item__search" id="edit-search" type="search" size="60" maxlength="128" placeholder="Placeholder">'
diff --git a/src/patterns/04-components/form-item/form-item~select.yml b/src/patterns/04-components/form-item/form-item~select.yml
new file mode 100644
index 0000000000000000000000000000000000000000..61bb9e311c54895b6b878c2c4a87e4dee3ee2665
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~select.yml
@@ -0,0 +1,23 @@
+---
+type: 'select'
+name: 'select'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-select">Select</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: |-
+ <select class=" form-item__select" id="edit-select">
+ <option>Option One</option>
+ <option>Option Two</option>
+ <option>Option Three</option>
+ <option>Option Four</option>
+ <option>Option Five</option>
+ <option disabled>Disabled Option</option>
+ </select>
diff --git a/src/patterns/04-components/form-item/form-item~telephone.yml b/src/patterns/04-components/form-item/form-item~telephone.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d156a4982e5454b5d15866aa62e82ea77928f6c7
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~telephone.yml
@@ -0,0 +1,15 @@
+---
+type: 'tel'
+name: 'tel'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-tel">Telephone</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__tel" id="edit-tel" type="tel" size="60" maxlength="128">'
diff --git a/src/patterns/04-components/form-item/form-item~textfield.yml b/src/patterns/04-components/form-item/form-item~textfield.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9e268b5da52e918ab9e158bb0efccd2261acdd04
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~textfield.yml
@@ -0,0 +1,15 @@
+---
+type: 'textfield'
+name: 'textfield'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-textfield">Textfield</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__text" id="edit-textfield" type="text" size="60" maxlength="128" placeholder="Placeholder">'
diff --git a/src/patterns/04-components/form-item/form-item~time.yml b/src/patterns/04-components/form-item/form-item~time.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8c02838696baa2e5cec73ab6d46d9b97c59d3348
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~time.yml
@@ -0,0 +1,15 @@
+---
+type: 'time'
+name: 'time'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-time">Time</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="form-item__time" id="edit-time" type="time" size="12" placeholder="hh:mm:ss" step="1">'
diff --git a/src/patterns/04-components/form-item/form-item~url.yml b/src/patterns/04-components/form-item/form-item~url.yml
new file mode 100644
index 0000000000000000000000000000000000000000..71b94a6adbdba9b234f50132742356fb845a32fd
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~url.yml
@@ -0,0 +1,15 @@
+---
+type: 'url'
+name: 'url'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-url">URL</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__url" id="edit-url" type="text" size="60" placeholder="Placeholder">'
diff --git a/src/patterns/04-components/form-item/form-item~week.yml b/src/patterns/04-components/form-item/form-item~week.yml
new file mode 100644
index 0000000000000000000000000000000000000000..194b479197e037c52937326011eac53eab6836e7
--- /dev/null
+++ b/src/patterns/04-components/form-item/form-item~week.yml
@@ -0,0 +1,15 @@
+---
+type: 'week'
+name: 'week'
+errors: ''
+is_disabled: false
+is_required: false
+is_full_width: false
+label_display: 'before'
+label: '<label class="form-item__label" for="edit-week">Week</label>'
+description_display: 'after'
+description:
+ content: 'The description for this form field'
+prefix: ''
+suffix: ''
+children: '<input class="uw-input form-item__week" id="edit-week" type="week" size="12">'
diff --git a/src/patterns/04-components/form-item/img/select-arrows.svg b/src/patterns/04-components/form-item/img/select-arrows.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c4e15fc1d923c1dbd4d50ba23e77cbe0c3606887
--- /dev/null
+++ b/src/patterns/04-components/form-item/img/select-arrows.svg
@@ -0,0 +1 @@
+<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m10 1-5 7h10zm0 18 5-7h-10z" fill="#aeb0b5"/></svg>
\ No newline at end of file
diff --git a/src/patterns/04-components/image/_image.scss b/src/patterns/04-components/image/_image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dc7ca84f970cc7c5684f5cae85a3fc3e5d3eb352
--- /dev/null
+++ b/src/patterns/04-components/image/_image.scss
@@ -0,0 +1,21 @@
+.block-uw-cbl-image{
+ .uw-image {
+ display:flex;
+ flex-flow: column;
+ width:100%;
+ img{
+ display: block;
+ }
+ &__sized-image {
+ &--center {
+ align-self: center;
+ }
+ &--left {
+ align-self: flex-start;
+ }
+ &--right {
+ align-self: flex-end;
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/image/image.twig b/src/patterns/04-components/image/image.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ac4bdaa8d3434587e01288214e30e4580d585b15
--- /dev/null
+++ b/src/patterns/04-components/image/image.twig
@@ -0,0 +1,27 @@
+{% if image.type == 'full' %}
+ {% set image_class = 'uw-image__full-width' %}
+{% else %}
+ {% set image_class = 'uw-image__sized-image uw-image__sized-image--' ~ image.alignment %}
+{% endif %}
+
+<div class="uw-image">
+ <div class="uw-image__wrapper {{ image_class }}">
+
+ {% if image.type == 'full' %}
+{# {% include '@components/responsive-image/responsive-image.twig' with {#}
+{# 'sources': image.image.sources,#}
+{# 'img_element': image.image.img_element['#uri'],#}
+{# 'alt': image.alt,#}
+{# } %}#}
+ {% else %}
+ <img src="{{ image.image.url }}" width="{{ image.image.width }}" height="{{ image.image.height }}" alt="{{ image.alt }}" />
+ {% endif %}
+ {% if image.caption %}
+ <div class="uw-image__caption" {% if image.image.width %} style="width:{{ image.image.width }}px;"{% endif %}>
+ {% include '@components/caption/caption.twig' with {
+ 'caption': image.caption
+ } %}
+ </div>
+ {% endif %}
+ </div>
+</div>
diff --git a/src/patterns/04-components/image/image.yml b/src/patterns/04-components/image/image.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/patterns/04-components/label/label.yml b/src/patterns/04-components/label/label.yml
new file mode 100644
index 0000000000000000000000000000000000000000..22456dee5e90b82103d6cb7a14edaec5d17a702d
--- /dev/null
+++ b/src/patterns/04-components/label/label.yml
@@ -0,0 +1,2 @@
+---
+label: 'This is a label'
diff --git a/src/patterns/04-components/svg/_svg.scss b/src/patterns/04-components/svg/_svg.scss
new file mode 100644
index 0000000000000000000000000000000000000000..345c367cece659c31ee64713015f273ca6f564b2
--- /dev/null
+++ b/src/patterns/04-components/svg/_svg.scss
@@ -0,0 +1,5 @@
+.uw-svg {
+ .house {
+ fill: #fff;
+ }
+}
diff --git a/src/patterns/04-components/svg/_svg.twig b/src/patterns/04-components/svg/_svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..88ba2fcb36dd2206cc24a49e5e64cb2590583348
--- /dev/null
+++ b/src/patterns/04-components/svg/_svg.twig
@@ -0,0 +1,6 @@
+<span class="uw-icon uw-svg uw-svg__{{ svg_name }}">
+{# {% include '@components/svg/icons/_' ~ svg_name ~ '.svg.twig' %}#}
+
+ {% include '@components/svg/icons/_instagram.svg.twig' %}
+
+</span>
diff --git a/src/patterns/04-components/svg/icons/_IE.svg.twig b/src/patterns/04-components/svg/icons/_IE.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..1a908788733002cf98ed6e52bf14e643a2cce9ae
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_IE.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>IE</title>
+<path d="M22.944 19.651h7.377c0.057-0.512 0.080-1.034 0.080-1.569 0-2.507-0.673-4.858-1.848-6.883 1.215-3.228 1.172-5.968-0.455-7.606-1.547-1.54-5.697-1.29-10.388 0.787-0.347-0.026-0.697-0.040-1.051-0.040-6.439 0-11.841 4.431-13.335 10.402 2.020-2.586 4.145-4.461 6.984-5.826-0.258 0.242-1.764 1.739-2.018 1.993-7.486 7.484-9.847 17.26-7.306 19.8 1.931 1.93 5.43 1.604 9.449-0.364 1.869 0.952 3.984 1.488 6.226 1.488 6.035 0 11.15-3.885 13.003-9.295h-7.433c-1.023 1.887-3.023 3.171-5.319 3.171s-4.296-1.284-5.319-3.171c-0.455-0.852-0.716-1.83-0.716-2.864v-0.023h12.071zM10.884 16.025c0.171-3.035 2.694-5.456 5.774-5.456s5.604 2.421 5.774 5.456h-11.548zM28.030 5.119c1.048 1.059 1.021 3.007 0.125 5.438-1.535-2.341-3.766-4.186-6.4-5.239 2.816-1.207 5.106-1.367 6.274-0.199zM2.921 30.227c-1.337-1.337-0.934-4.144 0.788-7.526 1.072 3.008 3.161 5.534 5.854 7.161-2.982 1.354-5.423 1.584-6.643 0.365z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig b/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6e284f91460b738d02f689fb2874575d1e30d09c
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>add-to-calendar</title>
+<path d="M9.573 10.021c0.735 0 1.332-0.597 1.332-1.333h-0.001v-4.362c0-0.736-0.597-1.332-1.332-1.332s-1.332 0.596-1.331 1.332v4.362c0 0.736 0.596 1.333 1.332 1.333zM21.908 10.021c0.735 0 1.331-0.597 1.331-1.333v-4.362c0-0.736-0.596-1.332-1.332-1.332-0.737 0-1.334 0.596-1.333 1.332v4.362c0 0.736 0.597 1.333 1.334 1.333zM29.001 21.571h-4.53v-4.531c0-0.002 0-0.002-0.006 0l-2.052 0.031c0 0-0.001-0.002-0.002 0l0.001 4.5h-4.37l0.030 2.062 4.34-0.004v4.34l2.060 0.033v-4.373h4.501l0.028-2.051c0.002-0.006 0.002-0.006 0-0.007zM29.517 17.527v-8.495c-0.001-1.741-1.302-3.149-2.907-3.149l-0-0h-2.619v2.69c0 1.15-0.932 2.084-2.083 2.084-0.575 0-1.097-0.232-1.474-0.612-0.376-0.377-0.611-0.9-0.611-1.473v-2.689h-8.167v2.69c0 1.15-0.931 2.084-2.082 2.084-0.574 0-1.096-0.232-1.474-0.612-0.376-0.377-0.61-0.899-0.61-1.472v-2.69h-2.56c-1.606 0-2.908 1.409-2.908 3.149v16.961c0 1.739 1.301 3.151 2.908 3.151h13.819c1.282 0.871 2.829 1.381 4.492 1.381 4.421 0 8.017-3.599 8.017-8.019 0-1.88-0.651-3.611-1.739-4.98zM23.489 29.11c-3.637 0-6.601-2.963-6.601-6.602s2.963-6.6 6.601-6.6c3.64 0 6.601 2.961 6.601 6.6s-2.96 6.602-6.601 6.602z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_android.svg.twig b/src/patterns/04-components/svg/icons/_android.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b316969573c5e0566347a4270e84c99bfb5e030c
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_android.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>android</title>
+<path d="M27 10c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM3 10c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM6 23c0 1.657 1.343 3 3 3h1v4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4h2v4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4h1c1.657 0 3-1.343 3-3v-11h-18v11zM18.706 2.797l1.266-2.431c0.064-0.122 0.016-0.274-0.106-0.337s-0.274-0.016-0.337 0.106l-1.285 2.468c-1.006-0.389-2.1-0.603-3.244-0.603s-2.237 0.214-3.244 0.603l-1.285-2.468c-0.063-0.122-0.215-0.17-0.337-0.106s-0.17 0.215-0.106 0.337l1.266 2.432c-2.832 1.282-4.883 3.987-5.238 7.203h17.889c-0.355-3.216-2.406-5.921-5.238-7.203zM11 8.45c-0.801 0-1.45-0.649-1.45-1.45s0.649-1.45 1.45-1.45 1.45 0.649 1.45 1.45c-0 0.801-0.649 1.45-1.45 1.45zM19 8.45c-0.801 0-1.45-0.649-1.45-1.45s0.649-1.45 1.45-1.45 1.45 0.649 1.45 1.45c0 0.801-0.649 1.45-1.45 1.45z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_apple.svg.twig b/src/patterns/04-components/svg/icons/_apple.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..59861c32395e838d570362be61b3bd758a39015f
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_apple.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>apple</title>
+<path d="M24.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM20.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_arrow-right.svg.twig b/src/patterns/04-components/svg/icons/_arrow-right.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0d8a63c0bd9bfaa5610e22973e882cf9ac9cf389
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_arrow-right.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>arrow-right</title>
+<path d="M12 24l8-8-8-8z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_arrow.svg.twig b/src/patterns/04-components/svg/icons/_arrow.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e8a70318dae053dcfc58406174a371d719afa694
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_arrow.svg.twig
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<path d="M23.702 15.419l-12.925-12.926c-0.312-0.309-0.732-0.485-1.168-0.485-0.438 0-0.858 0.176-1.17 0.485-0.653 0.657-0.653 1.72 0 2.369l11.72 11.724-11.72 11.724c-0.653 0.653-0.653 1.712 0 2.366 0.648 0.65 1.691 0.65 2.339 0l12.925-12.923c0.309-0.312 0.481-0.729 0.481-1.167 0-0.434-0.172-0.858-0.481-1.166z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_banner_pause.svg.twig b/src/patterns/04-components/svg/icons/_banner_pause.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..aeb4639fab7f29852e75cb6bc3f7f8aadb946b81
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_banner_pause.svg.twig
@@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>pause</title>
+ <rect x="9" y="8.2" class="uw-pause-svg" width="4" height="15"/>
+ <rect x="16.8" y="8.2" class="uw-pause-svg" width="4" height="15"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_banner_play.svg.twig b/src/patterns/04-components/svg/icons/_banner_play.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8574ca5b2efff9625f8ab691f82551e84ef8589e
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_banner_play.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>play</title>
+<polygon class="uw-play-svg" points="23.3,15.9 9.2,7.7 9.2,24 "/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_binoculars.svg.twig b/src/patterns/04-components/svg/icons/_binoculars.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..389525038d6f422b141e82f937e8a2add516e34a
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_binoculars.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>binoculars</title>
+<path d="M30 14h-2l-2-10h-2.5l0.5-4h-6l0.5 4h-5l0.5-4h-6l0.5 4h-2.5l-2 10h-2l-2 16v2h12v-18h2v-2h4v2h2v18h12v-2z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_bubble.svg.twig b/src/patterns/04-components/svg/icons/_bubble.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c5b9a3a5c5014ed41af93248b12c4910ce3d6473
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_bubble.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>bubble</title>
+<path d="M26.125 2h-20.25c-3.231 0-5.875 2.644-5.875 5.875v22.125l6-6h20.125c3.231 0 5.875-2.644 5.875-5.875v-10.25c0-3.231-2.644-5.875-5.875-5.875zM28 7.875v0.375h-24v-0.375c0-0.042 0.002-0.084 0.005-0.125h23.99c0.003 0.041 0.005 0.083 0.005 0.125zM27.995 18.25h-23.995v-0.5h24v0.375c0 0.042-0.002 0.084-0.005 0.125zM4 20v-0.25h23.044c-0.273 0.158-0.588 0.25-0.919 0.25h-22.125zM4 19.25v-0.5h23.888c-0.066 0.18-0.16 0.349-0.275 0.5h-23.613zM4 17.25v-0.5h24v0.5h-24zM4 16.25v-0.5h24v0.5h-24zM4 15.25v-0.5h24v0.5h-24zM4 14.25v-0.5h24v0.5h-24zM4 13.25v-0.5h24v0.5h-24zM4 12.25v-0.5h24v0.5h-24zM4 11.25v-0.5h24v0.5h-24zM4 10.25v-0.5h24v0.5h-24zM4 9.25v-0.5h24v0.5h-24zM26.125 6c0.331 0 0.646 0.092 0.919 0.25h-22.089c0.274-0.158 0.588-0.25 0.919-0.25h20.25zM27.613 6.75c0.116 0.151 0.209 0.32 0.275 0.5h-23.776c0.066-0.18 0.16-0.349 0.275-0.5h23.226z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_calendar.svg.twig b/src/patterns/04-components/svg/icons/_calendar.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f5beddf0158f7c29b1c895f041ffa9fddc0d0036
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_calendar.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>calendar</title>
+<path d="M10 12h4v4h-4zM16 12h4v4h-4zM22 12h4v4h-4zM4 24h4v4h-4zM10 24h4v4h-4zM16 24h4v4h-4zM10 18h4v4h-4zM16 18h4v4h-4zM22 18h4v4h-4zM4 18h4v4h-4zM26 0v2h-4v-2h-14v2h-4v-2h-4v32h30v-32h-4zM28 30h-26v-22h26v22z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_chevron.svg.twig b/src/patterns/04-components/svg/icons/_chevron.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..cfe2d6669cdb9c988aa7aa9302b7548cf19bd4f5
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_chevron.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="37" height="32" viewBox="0 0 37 32">
+<title>chevron</title>
+<path d="M15.262 0.667l11.869 15.986-11.869 16.018h8.337l11.865-16.018-11.865-15.986zM0.004 0.667l11.865 15.986-11.865 16.018h8.34l11.858-16.018-11.858-15.986z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_chrome.svg.twig b/src/patterns/04-components/svg/icons/_chrome.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c5a85cb68d230cf45687a54e147e56c58574480f
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_chrome.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chrome</title>
+<path d="M8.071 13.954l-4.579-7.931c2.932-3.671 7.445-6.023 12.508-6.023 5.857 0 10.978 3.148 13.767 7.844h-13.055c-0.235-0.020-0.472-0.031-0.711-0.031-3.809 0-7.018 2.614-7.929 6.142zM21.728 10.156h9.171c0.711 1.81 1.101 3.781 1.101 5.844 0 8.776-7.066 15.9-15.818 15.998l6.544-11.334c0.921-1.324 1.462-2.932 1.462-4.664 0-2.287-0.943-4.357-2.459-5.844zM10.188 16c0-3.205 2.607-5.813 5.813-5.813s5.813 2.607 5.813 5.813c0 3.205-2.608 5.813-5.813 5.813s-5.813-2.608-5.813-5.813zM18.193 23.889l-4.581 7.934c-7.704-1.153-13.613-7.797-13.613-15.822 0-2.851 0.746-5.526 2.053-7.845l6.532 11.314c1.308 2.785 4.14 4.718 7.415 4.718 0.759 0 1.495-0.104 2.193-0.299z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_close.svg.twig b/src/patterns/04-components/svg/icons/_close.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7e2226414059604d7a2f9ed1dfdc3623aadcf329
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_close.svg.twig
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>close</title>
+<path d="M27.312 7.632l-9.035 9.035 9.035 9.035-2.278 2.278-9.035-9.035-9.035 9.035-2.278-2.278 9.035-9.035-9.035-9.035 2.278-2.278 9.035 9.035 9.035-9.035z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_cloud.svg.twig b/src/patterns/04-components/svg/icons/_cloud.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a257ba96d9bfdff6bb4094c908295d53e99893d1
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_cloud.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>cloud</title>
+<path d="M32 20.548c0-2.565-1.771-4.716-4.156-5.296-0.101-4.022-3.389-7.252-7.433-7.252-2.369 0-4.477 1.109-5.839 2.835-0.764-0.987-1.959-1.624-3.303-1.624-2.307 0-4.176 1.871-4.176 4.179 0 0.201 0.015 0.399 0.043 0.592-0.351-0.063-0.711-0.098-1.080-0.098-3.344-0-6.054 2.712-6.054 6.058s2.71 6.058 6.054 6.058l20.508-0c3.004-0.006 5.438-2.444 5.438-5.451z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_comment.svg.twig b/src/patterns/04-components/svg/icons/_comment.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..2cfb042a47f2b4a18cbe9d83e83e1b33795c8e2f
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_comment.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>comment</title>
+<path d="M26.606 2.221h-21.245c-1.722 0-3.125 1.402-3.125 3.125v14.37c0 1.724 1.402 3.124 3.125 3.124h2.087l-2.744 8.918 9.602-8.918h12.3c1.722 0 3.125-1.401 3.125-3.124v-14.37c0-1.722-1.402-3.124-3.125-3.124z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_connection.svg.twig b/src/patterns/04-components/svg/icons/_connection.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..84ad66bb44fdcf5d358af32cee8f223527ce7b4c
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_connection.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 40 32">
+<title>connection</title>
+<path d="M20 18c3.308 0 6.308 1.346 8.481 3.519l-2.827 2.827c-1.449-1.449-3.449-2.346-5.654-2.346s-4.206 0.897-5.654 2.346l-2.827-2.827c2.173-2.173 5.173-3.519 8.481-3.519zM5.858 15.858c3.777-3.777 8.8-5.858 14.142-5.858s10.365 2.080 14.142 5.858l-2.828 2.828c-3.022-3.022-7.040-4.686-11.314-4.686s-8.292 1.664-11.314 4.686l-2.828-2.828zM30.899 4.201c3.334 1.41 6.329 3.429 8.899 6v0l-2.828 2.828c-4.533-4.533-10.56-7.029-16.971-7.029s-12.438 2.496-16.971 7.029l-2.828-2.828c2.571-2.571 5.565-4.589 8.899-6 3.453-1.461 7.12-2.201 10.899-2.201s7.446 0.741 10.899 2.201zM18 28c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_correct.svg.twig b/src/patterns/04-components/svg/icons/_correct.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..33206c9ddde9ce4792982bf90dc8166fcacce15a
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_correct.svg.twig
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 216 146">
+ <path fill="#fff" d="M168.86 37.966l-11.08-11.08c-1.52-1.52-3.367-2.28-5.54-2.28-2.172 0-4.02.76-5.54 2.28L93.254 80.414 69.3 56.38c-1.52-1.522-3.367-2.282-5.54-2.282-2.172 0-4.02.76-5.54 2.28L47.14 67.46c-1.52 1.522-2.28 3.37-2.28 5.542 0 2.172.76 4.02 2.28 5.54l29.493 29.493 11.08 11.08c1.52 1.52 3.368 2.28 5.54 2.28 2.173 0 4.02-.76 5.54-2.28l11.082-11.08L168.86 49.05c1.52-1.52 2.283-3.37 2.283-5.54 0-2.174-.76-4.02-2.28-5.54z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_css3.svg.twig b/src/patterns/04-components/svg/icons/_css3.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..493410cd5bff8ed968d3e2612e8fcfee9a6b64c7
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_css3.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>css3</title>
+<path d="M4.762 1.516l-1.074 5.373h21.867l-0.684 3.47h-21.881l-1.059 5.372h21.865l-1.219 6.127-8.813 2.919-7.638-2.919 0.523-2.658h-5.372l-1.278 6.448 12.632 4.834 14.563-4.834 4.805-24.133z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_dropbutton-arrow-down.svg.twig b/src/patterns/04-components/svg/icons/_dropbutton-arrow-down.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..70305b6771ae9990dc079935ebf5a1094e7fc625
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_dropbutton-arrow-down.svg.twig
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 444.8 444.8">
+ <path fill="#fff" d="M248.1 352L434 165.9c7.2-6.9 10.8-15.4 10.8-25.7 0-10.3-3.6-18.8-10.8-25.7l-21.4-21.7c-7-7-15.6-10.6-25.7-10.6-9.9 0-18.6 3.5-26 10.6L222.4 231.5 83.7 92.8c-7-7-15.6-10.6-25.7-10.6-9.9 0-18.6 3.5-26 10.6l-21.4 21.7c-7 7-10.6 15.6-10.6 25.7s3.5 18.7 10.6 25.7L196.4 352c7.4 7 16.1 10.6 26 10.6 10.1 0 18.7-3.5 25.7-10.6z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_dropbutton-arrow-up.svg.twig b/src/patterns/04-components/svg/icons/_dropbutton-arrow-up.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7bf9fa823e4f2c2b781664af3b62a07dca710feb
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_dropbutton-arrow-up.svg.twig
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-83 174.2 444.8 444.8">
+ <path fill="#fff" d="M113.7,267L-72.2,453.1C-79.4,460-83,468.5-83,478.8c0,10.3,3.6,18.8,10.8,25.7l21.4,21.7c7,7,15.6,10.6,25.7,10.6 c9.9,0,18.6-3.5,26-10.6l138.5-138.7l138.7,138.7c7,7,15.6,10.6,25.7,10.6c9.9,0,18.6-3.5,26-10.6l21.4-21.7 c7-7,10.6-15.6,10.6-25.7c0-10.1-3.5-18.7-10.6-25.7L165.4,267c-7.4-7-16.1-10.6-26-10.6C129.3,256.4,120.7,259.9,113.7,267 L113.7,267z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_envelope.svg.twig b/src/patterns/04-components/svg/icons/_envelope.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c15321a32b2b4280bb82ca4bc2b27df48c8c5526
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_envelope.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>envelope</title>
+<path d="M30 4.667h-28c-1.1 0-2 0.9-2 2v20c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-20c0-1.1-0.9-2-2-2zM28 8.667v1.438l-12 7.071-12-7.071v-1.438h24zM4 24.667v-11.080l12 7.071 12-7.071v11.080h-24z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_equalizer.svg.twig b/src/patterns/04-components/svg/icons/_equalizer.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4a09be17503d1ba9166406b301613b0ea4c27940
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_equalizer.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>equalizer</title>
+<path d="M14 4v-0.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-6v4h6v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h18v-4h-18zM8 8v-4h4v4h-4zM26 13.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-18v4h18v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h6v-4h-6v-0.5zM20 18v-4h4v4h-4zM14 23.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-6v4h6v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h18v-4h-18v-0.5zM8 28v-4h4v4h-4z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_facebook-box.svg.twig b/src/patterns/04-components/svg/icons/_facebook-box.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b8bb15c787b4399f33809d112e11f6b78336404e
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_facebook-box.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>facebook-box</title>
+<path d="M25.951 2.351h-19.936c-2.404 0-4.352 1.947-4.352 4.351v19.936c0 2.404 1.948 4.353 4.352 4.353h19.936c2.403 0 4.352-1.949 4.352-4.353v-19.936c0-2.404-1.949-4.351-4.352-4.351zM24.221 11.263l-1.899 0.001c-1.491 0-1.781 0.71-1.781 1.749v2.294h3.555l-0.463 3.591h-3.093v9.212h-3.708v-9.212h-3.101v-3.591h3.101v-2.649c0-3.075 1.876-4.747 4.618-4.747 1.315 0 2.442 0.097 2.77 0.142v3.21z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_facebook.svg.twig b/src/patterns/04-components/svg/icons/_facebook.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..80eadf05b1b53a9232f8b0ad9f2789d166087fca
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_facebook.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>facebook</title>
+<path d="M22.311 17.806l0.672-5.215h-5.164v-3.332c0-1.509 0.421-2.54 2.585-2.54l2.759-0.001v-4.664c-0.477-0.065-2.113-0.206-4.024-0.206-3.982 0-6.708 2.429-6.708 6.895v3.847h-4.505v5.217h4.505v13.38h5.386v-13.38l4.493 0.001z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_filter.svg.twig b/src/patterns/04-components/svg/icons/_filter.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..649236f611f53579448149e914cac3916b9a591a
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_filter.svg.twig
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="25" height="32" viewBox="0 0 25 32">
+<path d="M25.054 5.268c0.179 0.429 0.089 0.929-0.25 1.25l-8.804 8.804v13.25c0 0.464-0.286 0.875-0.696 1.054-0.143 0.054-0.304 0.089-0.446 0.089-0.304 0-0.589-0.107-0.804-0.339l-4.571-4.571c-0.214-0.214-0.339-0.5-0.339-0.804v-8.679l-8.804-8.804c-0.339-0.321-0.429-0.821-0.25-1.25 0.179-0.411 0.589-0.696 1.054-0.696h22.857c0.464 0 0.875 0.286 1.054 0.696z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_filter1.svg.twig b/src/patterns/04-components/svg/icons/_filter1.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..465b591396ea064dc286ffc01a5e1d5d67899020
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_filter1.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>filter1</title>
+<path d="M16 0c-8.837 0-16 2.239-16 5v3l12 12v10c0 1.105 1.791 2 4 2s4-0.895 4-2v-10l12-12v-3c0-2.761-7.163-5-16-5zM2.95 4.338c0.748-0.427 1.799-0.832 3.040-1.171 2.748-0.752 6.303-1.167 10.011-1.167s7.262 0.414 10.011 1.167c1.241 0.34 2.292 0.745 3.040 1.171 0.494 0.281 0.76 0.519 0.884 0.662-0.124 0.142-0.391 0.38-0.884 0.662-0.748 0.427-1.8 0.832-3.040 1.171-2.748 0.752-6.303 1.167-10.011 1.167s-7.262-0.414-10.011-1.167c-1.24-0.34-2.292-0.745-3.040-1.171-0.494-0.282-0.76-0.519-0.884-0.662 0.124-0.142 0.391-0.38 0.884-0.662z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_filter2.svg.twig b/src/patterns/04-components/svg/icons/_filter2.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9a1d920849eceae2a4e1ff1733ce1d873bcc9a26
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_filter2.svg.twig
@@ -0,0 +1,11 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 32 32" xml:space="preserve">
+<path d="M22.4,4.8c-3,0-5.4,2.5-5.4,5.4c-0.1,3.1,2.4,5.4,5.4,5.4s5.4-2.5,5.4-5.4S25.4,4.8,22.4,4.8z M22.4,12.9
+ c-1.5,0-2.7-1.2-2.7-2.7s1.2-2.7,2.7-2.7s2.7,1.2,2.7,2.7S23.9,12.9,22.4,12.9z"/>
+ <rect x="4.1" y="8.9" width="13.1" height="2.8"/>
+ <g>
+ <path d="M9.7,25.2c3,0,5.4-2.5,5.4-5.4c0.1-3.1-2.4-5.4-5.4-5.4s-5.4,2.5-5.4,5.4S6.8,25.2,9.7,25.2z M9.7,17.1
+ c1.5,0,2.7,1.2,2.7,2.7s-1.2,2.7-2.7,2.7S7,21.3,7,19.8S8.3,17.1,9.7,17.1z"/>
+ <rect x="14.8" y="18.4" width="13.1" height="2.8"/>
+ </g>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_finder.svg.twig b/src/patterns/04-components/svg/icons/_finder.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..969a54be4c400bc570e0207468df01b0f6e7fe7e
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_finder.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>finder</title>
+<path d="M16.031 24c-4.135 0-8.177-0.605-12.066-1.803l0.633-1.898c3.684 1.13 7.515 1.701 11.433 1.701 0.511 0 1.020-0.010 1.528-0.030 0.132-2.424 0.441-3.97 0.441-3.97s-2 0-6 0c0-5.469 1.869-10.314 3.904-13.969h-15.904v23.938h17.693c-0.146-1.428-0.197-2.777-0.192-3.995-0.488 0.017-0.978 0.026-1.469 0.026zM6 8h2v4h-2v-4zM32 4.031h-13.348c-0.061 0.1-0.122 0.2-0.183 0.303-1.2 2.018-2.154 4.086-2.835 6.147-0.569 1.723-0.947 3.445-1.13 5.144h6.402l-0.577 2.839c-0.010 0.050-0.255 1.339-0.381 3.342 2.558-0.254 5.069-0.756 7.516-1.507l0.633 1.898c-2.674 0.824-5.421 1.367-8.22 1.626-0.001 0.137-0.002 0.275-0.001 0.415 0.004 1.27 0.073 2.518 0.206 3.73h11.918v-23.938zM26 12h-2v-4h2v4zM18.352 32h2.443c-0.171-0.682-0.318-1.381-0.442-2.096-0.109-0.633-0.199-1.279-0.271-1.935h-2.389c0.132 1.293 0.342 2.65 0.659 4.031zM21.514 0h-3.012c-0.805 1.090-1.717 2.449-2.598 4.031h2.748c1.052-1.728 2.099-3.106 2.862-4.031z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_firefox.svg.twig b/src/patterns/04-components/svg/icons/_firefox.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3d678facb3ca0a4d70beeb8fcb06c3245aa0e846
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_firefox.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>firefox</title>
+<path d="M31.954 10.442l-0.371 2.377c0 0-0.53-4.402-1.179-6.047-0.995-2.521-1.438-2.501-1.441-2.498 0.667 1.694 0.546 2.604 0.546 2.604s-1.181-3.219-4.303-4.243c-3.459-1.134-5.33-0.824-5.547-0.765-0.033-0-0.064-0-0.095-0 0.026 0.002 0.050 0.005 0.076 0.007-0.001 0.001-0.003 0.001-0.003 0.002 0.014 0.017 3.822 0.666 4.497 1.594 0 0-1.617 0-3.227 0.464-0.073 0.021 5.923 0.749 7.148 6.74 0 0-0.657-1.371-1.47-1.604 0.535 1.626 0.397 4.712-0.112 6.245-0.066 0.197-0.133-0.853-1.135-1.305 0.321 2.301-0.019 5.952-1.616 6.957-0.124 0.078 1.001-3.603 0.226-2.18-4.46 6.838-9.731 3.155-12.101 1.535 1.215 0.264 3.52-0.041 4.541-0.8 0.001-0.001 0.002-0.002 0.004-0.003 1.108-0.758 1.765-1.311 2.354-1.18s0.982-0.46 0.524-0.985c-0.459-0.526-1.572-1.249-3.079-0.855-1.063 0.278-2.379 1.454-4.389 0.264-1.543-0.914-1.688-1.673-1.702-2.199 0.038-0.186 0.086-0.361 0.143-0.52 0.178-0.496 0.716-0.646 1.015-0.764 0.508 0.087 0.946 0.246 1.405 0.481 0.006-0.153 0.008-0.356-0.001-0.586 0.044-0.088 0.017-0.352-0.054-0.674-0.041-0.322-0.107-0.655-0.211-0.959 0-0 0.001-0 0.001-0 0.002-0.001 0.003-0.001 0.005-0.002s0.005-0.004 0.007-0.006c0-0.001 0.001-0.001 0.001-0.002 0.003-0.004 0.005-0.008 0.006-0.015 0.032-0.144 0.376-0.423 0.804-0.722 0.383-0.268 0.834-0.553 1.19-0.774 0.314-0.195 0.554-0.34 0.605-0.378 0.019-0.015 0.042-0.032 0.068-0.051 0.005-0.004 0.009-0.007 0.014-0.011 0.003-0.002 0.006-0.005 0.009-0.007 0.169-0.135 0.421-0.389 0.474-0.924 0-0.001 0-0.002 0-0.004 0.002-0.016 0.003-0.032 0.004-0.048 0.001-0.011 0.002-0.023 0.002-0.034 0-0.009 0.001-0.018 0.001-0.027 0.001-0.021 0.002-0.043 0.002-0.065 0-0.001 0-0.002 0-0.004 0.001-0.052-0-0.106-0.003-0.163-0.002-0.032-0.004-0.060-0.009-0.086-0-0.001-0.001-0.003-0.001-0.004-0.001-0.003-0.001-0.005-0.002-0.008-0.001-0.005-0.002-0.009-0.004-0.013-0-0.001-0-0.001-0.001-0.001-0.002-0.005-0.004-0.010-0.005-0.014-0-0-0-0-0-0.001-0.055-0.128-0.26-0.177-1.108-0.191-0.001-0-0.002-0-0.002-0v0c-0.346-0.006-0.798-0.006-1.391-0.004-1.039 0.004-1.613-1.016-1.797-1.41 0.251-1.389 0.977-2.379 2.17-3.051 0.023-0.013 0.018-0.023-0.009-0.031 0.233-0.141-2.82-0.004-4.225 1.782-1.247-0.31-2.333-0.289-3.269-0.069-0.18-0.005-0.404-0.027-0.67-0.083-0.623-0.564-1.514-1.606-1.562-2.85 0 0-0.003 0.002-0.008 0.006-0.001-0.012-0.002-0.024-0.002-0.036 0 0-1.897 1.458-1.613 5.434-0.001 0.064-0.002 0.125-0.004 0.184-0.514 0.696-0.768 1.282-0.787 1.411-0.455 0.926-0.917 2.32-1.292 4.437 0 0 0.263-0.833 0.79-1.777-0.388 1.188-0.693 3.036-0.514 5.808 0 0 0.047-0.615 0.215-1.5 0.131 1.719 0.704 3.841 2.152 6.337 2.78 4.791 7.052 7.211 11.775 7.582 0.839 0.069 1.689 0.071 2.544 0.006 0.079-0.006 0.157-0.011 0.236-0.018 0.968-0.068 1.942-0.214 2.914-0.449 13.287-3.212 11.842-19.256 11.842-19.256z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_github-box.svg.twig b/src/patterns/04-components/svg/icons/_github-box.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..303a4ab061204c24cf135cc73cf9eff9f91cae0d
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_github-box.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>github-box</title>
+<path d="M8.233 23.73c0 0.845 0.715 1.268 2.146 1.268 1.252 0 1.878-0.439 1.878-1.317 0-0.829-0.683-1.244-2.048-1.244-1.317-0-1.975 0.43-1.975 1.292zM26.667 0h-21.333c-2.934 0-5.334 2.4-5.334 5.334v21.332c0 2.936 2.4 5.334 5.334 5.334h21.333c2.933 0 5.333-2.398 5.333-5.334v-21.332c0-2.934-2.399-5.334-5.333-5.334zM14.867 12.781c-0.228 0.081-0.553 0.171-0.975 0.268 0.13 0.374 0.195 0.723 0.195 1.049 0 1.040-0.313 1.947-0.939 2.719s-1.435 1.231-2.426 1.378c-0.65 0.098-0.975 0.447-0.975 1.049 0 0.211 0.106 0.423 0.317 0.634 0.276 0.309 0.683 0.504 1.219 0.585 2.325 0.358 3.487 1.325 3.487 2.902 0 2.52-1.504 3.78-4.511 3.78-1.236 0-2.252-0.22-3.048-0.658-1.008-0.553-1.512-1.422-1.512-2.609 0-1.366 0.756-2.3 2.268-2.804v-0.049c-0.553-0.341-0.829-0.862-0.829-1.561 0-0.91 0.26-1.48 0.78-1.707v-0.049c-0.52-0.179-0.984-0.585-1.39-1.22-0.455-0.683-0.683-1.414-0.683-2.195 0-1.171 0.415-2.146 1.244-2.926 0.797-0.732 1.748-1.097 2.853-1.097 0.797 0 1.536 0.195 2.219 0.585 0.78 0 1.683-0.195 2.707-0.585l-0 2.512zM18.818 21.219h-2.756c0.033-0.325 0.049-0.878 0.049-1.658v-7.584c0-0.764-0.016-1.293-0.049-1.585h2.756c-0.033 0.309-0.049 0.821-0.049 1.536v7.486c0 0.829 0.016 1.431 0.049 1.805zM18.635 7.953c-0.333 0.358-0.728 0.536-1.183 0.536-0.471 0-0.874-0.179-1.207-0.536s-0.5-0.78-0.5-1.268c0-0.504 0.167-0.935 0.5-1.293s0.736-0.537 1.207-0.537c0.455 0 0.849 0.179 1.183 0.537s0.5 0.788 0.5 1.293c0 0.488-0.167 0.91-0.5 1.268zM26.303 20.901c-0.602 0.325-1.325 0.488-2.171 0.488-1.187 0-2.008-0.422-2.463-1.268-0.342-0.634-0.512-1.634-0.512-2.999v-4.365h0.024v-0.049l-0.366-0.024c-0.211 0-0.488 0.024-0.829 0.073v-2.365h1.195v-0.951c0-0.455-0.024-0.821-0.073-1.098h2.829c-0.048 0.309-0.073 0.658-0.073 1.049v1h2.121v2.365c-0.081 0-0.232-0.008-0.451-0.024s-0.427-0.025-0.622-0.025h-1.049v4.536c0 1.090 0.358 1.634 1.073 1.634 0.504 0 0.959-0.138 1.366-0.415v2.439zM10.038 12.513c-1.024 0-1.536 0.602-1.536 1.805 0 1.122 0.512 1.683 1.536 1.683 0.992 0 1.488-0.569 1.488-1.707 0-0.472-0.114-0.878-0.341-1.219-0.276-0.374-0.659-0.561-1.146-0.561z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_github.svg.twig b/src/patterns/04-components/svg/icons/_github.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..07112f3f24ed02f9bccdfe25a6643c2be262e55f
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_github.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>github</title>
+<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM25.502 25.502c-1.235 1.235-2.672 2.204-4.272 2.881-0.406 0.172-0.819 0.323-1.238 0.453v-2.398c0-1.26-0.432-2.188-1.297-2.781 0.542-0.052 1.039-0.125 1.492-0.219s0.932-0.229 1.438-0.406 0.958-0.388 1.359-0.633 0.786-0.563 1.156-0.953 0.68-0.833 0.93-1.328 0.448-1.089 0.594-1.781 0.219-1.456 0.219-2.289c0-1.615-0.526-2.99-1.578-4.125 0.479-1.25 0.427-2.609-0.156-4.078l-0.391-0.047c-0.271-0.031-0.758 0.083-1.461 0.344s-1.492 0.688-2.367 1.281c-1.24-0.344-2.526-0.516-3.859-0.516-1.344 0-2.625 0.172-3.844 0.516-0.552-0.375-1.075-0.685-1.57-0.93s-0.891-0.411-1.188-0.5-0.573-0.143-0.828-0.164-0.419-0.026-0.492-0.016-0.125 0.021-0.156 0.031c-0.583 1.479-0.635 2.839-0.156 4.078-1.052 1.135-1.578 2.51-1.578 4.125 0 0.833 0.073 1.596 0.219 2.289s0.344 1.286 0.594 1.781 0.56 0.938 0.93 1.328 0.755 0.708 1.156 0.953 0.854 0.456 1.359 0.633 0.984 0.313 1.438 0.406 0.95 0.167 1.492 0.219c-0.854 0.583-1.281 1.51-1.281 2.781v2.445c-0.472-0.14-0.937-0.306-1.394-0.5-1.6-0.677-3.037-1.646-4.272-2.881s-2.204-2.672-2.881-4.272c-0.7-1.655-1.055-3.414-1.055-5.23s0.355-3.575 1.055-5.23c0.677-1.6 1.646-3.037 2.881-4.272s2.672-2.204 4.272-2.881c1.655-0.7 3.415-1.055 5.23-1.055s3.575 0.355 5.23 1.055c1.6 0.677 3.037 1.646 4.272 2.881s2.204 2.672 2.881 4.272c0.7 1.655 1.055 3.415 1.055 5.23s-0.355 3.575-1.055 5.23c-0.677 1.6-1.646 3.037-2.881 4.272z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_home.svg.twig b/src/patterns/04-components/svg/icons/_home.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..615e06071f4908379ac2f6be5252da288490e145
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_home.svg.twig
@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
+ <circle class="bg-circle" cx="12" cy="11.9" r="11.6"/>
+ <path class="house" d="M15.9,6.6c0-0.2-0.2-0.4-0.4-0.4c0,0,0,0,0,0h-1.1c-0.2,0-0.4,0.2-0.4,0.4c0,0,0,0,0,0v1.1l-1.7-1.6
+ c-0.2-0.2-0.5-0.2-0.6,0l-5.8,5.2l0.6,0.8l0.9-0.8V18c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0h2.9c0.2,0,0.4-0.2,0.4-0.4c0,0,0,0,0,0
+ v-3.4h2V18c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0h2.9c0.2,0,0.4-0.2,0.4-0.4c0,0,0,0,0,0v-6.5l0.9,0.8l0.6-0.8l-2.2-2L15.9,6.6z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_home3.svg.twig b/src/patterns/04-components/svg/icons/_home3.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..63c21f67dfda7c6b1989d5cf39858ad39e81296e
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_home3.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>home3</title>
+<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_html5.svg.twig b/src/patterns/04-components/svg/icons/_html5.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a4a5df405ddffc5c1e91f9694a1b74c707b4d90a
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_html5.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>html5</title>
+<path d="M1.892 0l2.567 28.801 11.524 3.199 11.554-3.204 2.572-28.796h-28.216zM25.336 26.963l-9.288 2.574v0.015l-0.024-0.007-0.024 0.007v-0.015l-9.288-2.574-2.195-24.609h23.015l-2.195 24.609zM20.336 16.569l-0.408 4.58-3.944 1.065-3.933-1.060-0.252-2.82h-3.547l0.495 5.547 7.252 2.006 7.229-2.006 0.97-10.844h-12.874l-0.322-3.617h13.517l0.316-3.532h-17.694l0.953 10.681z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_ical.svg.twig b/src/patterns/04-components/svg/icons/_ical.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..42d5fd5967304b779afdc27e309ce69d102bbd70
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_ical.svg.twig
@@ -0,0 +1,8 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+ <title>Export this event to calendar</title>
+ <path d="M21.9,17.8v1.3c0,0.3-0.2,0.5-0.5,0.5h-4v4c0,0.3-0.2,0.5-0.5,0.5h-1.3c-0.3,0-0.5-0.2-0.5-0.5v-4H11
+ c-0.3,0-0.5-0.2-0.5-0.5v-1.3c0-0.3,0.2-0.5,0.5-0.5h4v-4c0-0.3,0.2-0.5,0.5-0.5h1.3c0.3,0,0.5,0.2,0.5,0.5v4h4
+ C21.5,17.3,21.9,17.5,21.9,17.8z M27.6,8.5V27c0,1.4-1.1,2.5-2.5,2.5H6.8c-1.4,0-2.5-1.1-2.5-2.5V8.5C4.3,7.1,5.4,6,6.8,6h2.5V3.2
+ c0-0.3,0.2-0.5,0.5-0.5h2.1c0.3,0,0.5,0.2,0.5,0.5v2.7h6.8V3.2c0-0.3,0.2-0.5,0.5-0.5h2.1c0.3,0,0.5,0.2,0.5,0.5v2.7h2.5
+ C26.5,5.9,27.6,7.1,27.6,8.5z M25.2,26.5V10.9H6.8v15.6c0,0.2,0.2,0.3,0.3,0.3h17.8C25,27,25.2,26.7,25.2,26.5z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_info-2.svg.twig b/src/patterns/04-components/svg/icons/_info-2.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..beb32d3c7474a59e9544f9f9ddfef5f04e6cdc8c
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_info-2.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>info-2</title>
+<path d="M14.688 12.667v-2.688h2.625v2.688h-2.625zM16 27.354q4.375 0 7.531-3.156t3.156-7.531-3.156-7.531-7.531-3.156-7.531 3.156-3.156 7.531 3.156 7.531 7.531 3.156zM16 3.354q5.5 0 9.406 3.906t3.906 9.406-3.906 9.406-9.406 3.906-9.406-3.906-3.906-9.406 3.906-9.406 9.406-3.906zM14.688 23.354v-8h2.625v8h-2.625z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_info.svg.twig b/src/patterns/04-components/svg/icons/_info.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..24172410c31841411618ea7b47f3e8ef4ec9d2ba
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_info.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>info</title>
+<path d="M14 9.5c0-0.825 0.675-1.5 1.5-1.5h1c0.825 0 1.5 0.675 1.5 1.5v1c0 0.825-0.675 1.5-1.5 1.5h-1c-0.825 0-1.5-0.675-1.5-1.5v-1zM20 24h-8v-2h2v-6h-2v-2h6v8h2zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_instagram-box.svg.twig b/src/patterns/04-components/svg/icons/_instagram-box.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0cbf40ebc308ae34e0252fa91944ec1c2b70879c
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_instagram-box.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>instagram-box</title>
+<path d="M18.629 13.87h1.885c0.415 0 0.751-0.339 0.751-0.752v-1.796c0-0.413-0.336-0.754-0.751-0.754h-1.885c-0.415 0-0.753 0.341-0.753 0.754v1.797c0 0.412 0.338 0.751 0.753 0.751zM15.819 13.919c1.852 0 3.353 1.453 3.353 3.246s-1.501 3.247-3.353 3.247c-1.851 0-3.352-1.453-3.352-3.247s1.501-3.246 3.352-3.246zM21.007 17.347c0 2.775-2.323 5.024-5.188 5.024s-5.187-2.249-5.187-5.024c0-0.499 0.077-0.977 0.216-1.431h-1.533v7.046c0 0.367 0.298 0.663 0.663 0.663h11.618c0.366 0 0.662-0.296 0.662-0.663v-7.046h-1.468c0.14 0.455 0.216 0.934 0.216 1.431zM19.617 14.012h1.884c0.415 0 0.751-0.338 0.751-0.751v-1.795c0-0.413-0.336-0.755-0.751-0.755h-1.884c-0.416 0-0.754 0.343-0.754 0.755v1.796c0 0.412 0.338 0.75 0.754 0.75zM25.787 2.357h-19.969c-2.408 0-4.359 1.951-4.359 4.361v19.968c0 2.406 1.951 4.359 4.359 4.359h19.969c2.408 0 4.359-1.953 4.359-4.359v-19.968c0-2.41-1.951-4.361-4.359-4.361zM24.146 23.403c0 1.177-0.963 2.14-2.141 2.14h-12.403c-1.177 0-2.142-0.961-2.142-2.139v-12.403c0-1.179 0.965-2.141 2.142-2.141h12.402c1.178 0 2.141 0.962 2.141 2.141v12.403h0.001z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_instagram.svg.twig b/src/patterns/04-components/svg/icons/_instagram.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f3dda1de7fc3a767a9018c32826849f4fac6f830
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_instagram.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>instagram</title>
+<path d="M5.134 2.557h20.928c1.988 0 3.614 1.625 3.614 3.614v20.931c0 1.987-1.625 3.609-3.614 3.609h-20.928c-1.987 0-3.615-1.62-3.615-3.609v-20.931c0-1.988 1.629-3.614 3.615-3.614zM22.033 5.682c-0.7 0-1.271 0.576-1.271 1.272v3.033c0 0.697 0.571 1.269 1.271 1.269h3.182c0.7 0 1.267-0.572 1.267-1.269v-3.033c0-0.697-0.567-1.272-1.267-1.272h-3.182zM26.493 14.464h-2.477c0.237 0.767 0.365 1.574 0.365 2.415 0 4.683-3.92 8.481-8.756 8.481-4.834 0-8.753-3.797-8.753-8.481 0-0.842 0.129-1.648 0.363-2.415h-2.585v11.892c0 0.619 0.503 1.119 1.119 1.119h19.606c0.618 0 1.118-0.5 1.118-1.119v-11.892zM15.625 11.094c-3.122 0-5.657 2.453-5.657 5.479s2.535 5.481 5.657 5.481c3.123 0 5.658-2.454 5.658-5.481 0-3.025-2.535-5.479-5.658-5.479z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_linkedin-box.svg.twig b/src/patterns/04-components/svg/icons/_linkedin-box.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..534ef95da55bc5c51a181b699426997e4882d878
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_linkedin-box.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>linkedin-box</title>
+<path d="M25.513 3.020h-19.058c-2.297 0-4.161 1.861-4.161 4.161v19.056c0 2.296 1.864 4.16 4.161 4.16h19.058c2.297 0 4.16-1.864 4.16-4.16v-19.055c-0-2.3-1.863-4.162-4.16-4.162zM12.313 22.809h-2.883v-8.676h2.883v8.676zM10.87 12.948h-0.017c-0.969 0-1.594-0.665-1.594-1.497 0-0.852 0.646-1.498 1.63-1.498 0.988 0 1.594 0.647 1.613 1.498 0 0.833-0.626 1.497-1.632 1.497zM22.71 22.809h-2.884v-4.642c0-1.164-0.418-1.962-1.461-1.962-0.797 0-1.27 0.538-1.479 1.056-0.077 0.184-0.095 0.446-0.095 0.703v4.846h-2.883c0 0 0.038-7.86 0-8.677h2.883v1.229c0.385-0.591 1.068-1.432 2.599-1.432 1.896 0 3.319 1.239 3.319 3.905v4.974zM16.791 15.392v-0.030c-0.006 0.010-0.015 0.020-0.020 0.030h0.020z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_linkedin.svg.twig b/src/patterns/04-components/svg/icons/_linkedin.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c7f73b0b8e9666186da94127a33055fc0a5e352c
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_linkedin.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>linkedin</title>
+<path d="M8.426 29.83v-18.25h-6.065v18.25h6.065zM5.391 9.088c2.118 0 3.434-1.398 3.434-3.15-0.040-1.792-1.316-3.152-3.394-3.152-2.072 0-3.43 1.36-3.43 3.152 0 1.751 1.316 3.15 3.353 3.15h0.036zM11.783 29.83h6.065v-10.193c0-0.541 0.039-1.092 0.2-1.479 0.439-1.089 1.435-2.221 3.112-2.221 2.195 0 3.073 1.679 3.073 4.128v9.766h6.065v-10.464c0-5.607-2.992-8.214-6.982-8.214-3.272 0-4.707 1.83-5.511 3.074h0.042v-2.646h-6.065c0.082 1.717 0.002 18.25 0.002 18.25v0z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_location.svg.twig b/src/patterns/04-components/svg/icons/_location.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..fac87d06294b0a89ef81c1621c4c6452e8bd882f
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_location.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>location</title>
+<path d="M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_menu-arrow-down.svg.twig b/src/patterns/04-components/svg/icons/_menu-arrow-down.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..89408f6519c0e5e9ef69460d8372f8dfe4dfed63
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_menu-arrow-down.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>chevron-down</title>
+<path fill="#323a45" d="M3.529 6.471l4 4c0.261 0.261 0.683 0.261 0.943 0l4-4c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.529 3.529-3.529-3.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_menu-arrow-right.svg.twig b/src/patterns/04-components/svg/icons/_menu-arrow-right.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..1d12e1112c0f048b30d4abe370d309ef2e551544
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_menu-arrow-right.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>chevron-right</title>
+<path fill="#f7f7f7" d="M6.471 12.471l4-4c0.261-0.261 0.261-0.683 0-0.943l-4-4c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.529 3.529-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_messages-error.svg.twig b/src/patterns/04-components/svg/icons/_messages-error.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b24365a26301b0bfb634b3179bb42e9c6bdf2cfd
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_messages-error.svg.twig
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#ffc5c2;}</style></defs><title>messages-error</title><g id="Page-1"><g id="messages-warning"><path id="Shape" class="cls-1" d="M51.51,46.09l-22.26-44A4,4,0,0,0,27.88.56a3.44,3.44,0,0,0-3.76,0,4,4,0,0,0-1.37,1.53L.49,46.09A4,4,0,0,0,.55,50,3.82,3.82,0,0,0,1.9,51.47,3.45,3.45,0,0,0,3.74,52H48.26a3.45,3.45,0,0,0,1.84-.53A3.82,3.82,0,0,0,51.45,50,4,4,0,0,0,51.51,46.09ZM29.71,43a1,1,0,0,1-.27.73.88.88,0,0,1-.66.3H23.22a.85.85,0,0,1-.65-.3,1,1,0,0,1-.28-.73V37a1,1,0,0,1,.28-.73.85.85,0,0,1,.65-.3h5.56a.88.88,0,0,1,.66.3,1,1,0,0,1,.27.73V43Zm-.06-11.69a.72.72,0,0,1-.3.52,1.16,1.16,0,0,1-.68.2H23.3a1.19,1.19,0,0,1-.69-.2.63.63,0,0,1-.29-.52L21.83,17a.77.77,0,0,1,.29-.66,1.11,1.11,0,0,1,.69-.34h6.38a1.06,1.06,0,0,1,.69.34.7.7,0,0,1,.29.6Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/patterns/04-components/svg/icons/_messages-status.svg.twig b/src/patterns/04-components/svg/icons/_messages-status.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..251b6cbc4d46a55d7d6a8d5d87d26e3d170f72e2
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_messages-status.svg.twig
@@ -0,0 +1 @@
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#94bfa2;}</style></defs><title>messages-status</title><path class="cls-1" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0ZM22.32,38.26,10.07,26,15,21.1l7.35,7.35L37,13.75l4.9,4.9Z"/></svg>
\ No newline at end of file
diff --git a/src/patterns/04-components/svg/icons/_messages-warning.svg.twig b/src/patterns/04-components/svg/icons/_messages-warning.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..757963ef8f36289df3345471d2de95f97acce0ec
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_messages-warning.svg.twig
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#fad980;}</style></defs><title>messages-warning</title><g id="Page-1"><g id="messages-warning"><path id="Shape" class="cls-1" d="M51.51,46.09l-22.26-44A4,4,0,0,0,27.88.56a3.44,3.44,0,0,0-3.76,0,4,4,0,0,0-1.37,1.53L.49,46.09A4,4,0,0,0,.55,50,3.82,3.82,0,0,0,1.9,51.47,3.45,3.45,0,0,0,3.74,52H48.26a3.45,3.45,0,0,0,1.84-.53A3.82,3.82,0,0,0,51.45,50,4,4,0,0,0,51.51,46.09ZM29.71,43a1,1,0,0,1-.27.73.88.88,0,0,1-.66.3H23.22a.85.85,0,0,1-.65-.3,1,1,0,0,1-.28-.73V37a1,1,0,0,1,.28-.73.85.85,0,0,1,.65-.3h5.56a.88.88,0,0,1,.66.3,1,1,0,0,1,.27.73V43Zm-.06-11.69a.72.72,0,0,1-.3.52,1.16,1.16,0,0,1-.68.2H23.3a1.19,1.19,0,0,1-.69-.2.63.63,0,0,1-.29-.52L21.83,17a.77.77,0,0,1,.29-.66,1.11,1.11,0,0,1,.69-.34h6.38a1.06,1.06,0,0,1,.69.34.7.7,0,0,1,.29.6Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/patterns/04-components/svg/icons/_minus.svg.twig b/src/patterns/04-components/svg/icons/_minus.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6eaa97a0e439ad41e5a83bda0f7e1c96afc00e57
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_minus.svg.twig
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 401.991 401.991"><path d="M394 154.174c-5.33-5.33-11.806-7.995-19.417-7.995H27.406c-7.61 0-14.084 2.66-19.414 7.99C2.662 159.5 0 165.97 0 173.586v54.82c0 7.617 2.662 14.086 7.992 19.41 5.33 5.332 11.803 7.994 19.414 7.994h347.176c7.61 0 14.086-2.66 19.417-7.993 5.32-5.324 7.99-11.793 7.99-19.41v-54.82c0-7.615-2.66-14.087-7.99-19.413z"/></svg>
diff --git a/src/patterns/04-components/svg/icons/_mobile-arrow-down-y.svg.twig b/src/patterns/04-components/svg/icons/_mobile-arrow-down-y.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d972744ee2dd00f95ab04c274c04dd742e83e7c4
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_mobile-arrow-down-y.svg.twig
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<path class="st0" d="M17.6,0.2L9.5,8.3L1.4,0.2L0,1.6l9.6,9.6L19,1.8l-1.7-1.7h0.3V0.2z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_mobile-arrow-down.svg.twig b/src/patterns/04-components/svg/icons/_mobile-arrow-down.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3f60d70c2dedbafde0d2b133cbc9e9ba136177cb
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_mobile-arrow-down.svg.twig
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<path d="M17.6,0.2L9.5,8.3L1.4,0.2L0,1.6l9.6,9.6L19,1.8l-1.7-1.7h0.3C17.6,0.1,17.6,0.2,17.6,0.2z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_mobile-arrow-up-y.svg.twig b/src/patterns/04-components/svg/icons/_mobile-arrow-up-y.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3bdf896b8bf8f45deed669605dfb049ddb14fa31
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_mobile-arrow-up-y.svg.twig
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<path class="st0" d="M1.4,11.2l8.1-8.1l8.1,8.1L19,9.8L9.4,0.2L0,9.5l1.7,1.7H1.4z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_mobile-arrow-up.svg.twig b/src/patterns/04-components/svg/icons/_mobile-arrow-up.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d4edd2dd7300329f90f231cb5fff8f32f07cae52
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_mobile-arrow-up.svg.twig
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<path d="M1.4,11.2l8.1-8.1l8.1,8.1L19,9.8L9.4,0.2L0,9.5l1.7,1.7H1.4z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_mobile-close.svg.twig b/src/patterns/04-components/svg/icons/_mobile-close.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8db5f9646c48a06324f9050a08ef68fb5471583a
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_mobile-close.svg.twig
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path fill="#555559" d="M21.9 2.2l-2.2-2.2-8.8 8.8-8.8-8.8-2.2 2.2 8.8 8.8-8.8 8.8 2.2 2.2 8.8-8.8 8.8 8.8 2.2-2.2-8.8-8.8 8.8-8.8z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_mobile-menu.svg.twig b/src/patterns/04-components/svg/icons/_mobile-menu.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..eb6e792b24a906e1642031e84dd5b388d65d2f5c
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_mobile-menu.svg.twig
@@ -0,0 +1,3 @@
+<svg width="33" height="22" viewBox="0 0 33 22" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<path fill="#555559" d="M0 22h33.1v-3.7h-33.1v3.7zM0 12.8h33.1v-3.7h-33.1v3.7zM0 0v3.7h33.1v-3.7h-33.1z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_opera.svg.twig b/src/patterns/04-components/svg/icons/_opera.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..324567c9fe6760c3bb494566d4409b9382fc8b79
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_opera.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>opera</title>
+<path d="M15.939 0c-8.741 0-15.023 6.34-15.023 15.851 0 8.463 6.109 16.149 15.024 16.149 9.002 0 15.144-7.684 15.144-16.149 0-9.586-6.483-15.851-15.146-15.851zM21.511 15.579c-0.002 5.292-0.284 12.828-5.571 12.828v0.001c-5.212 0-5.42-7.54-5.42-12.822 0-6.199 0.58-12.143 5.42-12.143s5.571 6.018 5.571 12.136z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_pencil.svg.twig b/src/patterns/04-components/svg/icons/_pencil.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a84f7f666d7f4ffa62caf3b828a974eafda74352
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_pencil.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>pencil</title>
+<path d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_play.svg.twig b/src/patterns/04-components/svg/icons/_play.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..22f0a5be9ceb6285ebaf4b11947825d19df97a4e
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_play.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>play</title>
+<path d="M30.662 5.003c-4.488-0.645-9.448-1.003-14.662-1.003s-10.174 0.358-14.662 1.003c-0.86 3.366-1.338 7.086-1.338 10.997s0.477 7.63 1.338 10.997c4.489 0.645 9.448 1.003 14.662 1.003s10.174-0.358 14.662-1.003c0.86-3.366 1.338-7.086 1.338-10.997s-0.477-7.63-1.338-10.997zM12 22v-12l10 6-10 6z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_plus.svg.twig b/src/patterns/04-components/svg/icons/_plus.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d002a9a38d7fd05b829cb7b4ce74a87cac142a0a
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_plus.svg.twig
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 401.994 401.994">
+ <path d="M394 154.175c-5.33-5.33-11.806-7.994-19.417-7.994H255.81V27.41c0-7.61-2.665-14.084-7.993-19.414C242.487 2.666 236.02 0 228.397 0h-54.81c-7.613 0-14.085 2.663-19.415 7.993-5.33 5.33-7.994 11.803-7.994 19.414v118.775H27.408c-7.612 0-14.085 2.664-19.415 7.994S0 165.973 0 173.59v54.818c0 7.618 2.662 14.086 7.992 19.41 5.33 5.333 11.803 7.995 19.414 7.995h118.77V374.59c0 7.61 2.665 14.09 7.995 19.417 5.33 5.325 11.806 7.987 19.418 7.987H228.4c7.618 0 14.087-2.662 19.418-7.987 5.332-5.33 7.994-11.806 7.994-19.417V255.813h118.77c7.618 0 14.09-2.662 19.417-7.994 5.325-5.33 7.99-11.797 7.99-19.415v-54.82c0-7.615-2.66-14.086-7.993-19.413z"/>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_podcast.svg.twig b/src/patterns/04-components/svg/icons/_podcast.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..feb3133dc65f4e22703805dac77d9040a305e49d
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_podcast.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>podcast</title>
+<path d="M32 16c0-8.837-7.163-16-16-16s-16 7.163-16 16c0 6.877 4.339 12.739 10.428 15.002l-0.428 0.998h12l-0.428-0.998c6.089-2.263 10.428-8.125 10.428-15.002zM15.212 19.838c-0.713-0.306-1.212-1.014-1.212-1.838 0-1.105 0.895-2 2-2s2 0.895 2 2c0 0.825-0.499 1.533-1.212 1.839l-0.788-1.839-0.788 1.838zM16.821 19.915c1.815-0.379 3.179-1.988 3.179-3.915 0-2.209-1.791-4-4-4s-4 1.791-4 4c0 1.928 1.364 3.535 3.18 3.913l-2.332 5.441c-2.851-1.223-4.848-4.056-4.848-7.355 0-4.418 3.582-8.375 8-8.375s8 3.957 8 8.375c0 3.299-1.997 6.131-4.848 7.355l-2.331-5.439zM21.514 30.866l-2.31-5.39c3.951-1.336 6.796-5.073 6.796-9.476 0-5.523-4.477-10-10-10s-10 4.477-10 10c0 4.402 2.845 8.14 6.796 9.476l-2.31 5.39c-4.987-2.14-8.481-7.095-8.481-12.866 0-7.729 6.266-14.37 13.995-14.37s13.995 6.641 13.995 14.37c0 5.771-3.494 10.726-8.481 12.866z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_rss-box.svg.twig b/src/patterns/04-components/svg/icons/_rss-box.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..db81e01efb068b3355cf70d28281096e703db939
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_rss-box.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>rss-box</title>
+<path d="M26.667 0h-21.333c-2.934 0-5.334 2.4-5.334 5.334v21.332c0 2.935 2.4 5.334 5.334 5.334h21.333c2.934 0 5.333-2.398 5.333-5.334v-21.332c0-2.934-2.399-5.334-5.333-5.334zM8.717 25.977c-1.499 0-2.717-1.209-2.717-2.707 0-1.49 1.218-2.713 2.717-2.713 1.505 0 2.721 1.223 2.721 2.713-0 1.498-1.216 2.707-2.721 2.707zM15.546 26c0-2.557-0.994-4.963-2.796-6.764-1.804-1.805-4.199-2.801-6.747-2.801v-3.912c7.427 0 13.473 6.045 13.473 13.477l-3.93 0zM22.488 26c0-9.096-7.396-16.498-16.48-16.498v-3.914c11.25 0 20.405 9.16 20.405 20.412l-3.924-0z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_rss.svg.twig b/src/patterns/04-components/svg/icons/_rss.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8e4c6a8e4d3d7f47c56cec2addbcf596009361ce
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_rss.svg.twig
@@ -0,0 +1,9 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 28.8 28.8">
+<title>RSS</title>
+ <path d="M10.2,21.7c0,1.7-1.4,3.1-3.1,3.1S4,23.5,4,21.7c0-1.7,1.4-3.1,3.1-3.1S10.2,20,10.2,21.7L10.2,21.7z M18.7,24
+ c-0.4-7.5-6.4-13.5-13.9-13.9c-0.5,0-0.8,0.3-0.8,0.8v2.3C4,13.6,4.3,14,4.6,14c5.4,0.4,9.7,4.7,10.1,10.1c0,0.4,0.4,0.7,0.8,0.7
+ h2.3C18.4,24.8,18.7,24.5,18.7,24L18.7,24z M25.6,24C25.2,12.7,16.2,3.6,4.8,3.2C4.3,3.2,4,3.5,4,3.9v2.3C4,6.7,4.3,7,4.7,7
+ c9.2,0.4,16.7,7.8,17,17c0,0.4,0.4,0.8,0.8,0.8h2.3C25.3,24.8,25.6,24.5,25.6,24z"/>
+</svg>
+
diff --git a/src/patterns/04-components/svg/icons/_safari.svg.twig b/src/patterns/04-components/svg/icons/_safari.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..460c9b8f42fc48c5abc8c93cd2340849cace94b2
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_safari.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>safari</title>
+<path d="M16 2c-0.752 0-1.491 0.056-2.213 0.163-0.009-0.024-0.020-0.048-0.031-0.072 0.401-0.313 0.611-0.745 0.52-1.173-0.117-0.549-0.7-0.918-1.451-0.918-0.162 0-0.327 0.018-0.49 0.052-0.943 0.2-1.567 0.894-1.421 1.58 0.089 0.417 0.447 0.729 0.943 0.856-0.001 0.030-0.001 0.061 0.001 0.092-6.269 1.798-10.857 7.573-10.857 14.42 0 8.284 6.716 15 15 15s15-6.716 15-15c0-8.284-6.716-15-15-15zM11.403 1.528c-0.085-0.398 0.39-0.85 1.036-0.987 0.129-0.027 0.259-0.041 0.386-0.041 0.501 0 0.897 0.215 0.962 0.522 0.050 0.235-0.096 0.488-0.356 0.684-0.22-0.155-0.501-0.223-0.784-0.162-0.283 0.060-0.511 0.235-0.649 0.464-0.318-0.077-0.547-0.253-0.595-0.48zM24.043 25.043c-1.374 1.374-3.038 2.352-4.853 2.88l-1.325-2.149-0.336 2.499c-0.503 0.067-1.013 0.102-1.529 0.102-3.038 0-5.895-1.183-8.043-3.332-1.374-1.374-2.352-3.038-2.88-4.853l2.149-1.325-2.499-0.336c-0.067-0.503-0.102-1.013-0.102-1.529 0-3.038 1.183-5.895 3.332-8.043 1.374-1.374 3.038-2.352 4.853-2.88l1.325 2.149 0.336-2.499c0.503-0.067 1.013-0.102 1.529-0.102 3.038 0 5.895 1.183 8.043 3.332 1.374 1.374 2.352 3.038 2.88 4.853l-2.149 1.325 2.499 0.336c0.067 0.503 0.102 1.013 0.102 1.529 0 3.038-1.183 5.895-3.332 8.043zM23.778 9.222l-6.156 4.678c-0.458-0.239-0.965-0.377-1.482-0.398l-1.596-3.349-0.096 3.708c-0.415 0.204-0.784 0.489-1.090 0.842l-1.972-0.699 1.44 1.517c-0.198 0.422-0.308 0.876-0.326 1.338l-3.349 1.596 3.711 0.096c0.012 0.024 0.024 0.048 0.037 0.071l-4.678 6.156 6.156-4.678c0.458 0.239 0.965 0.377 1.482 0.398l1.596 3.349 0.096-3.708c0.415-0.204 0.785-0.489 1.090-0.842l1.972 0.699-1.44-1.517c0.198-0.422 0.308-0.876 0.326-1.338l3.349-1.596-3.71-0.096c-0.012-0.024-0.024-0.048-0.037-0.071l4.678-6.156zM16.003 13.892v0zM15.376 14.066c0.21-0.045 0.42-0.066 0.627-0.066 0.13 0 0.258 0.008 0.384 0.025l0.003 0.001-0-0.001c0.273 0.036 0.537 0.109 0.785 0.216l-2.236 1.699-1.699 2.236c-0.074-0.175-0.133-0.359-0.174-0.552-0.345-1.621 0.69-3.214 2.311-3.558zM17.566 19.559v0 0c-0.283 0.173-0.599 0.303-0.942 0.376-0.21 0.045-0.42 0.066-0.627 0.066-0.13 0-0.258-0.009-0.385-0.025l-0.002-0.001 0 0.001c-0.273-0.036-0.537-0.109-0.785-0.215l2.236-1.699 1.699-2.236c0.074 0.175 0.133 0.359 0.174 0.552 0.272 1.278-0.314 2.538-1.368 3.183z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_search-2.svg.twig b/src/patterns/04-components/svg/icons/_search-2.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c95ccfb9bba6a0dd083f0537771b85b7bc4c7f24
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_search-2.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>search-2</title>
+<path d="M28.067 29.328l-7.159-10.519c4.091-3.24 5.248-9.105 2.49-13.695-2.995-4.986-9.488-6.604-14.474-3.61-4.985 2.996-6.604 9.489-3.609 14.474 2.701 4.496 8.248 6.253 12.967 4.357l5.946 11.299c0.184 0.351 0.613 0.47 0.952 0.267l2.674-1.608c0.34-0.204 0.435-0.638 0.212-0.966zM18.049 16.689c-3.388 2.035-7.8 0.935-9.836-2.453s-0.934-7.8 2.453-9.835c3.387-2.036 7.799-0.935 9.834 2.453s0.936 7.801-2.452 9.835z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_search-shade.svg.twig b/src/patterns/04-components/svg/icons/_search-shade.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f8c09f24d88bfebe589c1cc618d2bc764c103637
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_search-shade.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>search-shade</title>
+<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.298l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM17.954 18.25h-11.908c-0.168-0.16-0.33-0.327-0.485-0.5h12.878c-0.155 0.173-0.317 0.34-0.485 0.5zM9.472 20.25c-0.438-0.134-0.862-0.302-1.268-0.5h7.592c-0.406 0.198-0.829 0.366-1.268 0.5h-5.057zM7.318 19.25c-0.241-0.155-0.473-0.322-0.696-0.5h10.757c-0.223 0.178-0.456 0.345-0.696 0.5h-9.364zM5.146 17.25c-0.125-0.162-0.244-0.329-0.357-0.5h14.423c-0.113 0.171-0.232 0.338-0.357 0.5h-13.709zM4.481 16.25c-0.093-0.163-0.181-0.33-0.263-0.5h15.564c-0.082 0.17-0.17 0.337-0.263 0.5h-15.037zM3.996 15.25c-0.067-0.164-0.129-0.331-0.186-0.5h16.381c-0.057 0.169-0.119 0.336-0.186 0.5h-16.008zM3.659 14.25c-0.045-0.165-0.085-0.331-0.119-0.5h16.922c-0.035 0.169-0.075 0.335-0.119 0.5h-16.683zM3.361 12c0-0.084 0.002-0.167 0.004-0.25h17.27c0.002 0.083 0.004 0.166 0.004 0.25s-0.001 0.167-0.004 0.25h-17.27c-0.002-0.083-0.004-0.166-0.004-0.25zM6.046 5.75h11.907c0.168 0.16 0.33 0.327 0.485 0.5h-12.878c0.155-0.173 0.317-0.34 0.485-0.5zM14.528 3.75c0.438 0.134 0.862 0.301 1.268 0.5h-7.592c0.406-0.199 0.829-0.366 1.268-0.5h5.057zM16.682 4.75c0.241 0.155 0.473 0.322 0.696 0.5h-10.757c0.223-0.178 0.456-0.345 0.696-0.5h9.364zM18.854 6.75c0.125 0.162 0.244 0.329 0.357 0.5h-14.423c0.113-0.171 0.232-0.338 0.357-0.5h13.708zM19.519 7.75c0.093 0.163 0.181 0.33 0.263 0.5h-15.564c0.082-0.17 0.17-0.337 0.263-0.5h15.037zM20.004 8.75c0.067 0.164 0.129 0.331 0.186 0.5h-16.381c0.057-0.169 0.119-0.336 0.186-0.5h16.008zM20.341 9.75c0.044 0.165 0.085 0.331 0.119 0.5h-16.922c0.035-0.169 0.075-0.335 0.119-0.5h16.683zM20.548 10.75c0.024 0.165 0.043 0.332 0.058 0.5h-17.212c0.014-0.168 0.034-0.335 0.058-0.5h17.096zM20.606 12.75c-0.015 0.168-0.034 0.335-0.058 0.5h-17.096c-0.024-0.165-0.043-0.332-0.058-0.5h17.212z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_search.svg.twig b/src/patterns/04-components/svg/icons/_search.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3f56fdbe7d1d216430a9dce217f3b37764c664bc
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_search.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>search</title>
+<path d="M27.544 29.496l-7.951-11.68c-0.209-0.307-0.64-0.402-0.958-0.211l-1.004 0.604c-0.318 0.191-0.437 0.615-0.264 0.944l6.58 12.504c0.173 0.328 0.574 0.441 0.892 0.249l2.506-1.506c0.318-0.191 0.407-0.598 0.199-0.905zM18.52 16.629c3.006-1.915 3.137-6.908 0.297-11.367-2.415-3.791-6.087-5.797-8.98-5.138-0.665 0.13-1.515 0.485-2.371 1.030s-1.538 1.165-1.936 1.714c-1.82 2.344-1.553 6.519 0.861 10.309 2.841 4.459 7.42 6.452 10.428 4.536l1.702-1.084zM17.436 14.927c-1.984 1.263-5.483-0.53-7.641-3.919-2.159-3.387-2.306-7.316-0.321-8.581 1.983-1.264 5.482 0.531 7.64 3.919 2.158 3.387 2.305 7.317 0.322 8.581z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_select-arrows.svg.twig b/src/patterns/04-components/svg/icons/_select-arrows.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ab5fbb225faf3e9aef5a28379a2f619b9b624fa9
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_select-arrows.svg.twig
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<path fill="#aeb0b5" d="M10 1l-5 7h10l-5-7zM10 19l5-7h-10l5 7z"></path>
+</svg>
\ No newline at end of file
diff --git a/src/patterns/04-components/svg/icons/_share.svg.twig b/src/patterns/04-components/svg/icons/_share.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6d2a8b5ecb0cc02d1ee526eb32ede3ca0fdccd44
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_share.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>share</title>
+<path d="M19.961 25.724c-0.014 0.368-0.028 0.748 0.028 1.1 0.413 2.612 2.633 4.509 5.278 4.508 0.217 0 0.436-0.013 0.653-0.040 1.445-0.176 2.777-0.954 3.655-2.136 0.881-1.186 1.23-2.625 0.983-4.053-0.45-2.6-2.672-4.488-5.284-4.488-1.25 0-2.432 0.436-3.418 1.261-0.161 0.135-0.303 0.195-0.459 0.195-0.111 0-0.225-0.032-0.36-0.1-3.146-1.585-5.972-3-8.641-4.325-0.33-0.164-0.439-0.384-0.364-0.736 0.028-0.133 0.025-0.3-0.009-0.496-0.049-0.282 0.058-0.48 0.319-0.587 0.064-0.026 0.129-0.062 0.197-0.099 0.036-0.020 0.072-0.039 0.109-0.058l1.607-0.826c2.25-1.157 4.577-2.354 6.862-3.536 0.103-0.053 0.193-0.078 0.282-0.078 0.166 0 0.289 0.089 0.377 0.167 0.969 0.855 2.143 1.306 3.489 1.341 0.073-0.007 0.147-0.013 0.221-0.020 0.158-0.013 0.321-0.028 0.479-0.048 1.449-0.186 2.73-0.938 3.607-2.118 0.876-1.177 1.227-2.616 0.989-4.052-0.432-2.609-2.656-4.502-5.288-4.502-0.746 0-1.477 0.156-2.173 0.463-2.081 0.918-3.428 3.216-3.134 5.345 0.049 0.351-0.148 0.499-0.324 0.59-3.325 1.701-6.057 3.104-8.595 4.416-0.121 0.063-0.225 0.092-0.327 0.092-0.189 0-0.328-0.102-0.427-0.192-1.219-1.094-2.654-1.549-4.269-1.355-1.439 0.173-2.768 0.953-3.645 2.14s-1.218 2.62-0.961 4.036c0.379 2.096 1.566 3.506 3.527 4.191 0.621 0.217 1.237 0.326 1.831 0.326 1.22-0 2.378-0.459 3.443-1.363 0.094-0.079 0.24-0.186 0.433-0.186 0.105 0 0.21 0.029 0.34 0.094 2.944 1.48 5.852 2.933 8.643 4.32 0.306 0.152 0.342 0.373 0.335 0.59-0.002 0.072-0.005 0.144-0.008 0.216z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_si-comm.svg.twig b/src/patterns/04-components/svg/icons/_si-comm.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0e3043ac7b00336b3cd4c8c77ebd3d20f737b18d
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_si-comm.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>si-comm</title>
+<path d="M24.765 13.448c0-2.481-2.531-4.5-5.642-4.5s-5.643 2.019-5.643 4.5c0 1.302 0.708 2.54 1.942 3.396l0.174 0.12-0.043 0.207c-0.084 0.408-0.321 1.18-0.977 1.992 1.037-0.176 2.033-0.653 2.71-1.305l0.125-0.12 0.168 0.038c0.501 0.114 1.021 0.172 1.545 0.172 3.111 0 5.642-2.019 5.642-4.5zM16.296 14.732c-0.708 0-1.285-0.576-1.285-1.284s0.576-1.284 1.285-1.284c0.708 0 1.284 0.576 1.284 1.284s-0.576 1.284-1.284 1.284zM19.122 14.732c-0.708 0-1.285-0.576-1.285-1.284s0.576-1.284 1.285-1.284c0.708 0 1.285 0.576 1.285 1.284s-0.576 1.284-1.285 1.284zM21.948 14.732c-0.708 0-1.285-0.576-1.285-1.284s0.576-1.284 1.285-1.284c0.708 0 1.285 0.576 1.285 1.284s-0.576 1.284-1.285 1.284zM26.123 16.086c0-0.564-0.222-1.102-0.634-1.555-0.568 1.859-2.271 3.319-4.488 3.861 0.519 0.246 1.111 0.377 1.728 0.377 0.317 0 0.632-0.035 0.936-0.104l0.168-0.038 0.124 0.12c0.338 0.325 0.81 0.578 1.319 0.714-0.282-0.426-0.396-0.811-0.441-1.031l-0.043-0.207 0.173-0.12c0.736-0.511 1.158-1.246 1.158-2.017zM24.835 18.43c0.045 0.22 0.159 0.605 0.441 1.031-0.509-0.136-0.981-0.389-1.319-0.714l-0.124-0.12-0.168 0.038c-0.304 0.069-0.619 0.104-0.936 0.104-0.616 0-1.208-0.131-1.728-0.377 2.217-0.541 3.92-2.002 4.488-3.861 0.412 0.453 0.634 0.991 0.634 1.555 0 0.771-0.422 1.506-1.158 2.016l-0.173 0.12 0.043 0.207zM7.117 14.797c-1.211 0-2.256 0.806-2.543 1.959-0.052 0.208-0.078 0.413-0.078 0.611 0 1.356 1.121 2.873 2.621 2.873 0.535 0 1.097-0.23 1.563-0.624-0.142-0.39-0.224-0.806-0.224-1.236 0-0.257 0.034-0.522 0.099-0.787 0.144-0.581 0.439-1.091 0.836-1.499-0.118-0.202-0.264-0.39-0.438-0.559-0.494-0.476-1.146-0.738-1.836-0.738zM13.643 16.547c-0.494-0.476-1.146-0.738-1.836-0.738-1.211 0-2.256 0.806-2.543 1.959-0.052 0.208-0.078 0.413-0.078 0.611 0 1.356 1.121 2.873 2.621 2.873 1.237 0 2.621-1.229 2.621-2.873 0-0.694-0.279-1.344-0.785-1.832zM11.807 21.252c-1.5 0-2.621-1.517-2.621-2.873 0-0.198 0.026-0.403 0.078-0.611 0.287-1.153 1.332-1.959 2.543-1.959 0.69 0 1.342 0.262 1.836 0.738 0.506 0.488 0.785 1.138 0.785 1.832-0 1.644-1.384 2.873-2.621 2.873zM9.682 21.732h0.655c-0.321-0.177-0.703-0.281-1.153-0.281h-4.192c-1.1 0-2.384 0.747-2.384 2.855v2.51h3.959v-1.498c-0-2.145 1.252-3.585 3.114-3.585zM13.874 22.463h-4.192c-1.1 0-2.384 0.748-2.384 2.855v2.511h9.019v-2.511c-0-1.421-0.756-2.855-2.443-2.855zM16.317 27.829h-9.019v-2.511c0-2.107 1.284-2.855 2.384-2.855h4.192c1.688 0 2.443 1.434 2.443 2.855v2.511zM28.303 19.618c-0.278-0.268-0.645-0.416-1.033-0.416-0.681 0-1.27 0.453-1.43 1.1-0.029 0.119-0.044 0.231-0.044 0.343 0 0.932 0.778 1.629 1.474 1.629s1.474-0.697 1.474-1.629c0-0.389-0.156-0.754-0.441-1.027zM28.543 23.301h-2.582c-0.98 0-1.328 0.872-1.328 1.618v1.406h5.275v-1.406c0-0.806-0.422-1.618-1.364-1.618z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_si-comp.svg.twig b/src/patterns/04-components/svg/icons/_si-comp.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..11ac7fcaf4a9bf8a0706d8eaf4b2eabb5cd99cea
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_si-comp.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>si-comp</title>
+<path d="M24.057 22.681h-19.033v-10.551h14.328v-1.325c0-0.063 0.005-0.124 0.014-0.184h-14.915c-0.629 0-1.138 0.509-1.138 1.138v11.293c0 0.629 0.509 1.138 1.138 1.138l7.699 0.006v2.059h-0.568c-0.629 0-1.138 0.51-1.138 1.138v0.070h8.193v-0.070c0-0.629-0.509-1.138-1.138-1.138h-0.568v-1.581c-1.829-0.056-3.794 0.131-3.794-0.48l11.493-0.004c0.628 0 1.138-0.509 1.138-1.138v-1.543h-1.712v1.172zM22.712 10.868h1.896c0.177 0 0.321-0.142 0.321-0.317s-0.144-0.316-0.321-0.316h-1.896c-0.177 0-0.32 0.141-0.321 0.316s0.144 0.317 0.321 0.317zM24.146 20.286c-0.024-0.005-0.046-0.014-0.071-0.014h-0.869c-0.177 0-0.321 0.142-0.321 0.317s0.143 0.317 0.321 0.317h0.869c0.025 0 0.048-0.009 0.071-0.014 0.141-0.033 0.249-0.152 0.249-0.302s-0.107-0.269-0.249-0.302zM26.425 9.66h-5.531c-0.739 0-1.347 0.54-1.44 1.239-0.008 0.060-0.014 0.122-0.014 0.184v9.281c0 0.786 0.651 1.423 1.453 1.423h5.531c0.803 0 1.454-0.637 1.454-1.423v-9.281c-0-0.786-0.651-1.423-1.454-1.423zM22.712 10.235h1.896c0.177 0 0.321 0.141 0.321 0.316s-0.143 0.317-0.321 0.317h-1.896c-0.177 0-0.321-0.142-0.321-0.317s0.144-0.316 0.321-0.316zM24.146 20.89c-0.024 0.005-0.046 0.014-0.071 0.014h-0.869c-0.177 0-0.321-0.142-0.321-0.317s0.143-0.317 0.321-0.317h0.869c0.025 0 0.048 0.009 0.071 0.014 0.141 0.033 0.249 0.153 0.249 0.302s-0.107 0.269-0.249 0.302zM26.737 19.202c0 0.163-0.14 0.295-0.312 0.295h-5.531c-0.172 0-0.312-0.132-0.312-0.295v-7.448c0-0.163 0.14-0.295 0.312-0.295h5.531c0.172 0 0.312 0.133 0.312 0.295v7.448zM30.72 11.174c-0.247 0-0.454-0.185-0.482-0.43-0.197-1.702-1.548-3.053-3.25-3.25-0.245-0.028-0.43-0.235-0.43-0.482 0-0.020 0-0.039 0-0.059 0-0.139 0.059-0.271 0.163-0.363s0.242-0.136 0.379-0.12c2.182 0.248 3.914 1.98 4.162 4.162 0.015 0.138-0.028 0.275-0.121 0.379s-0.224 0.163-0.362 0.163c-0.021 0-0.040 0-0.060 0zM28.671 11.19c-0.227 0-0.423-0.157-0.473-0.378-0.144-0.634-0.644-1.134-1.279-1.278-0.221-0.050-0.378-0.247-0.378-0.473 0-0.020 0-0.040 0-0.060 0-0.147 0.067-0.287 0.182-0.379s0.265-0.127 0.41-0.095c1.033 0.228 1.845 1.041 2.073 2.073 0.032 0.144-0.004 0.294-0.096 0.409s-0.232 0.182-0.379 0.182c-0.020 0-0.040 0-0.060 0z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_si-infrastructure.svg.twig b/src/patterns/04-components/svg/icons/_si-infrastructure.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..52fd2fd20600e398a0ea1c5c8e266e2667a69dde
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_si-infrastructure.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>si-infrastructure</title>
+<path d="M12.146 16.702c-0.002-0.274-0.058-0.535-0.16-0.773l3.242-3.279c0.223 0.083 0.463 0.13 0.715 0.129 0.238-0.001 0.464-0.046 0.675-0.123l3.344 3.307c-0.079 0.217-0.124 0.451-0.123 0.696 0.006 1.107 0.909 2 2.016 1.994s2-0.909 1.994-2.016c-0.006-1.107-0.909-2-2.016-1.994-0.184 0.001-0.361 0.029-0.53 0.076l-3.442-3.403c0.050-0.176 0.077-0.361 0.076-0.553-0.006-1.108-0.909-2-2.016-1.994s-2 0.909-1.994 2.016c0.001 0.177 0.027 0.347 0.071 0.509l-3.424 3.463c-0.144-0.032-0.292-0.050-0.446-0.049-1.107 0.006-2 0.909-1.994 2.016s0.909 2 2.016 1.994c1.108-0.006 2-0.908 1.994-2.016zM6.402 22.686c-0.002-0.274-0.058-0.535-0.159-0.773l3.242-3.279c0.223 0.083 0.463 0.13 0.715 0.129 0.238-0.001 0.464-0.046 0.675-0.123l3.344 3.307c-0.079 0.217-0.124 0.451-0.123 0.696 0.006 1.107 0.909 2 2.016 1.994s2-0.909 1.994-2.016c-0.006-1.107-0.909-2-2.016-1.993-0.184 0.001-0.361 0.029-0.53 0.076l-3.443-3.403c0.049-0.176 0.077-0.361 0.076-0.553-0.006-1.108-0.909-2-2.016-1.994s-2 0.909-1.994 2.016c0.001 0.177 0.027 0.347 0.071 0.509l-3.423 3.463c-0.144-0.032-0.292-0.050-0.446-0.049-1.107 0.006-2 0.909-1.994 2.016s0.909 2 2.016 1.994c1.108-0.006 2-0.909 1.994-2.016zM18.13 22.686c-0.002-0.274-0.058-0.535-0.16-0.773l3.242-3.279c0.223 0.083 0.463 0.13 0.715 0.129 0.237-0.001 0.464-0.046 0.675-0.123l3.344 3.307c-0.079 0.217-0.124 0.451-0.123 0.696 0.006 1.107 0.909 2 2.016 1.994s2-0.909 1.994-2.016c-0.006-1.107-0.909-2-2.016-1.993-0.184 0.001-0.361 0.029-0.53 0.076l-3.442-3.403c0.049-0.176 0.077-0.361 0.076-0.553-0.006-1.108-0.909-2-2.016-1.994s-2 0.909-1.994 2.016c0.001 0.177 0.027 0.347 0.071 0.509l-3.423 3.463c-0.144-0.032-0.292-0.050-0.446-0.049-1.107 0.006-2 0.909-1.994 2.016s0.909 2 2.016 1.994c1.107-0.006 2-0.909 1.994-2.016z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_si-professionals.svg.twig b/src/patterns/04-components/svg/icons/_si-professionals.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..18276cd64e3fc8781a03edebbe642e1e9fd14dc0
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_si-professionals.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>si-professionals</title>
+<path d="M17.987 21.055v1.73c0 0.279-0.227 0.506-0.506 0.506h-3c-0.28 0-0.506-0.227-0.506-0.506v-1.73l-10.879-4.176v10.693c0 1.102 0.893 1.995 1.995 1.995h21.78c1.102 0 1.995-0.894 1.995-1.995v-10.693l-10.88 4.176zM27.671 9.492h-23.38c-1.102 0-1.995 0.893-1.995 1.996v3.281c0 0.413 0.313 0.868 0.698 1.016l10.981 4.215v-0.857c0-0.279 0.227-0.506 0.506-0.506h3c0.28 0 0.506 0.227 0.506 0.506v0.857l10.981-4.215c0.386-0.148 0.699-0.603 0.699-1.016v-3.281c0-1.102-0.894-1.996-1.995-1.996zM21.101 8.506h-1.511c0-1.804-1.282-2.798-3.609-2.798s-3.608 0.994-3.608 2.798h-1.511c0-2.083 1.345-4.309 5.12-4.309s5.12 2.226 5.12 4.309z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_si-security.svg.twig b/src/patterns/04-components/svg/icons/_si-security.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..7b63677439a1541ddd60323cb963b096ad3d9937
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_si-security.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>si-security</title>
+<path d="M12.428 19.467c1.856 0.005 2.827 1.215 3.206 2.946l10.075 0.029v-9.153c-0-1.258-1.013-2.277-2.268-2.29v-1.913c0-3.527-2.869-6.397-6.397-6.397s-6.397 2.869-6.397 6.397v1.913c-1.255 0.013-2.268 1.033-2.268 2.29v6.106c1.344-0.266 2.895 0.069 4.048 0.072zM17.81 18.248v2.927h-1.531v-2.927c-0.614-0.288-1.038-0.911-1.038-1.633 0-0.996 0.808-1.804 1.804-1.804s1.804 0.807 1.804 1.804c0 0.722-0.425 1.345-1.038 1.633zM12.885 9.085c0-2.294 1.866-4.16 4.16-4.16s4.16 1.866 4.16 4.16v1.912h-8.319v-1.912zM23.658 24.742l-0.918-0.293-0.578 0.539h1.257c0.111 0 0.221-0.008 0.328-0.024l-0.089-0.223zM8.464 23.312c0.145 0.522 0.47 0.968 0.904 1.269 0.009-0.056 0.015-0.113 0.015-0.172 0.002-0.55-0.396-1.005-0.919-1.097zM5.026 25.27c-0.019 6.525 4.4 4.963 6.917 4.97s3.42-2.207 3.428-4.94c0.008-2.734-0.883-4.953-3.399-4.961s-6.926-1.595-6.945 4.931zM8.926 25.282c-0.002 0.613-0.501 1.11-1.115 1.108s-1.11-0.501-1.108-1.114c0.002-0.614 0.501-1.11 1.114-1.108s1.11 0.5 1.108 1.115zM15.172 27.053c0.956 0.003 2.256 0.006 2.5 0.007 0.278 0.001 0.707-0.106 0.937-0.17l0.142-0.973 1.435 0.004 0.344 0.374 1.106-0.37 0.648-0.604 0.918 0.293 0.285 0.717 1.122-0.684 0.604-0.449c0 0 0.085 0.451 0.171 0.48s0.66 0.002 0.66 0.002l0.449 0.282 0.648-0.408 1.011-1.136-0.698-1.097-12.319-0.035c0.124 0.599 0.186 1.272 0.184 2.016-0.001 0.637-0.050 1.221-0.144 1.752z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_si-teach.svg.twig b/src/patterns/04-components/svg/icons/_si-teach.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..271b6acaf577d5d3078e144da8978422f4e2f493
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_si-teach.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>si-teach</title>
+<path d="M16.333 2.999c-4.868 0-8.814 3.946-8.814 8.814 0 2.366 0.927 4.588 2.609 6.257 2.224 2.208 2.282 2.983 2.438 4.126h7.535c0.156-1.143 0.214-1.918 2.438-4.126 1.682-1.668 2.608-3.89 2.608-6.257 0-4.868-3.946-8.814-8.814-8.814zM16.333 6.015c-3.197 0-5.797 2.601-5.797 5.797 0 0.391-0.317 0.708-0.708 0.708s-0.708-0.317-0.708-0.708c0-3.978 3.236-7.214 7.214-7.214 0.391 0 0.708 0.317 0.708 0.708s-0.317 0.708-0.709 0.708zM12.566 23.287v2.421c0 2.081 1.687 3.767 3.768 3.767s3.767-1.687 3.767-3.767v-2.421h-7.535z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_skype.svg.twig b/src/patterns/04-components/svg/icons/_skype.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ed40d7e1610d8e46687bd06f0715766c70afcd6a
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_skype.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>skype</title>
+<path d="M30.478 18.061c0.088-0.65 0.138-1.311 0.138-1.983 0-8.072-6.579-14.617-14.694-14.617-0.806 0-1.597 0.066-2.367 0.192-1.38-0.899-3.021-1.423-4.788-1.423-4.845 0-8.768 3.925-8.768 8.769 0 1.762 0.519 3.4 1.412 4.774-0.12 0.751-0.182 1.52-0.182 2.304 0 8.073 6.576 14.618 14.693 14.618 0.916 0 1.808-0.089 2.675-0.246 1.347 0.836 2.933 1.322 4.634 1.322 4.844 0 8.768-3.926 8.768-8.77-0-1.831-0.56-3.533-1.522-4.94zM17.296 26.85c-4.669 0.243-6.854-0.79-8.856-2.668-2.235-2.098-1.337-4.491 0.484-4.613 1.82-0.122 2.913 2.063 3.884 2.671 0.97 0.605 4.662 1.985 6.612-0.244 2.123-2.427-1.412-3.683-4.004-4.063-3.7-0.548-8.372-2.55-8.008-6.494 0.364-3.942 3.349-5.963 6.491-6.248 4.005-0.364 6.612 0.607 8.674 2.366 2.384 2.033 1.094 4.306-0.425 4.489-1.513 0.182-3.213-3.344-6.549-3.397-3.439-0.054-5.764 3.579-1.518 4.612 4.248 1.032 8.797 1.455 10.435 5.339 1.639 3.884-2.547 8.008-7.22 8.251z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_snapchat.svg.twig b/src/patterns/04-components/svg/icons/_snapchat.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..2685d8aea8ccfdb4791f7cb0896433e53efcd1bc
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_snapchat.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
+<title>snapchat</title>
+<path d="M15.143 2.952c3.214-0.036 5.875 1.768 7.214 4.661 0.411 0.875 0.482 2.232 0.482 3.196 0 1.143-0.089 2.268-0.161 3.411 0.143 0.071 0.339 0.125 0.5 0.125 0.643 0 1.179-0.482 1.821-0.482 0.607 0 1.482 0.429 1.482 1.143 0 1.714-3.589 1.393-3.589 2.893 0 0.268 0.107 0.518 0.214 0.768 0.857 1.875 2.482 3.679 4.411 4.482 0.464 0.196 0.929 0.304 1.429 0.411 0.321 0.071 0.5 0.304 0.5 0.625 0 1.214-3.089 1.714-3.911 1.839-0.357 0.554-0.089 1.857-1.036 1.857-0.732 0-1.464-0.232-2.25-0.232-0.375 0-0.75 0.018-1.107 0.089-2.125 0.357-2.839 2.643-6.321 2.643-3.357 0-4.161-2.286-6.232-2.643-0.375-0.071-0.75-0.089-1.125-0.089-0.804 0-1.571 0.268-2.214 0.268-1 0-0.696-1.321-1.071-1.893-0.821-0.125-3.911-0.625-3.911-1.839 0-0.321 0.179-0.554 0.5-0.625 0.5-0.107 0.964-0.214 1.429-0.411 1.911-0.786 3.571-2.607 4.411-4.482 0.107-0.25 0.214-0.5 0.214-0.768 0-1.5-3.607-1.214-3.607-2.875 0-0.696 0.821-1.143 1.446-1.143 0.554 0 1.107 0.464 1.804 0.464 0.196 0 0.393-0.036 0.571-0.125-0.071-1.125-0.161-2.25-0.161-3.393 0-0.964 0.071-2.339 0.482-3.214 1.571-3.393 4.232-4.625 7.786-4.661z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_tux.svg.twig b/src/patterns/04-components/svg/icons/_tux.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..5260f52d8d095c1ea506635c793926cc2456c7e5
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_tux.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tux</title>
+<path d="M17.739 23.029c-2.561 1.191-4.942 1.179-6.542 1.063-1.908-0.138-3.442-0.66-4.117-1.117-0.416-0.281-0.981-0.173-1.262 0.243s-0.173 0.981 0.243 1.262c1.084 0.734 3.002 1.28 5.005 1.424 0.34 0.024 0.712 0.040 1.114 0.040 1.743 0 3.957-0.166 6.326-1.268 0.455-0.212 0.652-0.752 0.441-1.207s-0.752-0.652-1.208-0.441zM27.842 21.682c0.087-7.896 0.899-22.819-14.218-21.613-14.925 1.201-10.968 16.968-11.19 22.248-0.197 2.793-1.124 6.208-2.434 9.683h4.034c0.415-1.473 0.72-2.929 0.851-4.317 0.243 0.17 0.503 0.334 0.781 0.491 0.452 0.266 0.84 0.62 1.251 0.995 0.961 0.876 2.050 1.868 4.179 1.992 0.143 0.008 0.287 0.012 0.427 0.012 2.153 0 3.625-0.942 4.809-1.699 0.567-0.363 1.057-0.676 1.518-0.827 1.31-0.41 2.454-1.072 3.309-1.914 0.134-0.131 0.258-0.267 0.374-0.405 0.476 1.746 1.129 3.711 1.853 5.672h8.614c-2.068-3.195-4.201-6.324-4.158-10.318zM3.878 17.386c0-0 0-0.001-0-0.001-0.148-2.577 1.085-4.745 2.754-4.842s3.142 1.913 3.291 4.49c0 0 0 0.001 0 0.001 0.008 0.139 0.011 0.276 0.012 0.413-0.529 0.133-1.006 0.326-1.434 0.551-0.002-0.019-0.003-0.038-0.005-0.057 0-0 0-0.001 0-0.001-0.143-1.463-0.924-2.567-1.745-2.467s-1.371 1.367-1.228 2.83c0 0 0 0.001 0 0.001 0.062 0.638 0.246 1.207 0.501 1.639-0.064 0.050-0.243 0.182-0.45 0.333-0.155 0.114-0.344 0.252-0.572 0.42-0.621-0.815-1.047-1.987-1.123-3.309zM20.789 23.756c-0.059 1.362-1.841 2.643-3.487 3.158l-0.009 0.003c-0.684 0.222-1.295 0.613-1.941 1.026-1.085 0.695-2.208 1.413-3.829 1.413-0.106 0-0.215-0.003-0.323-0.009-1.485-0.087-2.179-0.72-3.059-1.521-0.464-0.423-0.943-0.86-1.562-1.223l-0.013-0.008c-1.335-0.753-2.163-1.69-2.216-2.506-0.026-0.406 0.154-0.757 0.537-1.044 0.832-0.624 1.39-1.032 1.759-1.302 0.41-0.3 0.533-0.39 0.625-0.477 0.066-0.062 0.136-0.131 0.213-0.205 0.764-0.743 2.043-1.986 4.005-1.986 1.2 0 2.528 0.462 3.943 1.372 0.666 0.434 1.246 0.634 1.981 0.887 0.505 0.174 1.077 0.372 1.843 0.7l0.012 0.005c0.715 0.294 1.559 0.83 1.521 1.717zM20.395 20.556c-0.137-0.069-0.28-0.135-0.43-0.196-0.691-0.296-1.245-0.496-1.704-0.656 0.254-0.497 0.411-1.116 0.426-1.789 0-0 0-0.001 0-0.001 0.035-1.637-0.79-2.966-1.844-2.968s-1.936 1.322-1.971 2.959c0 0 0 0.001 0 0.001-0.001 0.054-0.001 0.107-0.001 0.16-0.649-0.299-1.287-0.515-1.911-0.649-0.003-0.061-0.006-0.123-0.008-0.185 0-0 0-0.001 0-0.002-0.061-2.982 1.769-5.45 4.086-5.513s4.245 2.303 4.305 5.285c0 0.001 0 0.001 0 0.002 0.027 1.348-0.333 2.59-0.949 3.552z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_twitter-box.svg.twig b/src/patterns/04-components/svg/icons/_twitter-box.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..27d6a92dd7f54f6f96736fab54f569af3a42bbd3
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_twitter-box.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>twitter-box</title>
+<path d="M25.492 3.014h-19.010c-2.293 0-4.151 1.858-4.151 4.151v19.011c0 2.292 1.858 4.151 4.151 4.151h19.010c2.292 0 4.15-1.858 4.15-4.151v-19.011c0-2.292-1.857-4.151-4.15-4.151zM22.922 13.59c0.006 0.155 0.009 0.309 0.009 0.463 0 4.729-3.597 10.18-10.178 10.18-2.022 0-3.903-0.593-5.487-1.607 0.28 0.031 0.565 0.051 0.852 0.051 1.679 0 3.22-0.573 4.445-1.534-1.566-0.027-2.887-1.062-3.341-2.484 0.217 0.043 0.443 0.065 0.673 0.065 0.327 0 0.642-0.044 0.943-0.125-1.637-0.33-2.87-1.776-2.87-3.51v-0.045c0.484 0.266 1.034 0.431 1.62 0.447-0.958-0.641-1.59-1.736-1.59-2.977 0-0.656 0.177-1.27 0.485-1.801 1.765 2.168 4.401 3.591 7.374 3.741-0.062-0.264-0.094-0.535-0.094-0.815 0-1.976 1.604-3.579 3.58-3.579 1.029 0 1.96 0.435 2.613 1.132 0.815-0.162 1.579-0.46 2.271-0.871-0.265 0.835-0.834 1.537-1.572 1.979 0.721-0.086 1.412-0.278 2.054-0.562-0.482 0.718-1.087 1.35-1.785 1.853z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_twitter.svg.twig b/src/patterns/04-components/svg/icons/_twitter.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..85ad94beea1259ad98a5dea8fa8a534e094e91d4
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_twitter.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>twitter</title>
+<path d="M30.668 7.497c-1.071 0.473-2.223 0.793-3.426 0.938 1.229-0.737 2.177-1.907 2.622-3.3-1.152 0.683-2.426 1.182-3.787 1.452-1.089-1.162-2.64-1.888-4.359-1.888-3.294 0-5.969 2.673-5.969 5.969 0 0.467 0.052 0.92 0.156 1.359-4.959-0.249-9.355-2.624-12.299-6.239-0.513 0.884-0.809 1.909-0.809 3.004 0 2.069 1.053 3.896 2.652 4.964-0.977-0.026-1.897-0.301-2.702-0.745v0.074c0 2.891 2.057 5.303 4.787 5.854-0.499 0.136-1.027 0.209-1.572 0.209-0.384 0-0.758-0.036-1.123-0.108 0.757 2.371 2.96 4.098 5.573 4.144-2.041 1.601-4.612 2.558-7.413 2.558-0.479 0-0.954-0.034-1.422-0.084 2.642 1.69 5.779 2.68 9.152 2.68 10.974 0 16.975-9.093 16.975-16.98 0-0.256-0.006-0.514-0.015-0.772 1.167-0.841 2.176-1.893 2.978-3.091z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_windows.svg.twig b/src/patterns/04-components/svg/icons/_windows.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e8d8a03c7a74e4a9e1d55b778e63283b11e67aee
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_windows.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>windows</title>
+<path d="M12.882 15.997c-1.491-0.766-2.94-1.155-4.309-1.155-0.186 0-0.373 0.006-0.561 0.022-1.746 0.145-3.341 0.605-4.367 0.963-0.272 0.1-0.551 0.205-0.838 0.322l-2.807 9.731c1.928-0.713 3.634-1.061 5.196-1.061 2.526 0 4.36 0.944 5.875 1.916 0.718-2.435 2.439-8.315 2.953-10.073-0.373-0.228-0.752-0.455-1.141-0.666zM16.511 18.471l-2.826 9.817c0.838 0.48 3.659 2.002 5.819 2.002 1.744 0 3.695-0.447 5.964-1.369l2.699-9.437c-1.832 0.591-3.59 0.891-5.233 0.891-2.998 0-5.097-0.972-6.422-1.905zM9.151 11.525c2.41 0.025 4.192 0.944 5.669 1.891l2.899-9.917c-0.611-0.35-2.213-1.222-3.371-1.519-0.762-0.178-1.563-0.269-2.413-0.269-1.619 0.030-3.387 0.436-5.403 1.244l-2.764 9.706c2.025-0.764 3.77-1.136 5.378-1.136 0.001 0 0.004 0 0.004 0zM32 6.191c-1.838 0.713-3.631 1.077-5.345 1.077-2.865 0-4.978-0.994-6.347-1.949l-2.873 9.945c1.93 1.241 4.009 1.871 6.191 1.871 1.78 0 3.623-0.427 5.483-1.271l-0.006-0.069 0.117-0.028 2.779-9.576z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_windows8.svg.twig b/src/patterns/04-components/svg/icons/_windows8.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..a753b5212c0b3ca5177afbad1f6c14facb62054f
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_windows8.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>windows8</title>
+<path d="M0.011 16l-0.011-9.752 12-1.63v11.382zM14 4.328l15.996-2.328v14h-15.996zM30 18l-0.004 14-15.996-2.25v-11.75zM12 29.495l-11.99-1.644-0.001-9.851h11.991z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_yahoo.svg.twig b/src/patterns/04-components/svg/icons/_yahoo.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b9f78cf58c2cb217468d9a5397a3fd722ea531d7
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_yahoo.svg.twig
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>yahoo</title>
+<path d="M26.5 20l-0.464-13.001c-0.020-0.55 0.414-0.999 0.964-0.999h4c0.55 0 0.921 0.443 0.824 0.984l-2.324 13.016zM30 24.25c0 0.962-0.788 1.75-1.75 1.75h-0.5c-0.962 0-1.75-0.788-1.75-1.75v-0.5c0-0.962 0.788-1.75 1.75-1.75h0.5c0.962 0 1.75 0.788 1.75 1.75v0.5zM12 6c-6.627 0-12 4.477-12 10s5.373 10 12 10 12-4.477 12-10c0-5.523-5.373-10-12-10zM20 14h-2.321l-3.679 3.679v2.321h3v2h-8v-2h3v-2.321l-5.679-5.679h-1.314v-2h5.988v2h-1.315l3.321 3.321 1-1v-2.321h6v2z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_youtube-box.svg.twig b/src/patterns/04-components/svg/icons/_youtube-box.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..19be899fec19819edf9035ad97e2bd57a7483cf8
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_youtube-box.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>youtube-box</title>
+<path d="M12.102 19.328v-1.151h-3.843v1.151h1.296v7.014h1.228v-7.014h1.319zM14.33 26.342v-0.663c-0.438 0.502-0.854 0.749-1.258 0.749-0.356 0-0.602-0.144-0.711-0.453-0.061-0.185-0.098-0.475-0.098-0.903v-4.813h1.101v4.48c0 0.258 0 0.393 0.012 0.428 0.027 0.17 0.109 0.257 0.256 0.257 0.222 0 0.455-0.171 0.698-0.516v-4.649h1.103v6.084h-1.103zM18.519 24.604c0 0.55-0.163 0.819-0.48 0.819-0.182 0-0.365-0.087-0.549-0.27v-3.71c0.184-0.18 0.367-0.266 0.549-0.266 0.317 0 0.48 0.282 0.48 0.83v2.597zM19.62 24.516v-2.423c0-0.576-0.038-0.979-0.111-1.222-0.147-0.457-0.442-0.688-0.881-0.688-0.405 0-0.782 0.224-1.138 0.66v-2.666h-1.103v8.165h1.103v-0.589c0.367 0.456 0.746 0.674 1.138 0.674 0.44 0 0.734-0.232 0.881-0.686 0.073-0.256 0.111-0.661 0.111-1.226zM22.678 22.584h-1.101v-0.562c0-0.562 0.185-0.844 0.555-0.844 0.363 0 0.547 0.282 0.547 0.844v0.562zM23.781 24.396v-0.161h-1.124c0 0.444-0.014 0.685-0.025 0.747-0.063 0.295-0.222 0.442-0.491 0.442-0.379 0-0.564-0.28-0.564-0.843v-1.078h2.205v-1.259c0-0.651-0.111-1.128-0.341-1.434-0.309-0.416-0.747-0.625-1.299-0.625-0.564 0-1.004 0.209-1.321 0.625-0.235 0.306-0.34 0.783-0.34 1.434v2.131c0 0.644 0.119 1.125 0.354 1.428 0.318 0.416 0.757 0.625 1.335 0.625 0.576 0 1.027-0.218 1.333-0.66 0.134-0.196 0.22-0.419 0.258-0.661 0.010-0.111 0.023-0.358 0.023-0.71zM15.665 13.446c0.359 0 0.531-0.287 0.531-0.855v-2.587c0-0.568-0.172-0.852-0.531-0.852-0.361 0-0.533 0.284-0.533 0.852v2.587c0 0.568 0.172 0.855 0.533 0.855zM26.198 2.354h-19.979c-2.41 0-4.363 1.953-4.363 4.362v19.98c0 2.409 1.952 4.363 4.363 4.363h19.979c2.409 0 4.361-1.953 4.361-4.363v-19.98c-0-2.409-1.952-4.362-4.361-4.362zM18.227 8.225h1.111v4.524c0 0.262 0 0.399 0.014 0.436 0.024 0.172 0.11 0.261 0.26 0.261 0.223 0 0.456-0.175 0.704-0.522v-4.699h1.114v6.147h-1.114v-0.671c-0.443 0.509-0.866 0.757-1.273 0.757-0.358 0-0.606-0.147-0.717-0.459-0.062-0.184-0.099-0.48-0.099-0.915v-4.86zM14.019 10.227c0-0.655 0.112-1.136 0.348-1.447 0.309-0.421 0.743-0.631 1.298-0.631 0.557 0 0.991 0.21 1.298 0.631 0.233 0.311 0.347 0.792 0.347 1.447v2.152c0 0.656-0.114 1.14-0.347 1.447-0.308 0.421-0.741 0.631-1.298 0.631-0.555 0-0.99-0.21-1.298-0.631-0.236-0.308-0.348-0.792-0.348-1.447v-2.152zM11.040 6.123l0.877 3.239 0.843-3.239h1.249l-1.486 4.907v3.341h-1.236v-3.341c-0.112-0.592-0.358-1.458-0.754-2.61-0.261-0.766-0.533-1.534-0.793-2.297h1.3zM24.487 26.613c-0.224 0.969-1.017 1.685-1.971 1.793-2.262 0.252-4.551 0.253-6.83 0.252-2.279 0.001-4.57 0-6.83-0.252-0.956-0.108-1.75-0.823-1.971-1.793-0.317-1.38-0.317-2.889-0.317-4.312s0.003-2.929 0.321-4.313c0.222-0.969 1.015-1.686 1.97-1.791 2.263-0.252 4.552-0.254 6.831-0.252 2.278-0.002 4.568 0 6.83 0.252 0.955 0.105 1.75 0.821 1.971 1.791 0.318 1.383 0.316 2.89 0.316 4.313s-0 2.931-0.319 4.312z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_youtube.svg.twig b/src/patterns/04-components/svg/icons/_youtube.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..60d6fb357c290210198cd49a983381d2f8190f80
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_youtube.svg.twig
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>youtube</title>
+<path d="M13.2 2.396h-1.572l-1.063 4.085-1.108-4.085h-1.64c0.329 0.961 0.671 1.93 1.001 2.897 0.499 1.453 0.811 2.545 0.951 3.291v4.214h1.56v-4.215l1.871-6.188zM17.366 10.285v-2.714c0-0.826-0.145-1.432-0.438-1.824-0.388-0.532-0.935-0.797-1.637-0.797-0.699 0-1.247 0.265-1.637 0.797-0.296 0.391-0.439 0.998-0.439 1.824v2.714c0 0.827 0.142 1.437 0.439 1.825 0.39 0.532 0.938 0.797 1.637 0.797 0.703 0 1.249-0.265 1.637-0.797 0.293-0.388 0.438-0.998 0.438-1.825zM15.96 10.551c0 0.716-0.218 1.078-0.671 1.078s-0.672-0.362-0.672-1.078v-3.263c0-0.716 0.218-1.074 0.672-1.074s0.671 0.358 0.671 1.074v3.263zM22.56 12.797v-7.753h-1.406v5.926c-0.311 0.438-0.606 0.658-0.889 0.658-0.187 0-0.295-0.112-0.328-0.329-0.017-0.047-0.017-0.221-0.017-0.55v-5.705h-1.401v6.129c0 0.549 0.045 0.922 0.125 1.155 0.14 0.392 0.451 0.579 0.904 0.579 0.51 0 1.047-0.314 1.604-0.955v0.848h1.407v-0.002zM23.443 21.381c-0.464 0-0.697 0.356-0.697 1.063v0.709h1.389v-0.709c-0-0.708-0.234-1.063-0.692-1.063zM26.419 17.359c-0.28-1.221-1.282-2.126-2.485-2.257-2.855-0.32-5.741-0.322-8.615-0.32-2.874-0.003-5.761 0-8.616 0.32-1.205 0.131-2.204 1.036-2.484 2.257-0.403 1.745-0.405 3.645-0.405 5.439s0 3.697 0.398 5.438c0.282 1.223 1.281 2.124 2.487 2.261 2.852 0.318 5.738 0.32 8.614 0.318 2.874 0.001 5.762 0 8.615-0.318 1.205-0.136 2.205-1.038 2.487-2.261 0.401-1.741 0.403-3.644 0.403-5.438s0.002-3.694-0.399-5.439zM10.797 19.048h-1.665v8.845h-1.547v-8.845h-1.635v-1.452h4.847v1.452zM14.998 27.893h-1.391v-0.837c-0.552 0.633-1.078 0.944-1.588 0.944-0.449 0-0.758-0.181-0.896-0.571-0.077-0.231-0.124-0.598-0.124-1.139v-6.069h1.389v5.65c0 0.326 0 0.495 0.016 0.54 0.031 0.216 0.136 0.326 0.323 0.326 0.28 0 0.573-0.216 0.88-0.651v-5.863h1.391v7.672zM20.279 25.59c0 0.711-0.047 1.223-0.14 1.547-0.184 0.571-0.557 0.863-1.11 0.863-0.493 0-0.971-0.275-1.436-0.849v0.743h-1.39v-10.297h1.39v3.362c0.449-0.549 0.925-0.832 1.436-0.832 0.553 0 0.926 0.292 1.11 0.868 0.093 0.306 0.14 0.815 0.14 1.541v3.054zM25.527 24.312h-2.78v1.36c0 0.71 0.233 1.063 0.709 1.063 0.341 0 0.541-0.184 0.622-0.557 0.012-0.078 0.029-0.383 0.029-0.942h1.419v0.204c0 0.444-0.019 0.755-0.030 0.896-0.047 0.305-0.157 0.586-0.324 0.833-0.386 0.557-0.956 0.832-1.682 0.832s-1.282-0.264-1.682-0.788c-0.295-0.382-0.445-0.99-0.445-1.801v-2.688c0-0.821 0.132-1.423 0.429-1.809 0.4-0.526 0.955-0.79 1.666-0.79 0.696 0 1.25 0.264 1.637 0.79 0.292 0.384 0.433 0.988 0.433 1.809v1.588h-0.001zM18.458 22.268c0.341 0 0.618 0.876 0.618 1.959 0 1.081-0.276 1.959-0.618 1.959-0.34 0-0.617-0.878-0.617-1.959 0-1.083 0.277-1.959 0.617-1.959z"></path>
+</svg>
diff --git a/src/patterns/04-components/svg/svg.yml b/src/patterns/04-components/svg/svg.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ad91df180353ba99773abfcc767c63a93a9e1f4e
--- /dev/null
+++ b/src/patterns/04-components/svg/svg.yml
@@ -0,0 +1,2 @@
+---
+svg_name: android
diff --git a/src/patterns/04-components/svg/svgs.twig b/src/patterns/04-components/svg/svgs.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e3537c68de2a9bbb973a1eea1c10c5fdc3cd0b17
--- /dev/null
+++ b/src/patterns/04-components/svg/svgs.twig
@@ -0,0 +1,6 @@
+{% for svg_name in svg_names %}
+ <h3>{{ svg_name | capitalize }}</h3>
+ {% include '@components/svg/_svg.twig' with {
+ 'svg_name': svg_name
+ } %}
+{% endfor %}
\ No newline at end of file
diff --git a/src/patterns/04-components/svg/svgs.yml b/src/patterns/04-components/svg/svgs.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e7f659b861cf9fef20c3fa1e591c18a034462255
--- /dev/null
+++ b/src/patterns/04-components/svg/svgs.yml
@@ -0,0 +1,84 @@
+---
+svg_names:
+ - android
+ - add-to-calendar
+ - android
+ - apple
+ - arrow
+ - arrow-right
+ - binoculars
+ - bubble
+ - calendar
+ - chevron
+ - chrome
+ - close
+ - cloud
+ - comment
+ - connection
+ - correct
+ - css3
+ - dropbutton-arrow-down
+ - dropbutton-arrow-up
+ - envelope
+ - equalizer
+ - facebook
+ - facebook-box
+ - filter
+ - filter1
+ - finder
+ - firefox
+ - github
+ - github-box
+ - home
+ - home3
+ - html5
+ - ical
+ - IE
+ - info
+ - info-2
+ - instagram
+ - instagram-box
+ - linkedin
+ - linkedin-box
+ - location
+ - menu-arrow-down
+ - menu-arrow-right
+ - messages-error
+ - messages-status
+ - messages-warning
+ - minus
+ - mobile-arrow-down
+ - mobile-arrow-down-y
+ - mobile-arrow-up
+ - mobile-arrow-up-y
+ - mobile-close
+ - mobile-menu
+ - opera
+ - pencil
+ - play
+ - plus
+ - podcast
+ - rss
+ - rss-box
+ - safari
+ - search
+ - search-2
+ - search-shade
+ - select-arrows
+ - share
+ - si-comm
+ - si-comp
+ - si-infrastructure
+ - si-professionals
+ - si-security
+ - si-teach
+ - skype
+ - snapchat
+ - tux
+ - twitter
+ - twitter-box
+ - windows
+ - windows8
+ - yahoo
+ - youtube
+ - youtube-box
diff --git a/src/patterns/04-components/tag-list/tag-list.twig b/src/patterns/04-components/tag-list/tag-list.twig
index 9c10d0e0ce648086e1592e77f4217bd52b2f60c7..9f42d7bb7b062f44ee4240b258c3fc04b9f0e040 100644
--- a/src/patterns/04-components/tag-list/tag-list.twig
+++ b/src/patterns/04-components/tag-list/tag-list.twig
@@ -1,4 +1,4 @@
-{% import '@base/macros/uw.macro.twig' as macros %}
+{% 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 %}">
diff --git a/src/patterns/04-components/tag/_tag.scss b/src/patterns/04-components/tag/_tag.scss
index 2f1badee54bdbeb028902ec28af7914f2ae00727..457a9b82616867c51b3b1efad64fab95d2b65f00 100644
--- a/src/patterns/04-components/tag/_tag.scss
+++ b/src/patterns/04-components/tag/_tag.scss
@@ -4,10 +4,10 @@
@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-font-family-small: var(--font-systemmedium) !default;
+$tag-font-family-normal: var(--font-systembold) !default;
+$tag-font-size-normal: var(--font-size-00) !default;
+$tag-font-size-small: var(--font-size-0000) !default;
.tag {
@@ -49,6 +49,7 @@ $tag-font-size-small: var(--font-size-000) !default;
&:focus {
background: var(--uw-black-primary);
color: var(--uw-gold-3);
+ text-decoration: none;
}
}
&--simple{
@@ -107,6 +108,7 @@ $tag-font-size-small: var(--font-size-000) !default;
&:focus {
background: var(--uw-black-primary);
color: var(--uw-gold-3);
+ text-decoration: none;
}
}
}