<!-- News List -->
<div class="news-list" id="news-list-1">
<div class="fs-row">
<div class="fs-cell">
<div class="news-list__inner">
<div class="news-list__rows" id="news-list-1__rows">
<div class="news-list__row">
<article class="news-list__item" id="news-list-1__item-1" aria-labelledby="news-list-1__item-1-title">
<figure class="news-list__item-figure">
<a class="news-list__item-figure-link" href="#" aria-labelledby="news-list-1__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-1__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-1__item-1-category-hint">
Categories
</div>
<ul class="news-list__item-category-list" aria-labelledby="news-list-1__item-1-title news-list-1__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-detail--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-detail--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>
</article>
</div>
<div class="news-list__row">
<article class="news-list__item" id="news-list-1__item-2" aria-labelledby="news-list-1__item-2-title">
<figure class="news-list__item-figure">
<a class="news-list__item-figure-link" href="#" aria-labelledby="news-list-1__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-1__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-1__item-2-category-hint">
Categories
</div>
<ul class="news-list__item-category-list" aria-labelledby="news-list-1__item-2-title news-list-1__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-detail--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-detail--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>
</article>
</div>
<div class="news-list__row">
<article class="news-list__item" id="news-list-1__item-3" aria-labelledby="news-list-1__item-3-title">
<div class="news-list__item-wrapper">
<div class="news-list__item-header">
<h2 class="news-list__item-title" id="news-list-1__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-1__item-3-category-hint">
Categories
</div>
<ul class="news-list__item-category-list" aria-labelledby="news-list-1__item-3-title news-list-1__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-detail--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-detail--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>
</article>
</div>
<div class="news-list__row">
<article class="news-list__item" id="news-list-1__item-4" aria-labelledby="news-list-1__item-4-title">
<div class="news-list__item-wrapper">
<div class="news-list__item-header">
<h2 class="news-list__item-title" id="news-list-1__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-detail--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>
</article>
</div>
<div class="news-list__row">
<article class="news-list__item" id="news-list-1__item-5" aria-labelledby="news-list-1__item-5-title">
<figure class="news-list__item-figure">
<a class="news-list__item-figure-link" href="#" aria-labelledby="news-list-1__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-1__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-detail--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-detail--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>
</article>
</div>
<div class="news-list__row">
<article class="news-list__item" id="news-list-1__item-6" aria-labelledby="news-list-1__item-6-title">
<figure class="news-list__item-figure">
<a class="news-list__item-figure-link" href="#" aria-labelledby="news-list-1__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-1__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-1__item-6-category-hint">
Categories
</div>
<ul class="news-list__item-category-list" aria-labelledby="news-list-1__item-6-title news-list-1__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-detail--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>
</article>
</div>
</div>
<div class="news-list__pagination">
<!-- Pagination -->
<div class="pagination" id="pagination-3">
<h2 class="pagination__title" id="pagination-3__title">News Pagination</h2>
<div class="pagination__body">
<nav class="pagination__nav" aria-labelledby="pagination-3__title">
<div class="pagination__nav-control pagination__nav-control--previous">
<a class="pagination__nav-link
pagination__nav-link--disabled
" id="pagination-3__nav-link-previous" aria-labelledby="pagination-3__title pagination-3__nav-link-previous" rel="prev" href="#">
<span class="pagination__nav-link-inner"> <span class="pagination__nav-link-label">Previous Page</span>
<span class="pagination__nav-link-icon" aria-hidden="true">
<svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg>
</span>
</span>
</a>
</div>
<div class="pagination__nav-control pagination__nav-control--next">
<a class="pagination__nav-link
" id="pagination-3__nav-link-next" aria-labelledby="pagination-3__title pagination-3__nav-link-next" rel="next" href="#">
<span class="pagination__nav-link-inner"> <span class="pagination__nav-link-label">Next Page</span>
<span class="pagination__nav-link-icon" aria-hidden="true">
<svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#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-3__form-select">
Page
</label>
<div class="pagination__form-select-wrapper">
<select class="pagination__form-select" id="pagination-3__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?1.0.0#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 -->
{#
{% include '@component-news-list' with {
items: [
{
image: '1',
alt: '',
categories: [
{
title: 'Category',
url: '#'
}
],
title: 'Title',
url: '#',
date: '2019-01-01 17:00:00',
author: 'Author',
description: 'Description'
}
]
} %}
#}
{% set id = uniqid('news-list') %}
<!-- News List -->
<div class="news-list" id="{{ id }}">
<div class="fs-row">
<div class="fs-cell">
<div class="news-list__inner">
<div
class="news-list__rows"
id="{{ id ~ '__rows' }}"
>
{% for item in items %}
{% set item_id = id ~ '__item-' ~ loop.index %}
<div class="news-list__row">
<article class="news-list__item" id="{{ item_id }}" aria-labelledby="{{ item_id ~ '-title' }}">
{% if item.image %}
<figure class="news-list__item-figure">
<a
class="news-list__item-figure-link"
href="{{ item.url }}"
aria-labelledby="{{ item_id ~ '-title' }}"
tabindex="-1"
>
{% include '@partial-image' with {
class: 'news-list__item-image',
alt: item.alt,
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'med'
} only %}
</a>
</figure>
{% endif %}
<div class="news-list__item-wrapper">
<div class="news-list__item-header">
<h2 class="news-list__item-title" id="{{ item_id ~ '-title' }}">
{% include '@partial-link' with {
classes: {
base: 'news-list__item-title-link',
},
title: item.title,
url: item.url
} only %}
</h2>
{% if item.categories %}
<div class="news-list__item-categories">
<div
class="news-list__item-category-hint"
id="{{ item_id ~ '-category-hint' }}"
>
Categories
</div>
<ul
class="news-list__item-category-list"
aria-labelledby="{{ item_id ~ '-title' }} {{ item_id ~ '-category-hint' }}"
>
{% for category in item.categories %}
<li class="news-list__item-category">
{% include '@partial-link' with {
classes: {
base: 'button-text',
},
title: category.title,
url: category.url
} only %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div class="news-list__item-body">
<div class="news-list__item-details">
<div class="news-list__item-detail news-list__item-detail--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>
{% if item.author %}
<div class="news-list__item-detail news-list__item-detail--author">
<span class="news-list__item-detail-hint">
- by
</span>
<span class="news-list__item-detail-label">
{{- item.author -}}
</span>
</div>
{% endif %}
</div>
{% if item.description %}
<div class="news-list__item-description">
<p>{{ item.description }}</p>
</div>
{% endif %}
</div>
</div>
</article>
</div>
{% endfor %}
</div>
<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.