<!-- Research List -->
<div class="research_list">
<div class="fs-row">
<div class="fs-cell">
<div class="research_list_inner">
<ul class="research_list_rows" id="item_list" aria-label="">
<li class="research_list_row">
<div class="research_list_item_wrapper">
<div class="research_list_item type_default theme_default">
<figure class="research_list_item_figure research_research_list_item_figure">
<img class="research_list_image" srcset="https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
</figure>
<div class="research_list_item_content">
<div class="research_list_item_category">Tip Sheet</div>
<h3 class="research_list_item_title">
<a href="#" class="research_list_item_title_link">
Lorem ipsum dolor sit amet
</a>
</h3>
<div class="research_list_item_time_wrap">
<time class="research_list_item_time" datetime="">
<span class="research_list_item_time_date">January 01, 2019</span>
<span class="research_list_item_time_time">5:00 PM UTC</span>
</time>
</div>
<div class="research_list_item_desc">
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>
</div>
<div class="research_list_item_footer">
<div class="research_list_item_topics_wrap">
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Topics</div>
<div class="pill_list theme_yellow">
<div class="pill_item">
<div class="pill">
Mental & Behavioral Health
</div>
</div>
</div>
</div>
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Ages</div>
<div class="pill_list theme_salmon">
<div class="pill_item">
<div class="pill">
11-13 yrs Middle
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="research_list_row">
<div class="research_list_item_wrapper">
<div class="research_list_item type_default theme_default">
<figure class="research_list_item_figure research_research_list_item_figure">
<img class="research_list_image" srcset="https://images.fastspot.com/framework/740x416/2 740w, https://images.fastspot.com/framework/500x282/2 500w, https://images.fastspot.com/framework/300x169/2 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/2" alt="" loading="lazy" width="300" height="169">
</figure>
<div class="research_list_item_content">
<div class="research_list_item_category">Tip Sheet</div>
<h3 class="research_list_item_title">
<a href="#" class="research_list_item_title_link">
Phasellus viverra nulla ut metus varius laoreet
</a>
</h3>
<div class="research_list_item_source">
<a href="scientificamerican.com" class="research_list_item_source_link theme_salmon">
<span class="research_list_item_source_link_inner">
<span class="research_list_item_source_link_label">scientificamerican.com</span>
<span class="research_list_item_source_link_icon" aria-hidden="true">
<svg class="icon icon_external">
<use href="/images/icons.svg#external" />
</svg>
</span>
</span>
</a>
</div>
<div class="research_list_item_time_wrap">
<time class="research_list_item_time" datetime="">
<span class="research_list_item_time_date">January 01, 2019</span>
<span class="research_list_item_time_time">5:00 PM UTC</span>
</time>
</div>
<div class="research_list_item_desc">
<p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>
</div>
<div class="research_list_item_footer">
<div class="research_list_item_topics_wrap">
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Topics</div>
<div class="pill_list theme_yellow">
<div class="pill_item">
<div class="pill">
Mental & Behavioral Health
</div>
</div>
</div>
</div>
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Ages</div>
<div class="pill_list theme_salmon">
<div class="pill_item">
<div class="pill">
11-13 yrs Middle
</div>
</div>
<div class="pill_item">
<div class="pill">
14-18 yrs High School
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="research_list_row">
<div class="research_list_item_wrapper">
<div class="research_list_item type_default theme_default">
<div class="research_list_item_content">
<div class="research_list_item_category">Scholarly Article</div>
<h3 class="research_list_item_title">
<a href="#" class="research_list_item_title_link">
Quisque rutrum
</a>
</h3>
<div class="research_list_item_time_wrap">
<time class="research_list_item_time" datetime="">
<span class="research_list_item_time_date">January 01, 2019</span>
<span class="research_list_item_time_time">5:00 PM UTC</span>
</time>
</div>
<div class="research_list_item_desc">
<p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
</div>
</div>
<div class="research_list_item_footer">
<div class="research_list_item_topics_wrap">
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Topics</div>
<div class="pill_list theme_yellow">
<div class="pill_item">
<div class="pill">
Mental & Behavioral Health
</div>
</div>
<div class="pill_item">
<div class="pill">
Mental & Behavioral Health
</div>
</div>
</div>
</div>
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Ages</div>
<div class="pill_list theme_salmon">
<div class="pill_item">
<div class="pill">
3-5 yrs Preschooler
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="research_list_row">
<div class="research_list_item_wrapper">
<div class="research_list_item type_default theme_default">
<figure class="research_list_item_figure research_research_list_item_figure">
<img class="research_list_image" srcset="https://images.fastspot.com/framework/740x416/3 740w, https://images.fastspot.com/framework/500x282/3 500w, https://images.fastspot.com/framework/300x169/3 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/3" alt="" loading="lazy" width="300" height="169">
</figure>
<div class="research_list_item_content">
<div class="research_list_item_category">Tip Sheet</div>
<h3 class="research_list_item_title">
<a href="#" class="research_list_item_title_link">
Maecenas
</a>
</h3>
<div class="research_list_item_time_wrap">
<time class="research_list_item_time" datetime="">
<span class="research_list_item_time_date">January 01, 2019</span>
<span class="research_list_item_time_time">5:00 PM UTC</span>
</time>
</div>
</div>
<div class="research_list_item_footer">
<div class="research_list_item_topics_wrap">
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Topics</div>
<div class="pill_list theme_yellow">
<div class="pill_item">
<div class="pill">
Mental & Behavioral Health
</div>
</div>
<div class="pill_item">
<div class="pill">
Parenting
</div>
</div>
<div class="pill_item">
<div class="pill">
Physical Health
</div>
</div>
</div>
</div>
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Ages</div>
<div class="pill_list theme_salmon">
<div class="pill_item">
<div class="pill">
3-5 yrs Preschooler
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="research_list_row">
<div class="research_list_item_wrapper">
<div class="research_list_item type_default theme_default">
<figure class="research_list_item_figure research_research_list_item_figure">
<img class="research_list_image" srcset="https://images.fastspot.com/framework/740x416/4 740w, https://images.fastspot.com/framework/500x282/4 500w, https://images.fastspot.com/framework/300x169/4 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/4" alt="" loading="lazy" width="300" height="169">
</figure>
<div class="research_list_item_content">
<div class="research_list_item_category">Tip Sheet</div>
<h3 class="research_list_item_title">
<a href="#" class="research_list_item_title_link">
In enim justo, rhoncus ut, imperdiet a
</a>
</h3>
<div class="research_list_item_time_wrap">
<time class="research_list_item_time" datetime="">
<span class="research_list_item_time_date">January 01, 2019</span>
<span class="research_list_item_time_time">5:00 PM UTC</span>
</time>
</div>
<div class="research_list_item_desc">
<p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien.</p>
</div>
</div>
<div class="research_list_item_footer">
<div class="research_list_item_topics_wrap">
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Topics</div>
<div class="pill_list theme_yellow">
<div class="pill_item">
<div class="pill">
Physical Health
</div>
</div>
</div>
</div>
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Ages</div>
<div class="pill_list theme_salmon">
<div class="pill_item">
<div class="pill">
3-5 yrs Preschooler
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="research_list_row">
<div class="research_list_item_wrapper">
<div class="research_list_item type_default theme_default">
<figure class="research_list_item_figure research_research_list_item_figure">
<img class="research_list_image" srcset="https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" sizes="(min-width: 500px) 400px, 50vw" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
</figure>
<div class="research_list_item_content">
<div class="research_list_item_category">Tip Sheet</div>
<h3 class="research_list_item_title">
<a href="#" class="research_list_item_title_link">
Cras ultricies
</a>
</h3>
<div class="research_list_item_time_wrap">
<time class="research_list_item_time" datetime="">
<span class="research_list_item_time_date">January 01, 2019</span>
<span class="research_list_item_time_time">5:00 PM UTC</span>
</time>
</div>
<div class="research_list_item_desc">
<p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
</div>
</div>
<div class="research_list_item_footer">
<div class="research_list_item_topics_wrap">
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Topics</div>
<div class="pill_list theme_yellow">
<div class="pill_item">
<div class="pill">
Mental & Behavioral Health
</div>
</div>
</div>
</div>
<div class="research_list_item_topic_wrap">
<div class="research_list_item_topic_heading">Ages</div>
<div class="pill_list theme_salmon">
<div class="pill_item">
<div class="pill">
3-5 yrs Preschooler
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="research_list_pagination">
<!-- Pagination -->
<div class="pagination theme_light_blue">
<nav class="pagination_nav" aria-label="Research Pagination">
<div class="pagination_arrows pagination_arrow_left pagination_arrow_disabled">
<a class="pagination_arrow pagination_arrow_first_page" href="#">
<span class="pagination_arrow_icon">
<svg class="icon icon_caret_first_page">
<use href="/images/icons.svg#caret_first_page" />
</svg>
</span>
<span class="pagination_arrow_label">First Page</span>
</a>
<a class="pagination_arrow" href="#">
<span class="pagination_arrow_icon">
<svg class="icon icon_caret_left">
<use href="/images/icons.svg#caret_left" />
</svg>
</span>
<span class="pagination_arrow_label">Previous Page</span>
</a>
</div>
<div class="pagination_nav_list">
<ul class="pagination_nav_list_items">
<li class="pagination_nav_list_item active">
<a class="pagination_nav_list_item_link" href="#">
<span class="pagination_nav_list_item_label">1</span>
</a>
</li>
<li class="pagination_nav_list_item">
<a class="pagination_nav_list_item_link" href="#">
<span class="pagination_nav_list_item_label">2</span>
</a>
</li>
<li class="pagination_nav_list_item">
<a class="pagination_nav_list_item_link" href="#">
<span class="pagination_nav_list_item_label">3</span>
</a>
</li>
<li class="pagination_nav_list_item">
<a class="pagination_nav_list_item_link" href="#">
<span class="pagination_nav_list_item_label">4</span>
</a>
</li>
<li class="pagination_nav_list_item">
<a class="pagination_nav_list_item_link" href="#">
<span class="pagination_nav_list_item_label">5</span>
</a>
</li>
</ul>
<span class="pagination_nav_list_suffix">of
<span class="pagination_nav_list_suffix_pages">50</span>
</span>
</div>
<div class="pagination_arrows pagination_arrow_right">
<a class="pagination_arrow" href="#">
<span class="pagination_arrow_label">Next Page</span>
<span class="pagination_arrow_icon">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</a>
<a class="pagination_arrow pagination_arrow_last_page" href="#">
<span class="pagination_arrow_label">Last Page</span>
<span class="pagination_arrow_icon">
<svg class="icon icon_caret_last_page">
<use href="/images/icons.svg#caret_last_page" />
</svg>
</span>
</a>
</div>
</nav>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
</div>
<!-- END: Research List -->
{#
{% include '@partial-research-list' with {
items: [
{
image: '1',
categories: [
{
label: 'Category',
url: '#'
}
],
title: 'Title',
url: '#',
date: '2019-01-01 17:00:00',
author: 'Author',
description: 'Description'
}
]
} %}
#}
<!-- Research List -->
<div class="research_list">
<div class="fs-row">
<div class="fs-cell">
<div class="research_list_inner">
<ul class="research_list_rows" id="item_list" aria-label="{{ page.title }}">
{% for item in items %}
<li class="research_list_row">
<div class="research_list_item_wrapper">
{% include '@partial-research-card' with {
class:'research',
color_pattern: null,
theme: 'default',
type: 'default',
pill_theme:'yellow',
item: item
} %}
</div>
</li>
{% endfor %}
</ul>
<div class="research_list_pagination">
{% include '@partial-pagination' with {
title: 'Research Pagination',
pages: 50
} %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Research List -->
No notes defined.