<!-- Topic Row -->
<div class="topics">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
<div class="topics_inner">
<div class="topics_header">
<h2 class="topics_title">
<span class="topics_title_label">Topic Row</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">
<span class="lazy_image_wrapper topic_image_wrapper">
<picture class="topic_picture">
<source media="(min-width: 740px)" srcset="//images.fastspot.com/new-college-of-florida/500x282/1" data-srcset="//images.fastspot.com/new-college-of-florida/740x494/1">
<source media="(min-width: 500px)" srcset="//images.fastspot.com/new-college-of-florida/500x282/1" data-srcset="//images.fastspot.com/new-college-of-florida/740x416/1">
<img class="js-lazy js-lazyload topic_image" src="../../../images/placeholder.png" data-src="https://images.fastspot.com/new-college-of-florida/500x282/1" alt="">
</picture>
</span>
<noscript>
<picture class="topic_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/new-college-of-florida/740x494/1">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/new-college-of-florida/740x416/1">
<img class="js-lazy js-lazyload topic_image" src="//images.fastspot.com/new-college-of-florida/500x282/1" data-src="//images.fastspot.com/new-college-of-florida/500x282/1" alt="">
</picture>
</noscript>
</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.</p>
</div>
</div>
<div class="topic_links">
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">Link Title One</span>
</span>
</a>
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">Link Title Two</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="topic">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<span class="lazy_image_wrapper topic_image_wrapper">
<picture class="topic_picture">
<source media="(min-width: 740px)" srcset="//images.fastspot.com/new-college-of-florida/500x282/2" data-srcset="//images.fastspot.com/new-college-of-florida/740x494/2">
<source media="(min-width: 500px)" srcset="//images.fastspot.com/new-college-of-florida/500x282/2" data-srcset="//images.fastspot.com/new-college-of-florida/740x416/2">
<img class="js-lazy js-lazyload topic_image" src="../../../images/placeholder.png" data-src="https://images.fastspot.com/new-college-of-florida/500x282/2" alt="">
</picture>
</span>
<noscript>
<picture class="topic_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/new-college-of-florida/740x494/2">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/new-college-of-florida/740x416/2">
<img class="js-lazy js-lazyload topic_image" src="//images.fastspot.com/new-college-of-florida/500x282/2" data-src="//images.fastspot.com/new-college-of-florida/500x282/2" alt="">
</picture>
</noscript>
</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. </p>
</div>
</div>
<div class="topic_links">
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">Link Title One</span>
</span>
</a>
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">Link Title Two</span>
</span>
</a>
</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">
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">Link Title One</span>
</span>
</a>
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">Link Title Two</span>
</span>
</a>
<a href="#" class="topic_link">
<span class="topic_link_inner">
<span class="topic_link_label">Link Title Three</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="topic">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<span class="lazy_image_wrapper topic_image_wrapper">
<picture class="topic_picture">
<source media="(min-width: 740px)" srcset="//images.fastspot.com/new-college-of-florida/500x282/2" data-srcset="//images.fastspot.com/new-college-of-florida/740x494/2">
<source media="(min-width: 500px)" srcset="//images.fastspot.com/new-college-of-florida/500x282/2" data-srcset="//images.fastspot.com/new-college-of-florida/740x416/2">
<img class="js-lazy js-lazyload topic_image" src="../../../images/placeholder.png" data-src="https://images.fastspot.com/new-college-of-florida/500x282/2" alt="">
</picture>
</span>
<noscript>
<picture class="topic_picture">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/new-college-of-florida/740x494/2">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/new-college-of-florida/740x416/2">
<img class="js-lazy js-lazyload topic_image" src="//images.fastspot.com/new-college-of-florida/500x282/2" data-src="//images.fastspot.com/new-college-of-florida/500x282/2" alt="">
</picture>
</noscript>
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">Ipsum</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>Praesent</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
<!-- Topic Row -->
<div class="topics">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
<div class="topics_inner">
{% if title or description %}
<div class="topics_header">
{% if title %}
<h2 class="topics_title">
<span class="topics_title_label">{{ title|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 "@partial-picture" with {
class: "topic",
alt: "",
default: img.wide.xsml,
image: item.image,
sources: {
"740px": img.classic.sml,
"500px": img.wide.sml
}
} %}
</figure>
{% endif %}
<div class="topic_wrapper">
<div class="topic_header">
{% if title %}
<h3 class="topic_title">{{ item.title|title }}</h3>
{% else %}
<h2 class="topic_title">{{ item.title|title }}</h2>
{% endif %}
</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 %}
{% include "@partial-link" with {
class: "topic",
title: link.title,
url: link.url,
icon: ""
} %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
No notes defined.