<div class="page_header theme_">
<div class="page_header_inner">
<div class="page_header_top">
<div class="page_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_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_icon" aria-hidden="true">
<svg class="icon icon_home">
<use href="/images/icons.svg#home" />
</svg>
</span>
<span class="breadcrumb_pill_label">Home</span>
</span>
</a>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">News & Stories</span>
</span>
</a>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">News Category</span>
</span>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_intro">
<div class="fs-row fs-lg-justify-center">
<div class="fs-cell fs-lg-10">
<div class="page_intro_inner">
<h1 class="page_title" id="page_title" tabindex="-1">News Category</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
<div class="news_listing_filters">
<div class="news_listing_filters_inner">
<!-- Filter -->
<div class="filter">
<div class="fs-row">
<div class="fs-cell">
<div class="filter_inner">
<div class="filter_bar">
<form class="filter_tools" action="" method="get">
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_1">Search</label>
<div class="filter_search_form">
<input class="filter_search_input" id="filter_tool_label_1" type="search" placeholder="Search news...">
<span class="filter_search_icon">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</div>
</div>
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_2">Source</label>
<select class="filter_tool_select" id="filter_tool_label_2">
<option value="Showing All" selected>Showing All</option>
<option value="Source A">Source A</option>
<option value="A Needlessly Long Source Title Goes Here">A Needlessly Long Source Title Goes Here</option>
</select>
</div>
<div class="filter_tool">
<label class="filter_label" for="filter_tool_label_3">Category</label>
<select class="filter_tool_select" id="filter_tool_label_3">
<option value="Showing All" selected>Showing All</option>
<option value="Category A">Category A</option>
<option value="Category B Goes Here">Category B Goes Here</option>
</select>
</div>
<div class="filter_tool filter_tool_submit">
<button class="filter_tools_submit_button">
<span class="filter_tools_submit_button_inner">
<span class="filter_tools_submit_button_label">Submit</span>
<span class="filter_tools_submit_button_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</button>
</div>
</form>
</div>
<div class="filter_results_wrap">
<div class="filter_results">
<p class="filter_results_description">
<span class="filter_results_label">12 Results found for:</span>
<span class="filter_results_category">Example</span>
</p>
<div class="filter_results_action">
<a href="page-news-listing.html" class="filter_results_reset_link">
<span class="filter_results_reset_link_inner">
<span class="filter_results_reset_link_label">Reset</span>
<span class="filter_results_reset_link_icon" aria-hidden="true">
<svg class="icon icon_reset">
<use href="/images/icons.svg#reset" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Filter -->
</div>
</div>
<!-- News List -->
<div class="news_list">
<div class="fs-row">
<div class="fs-cell">
<div class="news_list_inner">
<ul class="news_list_rows" id="item_list" aria-label="">
<li class="news_list_row">
<article class="news_card">
<figure class="news_card_figure">
<a class="news_card_figure_link" href="#" aria-label="Read more about Lorem ipsum dolor sit amet" tabindex="-1">
<img class="news_item_image" srcset="https://images.fastspot.com/le-moyne/1220x814/1 1220w, https://images.fastspot.com/le-moyne/980x654/1 980w, https://images.fastspot.com/le-moyne/740x494/1 740w, https://images.fastspot.com/le-moyne/500x334/1 500w, https://images.fastspot.com/le-moyne/300x200/1 300w" sizes="(min-width: 1394px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 331px, calc((100vw - 40px) * .9591 - 37px)" src="https://images.fastspot.com/le-moyne/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_card_wrapper">
<div class="news_card_header">
<h2 class="news_card_title">
<a href="#" class="news_card_title_link">
<span class="news_card_title_link_inner">
<span class="news_card_title_link_label">Lorem ipsum dolor sit amet</span>
<span class="news_card_title_link_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</h2>
<div class="news_card_categories">
<div class="news_card_category_hint">Category</div>
<p class="news_card_category_wrapper">
<span class="news_card_category">
<a class="news_card_category_link" href="page-news-category.html">Category 1</a>
</span>
</p>
</div>
</div>
<div class="news_card_body">
<div class="news_card_description">
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>
</div>
</div>
</article>
</li>
<li class="news_list_row">
<article class="news_card">
<figure class="news_card_figure">
<a class="news_card_figure_link" href="#" aria-label="Read more about Phasellus viverra nulla ut metus varius laoreet" tabindex="-1">
<img class="news_item_image" srcset="https://images.fastspot.com/le-moyne/1220x814/2 1220w, https://images.fastspot.com/le-moyne/980x654/2 980w, https://images.fastspot.com/le-moyne/740x494/2 740w, https://images.fastspot.com/le-moyne/500x334/2 500w, https://images.fastspot.com/le-moyne/300x200/2 300w" sizes="(min-width: 1394px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 331px, calc((100vw - 40px) * .9591 - 37px)" src="https://images.fastspot.com/le-moyne/300x200/2" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_card_wrapper">
<div class="news_card_header">
<h2 class="news_card_title">
<a href="#" class="news_card_title_link">
<span class="news_card_title_link_inner">
<span class="news_card_title_link_label">Phasellus viverra nulla ut metus varius laoreet</span>
<span class="news_card_title_link_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</h2>
<div class="news_card_categories">
<div class="news_card_category_hint">Category</div>
<p class="news_card_category_wrapper">
<span class="news_card_category">
<a class="news_card_category_link" href="page-news-category.html">Category 2</a>
</span>
</p>
</div>
</div>
<div class="news_card_body">
<div class="news_card_description">
<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>
</article>
</li>
<li class="news_list_row">
<article class="news_card">
<figure class="news_card_figure">
<a class="news_card_figure_link" href="#" aria-label="Read more about Quisque rutrum" tabindex="-1">
<img class="news_item_image" srcset="https://images.fastspot.com/le-moyne/1220x814/3 1220w, https://images.fastspot.com/le-moyne/980x654/3 980w, https://images.fastspot.com/le-moyne/740x494/3 740w, https://images.fastspot.com/le-moyne/500x334/3 500w, https://images.fastspot.com/le-moyne/300x200/3 300w" sizes="(min-width: 1394px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 331px, calc((100vw - 40px) * .9591 - 37px)" src="https://images.fastspot.com/le-moyne/300x200/3" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_card_wrapper">
<div class="news_card_header">
<h2 class="news_card_title">
<a href="#" class="news_card_title_link">
<span class="news_card_title_link_inner">
<span class="news_card_title_link_label">Quisque rutrum</span>
<span class="news_card_title_link_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</h2>
<div class="news_card_categories">
<div class="news_card_category_hint">Category</div>
<p class="news_card_category_wrapper">
<span class="news_card_category">
<a class="news_card_category_link" href="page-news-category.html">Category 1</a>
</span>
</p>
</div>
</div>
<div class="news_card_body">
<div class="news_card_description">
<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>
</article>
</li>
<li class="news_list_row">
<article class="news_card">
<figure class="news_card_figure">
<a class="news_card_figure_link" href="#" aria-label="Read more about Maecenas" tabindex="-1">
<img class="news_item_image" srcset="https://images.fastspot.com/le-moyne/1220x814/4 1220w, https://images.fastspot.com/le-moyne/980x654/4 980w, https://images.fastspot.com/le-moyne/740x494/4 740w, https://images.fastspot.com/le-moyne/500x334/4 500w, https://images.fastspot.com/le-moyne/300x200/4 300w" sizes="(min-width: 1394px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 331px, calc((100vw - 40px) * .9591 - 37px)" src="https://images.fastspot.com/le-moyne/300x200/4" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_card_wrapper">
<div class="news_card_header">
<h2 class="news_card_title">
<a href="#" class="news_card_title_link">
<span class="news_card_title_link_inner">
<span class="news_card_title_link_label">Maecenas</span>
<span class="news_card_title_link_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</h2>
<div class="news_card_categories">
<div class="news_card_category_hint">Category</div>
<p class="news_card_category_wrapper">
<span class="news_card_category">
<a class="news_card_category_link" href="page-news-category.html">Category 1</a>
</span>
</p>
</div>
</div>
<div class="news_card_body">
</div>
</div>
</article>
</li>
<li class="news_list_row">
<article class="news_card">
<figure class="news_card_figure">
<a class="news_card_figure_link" href="#" aria-label="Read more about In enim justo, rhoncus ut, imperdiet a" tabindex="-1">
<img class="news_item_image" srcset="https://images.fastspot.com/le-moyne/1220x814/5 1220w, https://images.fastspot.com/le-moyne/980x654/5 980w, https://images.fastspot.com/le-moyne/740x494/5 740w, https://images.fastspot.com/le-moyne/500x334/5 500w, https://images.fastspot.com/le-moyne/300x200/5 300w" sizes="(min-width: 1394px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 331px, calc((100vw - 40px) * .9591 - 37px)" src="https://images.fastspot.com/le-moyne/300x200/5" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_card_wrapper">
<div class="news_card_header">
<h2 class="news_card_title">
<a href="#" class="news_card_title_link">
<span class="news_card_title_link_inner">
<span class="news_card_title_link_label">In enim justo, rhoncus ut, imperdiet a</span>
<span class="news_card_title_link_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</h2>
</div>
<div class="news_card_body">
<div class="news_card_description">
<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>
</article>
</li>
<li class="news_list_row">
<article class="news_card">
<figure class="news_card_figure">
<a class="news_card_figure_link" href="#" aria-label="Read more about Cras ultricies" tabindex="-1">
<img class="news_item_image" srcset="https://images.fastspot.com/le-moyne/1220x814/6 1220w, https://images.fastspot.com/le-moyne/980x654/6 980w, https://images.fastspot.com/le-moyne/740x494/6 740w, https://images.fastspot.com/le-moyne/500x334/6 500w, https://images.fastspot.com/le-moyne/300x200/6 300w" sizes="(min-width: 1394px) 403px, (min-width: 1220px) 352px, (min-width: 980px) 282px, (min-width: 740px) 331px, calc((100vw - 40px) * .9591 - 37px)" src="https://images.fastspot.com/le-moyne/300x200/6" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_card_wrapper">
<div class="news_card_header">
<h2 class="news_card_title">
<a href="#" class="news_card_title_link">
<span class="news_card_title_link_inner">
<span class="news_card_title_link_label">Cras ultricies</span>
<span class="news_card_title_link_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</a>
</h2>
<div class="news_card_categories">
<div class="news_card_category_hint">Category</div>
<p class="news_card_category_wrapper">
<span class="news_card_category">
<a class="news_card_category_link" href="page-news-category.html">Category 1</a>
</span>
</p>
</div>
</div>
<div class="news_card_body">
<div class="news_card_description">
<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>
</article>
</li>
</ul>
<div class="news_list_pagination">
<!-- Pagination -->
<div class="pagination">
<nav class="pagination_nav" aria-label="News 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">
<span class="pagination_form_button_inner">
<span class="pagination_form_button_label">Go</span>
<span class="pagination_form_button_icon" aria-hidden="true">
<svg class="icon icon_caret_right">
<use href="/images/icons.svg#caret_right" />
</svg>
</span>
</span>
</button>
</div>
</form>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
</div>
<!-- END: News List -->
</div>
{% include '@partial-page-header' with {
page: page
} %}
<div class="full_width_callouts" id="page_content" tabindex="-1" aria-labelledby="page_title">
{% if page.filters %}
<div class="news_listing_filters">
{% if page.filters_title %}
<h2 class="news_listing_title">{{ page.filters_title }}</h2>
{% endif %}
<div class="news_listing_filters_inner">
{% include '@partial-filter' with {
tools: page.filters,
results: '12',
category: 'Example',
} %}
</div>
</div>
{% endif %}
{% render '@partial-news-list' %}
</div>
No notes defined.