<div class="topic_row">
<div class="section_header topic_row_header">
<div class="fs-row">
<div class="fs-cell">
<div class="section_header_inner">
<div class="section_header_content">
<h2 class="section_header_title">Ipsum Fermentum Tristique</h2>
<p class="section_header_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
</div>
<div class="section_header_link_wrapper">
<a href="#" class="button button_shadow section_header_link theme_accent">
<span class="button_inner section_header_link_inner">
<span class="button_label section_header_link_label">Link Text Goes Here</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="topic_row_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="topic_row_items" aria-label="Ipsum Fermentum Tristique">
<li class="topic_row_item">
<figure class="topic_row_item_figure">
<img class="topic_row_item_image" srcset="https://images.fastspot.com/generic/980x735/1 980w, https://images.fastspot.com/generic/740x555/1 740w, https://images.fastspot.com/generic/500x375/1 500w, https://images.fastspot.com/generic/300x225/1 300w" sizes="(min-width: 1400px) 430px, (min-width: 1220px) 375px, (min-width: 980px) 300px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x225/1" alt="" loading="lazy" width="300" height="225">
</figure>
<div class="topic_row_item_wrapper">
<h2 class="topic_row_item_title">
Ipsum Fermentum Tristique
</h2>
<p class="topic_row_item_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
<ul class="topic_row_item_link_list">
<li class="topic_row_item_link_item">
<a href="#" class="topic_row_item_link">
<span class="topic_row_item_link_inner">
<span class="topic_row_item_link_label">Link Title One</span>
</span>
</a>
</li>
<li class="topic_row_item_link_item">
<a href="#" class="topic_row_item_link">
<span class="topic_row_item_link_inner">
<span class="topic_row_item_link_label">Link Title Two</span>
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="topic_row_item">
<figure class="topic_row_item_figure">
<img class="topic_row_item_image" srcset="https://images.fastspot.com/generic/980x735/2 980w, https://images.fastspot.com/generic/740x555/2 740w, https://images.fastspot.com/generic/500x375/2 500w, https://images.fastspot.com/generic/300x225/2 300w" sizes="(min-width: 1400px) 430px, (min-width: 1220px) 375px, (min-width: 980px) 300px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x225/2" alt="" loading="lazy" width="300" height="225">
</figure>
<div class="topic_row_item_wrapper">
<h2 class="topic_row_item_title">
Ipsum Fermentum Tristique
</h2>
<p class="topic_row_item_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</li>
<li class="topic_row_item">
<figure class="topic_row_item_figure">
<img class="topic_row_item_image" srcset="https://images.fastspot.com/generic/980x735/ 980w, https://images.fastspot.com/generic/740x555/ 740w, https://images.fastspot.com/generic/500x375/ 500w, https://images.fastspot.com/generic/300x225/ 300w" sizes="(min-width: 1400px) 430px, (min-width: 1220px) 375px, (min-width: 980px) 300px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x225/" alt="" loading="lazy" width="300" height="225">
</figure>
<div class="topic_row_item_wrapper">
<h2 class="topic_row_item_title">
Ipsum Fermentum Tristique
</h2>
<p class="topic_row_item_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
<ul class="topic_row_item_link_list">
<li class="topic_row_item_link_item">
<a href="#" class="topic_row_item_link">
<span class="topic_row_item_link_inner">
<span class="topic_row_item_link_label">Link Title One</span>
</span>
</a>
</li>
<li class="topic_row_item_link_item">
<a href="#" class="topic_row_item_link">
<span class="topic_row_item_link_inner">
<span class="topic_row_item_link_label">Link Title Two</span>
</span>
</a>
</li>
<li class="topic_row_item_link_item">
<a href="#" class="topic_row_item_link">
<span class="topic_row_item_link_inner">
<span class="topic_row_item_link_label">Link Title Three</span>
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="topic_row_item">
<figure class="topic_row_item_figure">
<img class="topic_row_item_image" srcset="https://images.fastspot.com/generic/980x735/2 980w, https://images.fastspot.com/generic/740x555/2 740w, https://images.fastspot.com/generic/500x375/2 500w, https://images.fastspot.com/generic/300x225/2 300w" sizes="(min-width: 1400px) 430px, (min-width: 1220px) 375px, (min-width: 980px) 300px, (min-width: 780px) 691px, (min-width: 380px) calc(96.05vw - 39px), calc(31.67vw + 193px)" src="https://images.fastspot.com/generic/300x225/2" alt="" loading="lazy" width="300" height="225">
</figure>
<div class="topic_row_item_wrapper">
<h2 class="topic_row_item_title">
Ipsum
</h2>
<p class="topic_row_item_description">Praesent</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
{#
{% include '@component-topic-row' with {
title: 'Title',
description: 'Description',
items: [
{
title: 'Item Title',
image: '1',
description: 'Item Description',
links: [
{
title: 'Link Title',
url: '#',
icon: 'arrow_right'
}
]
}
]
} %}
#}
<div class="topic_row">
{% if title %}
{% include "@partial-section-header" with {
class: 'topic_row_header',
title: title,
description: description,
link: link,
} %}
{% endif %}
<div class="topic_row_body">
<div class="fs-row">
<div class="fs-cell">
<ul class="topic_row_items" aria-label="{{ title }}">
{% for item in items %}
<li class="topic_row_item">
<figure class="topic_row_item_figure">
{% include '@partial-image' with {
class: 'topic_row_item',
alt: item.alt,
image: item.image,
loading: 'lazy',
crop: 'full',
max: 'med',
sizes: [
'(min-width: 1400px) 430px',
'(min-width: 1220px) 375px',
'(min-width: 980px) 300px',
'(min-width: 780px) 691px',
'(min-width: 380px) calc(96.05vw - 39px)',
'calc(31.67vw + 193px)',
]
} %}
</figure>
<div class="topic_row_item_wrapper">
<h2 class="topic_row_item_title">
{{ item.title }}
</h2>
{% if item.description %}
<p class="topic_row_item_description">{{ item.description }}</p>
{% endif %}
{% if item.links %}
<ul class="topic_row_item_link_list">
{% for link in item.links %}
<li class="topic_row_item_link_item">
{% include "@partial-link" with {
class: 'topic_row_item',
title: link.title,
url: link.url,
target: link.target,
} %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
No notes defined.