From 4ac743d0b075212d38ff3550a812c5fe95bf165c Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 25 May 2021 22:05:36 +0000
Subject: [PATCH] adding additional messaging to the term page no results
---
css/styles.css | 42 +-
.../04-components/filters/_filters.scss | 4 +
.../04-components/message/_message.scss | 7 +-
.../_patterns/04-components/view/_view.scss | 58 ++-
.../views-view/views-view-uw-view-blogs.twig | 50 +-
.../views-view/views-view-uw-view-blogs.yml | 6 +-
.../views-view/views-view-uw-view-events.twig | 8 +
.../views-view/views-view-uw-view-events.yml | 472 ++++++++++++++++++
...wig => views-view-uw-view-news-items.twig} | 9 +-
.../views-view-uw-view-news-items.yml | 472 ++++++++++++++++++
10 files changed, 1045 insertions(+), 83 deletions(-)
create mode 100644 source/_patterns/04-components/view/views-view/views-view-uw-view-events.yml
rename source/_patterns/04-components/view/views-view/{views-view-uw-view-news.twig => views-view-uw-view-news-items.twig} (77%)
create mode 100644 source/_patterns/04-components/view/views-view/views-view-uw-view-news-items.yml
diff --git a/css/styles.css b/css/styles.css
index 80c10b7e..a27bad76 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4750,6 +4750,8 @@ fieldset,
margin-bottom: 1rem;
margin-top: 1rem;
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
+ .seven-details:hover, .seven-details:focus-within {
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.seven-details:first-child {
margin-top: 0; }
@@ -6559,6 +6561,11 @@ fieldset,
.messages__content > *:last-child {
margin-bottom: 0; }
+.message__list {
+ list-style: none;
+ margin: 0;
+ padding: 0; }
+
.message--status,
.messages--status {
background-color: #e7f4e4;
@@ -7793,19 +7800,32 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
-ms-flex-flow: row wrap;
flex-flow: row wrap;
gap: 1.25rem !important;
- order: 1;
+ grid-column: 1/3;
+ grid-row: 1/2;
width: 100%; }
@media (min-width: 48.06rem) {
.view-content {
- width: clamp(320px, 900px, calc(100vw - 333px)); } }
+ grid-column: 1/2; } }
+ .view-content .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); }
+ .view-content .views-row:hover, .view-content .views-row:focus-within {
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
+
+.view-content-message {
+ margin: 0; }
+ .view-content-message .message,
+ .view-content-message .messages {
+ margin: 0; }
.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;
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-template-columns: 100%;
padding: 1rem;
position: relative; }
@media (min-width: 75rem) {
@@ -7814,9 +7834,8 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
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; } }
+ grid-template-columns: auto 18.75rem; } }
@media (min-width: 75rem) {
.view.view-taxonomy-term, .view.view-uw-view-blogs, .view.view-uw-view-events, .view.view-uw-view-news-items {
padding: 1rem 0; } }
@@ -7862,13 +7881,15 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
.view-filters {
display: none;
- order: 2;
+ grid-column: 1/3;
+ grid-row: 1/2;
width: 100%; }
.view-filters form {
Width: 100%; }
@media (min-width: 48.06rem) {
.view-filters {
display: inherit;
+ grid-column: 2/3;
margin: 0;
width: 18.75rem; }
.grid .view-filters,
@@ -7885,13 +7906,6 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
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;
diff --git a/source/_patterns/04-components/filters/_filters.scss b/source/_patterns/04-components/filters/_filters.scss
index 696bf83b..859885aa 100644
--- a/source/_patterns/04-components/filters/_filters.scss
+++ b/source/_patterns/04-components/filters/_filters.scss
@@ -33,6 +33,10 @@
margin-bottom: 1rem;
margin-top: 1rem;
transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+ &:hover,
+ &:focus-within {
+ box-shadow: gesso-box-shadow(3);
+ }
&:first-child{
margin-top: 0;
}
diff --git a/source/_patterns/04-components/message/_message.scss b/source/_patterns/04-components/message/_message.scss
index 1a3fc5ba..528c8d96 100644
--- a/source/_patterns/04-components/message/_message.scss
+++ b/source/_patterns/04-components/message/_message.scss
@@ -52,7 +52,11 @@ $message-warning-border-color: gesso-color(ui, warning, border) !default;
margin-bottom: 0;
}
}
-
+.message__list{
+ list-style: none;
+ margin:0;
+ padding:0;
+}
.message--status,
.messages--status{
background-color: $message-status-background-color;
@@ -90,3 +94,4 @@ $message-warning-border-color: gesso-color(ui, warning, border) !default;
@include svg-background(messages-warning);
}
}
+
diff --git a/source/_patterns/04-components/view/_view.scss b/source/_patterns/04-components/view/_view.scss
index 2dad4c77..c9b07195 100644
--- a/source/_patterns/04-components/view/_view.scss
+++ b/source/_patterns/04-components/view/_view.scss
@@ -1,5 +1,10 @@
// @file
// Styles for a view.
+$view-accent-border-color: gesso-color(ui, generic, accent) !default;
+$view-link-color: gesso-color(text, on-light) !default;
+$view-link-color-hover: gesso-color(ui, generic, text-dark) !default;
+$view-meta-color: gesso-color(ui, generic, text-dark) !default;
+$view-padding: rem(gesso-spacing(sm)) !default;
$sidebar-width: 18.75rem;
// set the layout for the Views container when being used with Blog, news, events
@@ -8,11 +13,30 @@ $sidebar-width: 18.75rem;
// View content container.
&-content{
@include uw-flex-grid();
- order:1;
+ grid-column:1/3;
+ grid-row:1/2;
width:100%;
@include medium{
- width: clamp(320px, 900px, calc(100vw - 333px));
+ grid-column:1/2;
+ //width: clamp(320px, 900px, calc(100vw - 333px));
}
+ .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);
+ }
+ }
+ }
+ &-content-message{
+ margin:0;
+ .message,
+ .messages{
+ margin:0;
+ }
+
}
// View container for taxonomy terms.
&.view-taxonomy-term,
@@ -23,14 +47,13 @@ $sidebar-width: 18.75rem;
// View container for newslanding page.
&.view-uw-view-news-items{
@include uw-contained-width;
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-template-columns: 100%;
padding: rem(gesso-spacing(sm));
position: relative;
@include medium {
- flex-direction: row;
gap: 1.5rem;
- justify-content: center;
+ grid-template-columns: auto $sidebar-width;
}
@include xl {
padding: rem(gesso-spacing(sm)) 0;
@@ -52,13 +75,15 @@ $sidebar-width: 18.75rem;
.view-filters{
// Universal filter form used on events, blog and news.
display:none;
- order:2;
+ grid-column:1/3;
+ grid-row:1/2;
width:100%;
form{
Width:100%;
}
@include medium {
display:inherit;
+ grid-column:2/3;
margin: 0;
.grid &,
.list &{
@@ -75,29 +100,16 @@ $sidebar-width: 18.75rem;
}
}
}
-// @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 "
+
}
-// 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;
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
index f954404e..89c3c883 100644
--- 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
@@ -35,49 +35,15 @@
{% 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>
+ {% else %}
+ <div class="view-content-message">
+ <div role="alert" class="message message--warning">
+ <ul class="message__list">
+ <li class="message__item"> <p>Your filters returned no results please review criteria selected</p></li>
+ </ul>
+ </div>
+ </div>
{% endif %}
{% if pattern_lab %}
{% include '@components/view/views-content/views-content.twig' %}
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
index 1471e243..3f00374b 100644
--- 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
@@ -1,4 +1,8 @@
---
+type: 'warning'
+heading: 'Warning message'
+messages:
+ - '<p>Your filters returned no results please review criteria selected.</p>'
header: false
#layout_style: 'grid'
#use_offcanvas: true
@@ -8,7 +12,6 @@ form_items:
form_item_wrapper: false
is_demo: false
is_disabled: false
- type: ''
classes: button_modifier_classes
modifier_classes: button_modifier_classes
formaction: ''
@@ -24,7 +27,6 @@ form_items:
form_item_wrapper: false
is_demo: false
is_disabled: false
- type: ''
classes: button_modifier_classes
modifier_classes: button_modifier_classes
formaction: ''
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
index 0a6a88af..c9daa3c7 100644
--- 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
@@ -36,6 +36,14 @@
<div class="view-content">
{{ rows }}
</div>
+ {% else %}
+ <div class="view-content-message">
+ <div role="alert" class="message message--warning">
+ <ul class="message__list">
+ <li class="message__item"> <p>Your filters returned no results please review criteria selected</p></li>
+ </ul>
+ </div>
+ </div>
{% endif %}
{% if pattern_lab %}
{% include '@components/view/views-content/views-content.twig' %}
diff --git a/source/_patterns/04-components/view/views-view/views-view-uw-view-events.yml b/source/_patterns/04-components/view/views-view/views-view-uw-view-events.yml
new file mode 100644
index 00000000..1471e243
--- /dev/null
+++ b/source/_patterns/04-components/view/views-view/views-view-uw-view-events.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-news.twig b/source/_patterns/04-components/view/views-view/views-view-uw-view-news-items.twig
similarity index 77%
rename from source/_patterns/04-components/view/views-view/views-view-uw-view-news.twig
rename to source/_patterns/04-components/view/views-view/views-view-uw-view-news-items.twig
index 0a6a88af..ca8199ac 100644
--- 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-items.twig
@@ -31,11 +31,18 @@
{% if pattern_lab %}
{% include '@components/view/views-filter/views-filter.twig' %}
{% endif %}
-
{% if rows %}
<div class="view-content">
{{ rows }}
</div>
+ {% else %}
+ <div class="view-content-message">
+ <div role="alert" class="message message--warning">
+ <ul class="message__list">
+ <li class="message__item"> <p>Your filters returned no results please review criteria selected</p></li>
+ </ul>
+ </div>
+ </div>
{% endif %}
{% if pattern_lab %}
{% include '@components/view/views-content/views-content.twig' %}
diff --git a/source/_patterns/04-components/view/views-view/views-view-uw-view-news-items.yml b/source/_patterns/04-components/view/views-view/views-view-uw-view-news-items.yml
new file mode 100644
index 00000000..1471e243
--- /dev/null
+++ b/source/_patterns/04-components/view/views-view/views-view-uw-view-news-items.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>
--
GitLab