<!-- Topic Row -->
<div class="topics">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-lg-justify-center">
<div class="topics_inner">
<div class="topics_header" data-anim="any-threshold" data-anim-type="fade-up">
<div class="fs-row">
<div class="fs-cell fs-lg-9">
<h2 class="topics_title">
<span class="topics_title_label">Our Vision</span>
</h2>
<div class="topics_description">
<p>We envision a great civic revival across our nation — our dream is a country in which Americans are steeped in a sense of civic character, educated in the tools of civic power, and are problem-solving contributors in a self-governing community.</p>
</div>
</div>
</div>
</div>
<div class="topics_body">
<div class="topic" data-anim="any-threshold" data-anim-type="fade-up">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<span class="lazy_image_wrapper topic_image_wrapper">
<img class="js-lazy js-lazyload topic_image" data-sizes="auto" src="//images.fastspot.com/citizen-university/300x225/1" data-src="//images.fastspot.com/citizen-university/740x555/1" data-srcset="//images.fastspot.com/citizen-university/740x555/1 740w, //images.fastspot.com/citizen-university/500x375/1 500w, //images.fastspot.com/citizen-university/300x225/1 300w" alt="">
</span>
<noscript>
<img class="topic_image" src="https://images.fastspot.com/citizen-university/300x225/1" srcset="https://images.fastspot.com/citizen-university/300x225/1 300w, https://images.fastspot.com/citizen-university/500x375/1 500w, https://images.fastspot.com/citizen-university/740x555/1 740w" sizes="100vw" alt="">
</noscript>
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">Story Of Cu</h3>
</div>
<div class="topic_body">
<div class="topic_description">
<p>We spread the belief that a strong democracy depends on strong citizens — that we all have the power to make change in civic life and the responsibility to try. </p>
</div>
</div>
<div class="topic_links">
<div class="topic_link_item">
<a href="#" class="button theme_yellow ">
<span class="button_text">
Our Story
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="topic" data-anim="any-threshold" data-anim-type="fade-up">
<div class="topic_inner">
<figure class="topic_figure" aria-hidden="true">
<span class="lazy_image_wrapper topic_image_wrapper">
<img class="js-lazy js-lazyload topic_image" data-sizes="auto" src="//images.fastspot.com/citizen-university/300x225/2" data-src="//images.fastspot.com/citizen-university/740x555/2" data-srcset="//images.fastspot.com/citizen-university/740x555/2 740w, //images.fastspot.com/citizen-university/500x375/2 500w, //images.fastspot.com/citizen-university/300x225/2 300w" alt="">
</span>
<noscript>
<img class="topic_image" src="https://images.fastspot.com/citizen-university/300x225/2" srcset="https://images.fastspot.com/citizen-university/300x225/2 300w, https://images.fastspot.com/citizen-university/500x375/2 500w, https://images.fastspot.com/citizen-university/740x555/2 740w" sizes="100vw" alt="">
</noscript>
</figure>
<div class="topic_wrapper">
<div class="topic_header">
<h3 class="topic_title">Our Approach</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 href="#" class="button theme_yellow ">
<span class="button_text">
Our Approach
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="topic" data-anim="any-threshold" data-anim-type="fade-up">
<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 href="#" class="button theme_yellow ">
<span class="button_text">
Link Title One
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</div>
<div class="topic_link_item">
<a href="#" class="button theme_yellow ">
<span class="button_text">
Link Title Two
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</div>
<div class="topic_link_item">
<a href="#" class="button theme_yellow ">
<span class="button_text">
Link Title Three
</span>
<span class="button_icon">
<svg class="icon icon_arrow_right">
<use href="/images/icons.svg#arrow_right" />
</svg>
</span>
</a>
</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-lg-justify-center">
<div class="topics_inner">
{% if title or description %}
<div class="topics_header" data-anim="any-threshold" data-anim-type="fade-up">
<div class="fs-row">
<div class="fs-cell fs-lg-9">
{% 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>
</div>
</div>
{% endif %}
<div class="topics_body">
{% for item in items %}
<div class="topic" data-anim="any-threshold" data-anim-type="fade-up">
<div class="topic_inner">
{% if item.image %}
<figure class="topic_figure" aria-hidden="true">
{% include "@partial-image" with {
class: "topic",
alt: "",
image: item.image,
sources: [
img.full.sml,
img.full.xsml,
img.full.xxsml
]
} %}
</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 %}
<div class="topic_link_item">
{% include "@component-button" with {
theme: "yellow",
text: link.title,
href: link.url,
icon: "arrow_right"
} %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Topic Row -->
No notes defined.