<!-- News List -->
<div class="news_list">
<div class="fs-row">
<div class="fs-cell fs-xl-11 fs-xl-justify-center">
<div class="news_list_inner">
<ul class="news_list_rows" id="item_list" aria-labelledby="page_header_title">
<li class="news_list_row">
<div class="news_list_item has_media">
<a class="news_list_item_figure_link" href="#" aria-label="Read more about Hilbert College Highlights Strong Progress in its 2025 Growth Plan" tabindex="-1">
<figure class="news_list_item_figure">
<img class="news_list_item_image" srcset="https://images.fastspot.com/hilbert/300x200/1 300w, https://images.fastspot.com/hilbert/500x334/1 500w, https://images.fastspot.com/hilbert/740x494/1 740w, https://images.fastspot.com/hilbert/980x654/1 980w" src="https://images.fastspot.com/hilbert/980x654/1" alt="" loading="lazy" width="980" height="654">
</figure>
</a>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title">
<a href="#" class="news_list_item_title_link">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">Hilbert College Highlights Strong Progress in its 2025 Growth Plan</span>
</span>
</a>
</h2>
<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>
</div>
<div class="news_list_item_body">
<div class="news_list_item_description">
<p>Hilbert College published an update for its most recent college-wide strategic plan. This update showcases the current activities and progress they’ve implemented to meet its 2025 vision plan.</p>
</div>
<div class="news_list_item_categories">
<div class="news_list_item_category_hint">Categories</div>
<ul class="news_list_item_category_list" aria-label="Categories">
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="page-news-category.html">Category 1</a>
</li>
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="page-news-category.html">Category 3</a>
</li>
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="page-news-category.html">Category 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item has_media">
<a class="news_list_item_figure_link" href="#" aria-label="Read more about Phasellus viverra nulla ut metus varius laoreet" tabindex="-1">
<figure class="news_list_item_figure">
<img class="news_list_item_image" srcset="https://images.fastspot.com/hilbert/300x200/2 300w, https://images.fastspot.com/hilbert/500x334/2 500w, https://images.fastspot.com/hilbert/740x494/2 740w, https://images.fastspot.com/hilbert/980x654/2 980w" src="https://images.fastspot.com/hilbert/980x654/2" alt="" loading="lazy" width="980" height="654">
</figure>
</a>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title">
<a href="#" class="news_list_item_title_link">
<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_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>
</div>
<div class="news_list_item_body">
<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 class="news_list_item_categories">
<div class="news_list_item_category_hint">Categories</div>
<ul class="news_list_item_category_list" aria-label="Categories">
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="page-news-category.html">Category 2</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item ">
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title">
<a href="#" class="news_list_item_title_link">
<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_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>
</div>
<div class="news_list_item_body">
<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 class="news_list_item_categories">
<div class="news_list_item_category_hint">Categories</div>
<ul class="news_list_item_category_list" aria-label="Categories">
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="page-news-category.html">Category 1</a>
</li>
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="page-news-category.html">Category 2</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item has_media">
<a class="news_list_item_figure_link" href="#" aria-label="Read more about Maecenas" tabindex="-1">
<figure class="news_list_item_figure">
<img class="news_list_item_image" srcset="https://images.fastspot.com/hilbert/300x200/3 300w, https://images.fastspot.com/hilbert/500x334/3 500w, https://images.fastspot.com/hilbert/740x494/3 740w, https://images.fastspot.com/hilbert/980x654/3 980w" src="https://images.fastspot.com/hilbert/980x654/3" alt="" loading="lazy" width="980" height="654">
</figure>
</a>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title">
<a href="#" class="news_list_item_title_link">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">Maecenas</span>
</span>
</a>
</h2>
<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>
</div>
<div class="news_list_item_body">
<div class="news_list_item_categories">
<div class="news_list_item_category_hint">Categories</div>
<ul class="news_list_item_category_list" aria-label="Categories">
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="page-news-category.html">Category 1</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="news_list_row">
<div class="news_list_item has_media">
<a class="news_list_item_figure_link" href="#" aria-label="Read more about In enim justo, rhoncus ut, imperdiet a" tabindex="-1">
<figure class="news_list_item_figure">
<img class="news_list_item_image" srcset="https://images.fastspot.com/hilbert/300x200/4 300w, https://images.fastspot.com/hilbert/500x334/4 500w, https://images.fastspot.com/hilbert/740x494/4 740w, https://images.fastspot.com/hilbert/980x654/4 980w" src="https://images.fastspot.com/hilbert/980x654/4" alt="" loading="lazy" width="980" height="654">
</figure>
</a>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title">
<a href="#" class="news_list_item_title_link">
<span class="news_list_item_title_link_inner">
<span class="news_list_item_title_link_label">In enim justo, rhoncus ut, imperdiet a</span>
</span>
</a>
</h2>
<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>
</div>
<div class="news_list_item_body">
<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 has_media">
<a class="news_list_item_figure_link" href="#" aria-label="Read more about Cras ultricies" tabindex="-1">
<figure class="news_list_item_figure">
<img class="news_list_item_image" srcset="https://images.fastspot.com/hilbert/300x200/1 300w, https://images.fastspot.com/hilbert/500x334/1 500w, https://images.fastspot.com/hilbert/740x494/1 740w, https://images.fastspot.com/hilbert/980x654/1 980w" src="https://images.fastspot.com/hilbert/980x654/1" alt="" loading="lazy" width="980" height="654">
</figure>
</a>
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title">
<a href="#" class="news_list_item_title_link">
<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_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>
</div>
<div class="news_list_item_body">
<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 class="news_list_item_categories">
<div class="news_list_item_category_hint">Categories</div>
<ul class="news_list_item_category_list" aria-label="Categories">
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="page-news-category.html">Category 1</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="news_list_pagination">
<!-- Pagination -->
<div class="pagination">
<div class="fs-row">
<div class="fs-cell fs-xl-11 fs-xl-justify-center">
<div class="pagination_inner">
<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_arrow_left">
<use href="/images/icons.svg#arrow_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_arrow_right">
<use href="/images/icons.svg#arrow_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>
<span class="pagination_form_select_icon"><svg class="icon icon_expand">
<use href="/images/icons.svg#expand" />
</svg></span>
</div>
<span class="pagination_form_suffix">of 50</span>
<button class="pagination_form_button" type="submit" aria-label="View Page">
<div class="pagination_form_button_inner">
<div class="pagination_form_button_label">Go</div>
<div class="pagination_form_button_icon"><svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg></div>
</div>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END: Pagination -->
</div>
</div>
</div>
</div>
</div>
<!-- END: News List -->
{#
{% include '@partial-news-list' with {
items: [
{
image: '1',
categories: [
{
label: 'Category',
url: '#'
}
],
title: 'Title',
url: '#',
date: '2019-01-01 17:00:00',
author: 'Author',
description: 'Description'
}
]
} %}
#}
<!-- News List -->
<div class="news_list">
<div class="fs-row">
<div class="fs-cell fs-xl-11 fs-xl-justify-center">
<div class="news_list_inner">
<ul class="news_list_rows" id="item_list" aria-labelledby="page_header_title">
{% for item in items %}
<li class="news_list_row">
<div class="news_list_item {% if item.image %}has_media{% endif %}">
{% if item.image %}
<a class="news_list_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
<figure class="news_list_item_figure">
{% include '@partial-image' with {
class: 'news_list_item',
alt: item.alt,
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'med'
} %}
</figure>
</a>
{% endif %}
<div class="news_list_item_wrapper">
<div class="news_list_item_header">
<h2 class="news_list_item_title">
{% include '@partial-link' with {
class: 'news_list_item_title',
title: item.title,
url: item.url
} %}
</h2>
{% if item.date %}
<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="{{ item.date }}">{{ item.date|date('F j, Y') }}</time>
</div>
</div>
{% endif %}
</div>
<div class="news_list_item_body">
{% if item.description %}
<div class="news_list_item_description">
<p>{{ item.description }}</p>
</div>
{% endif %}
{% if item.categories %}
<div class="news_list_item_categories">
<div class="news_list_item_category_hint">Categories</div>
<ul class="news_list_item_category_list" aria-label="Categories">
{% for category in item.categories %}
<li class="news_list_item_category">
<a class="news_list_item_category_link" href="{{ category.url }}">{{ category.label }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<div class="news_list_pagination">
{% include '@partial-pagination' with {
title: 'News Pagination',
pages: 50
} %}
</div>
</div>
</div>
</div>
</div>
<!-- END: News List -->
No notes defined.