<div class="page_header theme_site_theme">
<div class="page_header_inner">
<div class="page_header_inner_content">
<img class="page_header_inner_background" src="/images/demo-lines.png">
<div class="page_header_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_breadcrumb_inner">
<div class="breadcrumb">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Home</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg></span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Navigation Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg></span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Parent Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true"><svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg></span>
</li>
<li class="breadcrumb_item">
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_intro">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_intro_inner">
<h1 class="page_header_title" id="page_header_title" tabindex="-1">Resources</h1>
<p class="page_header_description">Lorem ipsum dolor sit amet consectetur. Libero tortor sed ultrices et nunc leo id risus velit. Volutpat ac at cursus cras et nisi mi. Venenatis lacus semper sagittis eget in.</p>
</div>
</div>
</div>
</div>
<div class="page_header_filters">
<!-- Filter -->
<div class="filter">
<div class="fs-row">
<div class="fs-cell">
<div class="filter_inner">
<h2 class="filter_title">Filter By</h2>
<form class="filter_tools" action="#" method="get">
<div class="filter_tool">
<label class="filter_tool_label" for="filter_tool_label_1">Topic</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_1">
<option value="All Topics">All Topics</option>
<option value="Topic One">Topic One</option>
<option value="Another Topic">Another Topic</option>
</select>
</div>
</div>
<div class="filter_tool">
<label class="filter_tool_label" for="filter_tool_label_2">Type</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_2">
<option value="All Types">All Types</option>
<option value="Type One">Type One</option>
<option value="Another Type">Another Type</option>
<option value="Inexplicably Long Type Name">Inexplicably Long Type Name</option>
</select>
</div>
</div>
<div class="filter_tool">
<label class="filter_tool_label" for="filter_tool_label_3">Audience</label>
<div class="filter_tool_select_wrapper">
<select class="filter_tool_select" id="filter_tool_label_3">
<option value="All Audiences">All Audiences</option>
<option value="Audience One">Audience One</option>
<option value="Audience Two">Audience Two</option>
<option value="Audience Three">Audience Three</option>
</select>
</div>
</div>
<div>
<button class="filter_tool_submit" type="submit">
<span class="filter_tool_submit_inner">
<span class="filter_tool_submit_label">Submit</span>
<span class="filter_tool_submit_icon"><svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg></span>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END: Filter -->
</div>
</div>
</div>
</div>
<section class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_header_title">
<!-- Resource List -->
<div class="resource_list">
<div class="fs-row">
<div class="fs-cell">
<div class="resource_list_inner">
<ul class="resource_list_rows" id="item_list" aria-labelledby="page_header_title">
<li class="resource_list_row">
<figure class="resource_list_item_figure">
<a class="resource_list_item_figure_link" href="#" aria-label="Read more about Lorem ipsum dolor sit amet" tabindex="-1">
<img class="resource_list_item_image" srcset="https://images.fastspot.com/generic/980x552/1 980w, https://images.fastspot.com/generic/740x416/1 740w, https://images.fastspot.com/generic/500x282/1 500w, https://images.fastspot.com/generic/300x169/1 300w" sizes="(min-width: 1400px) 416px, (min-width: 1220px) 360px, (min-width: 980px) 300px, (min-width: 740px) 343px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x169/1" alt="" loading="lazy" width="300" height="169">
<span class="resource_list_item_figure_icon"><svg class="icon icon_jh_article">
<use href="/images/icons.svg#jh_article" />
</svg></span>
</a>
</figure>
<div class="resource_list_item_wrapper">
<div class="resource_list_item_header">
<h2 class="resource_list_item_title">
<a href="#" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Lorem ipsum dolor sit amet</span><span class="icon_nowrap resource_list_item_link_icon" aria-hidden="true"><svg class="icon icon_external">
<use href="/images/icons.svg#external" />
</svg></span>
</span>
</a>
</h2>
<div class="resource_list_item_pretitle">
<a href="page-news-category.html" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Category 1</span>
</span>
</a>
</div>
</div>
<div class="resource_list_item_description typography">
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>
</div>
</li>
<li class="resource_list_row">
<figure class="resource_list_item_figure">
<a class="resource_list_item_figure_link" href="#" aria-label="Read more about Phasellus viverra nulla ut metus varius laoreet" tabindex="-1">
<img class="resource_list_item_image" srcset="https://images.fastspot.com/generic/980x552/2 980w, https://images.fastspot.com/generic/740x416/2 740w, https://images.fastspot.com/generic/500x282/2 500w, https://images.fastspot.com/generic/300x169/2 300w" sizes="(min-width: 1400px) 416px, (min-width: 1220px) 360px, (min-width: 980px) 300px, (min-width: 740px) 343px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x169/2" alt="" loading="lazy" width="300" height="169">
<span class="resource_list_item_figure_icon"><svg class="icon icon_jh_camera">
<use href="/images/icons.svg#jh_camera" />
</svg></span>
</a>
</figure>
<div class="resource_list_item_wrapper">
<div class="resource_list_item_header">
<h2 class="resource_list_item_title">
<a href="#" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Phasellus viverra nulla ut metus varius laoreet</span>
</span>
</a>
</h2>
<div class="resource_list_item_pretitle">
<a href="page-news-category.html" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Category 2</span>
</span>
</a>
</div>
</div>
<div class="resource_list_item_description typography">
<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>
</li>
<li class="resource_list_row">
<figure class="resource_list_item_figure">
<a class="resource_list_item_figure_link" href="#" aria-label="Read more about Quisque rutrum" tabindex="-1">
<img class="resource_list_item_image" srcset="https://images.fastspot.com/generic/980x552/1 980w, https://images.fastspot.com/generic/740x416/1 740w, https://images.fastspot.com/generic/500x282/1 500w, https://images.fastspot.com/generic/300x169/1 300w" sizes="(min-width: 1400px) 416px, (min-width: 1220px) 360px, (min-width: 980px) 300px, (min-width: 740px) 343px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x169/1" alt="" loading="lazy" width="300" height="169">
<span class="resource_list_item_figure_icon"><svg class="icon icon_jh_download">
<use href="/images/icons.svg#jh_download" />
</svg></span>
</a>
</figure>
<div class="resource_list_item_wrapper">
<div class="resource_list_item_header">
<h2 class="resource_list_item_title">
<a href="#" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Quisque rutrum</span>
</span>
</a>
</h2>
<div class="resource_list_item_pretitle">
<a href="page-news-category.html" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Category 1</span>
</span>
</a>
</div>
</div>
<div class="resource_list_item_description typography">
<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>
</li>
<li class="resource_list_row">
<figure class="resource_list_item_figure">
<a class="resource_list_item_figure_link" href="#" aria-label="Read more about Maecenas" tabindex="-1">
<img class="resource_list_item_image" srcset="https://images.fastspot.com/generic/980x552/3 980w, https://images.fastspot.com/generic/740x416/3 740w, https://images.fastspot.com/generic/500x282/3 500w, https://images.fastspot.com/generic/300x169/3 300w" sizes="(min-width: 1400px) 416px, (min-width: 1220px) 360px, (min-width: 980px) 300px, (min-width: 740px) 343px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x169/3" alt="" loading="lazy" width="300" height="169">
<span class="resource_list_item_figure_icon"><svg class="icon icon_jh_sound">
<use href="/images/icons.svg#jh_sound" />
</svg></span>
</a>
</figure>
<div class="resource_list_item_wrapper">
<div class="resource_list_item_header">
<h2 class="resource_list_item_title">
<a href="#" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Maecenas</span>
</span>
</a>
</h2>
<div class="resource_list_item_pretitle">
<a href="page-news-category.html" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Category 1</span>
</span>
</a>
</div>
</div>
</div>
</li>
<li class="resource_list_row">
<figure class="resource_list_item_figure">
<a class="resource_list_item_figure_link" href="#" aria-label="Read more about In enim justo, rhoncus ut, imperdiet a" tabindex="-1">
<img class="resource_list_item_image" srcset="https://images.fastspot.com/generic/980x552/4 980w, https://images.fastspot.com/generic/740x416/4 740w, https://images.fastspot.com/generic/500x282/4 500w, https://images.fastspot.com/generic/300x169/4 300w" sizes="(min-width: 1400px) 416px, (min-width: 1220px) 360px, (min-width: 980px) 300px, (min-width: 740px) 343px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x169/4" alt="" loading="lazy" width="300" height="169">
<span class="resource_list_item_figure_icon"><svg class="icon icon_jh_article">
<use href="/images/icons.svg#jh_article" />
</svg></span>
</a>
</figure>
<div class="resource_list_item_wrapper">
<div class="resource_list_item_header">
<h2 class="resource_list_item_title">
<a href="#" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">In enim justo, rhoncus ut, imperdiet a</span>
</span>
</a>
</h2>
<div class="resource_list_item_pretitle">
<a href="#" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label"></span>
</span>
</a>
</div>
</div>
<div class="resource_list_item_description typography">
<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>
</li>
<li class="resource_list_row">
<figure class="resource_list_item_figure">
<a class="resource_list_item_figure_link" href="#" aria-label="Read more about Cras ultricies" tabindex="-1">
<img class="resource_list_item_image" srcset="https://images.fastspot.com/generic/980x552/1 980w, https://images.fastspot.com/generic/740x416/1 740w, https://images.fastspot.com/generic/500x282/1 500w, https://images.fastspot.com/generic/300x169/1 300w" sizes="(min-width: 1400px) 416px, (min-width: 1220px) 360px, (min-width: 980px) 300px, (min-width: 740px) 343px, (min-width: 380px) calc(95.88vw - 38px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x169/1" alt="" loading="lazy" width="300" height="169">
<span class="resource_list_item_figure_icon"><svg class="icon icon_jh_article">
<use href="/images/icons.svg#jh_article" />
</svg></span>
</a>
</figure>
<div class="resource_list_item_wrapper">
<div class="resource_list_item_header">
<h2 class="resource_list_item_title">
<a href="#" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Cras ultricies</span>
</span>
</a>
</h2>
<div class="resource_list_item_pretitle">
<a href="page-news-category.html" class="resource_list_item_link">
<span class="resource_list_item_link_inner">
<span class="resource_list_item_link_label">Category 1</span>
</span>
</a>
</div>
</div>
<div class="resource_list_item_description typography">
<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>
</li>
</ul>
<div class="resource_list_pagination">
<!-- Pagination -->
<div class="pagination">
<nav class="pagination_nav" aria-label="Resource Pagination">
<a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" 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>
<a class="pagination_arrow pagination_arrow_right" 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>
</nav>
<form class="pagination_form" action="#" method="get">
<div class="pagination_form_inner">
<label class="pagination_form_label" for="pagination_form_select">Page</label>
<div class="pagination_form_select_wrapper">
<select class="pagination_form_select" name="page" id="pagination_form_select" aria-label="Select Page Number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
</select>
</div>
<span class="pagination_form_suffix">of 50</span>
<button class="pagination_form_button" type="submit" aria-label="View Page">Go</button>
</div>
</form>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
</div>
<!-- END: Resource List -->
</section>
{% include '@partial-page-header--resources' with {
page: page
} %}
<section class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_header_title">
{% render '@partial-resource-list' %}
</section>
No notes defined.