<!-- Topic Row -->
<section class="topic_row" aria-labelledby="topic_row_1_title" aria-describedby="topic_row_1_description">
<div class="topic_row_header">
<div class="fs-row">
<div class="fs-cell">
<div class="topic_row_header_inner">
<h2 class="topic_row_title" id="topic_row_1_title">
Ipsum Fermentum Tristique
</h2>
<div class="topic_row_description" id="topic_row_1_description">
<p>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>
</div>
</div>
</div>
<div class="topic_row_body">
<div class="fs-row">
<div class="fs-cell">
<div class="topic_row_inner">
<div class="topic_row_items">
<div class="topic">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<img class="topic_image" srcset="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">
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">
Ipsum Fermentum Tristique
</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>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>
</div>
<div class="topic_links">
<div class="topic_link_item">
<a class="
button_text_large
" href="#">
<span class="button_text_large_inner">
<span class="button_text_large_label">
Nam quam nunc
</span>
</span>
</a>
</div>
<div class="topic_link_item">
<a class="
button_text_large
" href="#">
<span class="button_text_large_inner">
<span class="button_text_large_label">
Blandit
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="topic">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<img class="topic_image" srcset="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">
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">
Ipsum Fermentum Tristique
</h3>
</div>
<div class="topic_body">
<div class="topic_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; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="topic">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<img class="topic_image" srcset="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">
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">
Metus Laoreet
</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>Maecenas nec odio et tempus.</p>
</div>
</div>
<div class="topic_links">
<div class="topic_link_item">
<a class="
button_text_large
" href="#">
<span class="button_text_large_inner">
<span class="button_text_large_label">
Nam quam nunc
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="topic">
<div class="topic_inner">
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">
Ipsum Fermentum Tristique
</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>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>
</div>
<div class="topic_links">
<div class="topic_link_item">
<a class="
button_text_large
" href="#">
<span class="button_text_large_inner">
<span class="button_text_large_label">
Fusce id purus
</span>
</span>
</a>
</div>
<div class="topic_link_item">
<a class="
button_text_large
" href="#">
<span class="button_text_large_inner">
<span class="button_text_large_label">
Ut varius tincidunt libero
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="topic">
<div class="topic_inner">
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">
Phasellus viverra nulla ut metus varius laoreet
</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. 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</p>
</div>
</div>
</div>
</div>
</div>
<div class="topic">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<img class="topic_image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">
Phasellus viverra nulla ut metus varius laoreet
</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
</div>
</div>
<div class="topic_links">
<div class="topic_link_item">
<a class="
button_text_large
" href="#">
<span class="button_text_large_inner">
<span class="button_text_large_label">
Aenean tellus metus
</span>
</span>
</a>
</div>
<div class="topic_link_item">
<a class="
button_text_large
" href="#">
<span class="button_text_large_inner">
<span class="button_text_large_label">
Etiam imperdiet
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END: Topic Row -->
{#
{% include '@component-topic-row' with {
title: 'Title',
description: 'Description',
items: [
{
title: 'Item Title',
image: '1',
alt: '',
description: 'Item Description',
links: [
{
title: 'Link Title',
url: '#',
icon: 'arrow_right'
}
]
}
]
} %}
#}
{% set id = uniqid('topic_row') %}
{% set item_heading_level = title ? 'h3' : 'h2' %}
<!-- Topic Row -->
<{{ title ? 'section' : 'div' }}
class="topic_row"
{% if title %}aria-labelledby="{{ id }}_title"{% endif %}
{% if description %}aria-describedby="{{ id }}_description"{% endif %}
>
{% if title or description %}
<div class="topic_row_header">
<div class="fs-row">
<div class="fs-cell">
<div class="topic_row_header_inner">
{% if title %}
<h2 class="topic_row_title" id="{{ id }}_title">
{{ title }}
</h2>
{% endif %}
{% if description %}
<div class="topic_row_description" id="{{ id }}_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="topic_row_body">
<div class="fs-row">
<div class="fs-cell">
<div class="topic_row_inner">
<div class="topic_row_items">
{% for item in items %}
<div class="topic">
<div class="topic_inner">
{% if item.image %}
<figure class="topic_figure" aria-hidden="true">
{% include '@partial-image' with {
class: 'topic_image',
image: item.image,
alt: item.alt,
loading: 'lazy',
crop: 'classic',
max: 'sml'
} %}
</figure>
{% endif %}
<div class="topic_wrapper">
<div class="topic_header">
<{{ item_heading_level }} class="topic_title">
{{ item.title }}
</{{ item_heading_level }}>
</div>
<div class="topic_body">
<div class="topic_description">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.links %}
<div class="topic_links">
{% for link in item.links %}
<div class="topic_link_item">
{% include '@partial-link' with {
classes: {
base: 'button_text_large',
},
id: null,
title: link.title,
url: link.url,
icon: link.icon
} %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</{{ title ? 'section' : 'div' }}>
<!-- END: Topic Row -->
No notes defined.