Hero Summaries Circular {% include 'components/hero-summaries/hero-summaries~circular' %}
HTML
<div class="inner">
<div class="scaffolding-triple">
<div class="scaffolding-triple-col">
<!-- hero-summary -->
<div class="hero-summary ">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive circular-image">
<picture>
<source media="(min-width: 1px)" srcset="http://placehold.it/200x200?mw=200&mh=200, http://placehold.it/200x200?mw=400&mh=400 2x">
<img src="http://placehold.it/200x200" alt="">
</picture>
<div class="position hero-summary-top-overlay hero-summary-top-overlay--circular ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
">A Title</h2>
</div>
</div>
</span>
</div>
<p>A short summary text block goes in here to give more information about this section.</p>
<a class="hero-summary-link button" href="">See more</a>
</div>
<!-- /hero-summary -->
</div>
<div class="scaffolding-triple-col">
<!-- hero-summary -->
<div class="hero-summary ">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive circular-image">
<picture>
<source media="(min-width: 1px)" srcset="http://placehold.it/200x200?mw=200&mh=200, http://placehold.it/200x200?mw=400&mh=400 2x">
<img src="http://placehold.it/200x200" alt="">
</picture>
<div class="position hero-summary-top-overlay hero-summary-top-overlay--circular ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
"></h2>
</div>
</div>
</span>
</div>
<p>A short summary text block goes in here to give more information about this section.</p>
<a class="hero-summary-link button" href="">See more</a>
</div>
<!-- /hero-summary -->
</div>
<div class="scaffolding-triple-col">
<!-- hero-summary -->
<div class="hero-summary ">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive circular-image">
<picture>
<source media="(min-width: 1px)" srcset="http://placehold.it/200x200?mw=200&mh=200, http://placehold.it/200x200?mw=400&mh=400 2x">
<img src="http://placehold.it/200x200" alt="">
</picture>
<div class="position hero-summary-top-overlay hero-summary-top-overlay--circular ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
">A Title</h2>
</div>
</div>
</span>
</div>
<p>A short summary text block goes in here to give more information about this section.</p>
<a class="hero-summary-link button" href="">See more</a>
</div>
<!-- /hero-summary -->
</div>
</div>
</div>
Twig
<div class="inner">
<div class="scaffolding-triple">
{% for hero_summary in hero_summaries %}
<div class="scaffolding-triple-col">
<!-- hero-summary -->
<div class="hero-summary {% if hero_summary.card %}hero-summary--card{% endif %}">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive {% if hero_summary.circular %}circular-image{% endif %}">
{% if hero_summary.image %}
{% if hero_summary.circular %}
<picture>
<source media="(min-width: 1px)" srcset="{{ hero_summary.image }}?mw=200&mh=200, {{ hero_summary.image }}?mw=400&mh=400 2x">
<img src="{{ hero_summary.image }}" alt="{{ hero_summary.alt }}">
</picture>
{% else %}
<picture>
<source media="(min-width: 1400px)" srcset="{{ hero_summary.image }}?mw=400&mh=300, {{ hero_summary.image }}?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="{{ hero_summary.image }}?mw=223&mh=168, {{ hero_summary.image }}?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="{{ hero_summary.image }}?mw=400&mh=300, {{ hero_summary.image }}?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="{{ hero_summary.image }}?mw=343&mh=248, {{ hero_summary.image }}?mw=686%mh=496 2x">
<img src="{{ hero_summary.image }}" alt="{{ hero_summary.alt }}">
</picture>
{% endif %}
{% endif %}
{% if hero_summary.icon %}
<img src="{{ hero_summary.icon }}">
{% endif %}
{% if hero_summary.title_below != true %}
<div class="position hero-summary-top-overlay {% if hero_summary.circular %}hero-summary-top-overlay--circular{% endif %} ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
{% if hero_summary.small_title %}
hero-summary-title--image--small
{% endif %}
">{{ hero_summary.title }}</h2>
</div>
</div>
{% endif %}
</span>
</div>
{% if hero_summary.card %}
<div class="hero-summary-card__summary">
{% endif %}
{% if hero_summary.title_below %}
<h2 class="hero-summary-title">{{ hero_summary.title }}</h2>
{% endif %}
<p>{{ hero_summary.summary }}</p>
{% if hero_summary.link_text %}
<a class="hero-summary-link button" href="{{ hero_summary.url }}">{{ hero_summary.link_text }}</a>
{% endif %}
{% if hero_summary.card %}
</div>
{% endif %}
</div>
<!-- /hero-summary -->
</div>
{% endfor %}
</div>
</div>
{
"hero_summaries": {
"0": {
"title": "A Title",
"image": "http:\/\/placehold.it\/200x200",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"circular": true
},
"1": {
"image": "http:\/\/placehold.it\/200x200",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"circular": true
},
"2": {
"title": "A Title",
"image": "http:\/\/placehold.it\/200x200",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"circular": true
}
}
}