<div class="topic_row">
<div class="topic_row_header">
<h2 class="topic_row_header_title">Topic Row</h2>
<span class="topic_row_header_description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.</span>
</div>
<div class="topic_row_body">
<div class="topic_row_item topic_row_image_item">
<figure class="topic_row_item_figure">
<span class="lazy_image_wrapper topic_row_item_image_wrapper">
<picture class="topic_row_item_picture">
<source media="(min-width: 740px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x334/7">
<source media="(min-width: 0px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/7">
<img class="js-lazy js-lazyload topic_row_item_image" src="../../../images/placeholder.png" data-src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/7" alt="">
</picture>
</span>
<noscript>
<picture class="topic_row_item_picture">
<source media="(min-width: 740px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x334/7">
<source media="(min-width: 0px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/7">
<img class="topic_row_item_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/7" alt="">
</picture>
</noscript>
</figure>
<div class="topic_row_item_group">
<span class="topic_row_item_title">Justo Consectetur Ridiculus</span>
<span class="topic_row_item_description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.</span>
<div class="topic_row_item_links">
<a href="#" class="topic_row_item_link">Link Title One</a>
<a href="#" class="topic_row_item_link">Link Title Two, Long Title</a>
</div>
</div>
</div>
<div class="topic_row_item topic_row_image_item">
<figure class="topic_row_item_figure">
<span class="lazy_image_wrapper topic_row_item_image_wrapper">
<picture class="topic_row_item_picture">
<source media="(min-width: 740px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x334/7">
<source media="(min-width: 0px)" srcset="../../../images/placeholder.png" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/7">
<img class="js-lazy js-lazyload topic_row_item_image" src="../../../images/placeholder.png" data-src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/7" alt="">
</picture>
</span>
<noscript>
<picture class="topic_row_item_picture">
<source media="(min-width: 740px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/500x334/7">
<source media="(min-width: 0px)" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/740x416/7">
<img class="topic_row_item_image" src="//images.fastspot.com/the-chicago-council-on-global-affairs/300x169/7" alt="">
</picture>
</noscript>
</figure>
<div class="topic_row_item_group">
<span class="topic_row_item_title">Sed Ut Perspiciatis Unde Omni Iste Natus Error Sit Voluptum</span>
<span class="topic_row_item_description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.</span>
<div class="topic_row_item_links">
<a href="#" class="topic_row_item_link">Link Title One</a>
</div>
</div>
</div>
<div class="topic_row_item">
<div class="topic_row_item_group">
<span class="topic_row_item_title">Sed Ut Perspiciatis Unde Omni Iste Natus Error Sit Voluptum</span>
<span class="topic_row_item_description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.</span>
<div class="topic_row_item_links">
<a href="#" class="topic_row_item_link">Link Title One</a>
</div>
</div>
</div>
</div>
</div>
<div class="topic_row">
{% if title or description %}
<div class="topic_row_header">
{% if title %}
<h2 class="topic_row_header_title">{{ title }}</h2>
{% endif %}
{% if description %}
<span class="topic_row_header_description">{{ description }}</span>
{% endif %}
</div>
{% endif %}
{% if items %}
<div class="topic_row_body">
{% for item in items %}
<div class="topic_row_item{% if item.image %} topic_row_image_item{% endif %}">
{% if item.image %}
<figure class="topic_row_item_figure">
{% render '@partial-picture' with {
class: 'topic_row_item',
alt: '',
image: item.image,
default: img.wide.xxsml,
sources: {
"740px": img.classic.xsml,
"0px": img.wide.sml
}
} %}
</figure>
{% endif %}
<div class="topic_row_item_group">
<span class="topic_row_item_title">{{ item.title }}</span>
{% if item.description %}
<span class="topic_row_item_description">{{ item.description }}</span>
{% endif %}
{% if item.links %}
<div class="topic_row_item_links">
{% for link in item.links %}
<a href="{{ link.url }}" class="topic_row_item_link">{{ link.name }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
No notes defined.