diff --git a/css/styles.css b/css/styles.css
index dac47f967739437557b0722371eb2d282f9f93d1..80c10b7e698373cfb3c024bb042e13fe1403fc39 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3465,7 +3465,7 @@ button {
   flex-direction: column; }
 
 .card--show-hover {
-  border-bottom: 4px solid #000;
+  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 {
@@ -7787,39 +7787,200 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
   padding: 1rem 0;
   text-align: center; }
 
-.views-element-container {
+.view-content {
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  gap: 1.25rem !important;
+  order: 1;
+  width: 100%; }
+  @media (min-width: 48.06rem) {
+    .view-content {
+      width: clamp(320px, 900px, calc(100vw - 333px)); } }
+
+.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: flex;
+  flex-direction: column;
+  padding: 1rem;
+  position: relative; }
   @media (min-width: 75rem) {
-    .views-element-container {
+    .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: 48.06rem) {
+    .view.view-taxonomy-term, .view.view-uw-view-blogs, .view.view-uw-view-events, .view.view-uw-view-news-items {
+      flex-direction: row;
+      gap: 1.5rem;
+      justify-content: center; } }
   @media (min-width: 75rem) {
-    .views-element-container {
+    .view.view-taxonomy-term, .view.view-uw-view-blogs, .view.view-uw-view-events, .view.view-uw-view-news-items {
       padding: 1rem 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 {
+    width: 100%;
+    order: 2; }
+    @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 {
+        -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%; } }
+    @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.view-taxonomy-term .views-row:first-of-type, .view.view-uw-view-blogs .views-row:first-of-type, .view.view-uw-view-events .views-row:first-of-type, .view.view-uw-view-news-items .views-row:first-of-type {
+      width: 100%;
+      order: 1;
+      width: 100% !important; }
+      @media (min-width: 40.06rem) {
+        .view.view-taxonomy-term .views-row:first-of-type, .view.view-uw-view-blogs .views-row:first-of-type, .view.view-uw-view-events .views-row:first-of-type, .view.view-uw-view-news-items .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%; } }
+      @media (min-width: 63.1875rem) {
+        .view.view-taxonomy-term .views-row:first-of-type, .view.view-uw-view-blogs .views-row:first-of-type, .view.view-uw-view-events .views-row:first-of-type, .view.view-uw-view-news-items .views-row:first-of-type {
+          width: 30%; } }
 
-.view-content {
-  display: inline-flex;
-  flex-flow: row wrap; }
+.view-filters {
+  display: none;
+  order: 2;
+  width: 100%; }
+  .view-filters form {
+    Width: 100%; }
+  @media (min-width: 48.06rem) {
+    .view-filters {
+      display: inherit;
+      margin: 0;
+      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.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;
+.uw-node__grid {
+  display: flex;
+  flex-direction: column; }
+
+.views-row {
+  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); }
+  .views-row:hover, .views-row:focus-within {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
+
+.card__header {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 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%; } }
-  @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 {
+.card__date {
+  font-size: 1rem;
+  margin-bottom: 1rem; }
+
+.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; }
+  .card__author a {
+    color: #000;
+    text-decoration: underline; }
+    .card__author a:visited {
+      color: #000; }
+    .card__author a:hover, .card__author a:focus {
+      color: #757575;
+      text-decoration: none; }
+    .card__author a:active {
+      color: #757575; }
+
+.card__title {
+  margin: 0.5rem 0;
+  padding: 0; }
+  .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; }
+
+.uw-node__node {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 1rem; }
+  .uw-node__node p:last-child {
+    margin-bottom: 0; }
+
+.card__date {
+  color: #757575;
   margin-bottom: 1rem; }
 
+.card__content {
+  margin-bottom: 1.5rem; }
+
+.card__media {
+  margin-bottom: 1.5rem; }
+  .card__media a {
+    display: block;
+    height: 100%;
+    width: 100%; }
+  .card__media img {
+    width: 100%; }
+
+.card__footer {
+  margin-top: auto;
+  padding: 0 0 1rem; }
+  .card__footer > div {
+    margin-bottom: 1rem; }
+    .card__footer > div:last-child {
+      margin-bottom: 0; }
+
+.card__readmore {
+  text-align: right; }
+
+.card--feature .card__body {
+  padding-top: 1rem; }
+
+.card--feature .card__media {
+  flex-grow: 1;
+  margin-bottom: 0; }
+
+@media (min-width: 48.0625em) {
+  .card--feature {
+    flex-direction: row; }
+    .card--feature .card__body {
+      max-width: 600px;
+      padding: 1rem 2vw 0; }
+    .card--feature .card__media {
+      order: initial; } }
+
 .uw-whos-online-block h3 {
   font-size: 15px;
   margin: 0 0 0 -5px; }
diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss
index a76faf00e9f414a5e92d98bc7d8e190d4bb13ae1..b8b3e2da873aade27ece7172d3d949560e472640 100644
--- a/source/_patterns/04-components/card/_card.scss
+++ b/source/_patterns/04-components/card/_card.scss
@@ -13,7 +13,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 }
 // 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,
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
index db7e9fcf6b7a0b47750abf8e35177ebb83b0b00d..83b9eb7e7735b3b742b22a7bc32a909aa73796ed 100644
--- a/source/_patterns/04-components/content-grid-list/content-grid-list.twig
+++ b/source/_patterns/04-components/content-grid-list/content-grid-list.twig
@@ -1,8 +1,6 @@
 
   {% block content %}
     {% include '@global/06-break-hints/break-hints.twig' %}
-
-
     <div class="uw-content--grid-list__layout {{ layout_style }}">
     {% if layout_style or use_offcanvas %}
       <div class="uw-content--grid-list__style_controls">
diff --git a/source/_patterns/04-components/filters/filters.twig b/source/_patterns/04-components/filters/filters.twig
index 1d75a2afb4f0f79dc1690be714ac31ed00e3d809..3de8e0f09f0ba81dc725b36b418c2db2c5add571 100644
--- a/source/_patterns/04-components/filters/filters.twig
+++ b/source/_patterns/04-components/filters/filters.twig
@@ -1,227 +1,222 @@
-  {% block content %}
-    {% if pattern_lab %}
-    <div class="view-filters">
-      <form class="views-exposed-form bef-exposed-form" data-drupal-selector="views-exposed-form-uw-view-events-event-page" action="/events" method="get" 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>
+{% block content %}
+  {% if pattern_lab %}
+  <div class="view-filters">
+    <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>
-          </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">
+          </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;}}]}">
+                <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>
+              <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 id="edit-date-min--description" class="description">
+                  Limit to events where the first date of the event:
                 </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 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">
+          </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>
 
-                    <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-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">
 
-                  <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-26" class="option">Information session</label>
+                </div>
 
-                    <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-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">
 
-                  <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-27" class="option">Lecture</label>
+                </div>
 
-                    <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-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">
 
-                  <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-28" class="option">Open house</label>
+                </div>
 
-                    <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-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">
 
-                  <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-29" class="option">Performance</label>
+                </div>
 
-                    <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-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">
 
-                  <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-30" class="option">Reception</label>
+                </div>
 
-                    <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-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">
 
-                  <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-31" class="option">Reunion</label>
+                </div>
 
-                    <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-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">
 
-                  <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-32" class="option">Seminar</label>
+                </div>
 
-                    <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-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">
 
-                  <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-33" class="option">Thesis defence</label>
+                </div>
 
-                    <label for="edit-type-34" class="option">Workshop</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>
-          </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>
+        </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>
-          </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">
+          </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>
 
-                    <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-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">
 
-                  <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-2" class="option">Current undergraduate students</label>
+                </div>
 
-                    <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-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">
 
-                  <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-5" class="option">Future undergraduate students</label>
+                </div>
 
-                    <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-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">
 
-                  <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-3" class="option">Current graduate students</label>
+                </div>
 
-                    <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-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">
 
-                  <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-6" class="option">Future graduate students</label>
+                </div>
 
-                    <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-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">
 
-                  <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-4" class="option">Future students</label>
+                </div>
 
-                    <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-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">
 
-                  <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-7" class="option">Faculty</label>
+                </div>
 
-                    <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-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">
 
-                  <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-8" class="option">Staff</label>
+                </div>
 
-                    <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-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">
 
-                  <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-9" class="option">Alumni</label>
+                </div>
 
-                    <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-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">
 
-                  <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-10" class="option">Parents</label>
+                </div>
 
-                    <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-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">
 
-                  <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-11" class="option">Donors | Friends | Supporters</label>
+                </div>
 
-                    <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-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">
 
-                  <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-12" class="option">Employers</label>
+                </div>
 
-                    <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-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">
 
-                  <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-13" class="option">International</label>
+                </div>
 
-                    <label for="edit-audience-14" class="option">Media</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>
-          </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>
-
+        </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>
 
-      </form>
-
-    </div>
-    {% endif %}
-
-    {% if content %}
-      {{ content }}
-    {% endif %}
+      </div>
 
-  {% endblock %}
+    </form>
+  </div>
+  {% endif %}
+{% endblock %}
diff --git a/source/_patterns/04-components/view/_view.scss b/source/_patterns/04-components/view/_view.scss
index 706feb356f554029271d72a94d0879231489e39d..2dad4c77db6e052ee421b57b3e7b891521abe9ea 100644
--- a/source/_patterns/04-components/view/_view.scss
+++ b/source/_patterns/04-components/view/_view.scss
@@ -1,21 +1,18 @@
 // @file
 // Styles for a view.
+$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.
   &-content{
-    display:inline-flex;
-    flex-flow: row wrap;
+    @include uw-flex-grid();
+    order:1;
+    width:100%;
+    @include medium{
+      width: clamp(320px, 900px, calc(100vw - 333px));
+    }
   }
   // View container for taxonomy terms.
   &.view-taxonomy-term,
@@ -25,30 +22,197 @@
   &.view-uw-view-events,
   // View container for newslanding page.
   &.view-uw-view-news-items{
-
+    @include uw-contained-width;
+    display: flex;
+    flex-direction: column;
+    padding: rem(gesso-spacing(sm));
+    position: relative;
+    @include medium {
+      flex-direction: row;
+      gap: 1.5rem;
+      justify-content: center;
+    }
+    @include xl {
+      padding: rem(gesso-spacing(sm)) 0;
+    }
     // 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%;
+      @include uw-flex-term-item();
+      order: 2;
+      &:first-of-type {
+        @include uw-flex-term-item();
+        // Set the first card to match
+        // full width of gridded and print second row.
+        order: 1;
+        width: 100% !important;
       }
     }
   }
 }
 .view-filters{
   // Universal filter form used on events, blog and news.
-  .views-exposed-form{
+  display:none;
+  order:2;
+  width:100%;
+  form{
+    Width:100%;
+  }
+  @include medium {
+      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;
+      }
+  }
+}
+// @file
+// Styles for Views rows as cards.
+
+$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;
 
+.uw-node__grid {
+  display: flex;
+  flex-direction: column;
+}
+// if card--show-hover class is present then show "
+.views-row{
+  border-bottom: 3px solid $view-accent-border-color;
+  box-shadow: gesso-box-shadow(1);
+  transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+  &:hover,
+  &:focus-within {
+    box-shadow: gesso-box-shadow(3);
+  }
+}
+.card__header{
+  display:flex;
+  flex-direction: column;
+  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-family: gesso-font-family(systemmedium);
+  font-size: gesso-font-size(-1);
+  a {
+    @include link(
+        $view-link-color,
+        $view-link-color-hover
+    );
+  }
+}
+.card__title {
+  margin:rem(gesso-spacing(xs)) 0;
+  padding:0;
+
+  a {
+    @include link-reverse(
+        $view-link-color,
+        $view-link-color-hover
+    );
+  }
+}
+
+.uw-node__node {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: $view-padding;
+
+  p:last-child {
+    margin-bottom: 0;
   }
 }
 
-// Previous code .
-.view__filters {
+.card__date {
+  color: $view-meta-color;
   margin-bottom: rem(gesso-spacing(sm));
 }
+
+.card__content {
+  margin-bottom: rem(gesso-spacing(md));
+}
+
+.card__media {
+  margin-bottom: rem(gesso-spacing(md));
+  a {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+  img {
+    width: 100%;
+  }
+}
+
+.card__footer {
+  margin-top: auto;
+  padding: 0 0 $view-padding;
+  > div {
+    margin-bottom: rem(gesso-spacing(sm));
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+.card__tags{
+
+}
+.card__readmore {
+  text-align: right;
+}
+.card__social{
+
+}
+
+.card--feature {
+  .card__body {
+    padding-top: $view-padding;
+  }
+
+  .card__media {
+    flex-grow: 1;
+    margin-bottom: 0;
+  }
+
+  @include breakpoint(gesso-breakpoint(md)) {
+    flex-direction: row;
+
+    .card__title {
+
+    }
+
+    .card__body {
+      max-width: 600px;
+      padding: $view-padding 2vw 0;
+    }
+
+    .card__media {
+      order: initial;
+    }
+  }
+}
+
+
+
+
+
+
diff --git a/source/_patterns/04-components/view/views-content/_views-content.scss b/source/_patterns/04-components/view/views-content/_views-content.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/view/views-content/views-content.twig b/source/_patterns/04-components/view/views-content/views-content.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3c1be2e799ed4f38c9daf9527d03d56a05c238cd
--- /dev/null
+++ b/source/_patterns/04-components/view/views-content/views-content.twig
@@ -0,0 +1,5 @@
+{% include '@components/content-grid-list/content-grid-list.twig' with {
+  'modifier_classes': 'l-grid--1col',
+  'form_classes': layout_form_classes,
+  'lists': lists
+} %}
diff --git a/source/_patterns/04-components/view/views-content/views-content.yml b/source/_patterns/04-components/view/views-content/views-content.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4c4d2f7fd9c08e7e1494258b53bc809b0c2f1c6d
--- /dev/null
+++ b/source/_patterns/04-components/view/views-content/views-content.yml
@@ -0,0 +1,471 @@
+---
+#layout_style: 'grid'
+#use_offcanvas: true
+layout_form_classes: 'uw-layout--controls'
+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: |
+  - 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: 'off-canvas'
+    btnclick: |
+
+
+filter_modifier_classes: 'filters-test-term'
+filter_items:
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '1text'
+    name: ''
+    type: 'text'
+    placeholder: '1text'
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '2text'
+    name: ''
+    type: 'text'
+    placeholder: '2text'
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '3text'
+    name: ''
+    type: 'text'
+    placeholder: '3text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '4text'
+    name: ''
+    type: 'text'
+    placeholder: '4text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '5text'
+    name: ''
+    type: 'text'
+    placeholder: '5text'
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '6text'
+    name: ''
+    type: 'text'
+    placeholder: '6text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '7text'
+    name: ''
+    type: 'text'
+    placeholder: '7text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '8text'
+    name: ''
+    type: 'text'
+    placeholder: '8text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '9text'
+    name: ''
+    type: 'text'
+    placeholder: '9text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '10text'
+    name: ''
+    type: 'text'
+    placeholder: '10text'
+modifier_classes: ''
+grid_modifier_classes: 'uw-term--layout'
+lists:
+  -
+    title: 'Blog Teaser title goes here'
+    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'
+    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:
+      - 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'
+    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:
+      - 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'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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/views-filter/_views-filter.scss b/source/_patterns/04-components/view/views-filter/_views-filter.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/view/views-filter/views-filter.twig b/source/_patterns/04-components/view/views-filter/views-filter.twig
new file mode 100644
index 0000000000000000000000000000000000000000..548eba05dc9f742ad836dd516b084978572c4c32
--- /dev/null
+++ b/source/_patterns/04-components/view/views-filter/views-filter.twig
@@ -0,0 +1 @@
+{% include '@components/filters/filters.twig' %}
diff --git a/source/_patterns/04-components/view/views-filter/views-filter.yml b/source/_patterns/04-components/view/views-filter/views-filter.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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-uw-view-blogs.scss b/source/_patterns/04-components/view/views-view/_views-view-uw-view-blogs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/source/_patterns/04-components/view/views-view/views-view-uw-view-blogs.twig b/source/_patterns/04-components/view/views-view/views-view-uw-view-blogs.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f954404e87e5ae3f11fbc6d0543c3535ffd2e5c5
--- /dev/null
+++ b/source/_patterns/04-components/view/views-view/views-view-uw-view-blogs.twig
@@ -0,0 +1,93 @@
+{%
+  set classes = [
+  'view',
+  'view-' ~ id|clean_class,
+  'view-id-' ~ id,
+  'view-display-id-' ~ display_id,
+  dom_id ? 'js-view-dom-id-' ~ dom_id,
+]
+%}
+{% block content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if title %}
+      {{ title }}
+    {% endif %}
+
+    {% if pattern_lab %}
+      {% include '@components/page-title/page-title.twig' with {
+        'page_title': view_title
+      } %}
+    {% endif %}
+    {% if header %}
+      <div class="view-header">
+        {{ header }}
+      </div>
+    {% endif %}
+    {% if exposed %}
+      <div class="view-filters">
+        {{ exposed }}
+      </div>
+    {% endif %}
+    {% if pattern_lab %}
+      {% include '@components/view/views-filter/views-filter.twig' %}
+    {% endif %}
+
+    {% if rows %}
+      <div class="view-content">
+        {{ rows }}
+
+{#        <div class="views-row">#}
+{#          <div role="article">#}
+{#            <div class="uw-node__grid">#}
+{#              <article class="uw-node__node">#}
+{#                <h2>#}
+{#                  <a href="#" >#}
+{#                    <span class="field--name-title">#}
+{#                      This is a blog post test title can be a little longer as they usually are.#}
+{#                    </span>#}
+{#                  </a>#}
+{#                </h2>#}
+{#                <div class="node__content">#}
+{#                  <div class="uw-field--name-field-uw-blog-date">#}
+{#                    <time datetime="2021-05-14T12:00:00Z" class="datetime">Friday, May 14, 2021</time>#}
+{#                  </div>#}
+{#                  <div class="uw-field--name-field-uw-blog-listing-page-image">#}
+{#                    <div class="uw-field__item">#}
+{#                      <div class="uw-media  media media--type-uw-mt-image  media--view-mode-default">#}
+{#                        <picture class="uw-picture">#}
+{#                          <!--[if IE 9]><video style="display: none;"><![endif]-->#}
+{#                          <source srcset="" media="all and (min-width: 63.19em)" type="image/jpeg">#}
+{#                          <source srcset="" media="all and (min-width: 49.81em)" type="image/jpeg">#}
+{#                          <source srcset="" media="all and (min-width: 30em)" type="image/jpeg">#}
+{#                          <source srcset="" media="all and (min-width: 25em)" type="image/jpeg">#}
+{#                          <source srcset="" media="all and (min-width: 15em)" type="image/jpeg">#}
+{#                          <!--[if IE 9]></video><![endif]-->#}
+{#                          <img class="uw-picture__fallback" src="" alt="">#}
+{#                        </picture>#}
+{#                      </div>#}
+{#                    </div>#}
+{#                  </div>#}
+{#                  <div class="clearfix text-formatted uw-field uw-field--name-field-uw-blog-summary uw-field--type-text-long uw-field--label-hidden uw-field__items quickedit-field">#}
+{#                    <div class="uw-field__item">#}
+{#                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse massa orci, finibus non rhoncus ut, varius at nisi. Donec sed imperdiet ex.</p>#}
+{#                    </div>#}
+{#                  </div>#}
+{#                </div>#}
+{#              </article>#}
+{#            </div>#}
+{#          </div>#}
+{#        </div>#}
+      </div>
+    {% endif %}
+    {% if pattern_lab %}
+      {% include '@components/view/views-content/views-content.twig' %}
+    {% endif %}
+
+    {% if pager %}
+      {{ pager }}
+    {% endif %}
+  </div>
+  {% if content %}
+    {{ content }}
+  {% endif %}
+{% endblock %}
diff --git a/source/_patterns/04-components/view/views-view/views-view-uw-view-blogs.yml b/source/_patterns/04-components/view/views-view/views-view-uw-view-blogs.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1471e2433e13b9bee618e6812e8fde9e12385dfb
--- /dev/null
+++ b/source/_patterns/04-components/view/views-view/views-view-uw-view-blogs.yml
@@ -0,0 +1,472 @@
+---
+header: false
+#layout_style: 'grid'
+#use_offcanvas: true
+layout_form_classes: 'uw-layout--controls'
+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: |
+  - 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: 'off-canvas'
+    btnclick: |
+
+
+filter_modifier_classes: 'filters-test-term'
+filter_items:
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '1text'
+    name: ''
+    type: 'text'
+    placeholder: '1text'
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '2text'
+    name: ''
+    type: 'text'
+    placeholder: '2text'
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '3text'
+    name: ''
+    type: 'text'
+    placeholder: '3text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '4text'
+    name: ''
+    type: 'text'
+    placeholder: '4text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '5text'
+    name: ''
+    type: 'text'
+    placeholder: '5text'
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '6text'
+    name: ''
+    type: 'text'
+    placeholder: '6text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '7text'
+    name: ''
+    type: 'text'
+    placeholder: '7text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '8text'
+    name: ''
+    type: 'text'
+    placeholder: '8text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '9text'
+    name: ''
+    type: 'text'
+    placeholder: '9text'
+
+  -
+    classes: ''
+    form_item_wrapper: true
+    id: '10text'
+    name: ''
+    type: 'text'
+    placeholder: '10text'
+modifier_classes: ''
+grid_modifier_classes: 'uw-term--layout'
+lists:
+  -
+    title: 'Blog Teaser title goes here'
+    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'
+    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:
+      - 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'
+    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:
+      - 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'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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:
+      - url: '#'
+        title: 'Tag 1'
+      - url: '#'
+        title: 'Tag 2'
+    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/views-view/views-view-uw-view-events.twig b/source/_patterns/04-components/view/views-view/views-view-uw-view-events.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0a6a88af717d3f268d55a5c05c452ca85b019abe
--- /dev/null
+++ b/source/_patterns/04-components/view/views-view/views-view-uw-view-events.twig
@@ -0,0 +1,51 @@
+{%
+  set classes = [
+  'view',
+  'view-' ~ id|clean_class,
+  'view-id-' ~ id,
+  'view-display-id-' ~ display_id,
+  dom_id ? 'js-view-dom-id-' ~ dom_id,
+]
+%}
+{% block content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if title %}
+      {{ title }}
+    {% endif %}
+
+    {% if pattern_lab %}
+      {% include '@components/page-title/page-title.twig' with {
+        'page_title': view_title
+      } %}
+    {% endif %}
+    {% if header %}
+      <div class="view-header">
+        {{ header }}
+      </div>
+    {% endif %}
+    {% if exposed %}
+      <div class="view-filters">
+        {{ exposed }}
+      </div>
+    {% endif %}
+    {% if pattern_lab %}
+      {% include '@components/view/views-filter/views-filter.twig' %}
+    {% endif %}
+
+    {% if rows %}
+      <div class="view-content">
+        {{ rows }}
+      </div>
+    {% endif %}
+    {% if pattern_lab %}
+      {% include '@components/view/views-content/views-content.twig' %}
+    {% endif %}
+
+    {% if pager %}
+      {{ pager }}
+    {% endif %}
+  </div>
+  {% if content %}
+    {{ content }}
+  {% endif %}
+{% endblock %}
diff --git a/source/_patterns/04-components/view/views-view/views-view-uw-view-news.twig b/source/_patterns/04-components/view/views-view/views-view-uw-view-news.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0a6a88af717d3f268d55a5c05c452ca85b019abe
--- /dev/null
+++ b/source/_patterns/04-components/view/views-view/views-view-uw-view-news.twig
@@ -0,0 +1,51 @@
+{%
+  set classes = [
+  'view',
+  'view-' ~ id|clean_class,
+  'view-id-' ~ id,
+  'view-display-id-' ~ display_id,
+  dom_id ? 'js-view-dom-id-' ~ dom_id,
+]
+%}
+{% block content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if title %}
+      {{ title }}
+    {% endif %}
+
+    {% if pattern_lab %}
+      {% include '@components/page-title/page-title.twig' with {
+        'page_title': view_title
+      } %}
+    {% endif %}
+    {% if header %}
+      <div class="view-header">
+        {{ header }}
+      </div>
+    {% endif %}
+    {% if exposed %}
+      <div class="view-filters">
+        {{ exposed }}
+      </div>
+    {% endif %}
+    {% if pattern_lab %}
+      {% include '@components/view/views-filter/views-filter.twig' %}
+    {% endif %}
+
+    {% if rows %}
+      <div class="view-content">
+        {{ rows }}
+      </div>
+    {% endif %}
+    {% if pattern_lab %}
+      {% include '@components/view/views-content/views-content.twig' %}
+    {% endif %}
+
+    {% if pager %}
+      {{ pager }}
+    {% endif %}
+  </div>
+  {% if content %}
+    {{ content }}
+  {% endif %}
+{% endblock %}