diff --git a/css/styles.css b/css/styles.css
index cee8fa596c4e93a157082b7acc1b345e73a1f095..fb09b04513f86e05719f89f495cf8f7aefcd7ac9 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1008,14 +1008,14 @@ a {
   transition-property: background-color, border-color, color, outline-color;
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
   a:focus {
-    outline-color: #4773aa; }
+    outline-color: #000; }
   a:hover, a:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
     color: #000;
     text-decoration: none; }
     a:hover:focus, a:focus:focus {
-      outline-color: #4773aa; }
+      outline-color: #000; }
   a:active {
     color: #4e4e4e; }
   a:visited {
@@ -1435,7 +1435,10 @@ svg:not(:root) {
 .uw-date-pl h4 {
   margin-bottom: 0.5rem; }
 
-.uw-date {
+.uw-date,
+.uw-field--name-field-uw-blog-date,
+.uw-field--name-field-uw-event-date,
+.uw-field--name-field-uw-news-date {
   background-color: #000;
   clear: both;
   color: #fdd54f;
@@ -1445,35 +1448,59 @@ svg:not(:root) {
   padding: 0.5rem 1rem;
   text-transform: uppercase; }
 
-.org-default .uw-date {
+.org-default .uw-date,
+.org-default .uw-field--name-field-uw-blog-date time,
+.org-default .uw-field--name-field-uw-event-date time,
+.org-default .uw-field--name-field-uw-news-date time {
   background-color: #000;
   color: #fdd54f; }
 
-.org-ahs .uw-date {
+.org-ahs .uw-date,
+.org-ahs .uw-field--name-field-uw-blog-date time,
+.org-ahs .uw-field--name-field-uw-event-date time,
+.org-ahs .uw-field--name-field-uw-news-date time {
   background-color: #005963;
   color: #97dfef; }
 
-.org-art .uw-date {
+.org-art .uw-date,
+.org-art .uw-field--name-field-uw-blog-date time,
+.org-art .uw-field--name-field-uw-event-date time,
+.org-art .uw-field--name-field-uw-news-date time {
   background-color: #d93f00;
   color: #ffd5a5; }
 
-.org-eng .uw-date {
+.org-eng .uw-date,
+.org-eng .uw-field--name-field-uw-blog-date time,
+.org-eng .uw-field--name-field-uw-event-date time,
+.org-eng .uw-field--name-field-uw-news-date time {
   background-color: #57058b;
   color: #d0b4ef; }
 
-.org-env .uw-date {
+.org-env .uw-date,
+.org-env .uw-field--name-field-uw-blog-date time,
+.org-env .uw-field--name-field-uw-event-date time,
+.org-env .uw-field--name-field-uw-news-date time {
   background-color: #607000;
   color: #daf582; }
 
-.org-mat .uw-date {
+.org-mat .uw-date,
+.org-mat .uw-field--name-field-uw-blog-date time,
+.org-mat .uw-field--name-field-uw-event-date time,
+.org-mat .uw-field--name-field-uw-news-date time {
   background-color: #c60078;
   color: #ffbeef; }
 
-.org-sci .uw-date {
+.org-sci .uw-date,
+.org-sci .uw-field--name-field-uw-blog-date time,
+.org-sci .uw-field--name-field-uw-event-date time,
+.org-sci .uw-field--name-field-uw-news-date time {
   background-color: #0033be;
   color: #b4d5ff; }
 
-.org-school .uw-date {
+.org-school .uw-date,
+.org-school .uw-field--name-field-uw-blog-date time,
+.org-school .uw-field--name-field-uw-event-date time,
+.org-school .uw-field--name-field-uw-news-date time {
   background-color: #b71233;
   color: #ffa5aa; }
 
@@ -1704,7 +1731,7 @@ svg:not(:root) {
       margin-left: 1.25rem;
       margin-right: 1.25rem;
       width: calc(50% - 2.5rem);
-      min-width: 17.1875rem; }
+      min-width: 20.8125rem; }
     @supports (display: grid) {
       .l-grid--2col {
         grid-template-columns: repeat(2, 1fr);
@@ -1748,7 +1775,7 @@ svg:not(:root) {
       margin-left: 1.25rem;
       margin-right: 1.25rem;
       width: calc(33.3333333333% - 2.5rem);
-      min-width: 17.1875rem; }
+      min-width: 20.8125rem; }
     @supports (display: grid) {
       .l-grid--3col {
         grid-template-columns: repeat(3, 1fr);
@@ -1792,7 +1819,7 @@ svg:not(:root) {
       margin-left: 1.25rem;
       margin-right: 1.25rem;
       width: calc(50% - 2.5rem);
-      min-width: 17.1875rem; }
+      min-width: 20.8125rem; }
     @supports (display: grid) {
       .l-grid--4col {
         grid-template-columns: repeat(2, 1fr);
@@ -2041,14 +2068,58 @@ svg:not(:root) {
         /* Match the width of WCMS2's wide: 753px */
         margin: inherit; }
 
-.path-dashboard .layout__region {
-  margin-bottom: 1rem;
-  margin-right: 1rem; }
-
-.path-dashboard .layout__region--wrapper {
-  border: 1px solid #bfbfba;
-  box-shadow: none;
-  padding: 1rem; }
+.uw-term--layout {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2.5rem;
+  margin-top: 1.5rem;
+  position: relative; }
+  .uw-term--layout .uw-content--grid-list__style_controls {
+    padding: 0;
+    width: 100%; }
+  .uw-term--layout .l-section {
+    margin: 0 !important;
+    width: 100%; }
+  .uw-term--layout .uw-term--header {
+    width: 100%; }
+  .uw-term--layout .uw-term--results {
+    width: 100%; }
+  .uw-term--layout .uw-term--filters {
+    display: none;
+    width: 100%; }
+    .uw-term--layout .uw-term--filters .uw-input {
+      width: 100% !important; }
+    .uw-term--layout .uw-term--filters .l-section__content {
+      margin: 0;
+      max-width: inherit;
+      padding: 0;
+      width: 100%; }
+  @media (min-width: 48.06rem) {
+    .uw-term--layout {
+      display: flex;
+      flex-direction: row;
+      gap: 1.5rem;
+      justify-content: center; }
+      .uw-term--layout .uw-term--results {
+        width: clamp(320px, 900px, calc(100vw - 333px)); }
+      .uw-term--layout .uw-term--filters {
+        display: inherit;
+        margin: 0;
+        width: 18.75rem; }
+        .grid .uw-term--layout .uw-term--filters,
+        .list .uw-term--layout .uw-term--filters {
+          margin-top: 4rem !important; }
+        .uw-term--layout .uw-term--filters .uw-input,
+        .uw-term--layout .uw-term--filters .form-text {
+          width: 100% !important; }
+        .uw-term--layout .uw-term--filters .views-exposed-form {
+          margin: 0 !important;
+          padding: 0 !important; } }
+
+.views-filter {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 20px; }
 
 .layout--uw-1-col {
   display: grid;
@@ -3140,6 +3211,13 @@ button {
   .button--small:hover, .button--small:focus {
     padding: 0.25rem 0.25rem; }
 
+.button--icon {
+  font-size: 0.702rem;
+  max-width: 5rem;
+  padding: 0.25rem 0.25rem; }
+  .button--icon:hover, .button--icon:focus {
+    padding: 0.25rem 0.25rem; }
+
 .button--primary {
   background-color: #4d8f46;
   color: #fff; }
@@ -3418,20 +3496,51 @@ button {
 
 .card {
   display: flex;
-  flex-direction: column; }
+  -webkit-box-direction: normal;
+  -moz-box-direction: normal;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  width: 100%; }
+  .views-row .card {
+    height: 100%; }
 
 .card--show-hover {
-  border-bottom: 4px solid #0071BC;
+  border-bottom: 3px solid #000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
   .card--show-hover:hover, .card--show-hover:focus-within {
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
 
+.card__header {
+  color: #757575;
+  margin-bottom: 1rem;
+  width: 100%; }
+
 .card__date {
-  font-size: 1rem; }
+  font-size: 1rem;
+  margin-bottom: 1rem; }
+
+.card__title {
+  margin: 0.5rem 0;
+  padding: 0;
+  width: 100%; }
+  .card__title a {
+    color: #000;
+    text-decoration: none; }
+    .card__title a:visited {
+      color: #000; }
+    .card__title a:hover, .card__title a:focus {
+      color: #757575;
+      text-decoration: underline; }
+    .card__title a:active {
+      color: #757575; }
 
 .card__author {
-  font-size: 1rem; }
+  font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+  font-size: 14.22224px; }
   .card__author a {
     color: #000;
     text-decoration: underline; }
@@ -3443,57 +3552,73 @@ button {
     .card__author a:active {
       color: #757575; }
 
-.card__title a {
-  color: #000;
-  text-decoration: underline; }
-  .card__title a:visited {
-    color: #000; }
-  .card__title a:hover, .card__title a:focus {
-    color: #757575;
-    text-decoration: none; }
-  .card__title a:active {
-    color: #757575; }
-
 .card__body {
   display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 1rem; }
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  gap: 1.25rem;
+  gap: inherit;
+  padding: 1rem;
+  width: 100%; }
   .card__body p:last-child {
     margin-bottom: 0; }
 
-.card__date {
-  color: #757575;
-  margin-bottom: 1rem; }
-
 .card__content {
-  margin-bottom: 1.5rem; }
+  margin-bottom: 1.5rem;
+  width: 100%; }
 
 .card__media {
-  margin-bottom: 1.5rem; }
+  margin-bottom: 1.5rem;
+  order: -1;
+  width: 100%; }
   .card__media a {
-    display: block;
+    display: inline-block;
     height: 100%;
     width: 100%; }
+    .card__media a:focus img {
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
+      transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
+      transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
+      transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1); }
   .card__media img {
+    -webkit-filter: grayscale(0);
+    filter: grayscale(0);
+    transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
+    transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
+    transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
     width: 100%; }
+    .card__media img:hover {
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
+      transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
+      transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
+      transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1); }
 
 .card__footer {
   margin-top: auto;
-  padding: 0 0 1rem; }
+  padding: 1.5rem;
+  width: 100%; }
   .card__footer > div {
     margin-bottom: 1rem; }
     .card__footer > div:last-child {
       margin-bottom: 0; }
 
+.card__tags {
+  width: 100%; }
+
 .card__readmore {
   text-align: right; }
 
+.card__social {
+  max-width: 20rem;
+  width: 100%; }
+
 .card--feature .card__body {
   padding-top: 1rem; }
 
 .card--feature .card__media {
-  flex-grow: 1;
   margin-bottom: 0; }
 
 @media (min-width: 48.0625em) {
@@ -3506,7 +3631,8 @@ button {
       order: initial; } }
 
 .card.banner .card__body {
-  padding: 0; }
+  padding: 0;
+  position: relative; }
 
 .card.banner .card__header {
   background-color: rgba(0, 0, 0, 0.8);
@@ -3525,7 +3651,8 @@ button {
     font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; }
 
 .card.banner .card__media {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+  order: inherit; }
 
 .card.banner .card__title {
   color: #fdd54f; }
@@ -3668,6 +3795,109 @@ button {
   .uw-footer-address .uw-footer-phone a:hover {
     text-decoration: underline; }
 
+.uw-content--grid-list__layout {
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  gap: 1.25rem; }
+  .uw-content--grid-list__layout .card {
+    width: 100%;
+    order: 3; }
+    @media (min-width: 48.06rem) {
+      .uw-content--grid-list__layout .card {
+        -webkit-box: 1;
+        -moz-box: 1;
+        -webkit-flex: 1 1 auto 0 auto;
+        -ms-flex: 1 1 auto 0 auto;
+        flex: 1 1 auto 0 auto;
+        -webkit-box-flex: 1;
+        -moz-box-flex: 1;
+        -ms-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        width: 45%; } }
+    .uw-content--grid-list__layout .card .card__body {
+      height: inherit; }
+    .uw-content--grid-list__layout .card:first-of-type {
+      width: 100%;
+      order: 2;
+      width: 100% !important; }
+      @media (min-width: 48.06rem) {
+        .uw-content--grid-list__layout .card:first-of-type {
+          -webkit-box: 1;
+          -moz-box: 1;
+          -webkit-flex: 1 1 auto 0 auto;
+          -ms-flex: 1 1 auto 0 auto;
+          flex: 1 1 auto 0 auto;
+          -webkit-box-flex: 1;
+          -moz-box-flex: 1;
+          -ms-flex: 1;
+          -webkit-flex-grow: 1;
+          flex-grow: 1;
+          width: 45%; } }
+
+.uw-content--grid-list__style_controls {
+  width: 100%;
+  -webkit-align-content: flex-end;
+  -ms-flex-line-pack: end;
+  align-content: flex-end;
+  order: 1;
+  width: 100% !important; }
+  @media (min-width: 48.06rem) {
+    .uw-content--grid-list__style_controls {
+      -webkit-box: 1;
+      -moz-box: 1;
+      -webkit-flex: 1 1 auto 0 auto;
+      -ms-flex: 1 1 auto 0 auto;
+      flex: 1 1 auto 0 auto;
+      -webkit-box-flex: 1;
+      -moz-box-flex: 1;
+      -ms-flex: 1;
+      -webkit-flex-grow: 1;
+      flex-grow: 1;
+      width: 45%; } }
+
+.view-content {
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  gap: 1.25rem; }
+  .view-content .views-row {
+    width: 100%;
+    order: 3; }
+    @media (min-width: 48.06rem) {
+      .view-content .views-row {
+        -webkit-box: 1;
+        -moz-box: 1;
+        -webkit-flex: 1 1 auto 0 auto;
+        -ms-flex: 1 1 auto 0 auto;
+        flex: 1 1 auto 0 auto;
+        -webkit-box-flex: 1;
+        -moz-box-flex: 1;
+        -ms-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        width: 45%; } }
+    .view-content .views-row:first-of-type {
+      width: 100%;
+      order: 2;
+      width: 100% !important; }
+      @media (min-width: 48.06rem) {
+        .view-content .views-row:first-of-type {
+          -webkit-box: 1;
+          -moz-box: 1;
+          -webkit-flex: 1 1 auto 0 auto;
+          -ms-flex: 1 1 auto 0 auto;
+          flex: 1 1 auto 0 auto;
+          -webkit-box-flex: 1;
+          -moz-box-flex: 1;
+          -ms-flex: 1;
+          -webkit-flex-grow: 1;
+          flex-grow: 1;
+          width: 45%; } }
+
 .uw-copy-text__wrapper.uw-contained-width {
   margin-left: auto;
   margin-right: auto;
@@ -4591,6 +4821,56 @@ fieldset,
 .fieldset__legend {
   position: relative; }
 
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+.views-exposed-form {
+  margin: 0 !important;
+  padding: 0 !important; }
+  .views-exposed-form .form-actions {
+    display: flex;
+    gap: 1rem; }
+    .views-exposed-form .form-actions .button.js-form-submit.form-submit:first-of-type {
+      background-color: #4d8f46;
+      color: #fff; }
+      .views-exposed-form .form-actions .button.js-form-submit.form-submit:first-of-type:hover, .views-exposed-form .form-actions .button.js-form-submit.form-submit:first-of-type:focus {
+        background-color: #0a6700;
+        color: #fff; }
+
+.seven-details {
+  background-color: #fcfcfa;
+  border-bottom: 1px solid #000;
+  border-radius: inherit;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
+  .seven-details:hover, .seven-details:focus-within {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
+  .seven-details:first-child {
+    margin-top: 0; }
+
+.seven-details__summary {
+  color: #000;
+  cursor: pointer;
+  padding: 1rem;
+  text-shadow: 0 1px 0 #fff; }
+
+.seven-details__summary:hover,
+.seven-details__summary:focus,
+.seven-details[open] > .seven-details__summary {
+  background-color: #eee;
+  color: #000; }
+
+.seven-details__wrapper {
+  padding: 1rem; }
+  .seven-details__wrapper .uw-input,
+  .seven-details__wrapper .form-text {
+    width: 100% !important; }
+
 .form-item {
   margin: 0 0 1rem; }
 
@@ -4676,7 +4956,7 @@ fieldset,
     .form-item__time:focus:focus,
     .form-item__url:focus:focus,
     .form-item__week:focus:focus {
-      outline-color: #4773aa; }
+      outline-color: #000; }
   
   .form-item__color:hover,
   .form-item__color:focus,
@@ -4806,7 +5086,7 @@ fieldset,
       vertical-align: middle;
       width: 1.25rem; }
       .form-item__checkbox + .form-item__label::before:focus {
-        outline-color: #4773aa; }
+        outline-color: #000; }
   .form-item__checkbox:checked + .form-item__label::before {
     background-image: url("../source/images/icons/correct.svg");
     background-color: #0071BC;
@@ -4814,7 +5094,7 @@ fieldset,
     background-repeat: no-repeat;
     background-size: 1.25rem; }
   .form-item__checkbox:focus + .form-item__label::before {
-    outline-color: #4773aa; }
+    outline-color: #000; }
   .form-item__checkbox:disabled + .form-item__label {
     cursor: default;
     opacity: 0.35; }
@@ -4847,7 +5127,7 @@ fieldset,
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     width: 18px; }
     .form-item--radio .form-item__radio:focus {
-      outline-color: #4773aa; }
+      outline-color: #000; }
     .form-item--radio .form-item__radio:checked {
       background-color: #0071BC;
       border: 2px solid #fff;
@@ -4880,11 +5160,11 @@ fieldset,
     box-shadow: none;
     outline: 0; }
     .form-item--range .form-item__range:focus::-moz-range-thumb {
-      outline-color: #4773aa; }
+      outline-color: #000; }
     .form-item--range .form-item__range:focus::-ms-thumb {
-      outline-color: #4773aa; }
+      outline-color: #000; }
     .form-item--range .form-item__range:focus::-webkit-slider-thumb {
-      outline-color: #4773aa; }
+      outline-color: #000; }
   .form-item--range .form-item__range:disabled {
     cursor: default;
     opacity: 0.35; }
@@ -4900,7 +5180,7 @@ fieldset,
     transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
     width: 1.375rem; }
     .form-item--range .form-item__range::-moz-range-thumb:focus {
-      outline-color: #4773aa; }
+      outline-color: #000; }
   .form-item--range .form-item__range::-moz-range-track {
     background: #A2A2A2;
     border: 1px solid #757575;
@@ -4923,7 +5203,7 @@ fieldset,
     width: 1.375rem;
     margin-top: 0 !important; }
     .form-item--range .form-item__range::-ms-thumb:focus {
-      outline-color: #4773aa; }
+      outline-color: #000; }
   .form-item--range .form-item__range::-ms-track {
     background: #A2A2A2;
     border: 1px solid #757575;
@@ -4953,7 +5233,7 @@ fieldset,
     -webkit-appearance: none;
     margin-top: -1.125rem; }
     .form-item--range .form-item__range::-webkit-slider-thumb:focus {
-      outline-color: #4773aa; }
+      outline-color: #000; }
   .form-item--range .form-item__range::-webkit-slider-runnable-track {
     background: #A2A2A2;
     border: 1px solid #757575;
@@ -6379,6 +6659,11 @@ fieldset,
 .messages__content > *:last-child {
   margin-bottom: 0; }
 
+.message__list {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
 .message--status,
 .messages--status {
   background-color: #e7f4e4;
@@ -6438,7 +6723,7 @@ fieldset,
   white-space: nowrap;
   width: 100%; }
   .uw-navigation-button:focus {
-    outline-color: #4773aa; }
+    outline-color: #000; }
   @media (min-width: 48.06rem) {
     .uw-navigation-button {
       display: none; } }
@@ -6568,7 +6853,7 @@ fieldset,
       display: inline-block; } }
 
 .pager__item--current.pager__item {
-  background-color: #0071BC;
+  background-color: #000;
   color: #fff; }
 
 .pager__link {
@@ -6577,10 +6862,10 @@ fieldset,
   .pager__link:visited {
     color: #000; }
   .pager__link:hover, .pager__link:focus {
-    background-color: #0071BC;
+    background-color: #000;
     color: #fff; }
   .pager__link:active {
-    background-color: #112E51;
+    background-color: #e4b429;
     color: #fff; }
 
 .pager__link--previous,
@@ -6596,7 +6881,7 @@ fieldset,
     .pager__link--previous:hover .pager__link-icon g, .pager__link--previous:focus .pager__link-icon g,
     .pager__link--next:hover .pager__link-icon g,
     .pager__link--next:focus .pager__link-icon g {
-      fill: #0071BC; }
+      fill: #000; }
   .pager__link--previous:visited,
   .pager__link--next:visited {
     color: #000; }
@@ -6660,7 +6945,7 @@ fieldset,
   overflow: hidden; }
 
 .progress__bar {
-  background-color: #0071BC;
+  background-color: #000;
   border-radius: 0.1875rem;
   height: 1rem;
   transition-duration: 0.5s;
@@ -7255,7 +7540,10 @@ picture {
 
 .uw-tabcontent[role="tabpanel"] {
   display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
   flex-flow: row wrap;
+  gap: 1.25rem;
   padding-top: 24px; }
   .uw-tabcontent[role="tabpanel"][hidden] {
     display: none; }
@@ -7264,17 +7552,42 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
   display: flex; }
 
 .uw-tabcontent[role="tabpanel"] .card {
+  -webkit-box: 1;
+  -moz-box: 1;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-box-align: start;
+  -moz-box-align: start;
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
   width: 100%; }
-  @media (min-width: 40.06rem) {
+  @media (min-width: 48.06rem) {
     .uw-tabcontent[role="tabpanel"] .card {
+      -webkit-box: 1;
+      -moz-box: 1;
+      -webkit-flex: 1 1 auto 0 auto;
+      -ms-flex: 1 1 auto 0 auto;
+      flex: 1 1 auto 0 auto;
+      -webkit-box-flex: 1;
+      -moz-box-flex: 1;
+      -ms-flex: 1;
+      -webkit-flex-grow: 1;
       flex-grow: 1;
-      width: 45%; } }
+      width: 45%; }
+      .uw-contained-width--narrow .uw-tabcontent[role="tabpanel"] .card,
+      .layout--uw-inverted-l-right .uw-tabcontent[role="tabpanel"] .card,
+      .layout--uw-inverted-l-left .uw-tabcontent[role="tabpanel"] .card,
+      .layout--uw-2-col .uw-tabcontent[role="tabpanel"] .card,
+      .layout--uw-3-col .uw-tabcontent[role="tabpanel"] .card,
+      .layout--uw-4-col .uw-tabcontent[role="tabpanel"] .card {
+        width: 100% !important; } }
   @media (min-width: 63.1875rem) {
     .uw-tabcontent[role="tabpanel"] .card {
-      width: 32%; } }
-
-.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title {
-  margin-top: 0; }
+      width: 30%; }
+      .uw-contained-width--wide .uw-tabcontent[role="tabpanel"] .card {
+        width: 45% !important; } }
 
 .block-local-tasks-block nav nav ul li a {
   font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
@@ -7293,7 +7606,7 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
 
 .tag-list__item {
   display: inline-block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
   margin-right: 0.5rem; }
 
 .tag {
@@ -7302,7 +7615,7 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
   background: none;
   display: inline-block;
   font-size: 0.88889rem;
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.25rem 0;
   padding: 0;
   text-align: center;
   text-decoration: none;
@@ -7315,6 +7628,8 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
     text-decoration: none; }
   .tag:active {
     color: #757575; }
+  .tag:hover, .tag:focus {
+    text-decoration: underline; }
   .tag--normal {
     font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
     font-size: 0.88889rem; }
@@ -7341,6 +7656,51 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
       text-decoration: underline; }
     .tag--simple:active {
       color: #757575; }
+  .tag a {
+    color: #000;
+    text-decoration: none;
+    background: none;
+    display: inline-block;
+    font-size: 0.88889rem;
+    margin: 0 0 0.5rem 0;
+    padding: 0;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: background 200ms cubic-bezier(0.4, 0, 1, 1); }
+    .tag a:visited {
+      color: #000; }
+    .tag a:hover, .tag a:focus {
+      color: #757575;
+      text-decoration: none; }
+    .tag a:active {
+      color: #757575; }
+  .tag--normal a {
+    font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+    font-size: 0.88889rem; }
+  .tag--small a {
+    font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+    font-size: 0.702rem; }
+  .tag--full a {
+    background: #fdd54f;
+    color: #000;
+    font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+    font-size: 0.702rem;
+    padding: 0.5rem; }
+    .tag--full a:hover, .tag--full a:focus {
+      background: #000;
+      color: #fdd54f; }
+  .tag--simple a {
+    color: #000;
+    text-decoration: none;
+    font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
+    .tag--simple a:visited {
+      color: #000; }
+    .tag--simple a:hover, .tag--simple a:focus {
+      color: #757575;
+      text-decoration: underline; }
+    .tag--simple a:active {
+      color: #757575; }
 
 .org-default a.tag--full {
   background-color: #000;
@@ -7398,66 +7758,6 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
     background-color: #ffa5aa;
     color: #b71233; }
 
-.card--teaser .card__body {
-  display: flex;
-  flex-direction: column; }
-
-.card--teaser .card__header {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-  width: 100%; }
-
-.card--teaser .card__date {
-  margin-bottom: 1rem;
-  order: 2; }
-
-.card--teaser .card__author {
-  font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
-  font-size: 14.22224px;
-  order: 3; }
-  .card--teaser .card__author a {
-    color: #000;
-    text-decoration: underline; }
-    .card--teaser .card__author a:visited {
-      color: #000; }
-    .card--teaser .card__author a:hover, .card--teaser .card__author a:focus {
-      color: #757575;
-      text-decoration: none; }
-    .card--teaser .card__author a:active {
-      color: #757575; }
-
-.card--teaser .card__title {
-  margin: 0.5rem 0;
-  order: 1;
-  padding: 0; }
-  .card--teaser .card__title a {
-    color: #000;
-    text-decoration: none; }
-    .card--teaser .card__title a:visited {
-      color: #000; }
-    .card--teaser .card__title a:hover, .card--teaser .card__title a:focus {
-      color: #757575;
-      text-decoration: none; }
-    .card--teaser .card__title a:active {
-      color: #757575; }
-
-.teaser--event .card__date {
-  margin-bottom: 0.5rem;
-  order: 1; }
-
-.teaser--event .card__title {
-  margin: 0;
-  order: 2; }
-
-.teaser--news .card__date {
-  margin-bottom: 0.5rem;
-  order: 1; }
-
-.teaser--news .card__title {
-  margin: 0;
-  order: 2; }
-
 .uw-bg--black {
   background-color: #000; }
 
@@ -7648,38 +7948,97 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
   padding: 1rem 0;
   text-align: center; }
 
-.views-element-container {
+.view-header {
+  grid-column: 1/3;
+  grid-row: 1/2;
+  width: 100%; }
+  .view-header .uw-view--toggle {
+    padding-right: 0;
+    text-align: right;
+    width: 100%; }
+
+.view-content {
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  gap: 1.25rem;
+  grid-column: 1/3;
+  grid-row: 2/3;
+  width: 100%; }
+  @media (min-width: 63.1875rem) {
+    .view-content {
+      grid-column: 1/2; } }
+
+.view-content--message {
+  grid-row: 2/3;
+  margin: 0; }
+  .view-content--message .message,
+  .view-content--message .messages {
+    margin: 0; }
+
+.view.view-uw-view-contacts, .view.view-uw-view-profiles, .view.view-taxonomy-term, .view.view-uw-view-blogs, .view.view-uw-view-events, .view.view-uw-view-news-items {
   margin-left: auto;
   margin-right: auto;
   max-width: 75rem;
   padding: 0 16px;
-  padding: 1rem; }
+  display: grid;
+  grid-template-columns: 100%;
+  padding: 1rem;
+  position: relative; }
   @media (min-width: 75rem) {
-    .views-element-container {
+    .view.view-uw-view-contacts, .view.view-uw-view-profiles, .view.view-taxonomy-term, .view.view-uw-view-blogs, .view.view-uw-view-events, .view.view-uw-view-news-items {
       padding-left: 0;
       padding-right: 0; } }
+  @media (min-width: 63.1875rem) {
+    .view.view-uw-view-contacts, .view.view-uw-view-profiles, .view.view-taxonomy-term, .view.view-uw-view-blogs, .view.view-uw-view-events, .view.view-uw-view-news-items {
+      gap: 1.5rem;
+      grid-template-columns: auto 18.75rem; }
+      .view.view-uw-view-contacts .view-header, .view.view-uw-view-profiles .view-header, .view.view-taxonomy-term .view-header, .view.view-uw-view-blogs .view-header, .view.view-uw-view-events .view-header, .view.view-uw-view-news-items .view-header {
+        display: none; } }
   @media (min-width: 75rem) {
-    .views-element-container {
-      padding: 1rem 0; } }
-
-.view-content {
-  display: inline-flex;
-  flex-flow: row wrap; }
+    .view.view-uw-view-contacts, .view.view-uw-view-profiles, .view.view-taxonomy-term, .view.view-uw-view-blogs, .view.view-uw-view-events, .view.view-uw-view-news-items {
+      padding: 1rem 0;
+      padding-top: 0; } }
 
-.view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
-  align-items: flex-start;
-  margin: 1rem;
-  width: 100%; }
-  @media (min-width: 40.06rem) {
-    .view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
-      flex-grow: 1;
-      width: 45%; } }
+.view-filters {
+  grid-column: 1/3;
+  grid-row: 2/3;
+  height: 0;
+  overflow: hidden;
+  width: 0; }
+  .view-filters form {
+    width: 100%; }
+    .view-filters form .button,
+    .view-filters form .image-button {
+      margin: 0; }
   @media (min-width: 63.1875rem) {
-    .view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
-      width: 30%; } }
-
-.view__filters {
-  margin-bottom: 1rem; }
+    .view-filters {
+      display: inherit;
+      grid-column: 2/3;
+      height: inherit;
+      margin: 0;
+      overflow: inherit;
+      width: 18.75rem; }
+      .grid .view-filters,
+      .list .view-filters {
+        margin-top: 4rem !important; }
+      .view-filters .uw-input,
+      .view-filters .form-text {
+        width: 100% !important; }
+      .view-filters .views-exposed-form {
+        margin: 0 !important;
+        padding: 0 !important; } }
+
+.view-header .uw-view--toggle {
+  margin: 0;
+  padding: 0 0 1rem; }
+  .view-header .uw-view--toggle .button[data-value-off-canvas="offcanvas"] ~ .view-filters {
+    background: #f5a4f4;
+    width: 0; }
+  .view-header .uw-view--toggle .button[data-value-off-canvas="offcanvas"]:target ~ .view-filters {
+    background: #db5c3a;
+    width: 18.75rem !important; }
 
 .uw-whos-online-block h3 {
   font-size: 15px;
diff --git a/css/uw-dashboards.css b/css/uw-dashboards.css
index d3e9f949d7d5e52e1f2dff6d6784a1ddd0a7f208..674b4f56e6ad844426550c52299430b49eea69cf 100644
--- a/css/uw-dashboards.css
+++ b/css/uw-dashboards.css
@@ -462,14 +462,58 @@
         /* Match the width of WCMS2's wide: 753px */
         margin: inherit; }
 
-.path-dashboard .layout__region {
-  margin-bottom: 1rem;
-  margin-right: 1rem; }
-
-.path-dashboard .layout__region--wrapper {
-  border: 1px solid #bfbfba;
-  box-shadow: none;
-  padding: 1rem; }
+.uw-term--layout {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2.5rem;
+  margin-top: 1.5rem;
+  position: relative; }
+  .uw-term--layout .uw-content--grid-list__style_controls {
+    padding: 0;
+    width: 100%; }
+  .uw-term--layout .l-section {
+    margin: 0 !important;
+    width: 100%; }
+  .uw-term--layout .uw-term--header {
+    width: 100%; }
+  .uw-term--layout .uw-term--results {
+    width: 100%; }
+  .uw-term--layout .uw-term--filters {
+    display: none;
+    width: 100%; }
+    .uw-term--layout .uw-term--filters .uw-input {
+      width: 100% !important; }
+    .uw-term--layout .uw-term--filters .l-section__content {
+      margin: 0;
+      max-width: inherit;
+      padding: 0;
+      width: 100%; }
+  @media (min-width: 48.06rem) {
+    .uw-term--layout {
+      display: flex;
+      flex-direction: row;
+      gap: 1.5rem;
+      justify-content: center; }
+      .uw-term--layout .uw-term--results {
+        width: clamp(320px, 900px, calc(100vw - 333px)); }
+      .uw-term--layout .uw-term--filters {
+        display: inherit;
+        margin: 0;
+        width: 18.75rem; }
+        .grid .uw-term--layout .uw-term--filters,
+        .list .uw-term--layout .uw-term--filters {
+          margin-top: 4rem !important; }
+        .uw-term--layout .uw-term--filters .uw-input,
+        .uw-term--layout .uw-term--filters .form-text {
+          width: 100% !important; }
+        .uw-term--layout .uw-term--filters .views-exposed-form {
+          margin: 0 !important;
+          padding: 0 !important; } }
+
+.views-filter {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 20px; }
 
 .layout--uw-1-col {
   display: grid;
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 4809c83d1a23d6cd2ee002987756c3a870314e4f..bcc0831f754d85c7478248ca37f27ea173313fab 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -1,3 +1,7 @@
+/**
+ * @file
+ */
+
 (function ($, Drupal) {
   Drupal.behaviors.cardbanner = {
     attach: function (context, settings) {
@@ -39,6 +43,10 @@
   };
 })(jQuery, Drupal);
 
+/**
+ * @file
+ */
+
 /**
  * @file
  */
diff --git a/source/_data/design-tokens.artifact.yml b/source/_data/design-tokens.artifact.yml
index 8ae11be10e2604f0ed68d768d64d47edbe4102d4..8a19a6cf9847da0f6f41b20e9ed156797a378953 100644
--- a/source/_data/design-tokens.artifact.yml
+++ b/source/_data/design-tokens.artifact.yml
@@ -230,10 +230,10 @@ gesso:
         text-light: "#A2A2A2"
         text-dark: "#757575"
         text-darker: "#000"
-        accent: "#0071BC"
-        accent-dark: "#112E51"
-        accent-light: "#4773aa"
-        focus: "#4773aa"
+        accent: "#000"
+        accent-dark: "#e4b429"
+        accent-light: "#ffea30"
+        focus: "#000"
       error:
         background: "#f9dede"
         border: "#e59393"
diff --git a/source/_patterns/00-config/01-mixins/_mixins.uw.scss b/source/_patterns/00-config/01-mixins/_mixins.uw.scss
index dc274d5c6c806342bb2f273cec9e5a5ac18cfbb3..a0d34e9a6bd00165f161578f1f44f37cde9730c9 100644
--- a/source/_patterns/00-config/01-mixins/_mixins.uw.scss
+++ b/source/_patterns/00-config/01-mixins/_mixins.uw.scss
@@ -1,3 +1,18 @@
+$test-color-1: #b9f1c5;
+$test-color-2: #eeaab0;
+$test-color-3: #eae9a9;
+$test-color-4: #f5a4f4;
+$test-color-5: #a753b6;
+$test-color-6: #db5c3a;
+$test-color-7: #257471;
+$test-color-8: #68633f;
+$test-color-9: rgb(0, 161, 255);
+$test-color-10: #00ff58;
+$test-color-11: #3e3d12;
+$test-color-12: #f00;
+
+
+
 @mixin uw-contained-width {
   margin-left: auto;
   margin-right: auto;
@@ -16,3 +31,308 @@
   width: 100%;
 
 }
+
+
+
+
+
+
+// Flexbox display
+@mixin flexbox {
+
+  display: flex;
+}
+
+// Inline flex display
+@mixin inline-flex {
+  display: inline-flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+
+  // Box-Flex only supports a flex-grow value so lets grab the
+  // first item in the list and just return that.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row (default) | row-reverse | column | column-reverse
+@mixin flex-direction($direction: row) {
+  @if $direction == row-reverse {
+    -webkit-box-direction: reverse;
+    -moz-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+  } @else if $direction == column {
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+  } @else if $direction == column-reverse {
+    -webkit-box-direction: reverse;
+    -moz-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+  }
+  -ms-flex-direction: $direction;
+  -webkit-flex-direction: $direction;
+  flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -ms-flex-order: $int;
+  -webkit-order: $int;
+
+  order: $int;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -ms-flex: $int;
+  -webkit-flex-grow: $int;
+
+  flex-grow: $int;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($int: 0) {
+
+  -ms-flex: $int;
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  flex-shrink: $int;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+
+
+// Display of elements in gridded style.
+@mixin uw-flex-grid($value: flexbox){
+  @if $value == inline-flex {
+    @include inline-flex();
+    @include flex-flow(row wrap);
+    gap:1.25rem
+  }@else if $value == term{
+    @include flexbox();
+    @include flex-wrap(wrap);
+    gap:1.25rem
+  }@else if $value == card{
+    @include flexbox();
+    @include flex-direction(column);
+  }@else{
+    @include flexbox();
+    @include flex-flow(row wrap);
+    gap:1.25rem
+  }
+}
+// Display of grid item.
+@mixin uw-flex-grid-item(){
+  @include flex();
+  @include align-items(flex-start);
+  width:100%;
+  @include medium{
+    @include flex(1 1 auto);
+    @include flex-grow(1);
+    width: 45%;
+    .uw-contained-width--narrow &,
+    .layout--uw-inverted-l-right &,
+    .layout--uw-inverted-l-left &,
+    .layout--uw-2-col &,
+    .layout--uw-3-col &,
+    .layout--uw-4-col &{
+      width:100% !important;
+    }
+  }
+  @include large{
+    width: 30%;
+    .uw-contained-width--wide &{
+      width:45% !important;
+    }
+  }
+}
+
+// Display of list item.
+@mixin uw-flex-term-item(){
+  width:100%;
+  @include medium{
+    @include flex(1 1 auto);
+    @include flex-grow(1);
+    width: 45%;
+  }
+  @include large{
+    //width: 30%;
+  }
+
+}
+
+// Display of elements in list style.
+@mixin uw-flex-list(){
+//
+}
+// Display of list item.
+@mixin uw-flex-list-item(){
+//
+}
+
+
+// Display of elements in mosaic style.
+@mixin uw-flex-mosaic(){
+//
+}
+// Display of mosiac item.
+@mixin uw-flex-mosaic-item(){
+//
+}
+
+
+// Display of elements gallery style.
+@mixin uw-flex-gallery(){
+
+}
+// Display of gallery item.
+@mixin uw-flex-gallery-item(){
+
+}
diff --git a/source/_patterns/00-config/_design-tokens.artifact.scss b/source/_patterns/00-config/_design-tokens.artifact.scss
index a809a81067e9a7509bf8a139c29bf65840a5a4a0..1249577cb3c4c884c2c8bdae2d0f4d50f1b162ac 100644
--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -273,10 +273,10 @@ $gesso: (
         text-light: #A2A2A2,
         text-dark: #757575,
         text-darker: #000,
-        accent: #0071BC,
-        accent-dark: #112E51,
-        accent-light: #4773aa,
-        focus: #4773aa,
+        accent: #000,
+        accent-dark: #e4b429,
+        accent-light: #ffea30,
+        focus: #000,
       ),
       error: (
         background: #f9dede,
@@ -511,4 +511,4 @@ $gesso: (
     xxl: 96px,
   ),
   gutter-width: 40px,
-);
+);
\ No newline at end of file
diff --git a/source/_patterns/00-config/config.design-tokens.yml b/source/_patterns/00-config/config.design-tokens.yml
index f5e2930b79eb77fb00d338cb5492316976564d9c..152cc98bb7d57b937abfbfd92508ccacb689abf4 100644
--- a/source/_patterns/00-config/config.design-tokens.yml
+++ b/source/_patterns/00-config/config.design-tokens.yml
@@ -230,10 +230,10 @@ gesso:
         text-light: grayscale.gray-4
         text-dark: grayscale.gray-5
         text-darker: grayscale.black
-        accent: brand.blue.base
-        accent-dark: brand.blue.dark-1
-        accent-light: brand.blue.light
-        focus: brand.blue.light
+        accent: brand.org-default.uw-black.primary
+        accent-dark: brand.org-default.uw-gold.lvl4
+        accent-light: brand.org-default.uw-gold.lvl2
+        focus: brand.org-default.uw-black.primary
       error:
         background: other.red.light-1
         border: other.red.light
diff --git a/source/_patterns/02-base/02-html-elements/25-forms/forms.twig b/source/_patterns/02-base/02-html-elements/25-forms/forms.twig
index 0c76486a956a218d798dd6232f381b3c10b44848..f076b9e1d053da9fd42e1193762c6385812b9f73 100644
--- a/source/_patterns/02-base/02-html-elements/25-forms/forms.twig
+++ b/source/_patterns/02-base/02-html-elements/25-forms/forms.twig
@@ -54,8 +54,11 @@
             {% if form_item.is_button_tag %}
                 {% include '@components/button/button.twig' with {
                     'is_button_tag': true,
+                    'data_type_name' : form_item.data_type_name,
+                    'data_type_value' : form_item.data_type_value,
                     'text': form_item.text,
                     'type': form_item.type,
+                    'button_modifer_classes': item.button_modifer_classes,
                     'classes': form_item.classes,
                     'formaction': form_item.formaction,
                     'form': form_item.form,
@@ -125,4 +128,4 @@
 {% endif %}
 
 
-</form>
\ No newline at end of file
+</form>
diff --git a/source/_patterns/02-base/date-formats/_date-formats.scss b/source/_patterns/02-base/date-formats/_date-formats.scss
index c2ce8243b858f26036127e30f9cfb1af4c01d5d0..e6ac4dad9c606df8bc8a8c7cf15fcb89cb53b766 100644
--- a/source/_patterns/02-base/date-formats/_date-formats.scss
+++ b/source/_patterns/02-base/date-formats/_date-formats.scss
@@ -8,7 +8,10 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
 .uw-date-pl h4{
   margin-bottom: rem(gesso-spacing(xs));
 }
-.uw-date{
+.uw-date,
+.uw-field--name-field-uw-blog-date,
+.uw-field--name-field-uw-event-date,
+.uw-field--name-field-uw-news-date{
   background-color:gesso-brand(org-default,uw-black,'primary');
   clear: both;
   color: gesso-brand(org-default,uw-gold,'primary');
@@ -28,7 +31,10 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
 
 @each $faculty in $faculties {
   .#{$faculty} {
-    .uw-date{
+    .uw-date,
+    .uw-field--name-field-uw-blog-date time,
+    .uw-field--name-field-uw-event-date time,
+    .uw-field--name-field-uw-news-date time{
       @if $faculty == org-default {
         background-color:gesso-brand(org-default,uw-black,'primary');
         color: gesso-brand(org-default,uw-gold,'primary');
diff --git a/source/_patterns/03-layouts/footer/footer.twig b/source/_patterns/03-layouts/footer/footer.twig
index 3e8a9ab35864f2458fe422d21475650998246fd8..0c5448944ac6a275d8e739f7917c8d6a2b0c6d01 100644
--- a/source/_patterns/03-layouts/footer/footer.twig
+++ b/source/_patterns/03-layouts/footer/footer.twig
@@ -37,6 +37,3 @@
         </div>
     </div>
 </footer>
-{% if is_demo_footer %}
-    {% include "@components/eu-cookie-compliance/eu-cookie-compliance.twig" %}
-{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/grid/_grid.scss b/source/_patterns/03-layouts/grid/_grid.scss
index 9deeb4ea0af6e817ec6c09d84ce3bb2383b71ebd..1cbeed4e90e1fb4430c6e4aa589bbcd0995b1e82 100644
--- a/source/_patterns/03-layouts/grid/_grid.scss
+++ b/source/_patterns/03-layouts/grid/_grid.scss
@@ -20,7 +20,7 @@ $grid-gutter: gesso-get-map(gutter-width);
 
   @include breakpoint(600px) {
     > * {
-      @include set-flex-column(2, $grid-gutter, 275px);
+      @include set-flex-column(2, $grid-gutter, 333px);
     }
 
     @supports (display: grid) {
@@ -38,7 +38,7 @@ $grid-gutter: gesso-get-map(gutter-width);
 
   @include breakpoint(760px) {
    > * {
-     @include set-flex-column(3, $grid-gutter, 275px);
+     @include set-flex-column(3, $grid-gutter, 333px);
    }
 
     @supports (display: grid) {
@@ -56,7 +56,7 @@ $grid-gutter: gesso-get-map(gutter-width);
 
   @include breakpoint(600px 800px) {
     > * {
-      @include set-flex-column(2, $grid-gutter, 275px);
+      @include set-flex-column(2, $grid-gutter, 333px);
     }
 
     @supports (display: grid) {
diff --git a/source/_patterns/03-layouts/layout/_layout.scss b/source/_patterns/03-layouts/layout/_layout.scss
index 81867818c033350dadfa287771d27b1c4e260fd2..c6e190754fcc6478699c1f200153982be9887ec2 100644
--- a/source/_patterns/03-layouts/layout/_layout.scss
+++ b/source/_patterns/03-layouts/layout/_layout.scss
@@ -45,15 +45,72 @@
     }
 
   }
-}
+}// Term page layout
+$sidebar-width: 18.75rem;
+.uw-term--layout{
+  display: flex;
+  flex-direction: column;
+  margin-bottom:2.5rem;
+  margin-top:1.5rem;
+  position:relative;
+  .uw-content--grid-list{
+    &__style_controls{
+      padding:0;
+      width:100%;
+    }
+  }
+  .l-section{
+    margin:0 !important;
+    width:100%;
+  }
+  .uw-term--header{
+    width:100%;
+  }
+  .uw-term--results{
+    width:100%;
+  }
+  .uw-term--filters{
+    display:none;
+    width:100%;
+    .uw-input{
+      width:100% !important;
+    }
+    .l-section__content{
+      margin:0;
+      max-width:inherit;
+      padding:0;
+      width:100%;
+    }
+  }
+  @include medium{
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
+    justify-content: center;
 
-.path-dashboard .layout__region {
-  margin-bottom: 1rem;
-  margin-right: 1rem;
+    .uw-term--results{
+      width: clamp(320px, 900px, calc(100vw - 333px));
+    }
+    .uw-term--filters{
+      display:inherit;
+      margin: 0;
+      .grid &,
+      .list &{
+        margin-top: 4rem !important;
+      }
+      width: $sidebar-width;
+      .uw-input,
+      .form-text{
+        width:100% !important;
+      }
+      .views-exposed-form{
+        margin:0 !important;
+        padding:0 !important;
+      }
+    }
+  }
 }
-
-.path-dashboard .layout__region--wrapper {
-  border: 1px solid #bfbfba;
-  box-shadow: none;
-  padding: 1rem;
+.views-filter{
+  position:sticky;
+  top: 20px;
 }
diff --git a/source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss b/source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
index ba10c2c43183c3019cfd060104b80d09bda71dca..ae3f338f5242cc6b02aeb7ddd58ad05cd1d64e51 100644
--- a/source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
@@ -6,5 +6,3 @@
 .layout--uw-1-col .layout__region--first {
   grid-column: 1 / 2;
 }
-
-
diff --git a/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss b/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
index e7833ebc39488404159455d5f2faa4228533828b..f1fe4f914bdf65b605ddb29f083bf81437492bd1 100644
--- a/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
@@ -59,4 +59,3 @@
     }
   }
 }
-
diff --git a/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss b/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
index 2cd42a8cf53fd993a7c0f79d1923952fac641ce9..9c5d83ca420265efb75fea3d447c3adfd1fa45e1 100644
--- a/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
@@ -62,5 +62,3 @@
     }
   }
 }
-
-
diff --git a/source/_patterns/03-layouts/section/section.twig b/source/_patterns/03-layouts/section/section.twig
index 4a67a5a07272775412090dd0c24fee9561e0828c..2278544f325cfe6709c820742a48914b85a5e42d 100644
--- a/source/_patterns/03-layouts/section/section.twig
+++ b/source/_patterns/03-layouts/section/section.twig
@@ -1,4 +1,4 @@
-<section class="l-section">
+<section class="l-section {{ section_modifier_classes }}">
   {% if has_constrain %}
     <div class="l-constrain {{ constrain_modifier_classes }}">
   {% endif %}
diff --git a/source/_patterns/03-layouts/section/section.yml b/source/_patterns/03-layouts/section/section.yml
index b3f0342555d31de7076677cefc86c844d2b2fddd..e53a1a7502c7d85b98c7439fb7a459adaa7899d6 100644
--- a/source/_patterns/03-layouts/section/section.yml
+++ b/source/_patterns/03-layouts/section/section.yml
@@ -1,4 +1,5 @@
 ---
+section_modifier_classes: ''
 has_constrain: false
 constrain_modifier_classes: ''
 section_title_element: 'h2'
diff --git a/source/_patterns/03-layouts/sidebar/_sidebar.scss b/source/_patterns/03-layouts/sidebar/_sidebar.scss
index 6083d170ac395165e65eefdf395a29c518ca037d..b2d517a23e13f33b015c8c062474d7ed9fed2dfd 100644
--- a/source/_patterns/03-layouts/sidebar/_sidebar.scss
+++ b/source/_patterns/03-layouts/sidebar/_sidebar.scss
@@ -47,6 +47,9 @@ $l-sidebar-gutter: rem(gesso-spacing(sm));
   }
 }
 
+.l-sidebar-offcanvas{
+
+}
 
 .l-sidebar--multi-2 {
   @include breakpoint($l-sidebar-bp) {
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 2368a97813e8e920aca723024fab1e712f2a517d..65af0137d6e787a73ea5963ee4826c025a26fe2b 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -20,5 +20,8 @@
       'menu_name': footer_menu_name,
       'items': footer_menu
     }%}
+    {% if pattern_lab %}
+      {% include "@components/eu-cookie-compliance/eu-cookie-compliance.twig" %}
+    {% endif %}
   {% endblock %}
 </div>
diff --git a/source/_patterns/04-components/banners/banners.js b/source/_patterns/04-components/banners/banners.js
index 9e9a9d7c64c828d5a1919c7827b765f788d651fc..d7419fb41ba9485a4719f291611b163da1c1dc82 100644
--- a/source/_patterns/04-components/banners/banners.js
+++ b/source/_patterns/04-components/banners/banners.js
@@ -1,3 +1,7 @@
+/**
+ * @file
+ */
+
 (function ($, Drupal) {
   Drupal.behaviors.cardbanner = {
     attach: function (context, settings) {
diff --git a/source/_patterns/04-components/button/_button.scss b/source/_patterns/04-components/button/_button.scss
index 7c9411032a9e4db5586593fa814b68a3e8d0bf79..7af0955f91082f289442152ffdaa1a3d3e1a9fa9 100644
--- a/source/_patterns/04-components/button/_button.scss
+++ b/source/_patterns/04-components/button/_button.scss
@@ -44,6 +44,15 @@
     padding:rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
   }
 }
+.button--icon{
+  font-size: rem(gesso-font-size(-3));
+  max-width: 5rem;
+  padding:rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
+  &:hover,
+  &:focus {
+    padding:rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
+  }
+}
 
 // Drupal outputs this class on buttons that can delete content.
 .button--primary {
diff --git a/source/_patterns/04-components/button/button.twig b/source/_patterns/04-components/button/button.twig
index 4ffb2119dcc5eed887a86ecb7ea5bd78ee8063fd..f5257ba361f45c4134d30903b192b8b1a0131a39 100644
--- a/source/_patterns/04-components/button/button.twig
+++ b/source/_patterns/04-components/button/button.twig
@@ -3,6 +3,9 @@
 {% endif %}
 {% if is_button_tag %}
   <button
+          {% if data_type_name %}
+            data-value-{{ data_type_name }}="{{ data_type_value }}"
+          {% endif %}
 
           {% if is_disabled %}
             disabled
@@ -75,4 +78,4 @@
 
 {% if is_demo %}
   </div>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss
index 0ced2d10ff404af6e10b0e8e37346d61f4f48605..4a622b3ab9786f761efd107edd04153dc8248a50 100644
--- a/source/_patterns/04-components/card/_card.scss
+++ b/source/_patterns/04-components/card/_card.scss
@@ -8,12 +8,18 @@ $card-meta-color: gesso-color(ui, generic, text-dark) !default;
 $card-padding: rem(gesso-spacing(sm)) !default;
 
 .card {
-  display: flex;
-  flex-direction: column;
+  @include uw-flex-grid(card);
+  //background:$test-color-1;
+  width: 100%;
+
+  .views-row &{
+    height:100%;
+  }
 }
+
 // if card--show-hover class is present then show "
 .card--show-hover{
-  border-bottom: 4px solid $card-accent-border-color;
+  border-bottom: 3px solid $card-accent-border-color;
   box-shadow: gesso-box-shadow(1);
   transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
   &:hover,
@@ -21,67 +27,95 @@ $card-padding: rem(gesso-spacing(sm)) !default;
     box-shadow: gesso-box-shadow(3);
   }
 }
+// top
 .card__header{
+  //background: $test-color-2;
+  color: $card-meta-color;
+  margin-bottom: rem(gesso-spacing(sm));
+  width: 100%;
 
 }
 .card__date {
   font-size: rem(gesso-font-size(0));
+  margin-bottom: rem(gesso-spacing(sm));
 }
-
-.card__author{
-  font-size: rem(gesso-font-size(0));
+.card__title {
+  margin:rem(gesso-spacing(xs)) 0;
+  padding:0;
+  width: 100%;
   a {
-    @include link(
-      $card-link-color,
-      $card-link-color-hover
+    @include link-reverse(
+        $card-link-color,
+        $card-link-color-hover
     );
   }
 }
-.card__title {
-
+.card__author{
+  font-family: gesso-font-family(systemmedium);
+  font-size: gesso-font-size(-1);
   a {
     @include link(
-      $card-link-color,
-      $card-link-color-hover
+        $card-link-color,
+        $card-link-color-hover
     );
   }
 }
 
+
+
+// body
 .card__body {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
+  @include uw-flex-grid();
+  //background:$test-color-10;
+  gap:inherit;
   padding: $card-padding;
-
+  width: 100%;
   p:last-child {
     margin-bottom: 0;
   }
 }
-
-.card__date {
-  color: $card-meta-color;
-  margin-bottom: rem(gesso-spacing(sm));
-}
-
 .card__content {
+  //background:$test-color-9;
   margin-bottom: rem(gesso-spacing(md));
+  width: 100%;
 }
 
 .card__media {
+  //background:$test-color-4;
   margin-bottom: rem(gesso-spacing(md));
+  order:-1;
+  width: 100%;
   a {
-    display: block;
+
+    display:inline-block;
     height: 100%;
     width: 100%;
+    &:focus{
+      img{
+        -webkit-filter: grayscale(100%);
+        filter: grayscale(100%);
+        transition:filter gesso-duration(shortest) gesso-easing(ease-in);
+      }
+    }
   }
   img {
+    -webkit-filter: grayscale(0);
+    filter: grayscale(0);
+    transition:filter gesso-duration(shortest) gesso-easing(ease-in);
     width: 100%;
+    &:hover{
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
+      transition:filter gesso-duration(shortest) gesso-easing(ease-in);
+    }
   }
 }
-
+// footer
 .card__footer {
+  //background:$test-color-12;
   margin-top: auto;
-  padding: 0 0 $card-padding;
+  padding: rem(gesso-spacing(md));
+  width: 100%;
   > div {
     margin-bottom: rem(gesso-spacing(sm));
     &:last-child {
@@ -90,22 +124,25 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   }
 }
 .card__tags{
-
+  width: 100%;
 }
 .card__readmore {
   text-align: right;
 }
 .card__social{
-
+  max-width:20rem;
+  width: 100%;
 }
 
+
+
 .card--feature {
   .card__body {
     padding-top: $card-padding;
   }
 
   .card__media {
-    flex-grow: 1;
+
     margin-bottom: 0;
   }
 
diff --git a/source/_patterns/04-components/card/card--banner/_card--banner.scss b/source/_patterns/04-components/card/card--banner/_card--banner.scss
index c088c3907008b49bc1b8283b0d92af82d95aa24f..c60239b450dbd5870e6a255ccea744f03d6dcaf5 100644
--- a/source/_patterns/04-components/card/card--banner/_card--banner.scss
+++ b/source/_patterns/04-components/card/card--banner/_card--banner.scss
@@ -2,6 +2,7 @@
 
   .card__body {
     padding: 0;
+    position:relative;
   }
 
   .card__header {
@@ -28,6 +29,7 @@
 
   .card__media {
     margin-bottom: 0;
+    order:inherit;
   }
 
   .card__title {
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.md b/source/_patterns/04-components/card/card--banner/card--banner.md
index 424f8504024af223c085f5f3a1d300fc02376917..b8c0fb1e4c4d21adf43348b5a70ca4b8674a8bc2 100644
--- a/source/_patterns/04-components/card/card--banner/card--banner.md
+++ b/source/_patterns/04-components/card/card--banner/card--banner.md
@@ -15,4 +15,4 @@ __Variables:__
     * autoplay [integer] 1 or 0 to turn on autoplay of banners.
     * slide_speed [integer] The speed for the transition of banners.
     * style [string] The style to be used for the banners.
-    * transition_speed [integer] The speed of the transitions between banners.
\ No newline at end of file
+    * transition_speed [integer] The speed of the transitions between banners.
diff --git a/source/_patterns/04-components/card/card--feature/card--feature.yml b/source/_patterns/04-components/card/card--feature/card--feature.yml
index f0784504c059a1b3b7f9507ef13595c996704ee6..b57a488c8677f9ed13bdb38f3c9c42fb49a06e42 100644
--- a/source/_patterns/04-components/card/card--feature/card--feature.yml
+++ b/source/_patterns/04-components/card/card--feature/card--feature.yml
@@ -11,18 +11,23 @@ date_format: 'long-datetime'
 read_more: true
 show_hover: true
 tags:
-  - url: '#'
-    title: 'Tag 1'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 2'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 3'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 4'
-    type: 'simple'
+  tag1:
+    -
+      url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    -
+      url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    -
+      url: '#'
+      title: 'Tag 3'
+      type: 'simple'
+    -
+      url: '#'
+      title: 'Tag 4'
+      type: 'simple'
 sources:
   - srcset: '../../../../source/images/president/president_xlarge.jpg'
     media: 'all and (min-width: 63.19rem)'
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 66d07abecba87810547fcd449aa0a217cb5184fb..107f8396c7a57aba3115d124ea462819f5381797 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -2,7 +2,6 @@
 
 <article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
   <div class="card__body">
-
     {% if title or author or date or sub_title %}
       <div class="card__header">
         {% if date %}
@@ -22,93 +21,77 @@
             {% endif %}
           </div>
         {% endif %}
-
         {% if title or sub_title %}
-
           {% if title %}
             <h{{ header_level }} class="card__title">
               {% if url %}
-                <a href="{{ url }}">
-              {% endif %}
-              {{ title }}
-              {% if url %}
-                </a>
+              <a href="{{ url }}">
+                {% endif %}
+                {{ title }}
+                {% if url %}
+              </a>
               {% endif %}
             </h{{ header_level }}>
           {% endif %}
-
           {% if sub_title %}
             <span class="sub-title">{{ sub_title }}</span>
           {% endif %}
-
         {% endif %}
 
-        {% if author_name %}
+        {% if author %}
           <div class="card__author">
-            {% if author_link %}
-              by
-              <a href="{{ author_link }}">
-            {% endif %}
-
-            {{ author_name }}
-
-            {% if author_link %}
-              </a>
+            by
+            {% if author.link %}
+              <a href="{{ author.link }}">{{ author.name }}</a>
+            {% else %}
+              {{ author.name }}
             {% endif %}
           </div>
         {% endif %}
-
       </div>
     {% endif %}
-
-
     {% if sources or img_element %}
       <div class="card__media">
         {% if url %}
-          <a href="{{ url }}">
-        {% endif %}
-
-        {% include "@components/responsive-image/responsive-image.twig" with {
-          sources: sources,
-          img_element: img_element,
-          alt: alt
-        } %}
-
-        {% if url %}
-          </a>
+        <a href="{{ url }}">
+          {% endif %}
+          {% include "@components/responsive-image/responsive-image.twig" with {
+            sources: sources,
+            img_element: img_element,
+            alt: alt
+          }%}
+          {% if url %}
+        </a>
         {% endif %}
       </div>
     {% endif %}
-
-    {% if content %}
       <div class="card__content">
-        {{ content }}
-      </div>
-    {% endif %}
+      {{ content }}
+    </div>
 
-    {% if footer or read_more or tags or social_media %}
-      <div class="card__footer">
-        {{ footer }}
-        {% if tags %}
-          <div class="card__tags">
+  </div>
+  {% if footer or read_more or tags or social_media %}
+    <div class="card__footer">
+      {{ footer }}
+      {% if tags %}
+        <div class="card__tags">
+          {% for tag in tags %}
             {% include "@components/tag-list/tag-list.twig" with {
-              items: tags
+              items: tag
             } %}
-          </div>
-        {% endif %}
-
-        {% if read_more and url %}
-          <div class="card__readmore">
-            {{ macros.readmore(url, title) }}
-          </div>
-        {% endif %}
-
-        {%  if social_media %}
-          <div class="card__social {{ social_media_placement }}">
-            {% include "@components/menu/menu--social/menu--social.twig" %}
-          </div>
-        {% endif %}
-      </div>
-    {% endif %}
-  </div>
+          {% endfor %}
+        </div>
+      {% endif %}
+      {% if read_more and url %}
+        <div class="card__readmore">
+          {{ macros.readmore(url, title) }}
+        </div>
+      {% endif %}
+      {%  if social_media %}
+        <div class="card__social {{ social_media_placement }}">
+          {% include "@components/menu/menu--social/menu--social.twig" %}
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
 </article>
diff --git a/source/_patterns/04-components/card/card.yml b/source/_patterns/04-components/card/card.yml
index e5a577319117b4bdbf1f961729fc11b191d419ac..db027095da575cf67890cb9901404bfcdf42ba6f 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -5,24 +5,42 @@ header_level: '2'
 url: '#'
 author_name: 'Author Lastname'
 author_link: '#'
-footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
+footer:
 date: 'Friday, September 19, 2020'
 date_format: 'long-date'
 read_more: true
 show_hover: true
 tags:
-  - url: '#'
-    title: 'Tag 1'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 2'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 3'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 4'
-    type: 'simple'
+  tag1:
+    -
+      url: '#'
+      title: 'Tag 1'
+      type: 'simple'
+    -
+      url: '#'
+      title: 'Tag 2'
+      type: 'simple'
+    -
+      url: '#'
+      title: 'Tag 3'
+      type: 'simple'
+    -
+      url: '#'
+      title: 'Tag 4'
+      type: 'simple'
+  tag2:
+      -
+        url: '#'
+        title: 'Tag 5'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 6'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 7'
+        type: 'simple'
 sources:
   - srcset: '../../../../source/images/president/president_xlarge.jpg'
     media: 'all and (min-width: 63.19rem)'
diff --git a/source/_patterns/04-components/content-grid-list/_content-grid-list.scss b/source/_patterns/04-components/content-grid-list/_content-grid-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..64eb77d633a0b788dc147f664a7134e5f7a0c765
--- /dev/null
+++ b/source/_patterns/04-components/content-grid-list/_content-grid-list.scss
@@ -0,0 +1,46 @@
+.uw-content--grid-list {
+  &__layout {
+    @include uw-flex-grid();
+    .card {
+      @include uw-flex-term-item();
+      // Set the rest of the cards to print
+      // third.
+      order: 3;
+      .card__body{
+        height:inherit;
+      }
+
+      &:first-of-type {
+        @include uw-flex-term-item();
+        // Set the first card to match
+        // full width of gridded and print second row.
+        order: 2;
+        width: 100% !important;
+      }
+    }
+  }
+  &__style_controls {
+    @include uw-flex-term-item();
+    @include align-content(flex-end);
+    // Set the controls for the layout
+    // and off canvas as top row.
+    order: 1;
+    width: 100% !important;
+  }
+}
+
+.view-content {
+  @include uw-flex-grid();
+
+  .views-row{
+    @include uw-flex-term-item();
+    order: 3;
+    &:first-of-type {
+      @include uw-flex-term-item();
+      // Set the first card to match
+      // full width of gridded and print second row.
+      order: 2;
+      width: 100% !important;
+    }
+  }
+}
diff --git a/source/_patterns/04-components/content-grid-list/content-grid-list.js b/source/_patterns/04-components/content-grid-list/content-grid-list.js
new file mode 100644
index 0000000000000000000000000000000000000000..7f574a860d8e734f5ad3f3478f24be0742063fbe
--- /dev/null
+++ b/source/_patterns/04-components/content-grid-list/content-grid-list.js
@@ -0,0 +1,3 @@
+/**
+ * @file
+ */
diff --git a/source/_patterns/04-components/content-grid-list/content-grid-list.md b/source/_patterns/04-components/content-grid-list/content-grid-list.md
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/content-grid-list/content-grid-list.twig b/source/_patterns/04-components/content-grid-list/content-grid-list.twig
new file mode 100644
index 0000000000000000000000000000000000000000..c02fc6ada9e37fff78c8340e00e5a31e8680cbba
--- /dev/null
+++ b/source/_patterns/04-components/content-grid-list/content-grid-list.twig
@@ -0,0 +1,43 @@
+{% if not views %}
+<div class="uw-content--grid-list__layout {{ layout_style }}">
+{% endif %}
+  {% block content %}
+    {% include '@global/06-break-hints/break-hints.twig' %}
+    {% for item in lists %}
+        {% if views %}
+          <div class ="views-row">
+        {% endif %}
+        {% include "@components/card/card.twig" with {
+          modifier_classes: item.modifier_classes,
+          title: item.title,
+          header_level: '2',
+          url: item.url,
+          footer: item.footer,
+          date: item.date,
+          date_format: item.date_format,
+          read_more: item.read_more,
+          tags: item.tags,
+          tag_type: item.tag_type,
+          sources: item.sources,
+          img_element: item.img_element,
+          alt: item.alt,
+          content: item.content,
+          show_hover: true,
+          author_name: item.author_name,
+          author_link: item.author_link
+        } %}
+        {% if views %}
+          </div>
+        {% endif %}
+      {% endfor %}
+    {% if content %}
+    {{ content }}
+    {% endif %}
+  {% endblock %}
+  {% if views and pattern_lab %}
+  </div>
+{% endif %}
+{% if not views %}
+  </div>
+{% endif %}
+
diff --git a/source/_patterns/04-components/content-grid-list/content-grid-list.yml b/source/_patterns/04-components/content-grid-list/content-grid-list.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8184f092f6fa1e1d7836e3ae2c4ae0011d8de5eb
--- /dev/null
+++ b/source/_patterns/04-components/content-grid-list/content-grid-list.yml
@@ -0,0 +1,452 @@
+modifier_classes: ''
+lists:
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+
+form_classes: 'uw-layout--controls'
+layout_style: 'grid'
+use_offcanvas: true
+form_items:
+  - is_button_tag: true
+    form_item_wrapper: false
+    is_demo: false
+    is_disabled: false
+    type: ''
+    classes: button_modifier_classes
+    modifier_classes: button_modifier_classes
+    formaction: ''
+    form: ''
+    name: ''
+    formenctype: ''
+    value: ''
+    formmethod: ''
+    formtarget: ''
+    text: 'toggle-layout'
+    btnclick: |
diff --git a/source/_patterns/04-components/filters/_filters.scss b/source/_patterns/04-components/filters/_filters.scss
new file mode 100644
index 0000000000000000000000000000000000000000..859885aa127c818dbbed44077d5571bd6219f559
--- /dev/null
+++ b/source/_patterns/04-components/filters/_filters.scss
@@ -0,0 +1,63 @@
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+.views-exposed-form{
+  margin:0 !important;
+  padding:0 !important;
+  .form-actions{
+    display:flex;
+    gap:1rem;
+    .button.js-form-submit.form-submit{
+      &:first-of-type{
+        background-color: gesso-color(button, primary, background);
+        color: gesso-color(button,primary,text);
+        &:hover,
+        &:focus {
+          background-color: gesso-color(button, primary, background-hover);
+          color: gesso-color(button,primary,text);
+        }
+      }
+
+    }
+  }
+}
+
+.seven-details {
+  background-color: #fcfcfa;
+  border-bottom: 1px solid $card-accent-border-color;
+  border-radius: inherit;
+  box-shadow: gesso-box-shadow(1);
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+  transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+  &:hover,
+  &:focus-within {
+    box-shadow: gesso-box-shadow(3);
+  }
+  &:first-child{
+    margin-top: 0;
+  }
+}
+.seven-details__summary {
+  color: gesso-brand(org-default,uw-black,'primary');
+  cursor: pointer;
+  padding: 1rem;
+  text-shadow: 0 1px 0 #fff;
+
+}
+.seven-details__summary:hover,
+.seven-details__summary:focus,
+.seven-details[open] > .seven-details__summary {
+  background-color: #eee;
+  color: gesso-brand(org-default,uw-black,'primary');
+}
+.seven-details__wrapper {
+  padding: 1rem;
+  .uw-input,
+  .form-text{
+    width:100% !important;
+  }
+}
diff --git a/source/_patterns/04-components/filters/filters.twig b/source/_patterns/04-components/filters/filters.twig
new file mode 100644
index 0000000000000000000000000000000000000000..dc9e339f43ef9b86029fd396c0f45a0ec08ed3ed
--- /dev/null
+++ b/source/_patterns/04-components/filters/filters.twig
@@ -0,0 +1,225 @@
+  <div class="view-filters">
+    {% block exposed %}
+    {{ exposed }}
+    {% endblock %}
+  {% if pattern_lab %}
+    <form class="views-exposed-form bef-exposed-form" data-drupal-selector="views-exposed-form-uw-view-events-event-page" action="" method="" id="views-exposed-form-uw-view-events-event-page" accept-charset="UTF-8">
+      <div class="form--inline clearfix">
+        <details open data-drupal-selector="edit-title-collapsible" aria-describedby="edit-title-collapsible--description" id="edit-title-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-title-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+            <span>Title</span>
+          </summary>
+          <div class="seven-details__wrapper details-wrapper">
+            <div class="seven-details__description">Limit to events where the title matches:</div><div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-title form-item-title form-no-label">
+              <input class="views-ac-dependent-filter form-autocomplete form-text ui-autocomplete-input" data-drupal-selector="edit-title" data-autocomplete-path="/views-autocomplete-filters/uw_view_events/event_page/title/0" type="text" id="edit-title" name="title" value=""  maxlength="128" autocomplete="off">
+            </div>
+          </div>
+        </details>
+        <details open data-drupal-selector="edit-date-collapsible" aria-describedby="edit-date-collapsible--description" id="edit-date-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-date-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+            <span>Date range</span>
+          </summary><div class="seven-details__wrapper details-wrapper">
+            <div class="seven-details__description">Limit to events where the first date of the event:</div>
+            <div class="js-form-item form-item js-form-type-select form-type-select js-form-item-date-type form-item-date-type">
+              <label for="edit-date-type">Operator</label>
+              <select data-drupal-selector="edit-date-type" id="edit-date-type" name="date_type" class="form-select"><option value="<">Is less than</option><option value="<=">Is less than or equal to</option><option value="=" selected="selected">Is equal to</option><option value="!=">Is not equal to</option><option value=">=">Is greater than or equal to</option><option value=">">Is greater than</option><option value="between">Is between</option><option value="not between">Is not between</option></select>
+            </div>
+            <div data-drupal-selector="edit-date" id="edit-date" class="js-form-wrapper form-wrapper"><div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-date-value form-item-date-value">
+
+                <input class="bef-datepicker form-text hasDatepicker" type="text" autocomplete="off" data-drupal-selector="edit-date-value" id="edit-date-value" name="date[value]" value=""  maxlength="128" data-drupal-states="{&quot;visible&quot;:[{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;\u003C&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;\u003C=&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;=&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;!=&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;\u003E=&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;\u003E&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;regular_expression&quot;}}]}">
+
+              </div>
+              <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-date-min form-item-date-min" style="display: none;">
+                <label for="edit-date-min">Date range</label>
+                <input class="bef-datepicker form-text hasDatepicker" type="text" autocomplete="off" data-drupal-selector="edit-date-min" aria-describedby="edit-date-min--description" id="edit-date-min" name="date[min]" value=""  maxlength="128" data-drupal-states="{&quot;visible&quot;:[{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;between&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;not between&quot;}}]}">
+
+                <div id="edit-date-min--description" class="description">
+                  Limit to events where the first date of the event:
+                </div>
+              </div>
+              <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-date-max form-item-date-max" style="display: none;">
+                <label for="edit-date-max">And</label>
+                <input class="bef-datepicker form-text hasDatepicker" type="text" autocomplete="off" data-drupal-selector="edit-date-max" id="edit-date-max" name="date[max]" value=""  maxlength="128" data-drupal-states="{&quot;visible&quot;:[{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;between&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;not between&quot;}}]}">
+
+              </div>
+            </div>
+          </div>
+        </details>
+        <details open data-drupal-selector="edit-type-collapsible" aria-describedby="edit-type-collapsible--description" id="edit-type-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-type-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+            <span>Types</span>
+          </summary><div class="seven-details__wrapper details-wrapper">
+            <div class="seven-details__description">Limit to events where the type is one or more of:</div><div id="edit-type" class="form-checkboxes"><a class="bef-toggle" href="#">Select All</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-25 form-item-type-25">
+                  <input data-drupal-selector="edit-type-25" type="checkbox" id="edit-type-25" name="type[25]" value="25" class="form-checkbox">
+
+                  <label for="edit-type-25" class="option">Conference</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-26 form-item-type-26">
+                  <input data-drupal-selector="edit-type-26" type="checkbox" id="edit-type-26" name="type[26]" value="26" class="form-checkbox">
+
+                  <label for="edit-type-26" class="option">Information session</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-27 form-item-type-27">
+                  <input data-drupal-selector="edit-type-27" type="checkbox" id="edit-type-27" name="type[27]" value="27" class="form-checkbox">
+
+                  <label for="edit-type-27" class="option">Lecture</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-28 form-item-type-28">
+                  <input data-drupal-selector="edit-type-28" type="checkbox" id="edit-type-28" name="type[28]" value="28" class="form-checkbox">
+
+                  <label for="edit-type-28" class="option">Open house</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-29 form-item-type-29">
+                  <input data-drupal-selector="edit-type-29" type="checkbox" id="edit-type-29" name="type[29]" value="29" class="form-checkbox">
+
+                  <label for="edit-type-29" class="option">Performance</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-30 form-item-type-30">
+                  <input data-drupal-selector="edit-type-30" type="checkbox" id="edit-type-30" name="type[30]" value="30" class="form-checkbox">
+
+                  <label for="edit-type-30" class="option">Reception</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-31 form-item-type-31">
+                  <input data-drupal-selector="edit-type-31" type="checkbox" id="edit-type-31" name="type[31]" value="31" class="form-checkbox">
+
+                  <label for="edit-type-31" class="option">Reunion</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-32 form-item-type-32">
+                  <input data-drupal-selector="edit-type-32" type="checkbox" id="edit-type-32" name="type[32]" value="32" class="form-checkbox">
+
+                  <label for="edit-type-32" class="option">Seminar</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-33 form-item-type-33">
+                  <input data-drupal-selector="edit-type-33" type="checkbox" id="edit-type-33" name="type[33]" value="33" class="form-checkbox">
+
+                  <label for="edit-type-33" class="option">Thesis defence</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-type-34 form-item-type-34">
+                  <input data-drupal-selector="edit-type-34" type="checkbox" id="edit-type-34" name="type[34]" value="34" class="form-checkbox">
+
+                  <label for="edit-type-34" class="option">Workshop</label>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </details>
+        <details open data-drupal-selector="edit-field-uw-event-tags-target-id-collapsible" aria-describedby="edit-field-uw-event-tags-target-id-collapsible--description" id="edit-field-uw-event-tags-target-id-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-field-uw-event-tags-target-id-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+            <span>Tags</span>
+          </summary><div class="seven-details__wrapper details-wrapper">
+            <div class="seven-details__description">Limit to events tagged with one or more of:</div><div id="edit-field-uw-event-tags-target-id" class="form-checkboxes"><a class="bef-toggle" href="#">Select None</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">
+              </div>
+            </div>
+          </div>
+        </details>
+        <details open data-drupal-selector="edit-audience-collapsible" aria-describedby="edit-audience-collapsible--description" id="edit-audience-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-audience-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+            <span>Audience</span>
+          </summary><div class="seven-details__wrapper details-wrapper">
+            <div class="seven-details__description">Limit to events where the audience is one or more of:</div><div id="edit-audience" class="form-checkboxes"><a class="bef-toggle" href="#">Select All</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-1 form-item-audience-1">
+                  <input data-drupal-selector="edit-audience-1" type="checkbox" id="edit-audience-1" name="audience[1]" value="1" class="form-checkbox">
+
+                  <label for="edit-audience-1" class="option">Current students</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-2 form-item-audience-2">
+                  <input data-drupal-selector="edit-audience-2" type="checkbox" id="edit-audience-2" name="audience[2]" value="2" class="form-checkbox">
+
+                  <label for="edit-audience-2" class="option">Current undergraduate students</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-5 form-item-audience-5">
+                  <input data-drupal-selector="edit-audience-5" type="checkbox" id="edit-audience-5" name="audience[5]" value="5" class="form-checkbox">
+
+                  <label for="edit-audience-5" class="option">Future undergraduate students</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-3 form-item-audience-3">
+                  <input data-drupal-selector="edit-audience-3" type="checkbox" id="edit-audience-3" name="audience[3]" value="3" class="form-checkbox">
+
+                  <label for="edit-audience-3" class="option">Current graduate students</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-6 form-item-audience-6">
+                  <input data-drupal-selector="edit-audience-6" type="checkbox" id="edit-audience-6" name="audience[6]" value="6" class="form-checkbox">
+
+                  <label for="edit-audience-6" class="option">Future graduate students</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-4 form-item-audience-4">
+                  <input data-drupal-selector="edit-audience-4" type="checkbox" id="edit-audience-4" name="audience[4]" value="4" class="form-checkbox">
+
+                  <label for="edit-audience-4" class="option">Future students</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-7 form-item-audience-7">
+                  <input data-drupal-selector="edit-audience-7" type="checkbox" id="edit-audience-7" name="audience[7]" value="7" class="form-checkbox">
+
+                  <label for="edit-audience-7" class="option">Faculty</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-8 form-item-audience-8">
+                  <input data-drupal-selector="edit-audience-8" type="checkbox" id="edit-audience-8" name="audience[8]" value="8" class="form-checkbox">
+
+                  <label for="edit-audience-8" class="option">Staff</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-9 form-item-audience-9">
+                  <input data-drupal-selector="edit-audience-9" type="checkbox" id="edit-audience-9" name="audience[9]" value="9" class="form-checkbox">
+
+                  <label for="edit-audience-9" class="option">Alumni</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-10 form-item-audience-10">
+                  <input data-drupal-selector="edit-audience-10" type="checkbox" id="edit-audience-10" name="audience[10]" value="10" class="form-checkbox">
+
+                  <label for="edit-audience-10" class="option">Parents</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-11 form-item-audience-11">
+                  <input data-drupal-selector="edit-audience-11" type="checkbox" id="edit-audience-11" name="audience[11]" value="11" class="form-checkbox">
+
+                  <label for="edit-audience-11" class="option">Donors | Friends | Supporters</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-12 form-item-audience-12">
+                  <input data-drupal-selector="edit-audience-12" type="checkbox" id="edit-audience-12" name="audience[12]" value="12" class="form-checkbox">
+
+                  <label for="edit-audience-12" class="option">Employers</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-13 form-item-audience-13">
+                  <input data-drupal-selector="edit-audience-13" type="checkbox" id="edit-audience-13" name="audience[13]" value="13" class="form-checkbox">
+
+                  <label for="edit-audience-13" class="option">International</label>
+                </div>
+
+                <div class="js-form-item form-item js-form-type-checkbox form-type-checkbox js-form-item-audience-14 form-item-audience-14">
+                  <input data-drupal-selector="edit-audience-14" type="checkbox" id="edit-audience-14" name="audience[14]" value="14" class="form-checkbox">
+
+                  <label for="edit-audience-14" class="option">Media</label>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </details>
+        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
+          <input data-drupal-selector="edit-submit-uw-view-events" type="submit" id="edit-submit-uw-view-events" value="Apply filters" class="button js-form-submit form-submit">
+          <input data-drupal-selector="edit-reset" type="submit" id="edit-reset" name="op" value="Clear filters" class="button js-form-submit form-submit">
+        </div>
+
+      </div>
+
+    </form>
+  {% endif %}
+  </div>
+
+
diff --git a/source/_patterns/04-components/filters/filters.yml b/source/_patterns/04-components/filters/filters.yml
new file mode 100644
index 0000000000000000000000000000000000000000..849169c71aa714dc6dc717e061b702a4b38752b9
--- /dev/null
+++ b/source/_patterns/04-components/filters/filters.yml
@@ -0,0 +1,3 @@
+---
+
+
diff --git a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index 0507f32f9e74cd8ce576c51e50bf5d6768a727c8..0a6748ce4991c41b1526cdbf26d502bb74c01796 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -5,10 +5,6 @@ $menu-horizontal-sub-font-bold: gesso-font-family(systembold);
 $menu-horizontal-bar-font-size: rem(gesso-font-size(-2));
 $menu-horizontal-sub-font-size: rem(gesso-font-size(-2));
 $menu-horizontal-drop-bg: #f7f7f7;
-$test-color-1: #00ff37;
-$test-color-2: #ff2235;
-$test-color-3: #fff620;
-$test-color-4: #3d51ff;
 // Colors
 $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
 @each $faculty in $faculties {
diff --git a/source/_patterns/04-components/message/_message.scss b/source/_patterns/04-components/message/_message.scss
index 1a3fc5ba6472a70f02637f3786786e4d4e6a5c52..6339da82d45a8b79c87a990fd652b6217ad4d664 100644
--- a/source/_patterns/04-components/message/_message.scss
+++ b/source/_patterns/04-components/message/_message.scss
@@ -52,7 +52,11 @@ $message-warning-border-color: gesso-color(ui, warning, border) !default;
     margin-bottom: 0;
   }
 }
-
+.message__list{
+  list-style: none;
+  margin:0;
+  padding:0;
+}
 .message--status,
 .messages--status{
   background-color: $message-status-background-color;
diff --git a/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig b/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
index 1f1f1bc3fe6fda959057850c834975eb4a8c8e4c..e0a616c6e928d6fae3b57ba57b67b671d4330b2f 100644
--- a/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
+++ b/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
@@ -1,47 +1,5 @@
 {% for info in lists[type] %}
-  {% if type == 'Blog' %}
-
-    {% include '@components/teaser/teaser--blog/teaser--blog.twig' with {
-      'title': info.title,
-      'url': info.url,
-      'date': info.date,
-      'author_name': info.author_name,
-      'author_link': info.author_link,
-      'sources': info.sources,
-      'img_element': info.img_element,
-      'alt': info.alt,
-      'tags': info.tags,
-      'content': info.content
-    } %}
-
-  {% endif%}
-
-  {% if type == 'News' %}
-
-    {% include '@components/teaser/teaser--news/teaser--news.twig' with {
-      'title': info.title,
-      'url': info.url,
-      'date': info.date,
-      'sources': info.sources,
-      'img_element': info.img_element,
-      'alt': info.alt,
-      'content': info.content
-    } %}
-
-  {% endif %}
-
-  {% if type == 'Events' %}
-
-    {% include '@components/teaser/teaser--event/teaser--event.twig' with {
-      'title': info.title,
-      'url': info.url,
-      'date': info.date,
-      'sources': info.sources,
-      'img_element': info.img_element,
-      'alt': info.alt,
-      'tags': info.tags,
-      'content': info.content
-    } %}
-
-  {% endif %}
-{% endfor %}
\ No newline at end of file
+  {% include '@components/teaser/teaser.twig' with {
+    'teaser': info,
+  } %}
+{% endfor %}
diff --git a/source/_patterns/04-components/multi-type-list/multi-type-list.yml b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
index 70f5844dd5458a805c9601ecf7a04beff4f959e8..1db58b54fb84c4cf201f70f5b7ad3f1edb4d0869 100644
--- a/source/_patterns/04-components/multi-type-list/multi-type-list.yml
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
@@ -3,19 +3,24 @@ lists:
     -
       title: 'Blog Teaser title 1'
       url: '#'
-      date: 
+      date:
         - 'Friday, September 18, 2020'
       author_name: 'Author Lastname'
       author_link: '#'
       tags:
-        - url: '#'
-          title: 'Tag 1'
-        - url: '#'
-          title: 'Tag 2'
-        - url: '#'
-          title: 'Tag 3'
-        - url: '#'
-          title: 'Tag 4'
+        tag1:
+          - url: '#'
+            title: 'Tag 1'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 2'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 3'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 4'
+            type: 'simple'
       sources:
         - srcset: '../../../../source/images/president/president_xlarge.jpg'
           media: 'all and (min-width: 63.19rem)'
@@ -39,19 +44,24 @@ lists:
     -
       title: 'Blog Teaser title 2'
       url: '#'
-      date: 
+      date:
         - 'Friday, September 18, 2020'
       author_name: 'Author Lastname'
       author_link: '#'
       tags:
-        - url: '#'
-          title: 'Tag 1'
-        - url: '#'
-          title: 'Tag 2'
-        - url: '#'
-          title: 'Tag 3'
-        - url: '#'
-          title: 'Tag 4'
+        tag1:
+          - url: '#'
+            title: 'Tag 1'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 2'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 3'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 4'
+            type: 'simple'
       sources:
         - srcset: '../../../../source/images/president/president_xlarge.jpg'
           media: 'all and (min-width: 63.19rem)'
@@ -75,7 +85,7 @@ lists:
     -
       title: 'Blog Teaser title 3'
       url: '#'
-      date: 
+      date:
         - 'Friday, September 18, 2020'
       author_name: 'Author Lastname'
       author_link: '#'
@@ -112,8 +122,22 @@ lists:
     -
       title: 'News Teaser title 1'
       url: '#'
-      date: 
+      date:
         - 'Sep. 18, 2020'
+      tags:
+        tag1:
+          - url: '#'
+            title: 'Tag 1'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 2'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 3'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 4'
+            type: 'simple'
       sources:
         - srcset: '../../../../source/images/president/president_xlarge.jpg'
           media: 'all and (min-width: 63.19rem)'
@@ -137,8 +161,22 @@ lists:
     -
       title: 'News Teaser title 2'
       url: '#'
-      date: 
+      date:
         - 'Sep. 18, 2020'
+      tags:
+        tag1:
+          - url: '#'
+            title: 'Tag 1'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 2'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 3'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 4'
+            type: 'simple'
       sources:
         - srcset: '../../../../source/images/president/president_xlarge.jpg'
           media: 'all and (min-width: 63.19rem)'
@@ -162,8 +200,22 @@ lists:
     -
       title: 'News Teaser title 3'
       url: '#'
-      date: 
+      date:
         - 'Sep. 18, 2020'
+      tags:
+        tag1:
+          - url: '#'
+            title: 'Tag 1'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 2'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 3'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 4'
+            type: 'simple'
       sources:
         - srcset: '../../../../source/images/president/president_xlarge.jpg'
           media: 'all and (min-width: 63.19rem)'
@@ -188,8 +240,22 @@ lists:
     -
       title: 'Event Teaser title 1'
       url: '#'
-      date: 
+      date:
         -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+      tags:
+        tag1:
+          - url: '#'
+            title: 'Tag 1'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 2'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 3'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 4'
+            type: 'simple'
       sources:
         - srcset: '../../../../source/images/president/president_xlarge.jpg'
           media: 'all and (min-width: 63.19rem)'
@@ -213,8 +279,22 @@ lists:
     -
       title: 'Event Teaser title 2'
       url: '#'
-      date: 
+      date:
         -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+      tags:
+        tag1:
+          - url: '#'
+            title: 'Tag 1'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 2'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 3'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 4'
+            type: 'simple'
       sources:
         - srcset: '../../../../source/images/president/president_xlarge.jpg'
           media: 'all and (min-width: 63.19rem)'
@@ -238,8 +318,22 @@ lists:
     -
       title: 'Event Teaser title 3'
       url: '#'
-      date: 
+      date:
         -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+      tags:
+        tag1:
+          - url: '#'
+            title: 'Tag 1'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 2'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 3'
+            type: 'simple'
+          - url: '#'
+            title: 'Tag 4'
+            type: 'simple'
       sources:
         - srcset: '../../../../source/images/president/president_xlarge.jpg'
           media: 'all and (min-width: 63.19rem)'
diff --git a/source/_patterns/04-components/tabs/_tabs.scss b/source/_patterns/04-components/tabs/_tabs.scss
index f9e3ab91d73987bc0f4dd145028e3f13a73fc7a7..692455bff912b1a7cfaf968fa2ebb4bd760460a4 100644
--- a/source/_patterns/04-components/tabs/_tabs.scss
+++ b/source/_patterns/04-components/tabs/_tabs.scss
@@ -18,7 +18,7 @@
 
 //buttons wrapper
 .uw-tab {
-  display:flex;
+  @include flexbox();
 
   html:not(.js) &{
     display:none;
@@ -46,8 +46,7 @@
 }
 
 .uw-tabcontent[role="tabpanel"] {
-  display:flex;
-  flex-flow: row wrap;
+  @include uw-flex-grid();
   padding-top: gesso-spacing(md);
 
   &[hidden] {
@@ -56,26 +55,13 @@
 }
 
 html:not(.js) .uw-tabcontent[role="tabpanel"][hidden]{
-  display: flex;
+ @include flexbox();
 }
 
 .uw-tabcontent[role="tabpanel"] .card{
-  width:100%;
-
-  @include small{
-    flex-grow: 1;
-    width: 45%;
-  }
-
-  @include large{
-    width: 32%;
-  }
+  @include uw-flex-grid-item();
 }
 
-// lineup the top of the date with the title in blog teaser
-.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title{
-  margin-top:0;
-}
 
 .block-local-tasks-block{
   nav nav ul li a {
diff --git a/source/_patterns/04-components/tag-list/_tag-list.scss b/source/_patterns/04-components/tag-list/_tag-list.scss
index a114a0d6a5ed7a358577645a7f9ce020bb5d32fb..9a242a1a09ac8a245fb8c92c73de0c25a52b8c20 100644
--- a/source/_patterns/04-components/tag-list/_tag-list.scss
+++ b/source/_patterns/04-components/tag-list/_tag-list.scss
@@ -4,6 +4,6 @@
 
 .tag-list__item {
   display: inline-block;
-  margin-bottom: rem(gesso-spacing(xs));
+  margin-bottom: rem(gesso-spacing(xxs));
   margin-right: rem(gesso-spacing(xs));
 }
diff --git a/source/_patterns/04-components/tag/_tag.scss b/source/_patterns/04-components/tag/_tag.scss
index 32968e11507c827f9fc63fa2add75a772f2ab428..ba7cc13d250aa477ad5feaf17c26d38ce96c739a 100644
--- a/source/_patterns/04-components/tag/_tag.scss
+++ b/source/_patterns/04-components/tag/_tag.scss
@@ -14,7 +14,7 @@ $tag-font-size-small: rem(gesso-font-size(-3)) !default;
   background:none;
   display: inline-block;
   font-size: $tag-font-size-normal;
-  margin: 0 0 rem(gesso-spacing(xs)) 0;
+  margin: 0 0 rem(gesso-spacing(xxs)) 0;
   padding:0;
   text-align: center;
   text-decoration: none;
@@ -23,7 +23,7 @@ $tag-font-size-small: rem(gesso-font-size(-3)) !default;
 
   &:hover,
   &:focus {
-
+    text-decoration: underline;
   }
   &--normal{
     font-family: $tag-font-family-normal;
@@ -53,6 +53,67 @@ $tag-font-size-small: rem(gesso-font-size(-3)) !default;
     );
     font-family: $tag-font-family-normal;
   }
+
+
+
+
+
+  a{
+    @include link-no-underline(
+        $card-link-color,
+        $card-link-color-hover
+    );
+    background:none;
+    display: inline-block;
+    font-size: $tag-font-size-normal;
+    margin: 0 0 rem(gesso-spacing(xs)) 0;
+    padding:0;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition:background gesso-duration(short) gesso-easing(ease-in);
+
+    &:hover,
+    &:focus {
+
+    }
+  }
+  &--normal{
+    a{
+    font-family: $tag-font-family-normal;
+    font-size: $tag-font-size-normal;
+    }
+  }
+  &--small{
+    a {
+      font-family: $tag-font-family-small;
+      font-size: $tag-font-size-small;
+    }
+  }
+  &--full{
+    a {
+      background: gesso-brand(org-default, uw-gold, 'primary');
+      color: gesso-brand(org-default, uw-black, 'primary');
+      font-family: $tag-font-family-small;
+      font-size: $tag-font-size-small;
+      padding: rem(gesso-spacing(xs));
+
+      &:hover,
+      &:focus {
+        background: gesso-brand(org-default, uw-black, 'primary');
+        color: gesso-brand(org-default, uw-gold, 'primary');
+      }
+    }
+  }
+  &--simple {
+    a {
+      @include link-reverse(
+          $card-link-color,
+          $card-link-color-hover
+      );
+      font-family: $tag-font-family-normal;
+    }
+  }
 }
 
 @each $faculty in $faculties {
diff --git a/source/_patterns/04-components/teaser/_teaser.scss b/source/_patterns/04-components/teaser/_teaser.scss
deleted file mode 100644
index f4ac39a5fcb7d79a20b445aa07f2cdb86ebe801f..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/_teaser.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// @file
-// Styles for teaser.
-
-// .teaser {}
-.card--teaser{
-
-  .card__body {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .card__header{
-    display:flex;
-    flex-direction: column;
-    margin-bottom: rem(gesso-spacing(sm));
-    width:100%;
-
-  }
-  .card__date {
-    margin-bottom: rem(gesso-spacing(sm));
-    order:2;
-  }
-  .card__author{
-    font-family: gesso-font-family(systemmedium);
-    font-size: gesso-font-size(-1);
-    order:3;
-    a {
-      @include link(
-       $card-link-color,
-       $card-link-color-hover
-      );
-
-    }
-  }
-  .card__title {
-   margin:rem(gesso-spacing(xs)) 0;
-   order:1;
-   padding:0;
-
-    a {
-      @include link-no-underline(
-        $card-link-color,
-        $card-link-color-hover
-      );
-    }
-  }
-  .card__content {
-  }
-  .card__media {
-  }
-  .card__footer{
-    .card__tags{
-
-    }
-    .card__readmore{
-
-    }
-    .card__social{
-
-    }
-  }
-}
diff --git a/source/_patterns/04-components/teaser/teaser--blog/_teaser--blog.scss b/source/_patterns/04-components/teaser/teaser--blog/_teaser--blog.scss
deleted file mode 100644
index daea109cac6f09333792ee645a4ca25b79974673..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--blog/_teaser--blog.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-//// @file
-//// Styles for blog teaser.
-//
-//.teaser--blog{
-//  .card__body {
-//  }
-//
-//  .card__header{
-//  }
-//
-//  .card__date {
-//  }
-//
-//  .card__author{
-//  }
-//
-//  .card__title{
-//  }
-//
-//  .card__content {
-//  }
-//
-//  .card__media {
-//  }
-//  .card__footer{
-//    .card__tags{
-//
-//    }
-//    .card__readmore{
-//
-//    }
-//    .card__social{
-//
-//    }
-//  }
-//}
-//
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md
deleted file mode 100644
index 4fa12aa613b0028bdda3535b5a5cb12f9f171bbd..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-el: .teaser--blog
-title: Teaser blog
----
-
-__Variables: (same form card)__
-* modifier_classes: [string] Classes to modify the default component styling.
-* title: [string] Title of the card.
-* header_level: [string] Set the level of herder <h?> tag for card
-* url: [string] URL of the card.
-* author_name:  [string] Author name.
-* author_link:  [string] URL for the author link.
-* show_hover: [boolean] to show outline and shadow on hover
-* date: [string] Date of the card.
-* date_format: [string] Choose the date format used for presentation.
-    * long-date
-    * long-datetime
-    * medium-date
-    * medium-datetime
-    * medium-date-short-month
-    * short-date
-    * short-datetime
-* sources: [string] URL for the srcset of picture tag inside responsive-image.
-* img_element: [string] Url to source of fall back image.
-* alt: [string] Alt text to the image used in the picture tag or fallback image.
-* content: [string] Content of the card.
-* tags: [array] List of taxonomy tags
-    * type: [string] Type of the tag, it will add class ".tag--type".
-    * size: [string] Size of the tag, it will add class ".tag--size"
-    * url: [string] URL of the tag.
-    * title: [string] Title of the tag.
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
deleted file mode 100644
index f42e5e9d7eddab32f321f15ab99e50159ba6b44f..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
+++ /dev/null
@@ -1,21 +0,0 @@
-{% set teaser_modifier_classes -%}
-    card--teaser teaser--blog {{ modifier_classes }}
-{%- endset %}
-
-{% include "@components/teaser/teaser.twig" with {
-    modifier_classes: teaser_modifier_classes,
-    title: title,
-    url: url,
-    date: date,
-    date_format: 'long-datetime',
-    tags: tags,
-    tag_type: 'simple',
-    sources: sources,
-    img_element: img_element,
-    alt: alt,
-    show_hover: show_hover,
-    content: content,
-    header_level: '2',
-    author_name: author_name,
-    author_link: author_link
-} %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
deleted file mode 100644
index fd5ee3fda8d5ce275a4950113f382cbe9cc91af9..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: 'Blog Teaser title'
-url: '#'
-date: 
-  - 'Friday, September 18, 2020'
-author_name: 'Author Lastname'
-author_link: '#'
-tags:
-  - url: '#'
-    title: 'Tag 1'
-  - url: '#'
-    title: 'Tag 2'
-  - url: '#'
-    title: 'Tag 3'
-  - url: '#'
-    title: 'Tag 4'
-sources:
-  - srcset: '../../../../source/images/president/president_xlarge.jpg'
-    media: 'all and (min-width: 63.19rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_large.jpg'
-    media: 'all and (min-width: 49.81rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_medium.jpg'
-    media: 'all and (min-width: 30rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_small.jpg'
-    media: 'all and (min-width: 25rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_xsmall.jpg'
-    media: 'all and (min-width: 15rem)'
-    type: 'image/jpeg'
-img_element: '../../../../source/images/president/president_xlarge.jpg'
-alt: 'Alternative text for blog teaser photo'
-content: |-
-  <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
diff --git a/source/_patterns/04-components/teaser/teaser--event/_teaser--event.scss b/source/_patterns/04-components/teaser/teaser--event/_teaser--event.scss
deleted file mode 100644
index f1a8fc637368565befed80e1b8ba424c7fa9c74a..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--event/_teaser--event.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// @file
-// Styles for event teaser.
-
-.teaser--event{
-  .card__date {
-    margin-bottom: rem(gesso-spacing(xs));
-    order:1;
-  }
-  .card__title{
-    margin:0;
-    order:2;
-  }
-}
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.md b/source/_patterns/04-components/teaser/teaser--event/teaser--event.md
deleted file mode 100644
index a99888383adb3c156e6b7f826d4369f1a6e22892..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--event/teaser--event.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-el: .teaser--event
-title: Teaser Event
----
-
-__Variables: (same form card)__
-* modifier_classes: [string] Classes to modify the default component styling.
-* title: [string] Title of the card.
-* header_level: [string] Set the level of herder <h?> tag for card
-* url: [string] URL of the card.
-* author_name:  [string] Author name.
-* author_link:  [string] URL for the author link.
-* show_hover: [boolean] to show outline and shadow on hover
-* date: [string] Date of the card.
-* date_format: [string] Choose the date format used for presentation.
-    * long-date
-    * long-datetime
-    * medium-date
-    * medium-datetime
-    * medium-date-short-month
-    * short-date
-    * short-datetime
-* sources: [string] URL for the srcset of picture tag inside responsive-image.
-* img_element: [string] Url to source of fall back image.
-* alt: [string] Alt text to the image used in the picture tag or fallback image.
-* content: [string] Content of the card.
-* tags: [array] List of taxonomy tags
-    * type: [string] Type of the tag, it will add class ".tag--type".
-    * size: [string] Size of the tag, it will add class ".tag--size"
-    * url: [string] URL of the tag.
-    * title: [string] Title of the tag.
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig b/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
deleted file mode 100644
index 82aa5b2911cde28189b667e4e8f2d6275dde4c92..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
+++ /dev/null
@@ -1,17 +0,0 @@
-{% set teaser_modifier_classes -%}
-    card--teaser teaser--event {{ modifier_classes }}
-{%- endset %}
-
-{% include "@components/teaser/teaser.twig" with {
-  modifier_classes: teaser_modifier_classes,
-  title: title,
-  url: url,
-  date: date.0,
-  date_format: 'long-datetime',
-  sources: sources,
-  img_element: img_element,
-  alt: alt,
-  show_hover: false,
-  content: content,
-  header_level: '2',
-} %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml b/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
deleted file mode 100644
index 3c49ef090d92a6e922c1e16a36386c6d3ef27915..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 'Event Teaser title'
-url: '#'
-date: 
-  - 'Friday, September 18, 2020 - 4:20 PM'
-sources:
-  - srcset: '../../../../source/images/president/president_xlarge.jpg'
-    media: 'all and (min-width: 63.19rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_large.jpg'
-    media: 'all and (min-width: 49.81rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_medium.jpg'
-    media: 'all and (min-width: 30rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_small.jpg'
-    media: 'all and (min-width: 25rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_xsmall.jpg'
-    media: 'all and (min-width: 15rem)'
-    type: 'image/jpeg'
-img_element: '../../../../source/images/president/president_xlarge.jpg'
-alt: 'Alternative text for blog teaser photo'
-content: |-
-  <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
diff --git a/source/_patterns/04-components/teaser/teaser--news/_teaser--news.scss b/source/_patterns/04-components/teaser/teaser--news/_teaser--news.scss
deleted file mode 100644
index 8c881cca2907436380d675a45e5b71ff6edc0ab6..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--news/_teaser--news.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// @file
-// Styles for news teaser.
-
-.teaser--news{
-  .card__date {
-    margin-bottom: rem(gesso-spacing(xs));
-    order:1;
-  }
-  .card__title{
-    margin:0;
-    order:2;
-  }
-}
diff --git a/source/_patterns/04-components/teaser/teaser--news/teaser--news.md b/source/_patterns/04-components/teaser/teaser--news/teaser--news.md
deleted file mode 100644
index 64466f7de1777d5e73b996098c25d606d607cf28..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--news/teaser--news.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-el: .teaser--news
-title: Teaser news
----
-
-__Variables: (same form card)__
-* modifier_classes: [string] Classes to modify the default component styling.
-* title: [string] Title of the card.
-* header_level: [string] Set the level of herder <h?> tag for card
-* url: [string] URL of the card.
-* author_name:  [string] Author name.
-* author_link:  [string] URL for the author link.
-* show_hover: [boolean] to show outline and shadow on hover
-* date: [string] Date of the card.
-* date_format: [string] Choose the date format used for presentation.
-    * long-date
-    * long-datetime
-    * medium-date
-    * medium-datetime
-    * medium-date-short-month
-    * short-date
-    * short-datetime
-* sources: [string] URL for the srcset of picture tag inside responsive-image.
-* img_element: [string] Url to source of fall back image.
-* alt: [string] Alt text to the image used in the picture tag or fallback image.
-* content: [string] Content of the card.
-* tags: [array] List of taxonomy tags
-    * type: [string] Type of the tag, it will add class ".tag--type".
-    * size: [string] Size of the tag, it will add class ".tag--size"
-    * url: [string] URL of the tag.
-    * title: [string] Title of the tag.
diff --git a/source/_patterns/04-components/teaser/teaser--news/teaser--news.twig b/source/_patterns/04-components/teaser/teaser--news/teaser--news.twig
deleted file mode 100644
index b350ef54074a58049931e887906df120232f63d5..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--news/teaser--news.twig
+++ /dev/null
@@ -1,17 +0,0 @@
-{% set teaser_modifier_classes -%}
-    card--teaser teaser--news {{ modifier_classes }}
-{%- endset %}
-
-{% include "@components/teaser/teaser.twig" with {
-    modifier_classes: teaser_modifier_classes,
-    title: title,
-    url: url,
-    date: date,
-    date_format: 'medium-date-short-month',
-    sources: sources,
-    img_element: img_element,
-    alt: alt,
-    show_hover: show_hover,
-    content: content,
-    header_level: '2',
-} %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/teaser/teaser--news/teaser--news.yml b/source/_patterns/04-components/teaser/teaser--news/teaser--news.yml
deleted file mode 100644
index 85b7d7ec67857b1f259dcc7ff9d4ece939264f0a..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser--news/teaser--news.yml
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 'News Teaser title'
-url: '#'
-date:
-  - 'Sep. 18, 2020'
-sources:
-  - srcset: '../../../../source/images/president/president_xlarge.jpg'
-    media: 'all and (min-width: 63.19rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_large.jpg'
-    media: 'all and (min-width: 49.81rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_medium.jpg'
-    media: 'all and (min-width: 30rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_small.jpg'
-    media: 'all and (min-width: 25rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_xsmall.jpg'
-    media: 'all and (min-width: 15rem)'
-    type: 'image/jpeg'
-img_element: '../../../../source/images/president/president_xlarge.jpg'
-alt: 'Alternative text for blog teaser photo'
-content: |-
-  <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
diff --git a/source/_patterns/04-components/teaser/teaser.md b/source/_patterns/04-components/teaser/teaser.md
deleted file mode 100644
index 7432452b42b02fab4d214a994de69d4e2090e1c0..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-el: .teaser
-title: Teaser
----
-
-__Variables: (same form card)__
-* modifier_classes: [string] Classes to modify the default component styling.
-* title: [string] Title of the card.
-* header_level: [string] Set the level of herder <h?> tag for card
-* url: [string] URL of the card.
-* author_name:  [string] Author name.
-* author_link:  [string] URL for the author link.
-* date: [string] Date of the card.
-* date_format: [string] Choose the date format used for presentation.
-    * long-date
-    * long-datetime
-    * medium-date
-    * medium-datetime
-    * medium-date-short-month
-    * short-date
-    * short-datetime
-* read_more: [boolean] Whether to show the read more link.
-* footer: [string] Footer content of the card.
-* sources: [string] URL for the srcset of picture tag inside responsive-image.
-* img_element: [string] Url for the fallback image.
-* alt: [string] Alt text to the image used in the picture tag or fallback image.
-* content: [string] Content of the card.
-* social_media: [array] Social media icons that can be included to card
-    * text
-    * url
-* social_media_placement: [string] Class name for where social media is placed"
-* tags: [array] List of taxonomy tags
-    * type: [string] Type of the tag, it will add class ".tag--type".
-    * size: [string] Size of the tag, it will add class ".tag--size"
-    * url: [string] URL of the tag.
-    * title: [string] Title of the tag.
diff --git a/source/_patterns/04-components/teaser/teaser.twig b/source/_patterns/04-components/teaser/teaser.twig
index 44a54f429bf082adf6261bc3bab634bc8794b693..d4153975f4771cd490ebef47d3900c051b7f7ee8 100644
--- a/source/_patterns/04-components/teaser/teaser.twig
+++ b/source/_patterns/04-components/teaser/teaser.twig
@@ -1,21 +1,13 @@
-{% set teaser_modifier_classes -%}
-    card--teaser {{ modifier_classes }}
-{%- endset %}
-
-{% include "@components/card/card.twig" with {
-    modifier_classes: teaser_modifier_classes,
-    title: title,
-    url: url,
-    date_format: date_format,
-    date: date,
-    tags: tags,
-    tag_type: tag_type,
-    sources: sources,
-    img_element: img_element,
-    alt: alt,
-    show_hover: show_hover,
-    content: content,
-    header_level: '2',
-    author_name: author_name,
-    author_link: author_link
+{% include '@components/card/card.twig' with {
+  'title': teaser.title,
+  'date': teaser.date,
+  'sources': teaser.image.sources,
+  'img_element': teaser.image.img_element,
+  'alt': teaser.image.alt,
+  'tags': teaser.tags,
+  'content': teaser.content,
+  'header_level': 2,
+  'show_hover': true,
+  'author': teaser.author,
+  'url': teaser.url,
 } %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/teaser/teaser.yml b/source/_patterns/04-components/teaser/teaser.yml
deleted file mode 100644
index 7060f05eeb9587afd545d5861f5f6f22e517d137..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/teaser/teaser.yml
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: 'This is a Teaser title using the card component'
-url: '#'
-author_name: 'Author Lastname'
-author_link: '#'
-date: 'Friday, September 18, 2020'
-tags:
-  - url: '#'
-    title: 'Tag 1'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 2'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 3'
-    type: 'simple'
-  - url: '#'
-    title: 'Tag 4'
-    type: 'simple'
-sources:
-  - srcset: '../../../../source/images/president/president_xlarge.jpg'
-    media: 'all and (min-width: 63.19rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_large.jpg'
-    media: 'all and (min-width: 49.81rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_medium.jpg'
-    media: 'all and (min-width: 30rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_small.jpg'
-    media: 'all and (min-width: 25rem)'
-    type: 'image/jpeg'
-  - srcset: '../../../../source/images/president/president_xsmall.jpg'
-    media: 'all and (min-width: 15rem)'
-    type: 'image/jpeg'
-img_element: '../../../../source/images/president/president_xlarge.jpg'
-alt: 'Alternative text'
-content: |-
-  <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
diff --git a/source/_patterns/04-components/view/_view.scss b/source/_patterns/04-components/view/_view.scss
index 706feb356f554029271d72a94d0879231489e39d..97ac554b612f21c8eda3dc75b4b0b4c2d6433aeb 100644
--- a/source/_patterns/04-components/view/_view.scss
+++ b/source/_patterns/04-components/view/_view.scss
@@ -1,22 +1,53 @@
 // @file
 // Styles for a view.
+$view-accent-border-color: gesso-color(ui, generic, accent) !default;
+$view-link-color: gesso-color(text, on-light) !default;
+$view-link-color-hover: gesso-color(ui, generic, text-dark) !default;
+$view-meta-color: gesso-color(ui, generic, text-dark) !default;
+$view-padding: rem(gesso-spacing(sm)) !default;
+$sidebar-width: 18.75rem;
 
-// Align the views container to the max width contain-width function.
-.views-element-container{
-  @include uw-contained-width;
-  padding: rem(gesso-spacing(sm));
-  @include xl {
-    padding:rem(gesso-spacing(sm)) 0;
-  }
-}
 // set the layout for the Views container when being used with Blog, news, events
 // to match flexbox in multi list usage.
 .view{
  // View content container.
+  &-header{
+    grid-column:1/3;
+    grid-row:1/2;
+    width:100%;
+    .uw-view--toggle{
+      padding-right: 0;
+      text-align:right;
+      width:100%;
+    }
+  }
+
   &-content{
-    display:inline-flex;
-    flex-flow: row wrap;
+    @include uw-flex-grid();
+    grid-column:1/3;
+    grid-row:2/3;
+    width:100%;
+    @include large{
+      grid-column:1/2;
+      //width: clamp(320px, 900px, calc(100vw - 333px));
+    }
   }
+
+  &-content--message{
+    grid-row:2/3;
+    margin:0;
+    .message,
+    .messages{
+      margin:0;
+    }
+
+  }
+  // Base View Grid setup:
+
+  // View for contacts page.
+  &.view-uw-view-contacts,
+  // View for profiles page.
+  &.view-uw-view-profiles,
   // View container for taxonomy terms.
   &.view-taxonomy-term,
   //View container for blog landing page.
@@ -25,30 +56,63 @@
   &.view-uw-view-events,
   // View container for newslanding page.
   &.view-uw-view-news-items{
+    @include uw-contained-width;
+    //background:$test-color-1;
+    display: grid;
+    grid-template-columns: 100%;
+    padding: rem(gesso-spacing(sm));
 
-    // Universal row for views
-    .views-row{
-      align-items:flex-start;
-      margin: rem(gesso-spacing(sm));
-      width:100%;
-      @include small{
-        flex-grow: 1;
-        width: 45%;
-      }
-      @include large{
-        width: 30%;
+    position: relative;
+    @include large {
+      .view-header{
+        display:none;
       }
+      //background:$test-color-2;
+      gap: 1.5rem;
+      grid-template-columns: auto $sidebar-width;
+    }
+    @include xl {
+      padding: rem(gesso-spacing(sm)) 0;
+      padding-top: 0;
     }
+    // Universal row for views
   }
 }
 .view-filters{
   // Universal filter form used on events, blog and news.
-  .views-exposed-form{
+  grid-column:1/3;
+  grid-row:2/3;
+  height:0;
+  overflow:hidden;
+  width:0;
 
-  }
-}
 
-// Previous code .
-.view__filters {
-  margin-bottom: rem(gesso-spacing(sm));
+  form{
+    width:100%;
+    .button,
+    .image-button{
+      margin:0;
+    }
+  }
+  @include large {
+    display:inherit;
+    grid-column:2/3;
+    height:inherit;
+    margin: 0;
+    overflow:inherit;
+    .grid &,
+    .list &{
+      margin-top: 4rem !important;
+    }
+    width: $sidebar-width;
+    .uw-input,
+    .form-text{
+      width:100% !important;
+    }
+    .views-exposed-form{
+      margin:0 !important;
+      padding:0 !important;
+    }
+  }
 }
+// Styles for Views rows as cards.
diff --git a/source/_patterns/04-components/view/view-content/_view-content.scss b/source/_patterns/04-components/view/view-content/_view-content.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/view/view-content/view-content--message.twig b/source/_patterns/04-components/view/view-content/view-content--message.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b8089e2a4f7c7b4b714604b8a9f8a64f22aab095
--- /dev/null
+++ b/source/_patterns/04-components/view/view-content/view-content--message.twig
@@ -0,0 +1,5 @@
+{% include '@components/message/message.twig' with {
+  'type': 'warning',
+  'heading': heading,
+  'messages': messages
+} %}
diff --git a/source/_patterns/04-components/view/view-content/view-content--message.yml b/source/_patterns/04-components/view/view-content/view-content--message.yml
new file mode 100644
index 0000000000000000000000000000000000000000..cb2ffa7b886d6760afbd6991809316d135a3ebc6
--- /dev/null
+++ b/source/_patterns/04-components/view/view-content/view-content--message.yml
@@ -0,0 +1,5 @@
+---
+type: 'warning'
+heading: 'Warning message'
+messages:
+  - '<p>Your search returned no results please review criteria selected.</p>'
diff --git a/source/_patterns/04-components/view/view-content/view-content.twig b/source/_patterns/04-components/view/view-content/view-content.twig
new file mode 100644
index 0000000000000000000000000000000000000000..475806f102d96a352e1693e0a8fbb798047b5c0d
--- /dev/null
+++ b/source/_patterns/04-components/view/view-content/view-content.twig
@@ -0,0 +1,12 @@
+<div class="view-content">
+  {% if rows %}
+  {{ rows }}
+  {% endif %}
+  {% if pattern_lab %}
+    {% include '@components/content-grid-list/content-grid-list.twig' with {
+      'lists': lists,
+      'views' : true,
+      'show_hover': true,
+    } %}
+  {% endif %}
+</div>
diff --git a/source/_patterns/04-components/view/view-content/view-content.yml b/source/_patterns/04-components/view/view-content/view-content.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2b0398ea0d083c6e448356a3e773fc941a2f27d4
--- /dev/null
+++ b/source/_patterns/04-components/view/view-content/view-content.yml
@@ -0,0 +1,439 @@
+---
+use_offcanvas: true
+modifier_classes: ''
+views: true
+type: 'warning'
+heading: 'Warning message'
+messages:
+  - '<p>Your filters returned no results please review criteria selected.</p>'
+lists:
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+
diff --git a/source/_patterns/04-components/view/view-filter/_view-filter.scss b/source/_patterns/04-components/view/view-filter/_view-filter.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/view/view-filter/view-filter.twig b/source/_patterns/04-components/view/view-filter/view-filter.twig
new file mode 100644
index 0000000000000000000000000000000000000000..548eba05dc9f742ad836dd516b084978572c4c32
--- /dev/null
+++ b/source/_patterns/04-components/view/view-filter/view-filter.twig
@@ -0,0 +1 @@
+{% include '@components/filters/filters.twig' %}
diff --git a/source/_patterns/04-components/view/view-filter/view-filter.yml b/source/_patterns/04-components/view/view-filter/view-filter.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2ad304ef8ce62aa56f2fbc9910b2f54b610284b2
--- /dev/null
+++ b/source/_patterns/04-components/view/view-filter/view-filter.yml
@@ -0,0 +1 @@
+exposed: 'true'
diff --git a/source/_patterns/04-components/view/view-footer/view-footer.twig b/source/_patterns/04-components/view/view-footer/view-footer.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4ebcf88110bfed10262e66606b20ba42696d0822
--- /dev/null
+++ b/source/_patterns/04-components/view/view-footer/view-footer.twig
@@ -0,0 +1,8 @@
+<div class="view-footer">
+  {% if pattern_lab %}
+
+  {% endif %}
+
+  {{ footer }}
+
+</div>
diff --git a/source/_patterns/04-components/view/view-header/_view-header.scss b/source/_patterns/04-components/view/view-header/_view-header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b062a2a688e7cf1c6d31899ac90145db57e1fd35
--- /dev/null
+++ b/source/_patterns/04-components/view/view-header/_view-header.scss
@@ -0,0 +1,47 @@
+.view-header {
+  //.uw-content--grid-list{
+  //  &__style_controls{
+  //    @include uw-flex-term-item();
+  //    // Set the controls for the layout
+  //    // and off canvas as top row.
+  //    width: 100% !important;
+  //    .uw-layout--controls {
+  //      margin:0;
+  //      max-width:inherit;
+  //      padding: 1rem 0;
+  //      text-align: right;
+  //      width:100%;
+  //    }
+  //    @include medium{
+  //      display:none;
+  //    }
+  //  }
+  //}
+
+  .uw-view {
+    // Form
+
+    &--offcanvas{
+
+    }
+    &--toggle{
+      margin:0;
+      padding:0 0 1rem;
+      .button{
+        &[data-value-off-canvas="offcanvas"]{
+          ~ .view-filters {
+            background:$test-color-4;
+            width:0;
+          }
+        }
+        &[data-value-off-canvas="offcanvas"]:target{
+          ~  .view-filters {
+            background:$test-color-6;
+            width: $sidebar-width !important;
+          }
+        }
+      }
+    }
+  }
+
+}
diff --git a/source/_patterns/04-components/view/view-header/view-header.twig b/source/_patterns/04-components/view/view-header/view-header.twig
new file mode 100644
index 0000000000000000000000000000000000000000..651dc2d03a06290ebe0abb3c1f8be73a75852478
--- /dev/null
+++ b/source/_patterns/04-components/view/view-header/view-header.twig
@@ -0,0 +1,19 @@
+<div class="view-header">
+  {% if pattern_lab %}
+    {% if use_offcanvas %}
+      <div class="uw-view--offcanvas">
+          {% set button_modifier_classes -%}
+            button--icon button--offcanvas {{ modifier_classes }}
+          {%- endset %}
+          {% include '@base/02-html-elements/25-forms/forms.twig' with {
+            'form_items': form_items,
+            'form_classes' : form_classes,
+            'modifier_classes' : button_modifier_classes,
+          } %}
+      </div>
+    {% endif %}
+  {% endif %}
+  {% if header %}
+    {{ header }}
+  {% endif %}
+</div>
diff --git a/source/_patterns/04-components/view/view-header/view-header.yml b/source/_patterns/04-components/view/view-header/view-header.yml
new file mode 100644
index 0000000000000000000000000000000000000000..15c9bd150b116009e534981177a5b09dfff54986
--- /dev/null
+++ b/source/_patterns/04-components/view/view-header/view-header.yml
@@ -0,0 +1,22 @@
+---
+pager: 'false'
+use_offcanvas: true
+form_classes: 'uw-view--toggle'
+form_items:
+  - is_button_tag: true
+    data_type_name: 'off-canvas'
+    data_type_value: 'offcanvas'
+    form_item_wrapper: false
+    is_demo: false
+    is_disabled: false
+    classes: button_modifier_classes
+    modifier_classes: button_modifier_classes
+    formaction: ''
+    form: ''
+    name: ''
+    formenctype: ''
+    value: ''
+    formmethod: ''
+    formtarget: ''
+    text: 'Filters'
+    btnclick: |
diff --git a/source/_patterns/04-components/view/views-view-unformatted/views-view-unformatted.yml b/source/_patterns/04-components/view/views-view-unformatted/views-view-unformatted.yml
index dfc5614bfae1fa102dcfa05efb54c987a6e588d5..6c3db5c129ce584fbdb82811c422f07a2e93be7f 100644
--- a/source/_patterns/04-components/view/views-view-unformatted/views-view-unformatted.yml
+++ b/source/_patterns/04-components/view/views-view-unformatted/views-view-unformatted.yml
@@ -1,7 +1,7 @@
 ---
 title: false
 title_element: 'h3'
-has_wrapper: true
+has_wrapper: false
 element: 'div'
 rows:
  - content: 'Row Content'
diff --git a/source/_patterns/04-components/view/views-view/views-view.twig b/source/_patterns/04-components/view/views-view/views-view.twig
index f32cc3495afcc8ce5fb66c1f27c26b5e7a41d25f..145410ea096eaf8b9ec1f9ee46ed174d811200fd 100644
--- a/source/_patterns/04-components/view/views-view/views-view.twig
+++ b/source/_patterns/04-components/view/views-view/views-view.twig
@@ -14,14 +14,10 @@
   {% endif %}
   {{ title_suffix }}
   {% if header %}
-    <div class="view-header">
-      {{ header }}
-    </div>
+    {% include '@components/view/view-header/view-header.twig' %}
   {% endif %}
   {% if exposed %}
-    <div class="view-filters">
-      {{ exposed }}
-    </div>
+    {% include '@components/view/view-filter/view-filter.twig' %}
   {% endif %}
   {% if attachment_before %}
     <div class="attachment attachment-before">
@@ -30,12 +26,14 @@
   {% endif %}
 
   {% if rows %}
-    <div class="view-content">
-      {{ rows }}
-    </div>
-  {% elseif empty %}
-    <div class="view-empty">
-      {{ empty }}
+      {% include '@components/view/view-content/view-content.twig' %}
+  {% else %}
+    <div class="view-content--message">
+      <div role="alert" class="message message--warning">
+        <ul class="message__list">
+          <li class="message__item"> <p>Your filters returned no results please review criteria selected.</p></li>
+        </ul>
+      </div>
     </div>
   {% endif %}
 
@@ -51,13 +49,11 @@
     {{ more }}
   {% endif %}
   {% if footer %}
-    <div class="view-footer">
-      {{ footer }}
-    </div>
+    {% include '@components/view/view-footer/view-footer.twig' %}
   {% endif %}
   {% if feed_icons %}
     <div class="feed-icons">
       {{ feed_icons }}
     </div>
   {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/source/_patterns/04-components/view/views-view/views-view.yml b/source/_patterns/04-components/view/views-view/views-view.yml
index 92dedbd3853f8013ad8f7b703e005460d5eae2a2..55bc2ac1c8c79cc3c0bed8cfc40882e043f193d7 100644
--- a/source/_patterns/04-components/view/views-view/views-view.yml
+++ b/source/_patterns/04-components/view/views-view/views-view.yml
@@ -1,15 +1,16 @@
 ---
+views: true
 element: 'div'
 title: 'false'
-header: 'false'
-exposed: false
+header: 'true'
+exposed: true
 attachment_before: false
-rows: 'Rows'
+rows: 'rows'
 empty: false
 pager: 'Pager'
 attachment_after: false
 more: false
-footer: false
+footer: true
 feed_icons: false
 title_prefix: 'false'
 title_suffix: 'false'
diff --git a/source/_patterns/05-templates/termpage.twig b/source/_patterns/05-templates/termpage.twig
new file mode 100644
index 0000000000000000000000000000000000000000..59cba50fc267336957e459dbcdc94e3daa28911b
--- /dev/null
+++ b/source/_patterns/05-templates/termpage.twig
@@ -0,0 +1,37 @@
+{%  if pattern_lab %}
+  {%  set faculty = faculty ? faculty : 'org-art' %}
+{% endif %}
+
+<div class="uw-site-container">
+  {% block header %}
+    {% include "@layouts/header/header.twig"%}
+  {% endblock %}
+  <div class="layout uw-contained-width">
+
+  {% include '@components/page-title/page-title.twig' with {
+    'page_title': termpage_title
+  } %}
+  {% block content %}
+    <div class="view view-uw-view-blogs">
+
+      {% include '@components/view/view-header/view-header.twig' with {
+        'form_classes' : form_classes,
+      }%}
+
+      {% include '@components/view/view-filter/view-filter.twig' %}
+
+      {% include '@components/view/view-content/view-content.twig' with {
+        'lists': lists,
+        'views': true,
+      } %}
+
+    </div>
+  {% endblock %}
+  </div>
+  {% block footer %}
+    {% include "@layouts/footer/footer.twig" with {
+      'menu_name': footer_menu_name,
+      'items': footer_menu
+    }%}
+  {% endblock %}
+</div>
diff --git a/source/_patterns/05-templates/termpage.yml b/source/_patterns/05-templates/termpage.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fcde787c6031dd803d98542396ba7b30e65366b1
--- /dev/null
+++ b/source/_patterns/05-templates/termpage.yml
@@ -0,0 +1,1365 @@
+---
+cookie:
+  text: '<h2>We use cookies on this site to enhance the user experience.</h2><p>Select "Accept all" to agree and continue. You consent to our cookies if you continue to use this website.</p>'
+termpage_title: 'Blog'
+termpage_image:
+termpage_content: |-
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis mattis ipsum, non hendrerit justo. Pellentesque libero dui, varius ut ex quis, interdum aliquet est. Integer iaculis sapien libero, ut ullamcorper est tristique et. Vivamus orci nunc, commodo at vulputate gravida, tempus id nisi. Praesent feugiat elit at nunc dignissim consequat. Cras posuere venenatis augue, quis ultricies mauris sagittis quis. Proin blandit arcu est, ac pulvinar ante tristique non. Suspendisse eu maximus erat. Vestibulum hendrerit arcu id ex ullamcorper, id ultrices magna euismod. Maecenas id elit ultrices purus elementum sollicitudin. Sed id magna id metus pretium vulputate id a risus. Curabitur tellus quam, congue tristique rutrum in, sagittis vel nibh. Mauris aliquet purus vel faucibus faucibus. Nullam lacinia diam ante, nec consequat sem pulvinar non. Mauris et dolor quis metus cursus fermentum nec vitae risus.</p>
+  <p>Nam auctor laoreet ipsum, nec finibus tellus interdum vel. Nunc dui nisi, cursus ut tortor vel, porta porttitor quam. Curabitur tempor tellus a eros bibendum rhoncus. Quisque faucibus volutpat malesuada. Aliquam dapibus libero sem, et mollis libero rutrum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam vel pharetra augue, sed feugiat est. Donec in velit sed libero sollicitudin eleifend. Nunc et erat mollis, placerat ex vitae, volutpat risus. Nam in enim quis nibh volutpat egestas nec a magna. Curabitur congue pretium arcu ac hendrerit. Sed iaculis tempor tellus, nec scelerisque diam ornare id. Aenean interdum accumsan tincidunt. Maecenas commodo lacinia nibh id iaculis.</p>
+
+
+modifier_classes: ''
+
+lists:
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Friday, September 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      - 'Sep. 18, 2020'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+  -
+    title: 'Blog Teaser title goes here'
+    url: '#'
+    date:
+      -  'Friday, September 18, 2020 2:20- 4:20 PM  EDT'
+    author_name: 'Author Lastname'
+    author_link: '#'
+    tags:
+      tag1:
+        - url: '#'
+          title: 'Tag 1'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 2'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 3'
+          type: 'simple'
+        - url: '#'
+          title: 'Tag 4'
+          type: 'simple'
+    sources:
+      - srcset: '../../../../source/images/president/president_xlarge.jpg'
+        media: 'all and (min-width: 63.19rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_large.jpg'
+        media: 'all and (min-width: 49.81rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_medium.jpg'
+        media: 'all and (min-width: 30rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_small.jpg'
+        media: 'all and (min-width: 25rem)'
+        type: 'image/jpeg'
+      - srcset: '../../../../source/images/president/president_xsmall.jpg'
+        media: 'all and (min-width: 15rem)'
+        type: 'image/jpeg'
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative text for blog teaser photo'
+    read_more: false
+    show_hover: true
+    content: |-
+      <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+
+site_name: 'Psychology'
+is_demo_site_container: true
+is_demo_footer: true
+header_modifier_classes: 'header'
+menu_name: 'horizontal'
+header_items:
+  - title: 'Jump To'
+    url: 'Parent'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+    submenu:
+      - title: 'Admissions'
+        url: 'https://uwaterloo.ca/admissions/'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        in_active_trail: false
+      - title: 'About Waterloo'
+        url: 'https://uwaterloo.ca/about/'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        in_active_trail: false
+      - title: 'Faculties & Academics'
+        url: 'https://uwaterloo.ca/faculties-academics/'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        in_active_trail: false
+      - title: 'Offices & Services'
+        url: 'https://uwaterloo.ca/offices-services/'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        in_active_trail: false
+      - title: 'Support Waterloo'
+        url: 'https://uwaterloo.ca/support/'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        in_active_trail: false
+classes:
+  - 'uw-header'
+  - 'default'
+footer_menu_name: 'uw-footer'
+footer_menu:
+  - title: 'Contact Waterloo'
+    url: 'https://uwaterloo.ca/about/contact-us'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Maps & Directions'
+    url: 'https://uwaterloo.ca/map/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Watsafe'
+    url: 'https://uwaterloo.ca/watsafe/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Accessibility'
+    url: 'https://uwaterloo.ca/human-resources/accessibility'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Privacy'
+    url: 'https://uwaterloo.ca/privacy/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Copyright'
+    url: 'https://uwaterloo.ca/copyright'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'News'
+    url: 'https://uwaterloo.ca/news/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Careers'
+    url: 'https://uwaterloo.ca/careers/'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+  - title: 'Careers'
+    url: 'https://uwaterloo.ca/about/contact-us/contact-form'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    in_active_trail: false
+nav_items:
+  - text: 'About Psychology'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 2
+    submenu:
+      - text: 'Our mission & vision'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Our People'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 0
+  - text: 'Research'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 10
+    submenu:
+      - text: 'Research areas'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Research Chair and Awards'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Clinical'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Cognitive'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Cognitive Neuroscience'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Developmental'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Industrial-Organizational'
+            url: '#'
+            original_link:
+              options:
+                attributtes:
+                  class: ''
+            active-trial: false
+            submenu:
+              - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Social Psychology'
+            url: '#'
+            original_link:
+              options:
+                attributtes:
+                  class: ''
+            active-trial: false
+  - text: 'Teaching excellence'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 2
+    submenu:
+      - text: 'Experiential learning'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'News'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 0
+  - text: 'Events'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 0
+  - text: 'Centre for Mental Health Research and Treatment'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 0
+  - text: 'Early Childhood Education Centre'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 8
+    submenu:
+      - text: 'Programs offered | Fees'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'FAQs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Enrollment Process | Registration'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Research and academic programs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Volunteer program'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Contact us'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Resources and links'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Celebrating the Class of 2020'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 3
+    submenu:
+      - text: 'Convocation Award Winners 2020'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Student Memories 2020'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Community Partners'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 0
+  - text: 'Department Profiles Sherman Kwok'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 0
+secondary_modifier_classes: 'secondary'
+secondary_items:
+  - text: 'Undergraduate students '
+    url: '#Parent'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: true
+    active: true
+    menu_items_count: 39
+    submenu:
+      - text: 'Degree Options and Specializations'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'How to become a Psychology Student'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Prospective student'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Courses'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Future course offerings'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Courses requiring an application'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Honours Thesis (Psych 499)'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+            submenu:
+              - text: 'Conference opportunities '
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+                submenu:
+                  - text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
+                    url: '#'
+                    original_link:
+                      options:
+                        attributes:
+                          class: ''
+                    active_trail: false
+              - text: 'Publishing opportunities'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Course overrides'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Special Topics and Honours Seminars'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Syllabus Archive'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Experiential Learning'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Psychology co-op'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Research Assistant (RA) positions'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+              class: ''
+            active_trail: false
+      - text: 'Student success'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Academic standing'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Policies'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'University policies'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Psychology Department policies'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Awards '
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Convocation and thesis awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Psychology Memorial Awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Other research awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Distinguished Teacher Awards'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Psychology Undergraduate Society '
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'About to graduate'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'FAQs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Career Options'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Career advising'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'College programs'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Employment after Bachelors'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Employment after Masters or PhD'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Graduate studies in Psychology'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+            submenu:
+              - text: 'Letters of recommendation'
+                url: '#'
+                original_link:
+                  options:
+                    attributes:
+                      class: ''
+                active_trail: false
+          - text: 'Other programs'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Who can I ask?'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Human Resources Management program '
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 10
+    submenu:
+      - text: 'Meet your lecturers'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Minor & Diploma'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Courses'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Meet Our Students'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: true
+        active: true
+      - text: 'Student success'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Get involved'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'News'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Alumni | Friends'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'HRM Opportunities'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Graduate students'
+    url: '#'
+    original_link:
+      options:
+        attributes:
+          class: ''
+    active_trail: false
+    menu_items_count: 19
+    submenu:
+      - text: 'Programs'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Minimum admission requirements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Application procedures'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Degree requirements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+        submenu:
+          - text: 'Submission of the Masters Thesis'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Submission of the Masters Research Paper (MASc students)'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Forming a PhD Committee'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Guideline for PhD Thesis Defense'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+          - text: 'Submission of the PhD thesis following the defense'
+            url: '#'
+            original_link:
+              options:
+                attributes:
+                  class: ''
+            active_trail: false
+      - text: 'Forms'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Funding & Awards'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Careers of Alumni'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'GASP (Graduate Association of Students in Psychology)'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Graduate courses'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Orientation guide'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Policies and procedures'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Showcasing graduate student research'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+      - text: 'Teaching assistantships'
+        url: '#'
+        original_link:
+        options:
+          attributes:
+            class: ''
+        active_trail: false
+  - text: 'Faculty & Staff'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+    menu_items_count: 0
+  - text: 'Alumni & Friends'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+    menu_items_count: 4
+    submenu:
+      - text: 'Share your story'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Profiles & Achievements'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+      - text: 'Make a gift'
+        url: '#'
+        original_link:
+          options:
+            attributes:
+              class: ''
+        active_trail: false
+  - text: 'Positions available'
+    url: '#'
+    original_link:
+    options:
+      attributes:
+        class: ''
+    active_trail: false
+    menu_items_count: 0
+form_classes: 'uw-view--toggle'
+column_classes:
+  -
+    classes: 'layout layout--uw-1-col'
+#layout_style: 'grid'
+use_offcanvas: true
+form_items:
+  - is_button_tag: true
+    data_type_name: 'off-canvas'
+    data_type_value: 'offcanvas'
+    form_item_wrapper: false
+    is_demo: false
+    is_disabled: false
+    classes: button_modifier_classes
+    modifier_classes: button_modifier_classes
+    formaction: ''
+    form: ''
+    name: ''
+    formenctype: ''
+    value: ''
+    formmethod: ''
+    formtarget: ''
+    text: 'Filters'
+    btnclick: |
+