<div class="
page_header
" id="page_header">
<div class="page_header_inner">
<div class="page_header_group">
<div class="page_header_breadcrumb">
<div class="fs-row">
<div class="fs-cell">
<div class="page_header_breadcrumb_inner">
<div class="
breadcrumb
" id="breadcrumb_30">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_30_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_30_nav_title">
You are here:
</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_30_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<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>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_angle_right">
<use href="/images/icons.svg#angle_right" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">
News Listing
</span>
</span>
</span>
<span class="breadcrumb_end" aria-hidden="true">
<svg class="icon icon_angle_down">
<use href="/images/icons.svg#angle_down" />
</svg>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="page_header_intro">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-9">
<div class="page_header_intro_inner">
<h1 class="page_header_title" id="page_header_title" tabindex="-1">
News Listing
</h1>
<p class="page_header_description">
Dis facilisis tellus ultricies vestibulum cubilia risus, blandit commodo hac ut posuere ex cursus, class libero imperdiet nullam odio.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="full_width_components" id="full_width_components" tabindex="-1" aria-labelledby="page_header_title">
<!-- News Feature -->
<section class="news_feature" id="news_feature_9" aria-labelledby="news_feature_9_item_title" aria-describedby="news_feature_9_item_description">
<div class="fs-row">
<div class="fs-cell">
<div class="news_feature_inner">
<div class="news_feature_item">
<figure class="news_feature_item_figure">
<a class="news_feature_item_figure_link" href="#" aria-labelledby="news_feature_9_item_title" tabindex="-1">
<img class="news_feature_item_image" srcset="https://images.fastspot.com/framework/980x654/1 980w, https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_feature_item_wrapper">
<div class="news_feature_item_header">
<h2 class="news_feature_item_title" id="news_feature_9_item_title">
<a class="
news_feature_item_title_link
" href="#">
<span class="news_feature_item_title_link_inner">
<span class="news_feature_item_title_link_label">
Featured News
</span>
</span>
</a>
</h2>
<div class="news_feature_item_categories">
<div class="news_feature_item_category_hint" id="news_feature_9_item_category_hint">
Categories
</div>
<ul class="news_feature_item_category_list" aria-labelledby="news_feature_9_item_category_hint">
<li class="news_feature_item_category">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Maecenas nec odio et
</span>
</span>
</a>
</li>
<li class="news_feature_item_category">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Donec vitae
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="news_feature_item_body">
<div class="news_feature_item_details">
<div class="news_feature_item_detail news_feature_item_date">
<span class="news_feature_item_detail_hint">
Published:
</span>
<time class="news_feature_item_detail_label" datetime="2019-01-01 17:00:00">
January 1, 2019
</time>
</div>
<div class="news_feature_item_detail news_feature_item_author">
<span class="news_feature_item_detail_hint">
- by
</span>
<span class="news_feature_item_detail_label">
Johnny Appleseed
</span>
</div>
</div>
<div class="news_feature_item_description" id="news_feature_9_item_description">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END: News Feature -->
<!-- Filter -->
<div class="filter" id="filter_17">
<div class="fs-row">
<div class="fs-cell">
<div class="filter_inner">
<form class="filter_form" action="#" method="get">
<div class="filter_form_item filter_form_item_select">
<label class="filter_form_item_label" for="filter_form_item_select_1">
Category
</label>
<div class="filter_form_item_select_wrapper">
<select class="filter_form_item_select" id="filter_form_item_select_1">
<option value="All Categories" selected>
All Categories
</option>
<option value="Vestibulum purus quam">
Vestibulum purus quam
</option>
<option value="Maecenas">
Maecenas
</option>
<option value="Nullam quis ante">
Nullam quis ante
</option>
<option value="Donec vitae">
Donec vitae
</option>
<option value="Cras dapibus">
Cras dapibus
</option>
<option value="Maecenas tempus">
Maecenas tempus
</option>
<option value="Curabitur ligula sapien">
Curabitur ligula sapien
</option>
<option value="Vivamus elementum semper nisi">
Vivamus elementum semper nisi
</option>
</select>
<span class="filter_form_item_select_icon" aria-hidden="true">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</div>
</div>
<div class="filter_form_item filter_form_item_search">
<label class="filter_form_item_label" for="filter_form_item_search_input">
Search
</label>
<div class="filter_form_item_search_wrapper">
<input class="filter_form_item_search_input" id="filter_form_item_search_input" placeholder="Search by name or department" type="search">
</div>
</div>
<div class="filter_form_item filter_form_item_action">
<div class="filter_form_item_submit">
<button class="
button_filled
button_filled_large
" type="submit">
<span class="button_filled_inner">
<span class="button_filled_label">Submit</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END: Filter -->
<!-- News List -->
<div class="news_list" id="news_list_3">
<div class="fs-row">
<div class="fs-cell">
<div class="news_list_inner">
<ul class="news_list_rows" id="news_list_3_rows" aria-labelledby="page_header_title">
<li class="news_list_row">
<div class="news_list_item" id="news_list_3_item_1">
<figure class="news_list_item_figure">
<a class="news_list_item_figure_link" href="#" aria-labelledby="news_list_3_item_1_title" tabindex="-1">
<img class="news_list_item_image" srcset="https://images.fastspot.com/framework/980x654/1 980w, https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title" id="news_list_3_item_1_title">
<a class="
news_list_item_title_link
" href="#">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">
Lorem ipsum dolor sit amet
</span>
</span>
</a>
</h2>
<div class="news_list_item_categories">
<div class="news_list_item_category_hint" id="news_list_3_item_1_category_hint">
Categories
</div>
<ul class="news_list_item_category_list" aria-labelledby="news_list_3_item_1_title news_list_3_item_1_category_hint">
<li class="news_list_item_category">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Integer tincidunt
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="news_list_item_body">
<div class="news_list_item_details">
<div class="news_list_item_detail news_list_item_date">
<span class="news_list_item_detail_hint">
Published:
</span>
<time class="news_list_item_detail_label" datetime="2019-01-01 17:00:00">
January 1, 2019
</time>
</div>
<div class="news_list_item_detail news_list_item_author">
<span class="news_list_item_detail_hint">
- by
</span>
<span class="news_list_item_detail_label">
Salome Simoes
</span>
</div>
</div>
<div class="news_list_item_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>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item" id="news_list_3_item_2">
<figure class="news_list_item_figure">
<a class="news_list_item_figure_link" href="#" aria-labelledby="news_list_3_item_2_title" tabindex="-1">
<img class="news_list_item_image" srcset="https://images.fastspot.com/framework/980x654/2 980w, https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title" id="news_list_3_item_2_title">
<a class="
news_list_item_title_link
" href="#">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">
Phasellus viverra nulla ut metus varius laoreet
</span>
</span>
</a>
</h2>
<div class="news_list_item_categories">
<div class="news_list_item_category_hint" id="news_list_3_item_2_category_hint">
Categories
</div>
<ul class="news_list_item_category_list" aria-labelledby="news_list_3_item_2_title news_list_3_item_2_category_hint">
<li class="news_list_item_category">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Phasellus accumsan cursus velit
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="news_list_item_body">
<div class="news_list_item_details">
<div class="news_list_item_detail news_list_item_date">
<span class="news_list_item_detail_hint">
Published:
</span>
<time class="news_list_item_detail_label" datetime="2019-01-02 17:00:00">
January 2, 2019
</time>
</div>
<div class="news_list_item_detail news_list_item_author">
<span class="news_list_item_detail_hint">
- by
</span>
<span class="news_list_item_detail_label">
Tamzyn French
</span>
</div>
</div>
<div class="news_list_item_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>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item" id="news_list_3_item_3">
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title" id="news_list_3_item_3_title">
<a class="
news_list_item_title_link
" href="#">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">
Quisque rutrum
</span>
</span>
</a>
</h2>
<div class="news_list_item_categories">
<div class="news_list_item_category_hint" id="news_list_3_item_3_category_hint">
Categories
</div>
<ul class="news_list_item_category_list" aria-labelledby="news_list_3_item_3_title news_list_3_item_3_category_hint">
<li class="news_list_item_category">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Aenean
</span>
</span>
</a>
</li>
<li class="news_list_item_category">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Donec vitae
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="news_list_item_body">
<div class="news_list_item_details">
<div class="news_list_item_detail news_list_item_date">
<span class="news_list_item_detail_hint">
Published:
</span>
<time class="news_list_item_detail_label" datetime="2019-01-05 17:00:00">
January 5, 2019
</time>
</div>
<div class="news_list_item_detail news_list_item_author">
<span class="news_list_item_detail_hint">
- by
</span>
<span class="news_list_item_detail_label">
Ponnappa Priya
</span>
</div>
</div>
<div class="news_list_item_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>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item" id="news_list_3_item_4">
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title" id="news_list_3_item_4_title">
<a class="
news_list_item_title_link
" href="#">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">
Phasellus accumsan cursus velit
</span>
</span>
</a>
</h2>
</div>
<div class="news_list_item_body">
<div class="news_list_item_details">
<div class="news_list_item_detail news_list_item_date">
<span class="news_list_item_detail_hint">
Published:
</span>
<time class="news_list_item_detail_label" datetime="2019-01-14 17:00:00">
January 14, 2019
</time>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item" id="news_list_3_item_5">
<figure class="news_list_item_figure">
<a class="news_list_item_figure_link" href="#" aria-labelledby="news_list_3_item_5_title" tabindex="-1">
<img class="news_list_item_image" srcset="https://images.fastspot.com/framework/980x654/4 980w, https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title" id="news_list_3_item_5_title">
<a class="
news_list_item_title_link
" href="#">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">
Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.
</span>
</span>
</a>
</h2>
</div>
<div class="news_list_item_body">
<div class="news_list_item_details">
<div class="news_list_item_detail news_list_item_date">
<span class="news_list_item_detail_hint">
Published:
</span>
<time class="news_list_item_detail_label" datetime="2019-01-14 17:00:00">
January 14, 2019
</time>
</div>
<div class="news_list_item_detail news_list_item_author">
<span class="news_list_item_detail_hint">
- by
</span>
<span class="news_list_item_detail_label">
Salome Simoes
</span>
</div>
</div>
<div class="news_list_item_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>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item" id="news_list_3_item_6">
<figure class="news_list_item_figure">
<a class="news_list_item_figure_link" href="#" aria-labelledby="news_list_3_item_6_title" tabindex="-1">
<img class="news_list_item_image" srcset="https://images.fastspot.com/framework/980x654/1 980w, https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</a>
</figure>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title" id="news_list_3_item_6_title">
<a class="
news_list_item_title_link
" href="#">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">
Cras ultricies
</span>
</span>
</a>
</h2>
<div class="news_list_item_categories">
<div class="news_list_item_category_hint" id="news_list_3_item_6_category_hint">
Categories
</div>
<ul class="news_list_item_category_list" aria-labelledby="news_list_3_item_6_title news_list_3_item_6_category_hint">
<li class="news_list_item_category">
<a class="
button_text
" href="#">
<span class="button_text_inner">
<span class="button_text_label">
Cras ultricies mi eu turpis hendrerit
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="news_list_item_body">
<div class="news_list_item_details">
<div class="news_list_item_detail news_list_item_date">
<span class="news_list_item_detail_hint">
Published:
</span>
<time class="news_list_item_detail_label" datetime="2019-02-10 17:00:00">
February 10, 2019
</time>
</div>
</div>
<div class="news_list_item_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>
</div>
</li>
</ul>
<div class="news_list_pagination">
<!-- Pagination -->
<div class="pagination" id="pagination_18">
<h2 class="pagination_title" id="pagination_18_title">
News Pagination
</h2>
<div class="pagination_body">
<nav class="pagination_nav" aria-labelledby="pagination_18_title">
<div class="pagination_nav_control pagination_nav_control_previous">
<a class="
pagination_link
pagination_link_disabled
" id="pagination_18link_previous" aria-labelledby="pagination_18_title pagination_18link_previous" href="#">
<span class="pagination_link_inner">
<span class="pagination_link_label">
Previous Page
</span>
<span class="pagination_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_left">
<use href="/images/icons.svg#arrow_left" />
</svg>
</span>
</span>
</a>
</div>
<div class="pagination_nav_control pagination_nav_control_next">
<a class="
pagination_link
" id="pagination_18link_next" aria-labelledby="pagination_18_title pagination_18link_next" href="#">
<span class="pagination_link_inner">
<span class="pagination_link_label">
Next Page
</span>
<span class="pagination_link_icon" aria-hidden="true">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</span>
</a>
</div>
</nav>
<form class="pagination_form" action="#" method="get">
<div class="pagination_form_inner">
<label class="pagination_form_label" for="pagination_18_form_select">
Page
</label>
<div class="pagination_form_select_wrapper">
<select class="pagination_form_select" id="pagination_18_form_select" name="page">
<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>
<span class="pagination_form_select_icon" aria-hidden="true">
<svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg>
</span>
</div>
<span class="pagination_form_suffix">
of 50
</span>
<div class="pagination_form_submit">
<button class="
button_filled
" type="submit">
<span class="button_filled_inner">
<span class="button_filled_label">Go</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
</div>
<!-- END: News List -->
</section>
{% include '@component-page-header' with {
page: page
} %}
<section
class="full_width_components"
id="full_width_components"
tabindex="-1"
aria-labelledby="page_header_title"
>
{% render '@component-news-feature' %}
{% render '@component-filter' %}
{% render '@component-news-list' %}
</section>
No notes defined.