<div class="news_related">
<div class="news_related_header">
<div class="fs-row">
<div class="fs-cell fs-lg-8">
<div class="news_related_header_inner">
<h2 class="news_related_title">Explore Related Articles</h2>
</div>
</div>
</div>
</div>
<div class="news_related_body">
<div class="fs-row">
<div class="fs-cell">
<div class="news_related_items js-carousel" role="region" aria-label="Explore Related Articles Gallery" data-carousel-options='{"contained":false,"maxWidth":"739px","pagination":false,"show":{"600px":2},"labels":{"controls":"Explore Related Articles carousel controls","pagination":"Explore Related Articles carousel pagination"}}' data-anim="related-news">
<div class="news_related_item theme_soft_red" data-js="item">
<div class="news_item">
<div class="news_item_wrapper">
<div class="news_item_header">
<h2 class="news_item_title">
<a href="page-news-detail.html" class="news_item_title_link">
<span class="news_item_title_link_inner">
<span class="news_item_title_link_label">Eric Liu’s Three Laws of Power</span>
</span>
</a>
</h2>
<div class="news_item_categories">
<div class="news_item_category_hint">Categories</div>
<ul class="news_item_category_list" aria-label="Categories">
<li class="news_item_category">
<a class="news_item_category_link" href="page-news-category.html">Understanding Citizenship</a>
</li>
</ul>
</div>
</div>
<div class="news_item_body">
<div class="news_item_description">
<p>Integer posuere erat a ante venenatis dapibus posuere.</p>
</div>
</div>
<div class="news_item_figure_wrap">
<figure class="news_item_figure">
<a class="news_item_figure_link" href="page-news-detail.html" aria-label="Read more about Eric Liu’s Three Laws of Power" tabindex="-1">
<span class="lazy_image_wrapper news_item_image_wrapper">
<img class="js-lazy js-lazyload news_item_image" src="//images.fastspot.com/citizen-university/740x740/1" data-src="//images.fastspot.com/citizen-university/740x740/1" alt="">
</span>
<noscript>
<img class="news_item_image" src="https://images.fastspot.com/citizen-university/740x740/1" alt="">
</noscript>
</a>
</figure>
</div>
</div>
</div>
<!-- END: News Item -->
</div>
<div class="news_related_item theme_light_blue" data-js="item">
<div class="news_item">
<div class="news_item_wrapper">
<div class="news_item_header">
<h2 class="news_item_title">
<a href="page-news-detail.html" class="news_item_title_link">
<span class="news_item_title_link_inner">
<span class="news_item_title_link_label">Citizen University on Power and Character</span>
</span>
</a>
</h2>
<div class="news_item_categories">
<div class="news_item_category_hint">Categories</div>
<ul class="news_item_category_list" aria-label="Categories">
<li class="news_item_category">
<a class="news_item_category_link" href="page-news-category.html">Revive Civic Faith</a>
</li>
<li class="news_item_category">
<a class="news_item_category_link" href="page-news-category.html">Another Category</a>
</li>
</ul>
</div>
</div>
<div class="news_item_body">
<div class="news_item_description">
<p>Posuere erat a ante venenatis dapibus posuere.</p>
</div>
</div>
<div class="news_item_figure_wrap">
<figure class="news_item_figure">
<a class="news_item_figure_link" href="page-news-detail.html" aria-label="Read more about Citizen University on Power and Character" tabindex="-1">
<span class="lazy_image_wrapper news_item_image_wrapper">
<img class="js-lazy js-lazyload news_item_image" src="//images.fastspot.com/citizen-university/740x740/2" data-src="//images.fastspot.com/citizen-university/740x740/2" alt="">
</span>
<noscript>
<img class="news_item_image" src="https://images.fastspot.com/citizen-university/740x740/2" alt="">
</noscript>
</a>
</figure>
</div>
</div>
</div>
<!-- END: News Item -->
</div>
<div class="news_related_item theme_yellow" data-js="item">
<div class="news_item">
<div class="news_item_wrapper">
<div class="news_item_header">
<h2 class="news_item_title">
<a href="page-news-detail.html" class="news_item_title_link">
<span class="news_item_title_link_inner">
<span class="news_item_title_link_label">Craft an Argument to Inspire Change</span>
</span>
</a>
</h2>
<div class="news_item_categories">
<div class="news_item_category_hint">Categories</div>
<ul class="news_item_category_list" aria-label="Categories">
<li class="news_item_category">
<a class="news_item_category_link" href="page-news-category.html">Live Like a Citizen</a>
</li>
</ul>
</div>
</div>
<div class="news_item_body">
<div class="news_item_description">
<p>Ipsum posuere erat a ante venenatis dapibus posuere.</p>
</div>
</div>
<div class="news_item_figure_wrap">
<figure class="news_item_figure">
<a class="news_item_figure_link" href="page-news-detail.html" aria-label="Read more about Craft an Argument to Inspire Change" tabindex="-1">
<span class="lazy_image_wrapper news_item_image_wrapper">
<img class="js-lazy js-lazyload news_item_image" src="//images.fastspot.com/citizen-university/740x740/3" data-src="//images.fastspot.com/citizen-university/740x740/3" alt="">
</span>
<noscript>
<img class="news_item_image" src="https://images.fastspot.com/citizen-university/740x740/3" alt="">
</noscript>
</a>
</figure>
</div>
</div>
</div>
<!-- END: News Item -->
</div>
<div class="news_related_item theme_gold" data-js="item">
<div class="news_item">
<div class="news_item_wrapper">
<div class="news_item_header">
<h2 class="news_item_title">
<a href="page-news-detail.html" class="news_item_title_link">
<span class="news_item_title_link_inner">
<span class="news_item_title_link_label">Christopher Leads a Civic Saturday</span>
</span>
</a>
</h2>
<div class="news_item_categories">
<div class="news_item_category_hint">Categories</div>
<ul class="news_item_category_list" aria-label="Categories">
<li class="news_item_category">
<a class="news_item_category_link" href="page-news-category.html">Understanding Citizenship</a>
</li>
</ul>
</div>
</div>
<div class="news_item_body">
<div class="news_item_description">
<p>Lore Posuere erat a ante venenatis dapibus posuere.</p>
</div>
</div>
<div class="news_item_figure_wrap">
<figure class="news_item_figure">
<a class="news_item_figure_link" href="page-news-detail.html" aria-label="Read more about Christopher Leads a Civic Saturday" tabindex="-1">
<span class="lazy_image_wrapper news_item_image_wrapper">
<img class="js-lazy js-lazyload news_item_image" src="//images.fastspot.com/citizen-university/740x740/4" data-src="//images.fastspot.com/citizen-university/740x740/4" alt="">
</span>
<noscript>
<img class="news_item_image" src="https://images.fastspot.com/citizen-university/740x740/4" alt="">
</noscript>
</a>
</figure>
</div>
</div>
</div>
<!-- END: News Item -->
</div>
</div>
</div>
</div>
</div>
<div class="news_related_cta_wrap">
<div class="fs-row">
<div class="fs-cell">
<a href="#" class="button theme_yellow ">
<span class="button_text">
Explore More Articles
</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>
<!-- END: Related News -->
{% if title %}
{%
set carousel_options = carousel_options|merge({
labels: {
controls: title|replace({"'": "'"}) ~ " carousel controls",
pagination: title|replace({"'": "'"}) ~ " carousel pagination"
}
})
%}
{% endif %}
{% set carousel_options = carousel_options|json_encode %}
<div class="news_related">
{% if title or description %}
<div class="news_related_header">
<div class="fs-row">
<div class="fs-cell fs-lg-8">
<div class="news_related_header_inner">
{% if title %}
<h2 class="news_related_title">{{ title }}</h2>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
<div class="news_related_body">
<div class="fs-row">
<div class="fs-cell">
<div class="news_related_items js-carousel" role="region" aria-label="{{ title|e('html_attr') }} Gallery" data-carousel-options='{{ carousel_options }}' data-anim="related-news">
{% for index, item in items %}
<div class="news_related_item theme_{{ item_themes[index % item_themes|length] }}" data-js="item">
{% include '@partial-news-item' with {
item: item
} %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="news_related_cta_wrap">
<div class="fs-row">
<div class="fs-cell">
{% include "@component-button" with {
theme: "yellow",
href: '#',
text: 'Explore More Articles',
icon: 'arrow_right'
} %}
</div>
</div>
</div>
</div>
<!-- END: Related News -->
No notes defined.