Primer

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 Title

A short summary text block goes in here to give more information about this section.