Hero Summaries
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
}
}
}Hero Summaries List {% include 'components/hero-summaries/hero-summaries-list' %}
HTML
<div class="inner hero-summary-list">
<div class="hero-summary-list__item">
<div class="hero-summary-list__content">
<h2 class="hero-summary-title">A Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
</div>
</div>
<div class="hero-summary-list__item">
<div class="hero-summary-list__content">
<h2 class="hero-summary-title"></h2>
<p>A short summary text block goes in here to give more information about this section.</p>
</div>
</div>
<div class="hero-summary-list__item">
<div class="hero-summary-list__content">
<h2 class="hero-summary-title">A Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
</div>
</div>
</div>
Twig
<div class="inner hero-summary-list">
{% for hero_summary in hero_summaries %}
<div class="hero-summary-list__item">
{% if hero_summary.icon %}
<div class="hero-summary-list__image">
<img src="{{ hero_summary.icon }}">
</div>
{% endif %}
<div class="hero-summary-list__content">
<h2 class="hero-summary-title">{{ hero_summary.title }}</h2>
<p>{{ hero_summary.summary }}</p>
</div>
</div>
{% endfor %}
</div>
{
"hero_summaries": {
"0": {
"title": "A Title",
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more"
},
"1": {
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more"
},
"2": {
"title": "A Title",
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more"
}
}
}A Title
A short summary text block goes in here to give more information about this section.
A short summary text block goes in here to give more information about this section.
A Title
A short summary text block goes in here to give more information about this section.
Hero Summaries {% include 'components/hero-summaries/hero-summaries' %}
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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<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\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more"
},
"1": {
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more"
},
"2": {
"title": "A Title",
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more"
}
}
}Hero Summaries Small Title {% include 'components/hero-summaries/hero-summaries~small-title' %}
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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
hero-summary-title--image--small
">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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
hero-summary-title--image--small
"></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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
hero-summary-title--image--small
">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\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"small_title": true
},
"1": {
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"small_title": true
},
"2": {
"title": "A Title",
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"small_title": true
}
}
}Hero Summary Featured {% include 'components/hero-summaries/hero-summary-featured' %}
HTML
<div class="inner">
<div class="hero-summary clearfix">
<div class="large-col-8">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/940x360?mw=400&mh=300, http://placehold.it/940x360?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/940x360?mw=223&mh=168, http://placehold.it/940x360?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/940x360?mw=400&mh=300, http://placehold.it/940x360?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/940x360?mw=343&mh=248, http://placehold.it/940x360?mw=686%mh=496 2x">
<img src="http://placehold.it/940x360" alt="">
</picture>
</span>
</div>
</div>
<div class="large-col-4">
<h2 class="hero-summary-title animate" style="height: 20px;">
A Title
</h2>
<p class="animate">A short summary text block goes in here to give more information about this section.</p>
<a class="hero-summary-link button animate" href="">See more</a>
</div>
</div>
</div>
Twig
<div class="inner">
<div class="hero-summary clearfix">
<div class="large-col-8">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/940x360?mw=400&mh=300, http://placehold.it/940x360?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/940x360?mw=223&mh=168, http://placehold.it/940x360?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/940x360?mw=400&mh=300, http://placehold.it/940x360?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/940x360?mw=343&mh=248, http://placehold.it/940x360?mw=686%mh=496 2x">
<img src="http://placehold.it/940x360" alt="">
</picture>
</span>
</div>
</div>
<div class="large-col-4">
<h2 class="hero-summary-title animate" style="height: 20px;">
A Title
</h2>
<p class="animate">A short summary text block goes in here to give more information about this section.</p>
<a class="hero-summary-link button animate" href="">See more</a>
</div>
</div>
</div>{}A Title
A short summary text block goes in here to give more information about this section.
See moreHero Summaries Card {% include 'components/hero-summaries/hero-summaries~card' %}
HTML
<div class="inner">
<div class="scaffolding-triple">
<div class="scaffolding-triple-col">
<!-- hero-summary -->
<div class="hero-summary hero-summary--card">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
">A Title</h2>
</div>
</div>
</span>
</div>
<div class="hero-summary-card__summary">
<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>
</div>
<!-- /hero-summary -->
</div>
<div class="scaffolding-triple-col">
<!-- hero-summary -->
<div class="hero-summary hero-summary--card">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
"></h2>
</div>
</div>
</span>
</div>
<div class="hero-summary-card__summary">
<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>
</div>
<!-- /hero-summary -->
</div>
<div class="scaffolding-triple-col">
<!-- hero-summary -->
<div class="hero-summary hero-summary--card">
<div class="hero-summary-top flexbox flexboxlegacy">
<span class="hero-summary-top-responsive ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="position hero-summary-top-overlay ">
<div class="hero-summary-title--container">
<h2 class="hero-summary-title hero-summary-title--image
">A Title</h2>
</div>
</div>
</span>
</div>
<div class="hero-summary-card__summary">
<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>
</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\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"card": true
},
"1": {
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"card": true
},
"2": {
"title": "A Title",
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"card": true
}
}
}Hero Summaries Cirular Small Title {% include 'components/hero-summaries/hero-summaries~cirular-small-title' %}
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
hero-summary-title--image--small
">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
hero-summary-title--image--small
"></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
hero-summary-title--image--small
">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,
"small_title": 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,
"small_title": 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,
"small_title": true
}
}
}Hero Summaries Title Below {% include 'components/hero-summaries/hero-summaries~title-below' %}
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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
</span>
</div>
<h2 class="hero-summary-title">A Title</h2>
<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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
</span>
</div>
<h2 class="hero-summary-title"></h2>
<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 ">
<picture>
<source media="(min-width: 1400px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 768px)" srcset="http://placehold.it/400x300?mw=223&mh=168, http://placehold.it/400x300?mw=446&mh=336 2x">
<source media="(min-width: 647px)" srcset="http://placehold.it/400x300?mw=400&mh=300, http://placehold.it/400x300?mw=800&mh=600 2x">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300?mw=343&mh=248, http://placehold.it/400x300?mw=686%mh=496 2x">
<img src="http://placehold.it/400x300" alt="">
</picture>
</span>
</div>
<h2 class="hero-summary-title">A Title</h2>
<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\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"title_below": true
},
"1": {
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"title_below": true
},
"2": {
"title": "A Title",
"image": "http:\/\/placehold.it\/400x300",
"summary": "A short summary text block goes in here to give more information about this section.",
"url:": "#",
"link_text": "See more",
"title_below": true
}
}
}Hero Summary Single {% include 'components/hero-summaries/hero-summary-single' %}
HTML
<div class="hero-summary-single">
<div class="hero-summary-single__content">
<h2 class="no-margin-top">A Title</h2>
<p>Cake sales and coffee mornings are fun, sociable and a great way to raise money. Everyone can get involved and they’re very easy to organise. You don’t need to be a master baker – just buy and resell cakes. We’ll give you all the resources, recipes and tips you’ll need to host a Big Bake – and all the money you raise will help families in poverty across the world.</p>
<a class="button" href="">See more</a>
</div>
<div class="hero-summary-single__image">
<picture>
<source media="(min-width: 375px)" srcset="http://placehold.it/1200x800, 2x">
<img src="http://placehold.it/1200x800" alt="We wont stop until poverty stops">
</picture>
</div>
</div>
Twig
{% for hero_summary in single_hero_summaries %}
<div class="hero-summary-single">
<div class="hero-summary-single__content">
<h2 class="no-margin-top">{{ hero_summary.title }}</h2>
<p>{{ hero_summary.summary }}</p>
<a class="button" href="{{ hero_summary.url }}">{{ hero_summary.link_text }}</a>
</div>
<div class="hero-summary-single__image">
<picture>
<source media="(min-width: 375px)" srcset="{{ hero_summary.image }}, {{ hero_summary.image_retina }} 2x">
<img src="{{ hero_summary.image }}" alt="We wont stop until poverty stops">
</picture>
</div>
</div>
{% endfor %}{
"single_hero_summaries": {
"0": {
"title": "A Title",
"image": "http:\/\/placehold.it\/1200x800",
"summary": "Cake sales and coffee mornings are fun, sociable and a great way to raise money. Everyone can get involved and they\u2019re very easy to organise. You don\u2019t need to be a master baker \u2013 just buy and resell cakes. We\u2019ll give you all the resources, recipes and tips you\u2019ll need to host a Big Bake \u2013 and all the money you raise will help families in poverty across the world.",
"url:": "#",
"link_text": "See more"
}
}
}A Title
Cake sales and coffee mornings are fun, sociable and a great way to raise money. Everyone can get involved and they’re very easy to organise. You don’t need to be a master baker – just buy and resell cakes. We’ll give you all the resources, recipes and tips you’ll need to host a Big Bake – and all the money you raise will help families in poverty across the world.
See more