<!-- Topic Row -->
<div class="js-observable topics">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="topics_inner">
<div class="topics_header">
<h2 class="topics_title">
<span class="topics_title_label">Ipsum Fermentum Tristique</span>
</h2>
<div class="topics_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 class="topics_body">
<div class="topic">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<img class="topic_image" srcset="https://images.fastspot.com/merced/740x494/1 740w, https://images.fastspot.com/merced/500x334/1 500w, https://images.fastspot.com/merced/300x200/1 300w" src="https://images.fastspot.com/merced/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">Topic Row Example</h3>
</div>
<div class="topic_body">
<div class="topic_description typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus mi blandit luctus iaculis. Cras congue at ante ut blandit.</p>
</div>
</div>
<div class="topic_links">
<div class="topic_link_item">
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">Explore Offerings</span>
<span class="topic_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</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">Topic Row sans Image Example</h3>
</div>
<div class="topic_body">
<div class="topic_description typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus mi blandit luctus iaculis. Cras congue at ante ut blandit. Vivamus ultricies quam maximus odio porta, ac finibus tortor pretium. Fusce ac mi vitae magna tempor consectetur mollis vel ligula.</p>
</div>
</div>
<div class="topic_links">
<div class="topic_link_item">
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">View Certificates</span>
<span class="topic_link_icon" aria-hidden="true">
<i class="fa-regular fa-circle-chevron-right"></i>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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'
}
]
}
]
} %}
#}
<!-- Topic Row -->
<div class="js-observable topics">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="topics_inner">
{% if title or description %}
<div class="topics_header">
{% if title %}
<h2 class="topics_title">
<span class="topics_title_label">{{ title }}</span>
</h2>
{% endif %}
{% if description %}
<div class="topics_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
{% endif %}
<div class="topics_body">
{% for item in items %}
<div class="topic">
<div class="topic_inner">
{% if item.image %}
<figure class="topic_figure" aria-hidden="true">
{% include '@component-image' with {
class: 'topic',
alt: '',
image: item.image,
loading: 'lazy',
sources: [
img.classic.sml,
img.classic.xsml,
img.classic.xxsml
]
} %}
</figure>
{% endif %}
<div class="topic_wrapper">
<div class="topic_header">
{% if title %}
<h3 class="topic_title">{{ item.title }}</h3>
{% else %}
<h2 class="topic_title">{{ item.title }}</h2>
{% endif %}
</div>
<div class="topic_body">
<div class="topic_description typography">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.links %}
<div class="topic_links">
{% for link in item.links %}
<div class="topic_link_item">
{% include '@component-link' with {
class: 'topic',
title: link.title,
url: link.url,
icon: 'fa-regular fa-circle-chevron-right'
} %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
No notes defined.