Use the Collection component to render an array of components.
<div class='c-collection t-theme--education c-callouts__collection t-background--accent container-fluid'>
<ul class='c-collection__items row'>
<li class='c-collection__items__item col'>
<div class='c-callout t-theme--education c-callouts__callout t-background--accent container-fluid c-callout--text-only c-callout--with-icon'>
<div class='c-callout__content-wrapper'>
<span class='c-icon c-icon--double c-callout__icon c-icon--noun_communication_1435998-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px">
<path d="M48.68,51.39a4.8,4.8,0,0,0-2.14-4,6.94,6.94,0,0,1,4.09-12.69,7.07,7.07,0,0,1,6.73,7A6.93,6.93,0,0,1,54.3,47.4a4.79,4.79,0,0,0,2.64,8.78,6.89,6.89,0,0,1,6.88,6.88V64a2.5,2.5,0,0,0,5,0v-.92A11.9,11.9,0,0,0,57.58,51.2a11.94,11.94,0,1,0-14.34,0A11.9,11.9,0,0,0,32,63.06v4a2.5,2.5,0,0,0,5,0v-4a6.89,6.89,0,0,1,6.88-6.88A4.8,4.8,0,0,0,48.68,51.39Z"></path>
<path d="M93.35,54.46c.15-1.46.25-2.91.25-4.33a43.4,43.4,0,0,0-5.19-20.54,9.47,9.47,0,0,0-12-14.06A43.52,43.52,0,0,0,51.67,6.72,9.48,9.48,0,0,0,33.44,10,43.73,43.73,0,0,0,14,26.06a10.67,10.67,0,0,0-7,19.81c-.14,1.43-.24,2.86-.24,4.26a43.4,43.4,0,0,0,5.13,20.44A9.47,9.47,0,0,0,23.78,84.65,43.51,43.51,0,0,0,48.7,93.55a9.47,9.47,0,0,0,18.1-3.28A43.72,43.72,0,0,0,86.36,74.14a10.67,10.67,0,0,0,7-19.68Zm-12.55-35a4.49,4.49,0,1,1-4.49,4.49A4.49,4.49,0,0,1,80.8,19.45ZM42.91,5.85a4.49,4.49,0,1,1-4.49,4.49A4.49,4.49,0,0,1,42.91,5.85ZM6.53,36.59a5.68,5.68,0,1,1,5.68,5.69A5.69,5.69,0,0,1,6.53,36.59Zm12.9,44.13a4.49,4.49,0,1,1,4.49-4.49A4.49,4.49,0,0,1,19.43,80.72ZM57.35,94.15a4.49,4.49,0,1,1,4.49-4.49A4.49,4.49,0,0,1,57.35,94.15Zm8.4-8.88a9.48,9.48,0,0,0-17.81,3.24A38.5,38.5,0,0,1,27.5,81.19,9.47,9.47,0,0,0,15.83,67.46,38.42,38.42,0,0,1,11.7,50.13c0-.05,0-.11,0-.16A44.57,44.57,0,0,0,24,62.39a2.5,2.5,0,0,0,2.89-4.08c-5.15-3.65-9.06-7.68-11.29-11.59a10.66,10.66,0,0,0,5.58-15.95c4.63-1.8,11-2.4,18.08-1.64a2.5,2.5,0,0,0,.53-5c-7.4-.79-14.05-.24-19.3,1.54A38.7,38.7,0,0,1,34.63,15a9.47,9.47,0,0,0,17.65-3.21A38.52,38.52,0,0,1,72.71,19a9.48,9.48,0,0,0,11.71,13.7A38.42,38.42,0,0,1,88.6,50.13c0,.25,0,.51,0,.76-3.71-6.51-11-12.91-20.5-17.95a2.5,2.5,0,0,0-2.33,4.42C74.4,41.94,81.11,47.81,84.3,53.48a10.65,10.65,0,0,0-5.52,15.8c-7.88,3.15-20.42,2.6-33.11-1.63a2.5,2.5,0,0,0-1.58,4.74A72.11,72.11,0,0,0,66.5,76.3,39.1,39.1,0,0,0,80.21,74.1,38.72,38.72,0,0,1,65.75,85.27Zm22-16a5.68,5.68,0,1,1,5.68-5.69A5.69,5.69,0,0,1,87.79,69.25Z"></path>
</svg>
</span>
<h1 class='c-heading t-theme--education c-callouts__heading t-background--accent container-fluid'>
Benefit
</h1>
<div class='c-lead t-theme--education c-callouts__lead t-background--accent container-fluid'>
<p>A callout highlights a small section of a page. The text should provide an information scent for the link's target.</p>
</div>
</div>
</div>
</li>
<li class='c-collection__items__item col'>
<div class='c-callout t-theme--education c-callouts__callout t-background--accent container-fluid c-callout--text-only c-callout--with-icon'>
<div class='c-callout__content-wrapper'>
<span class='c-icon c-icon--double c-callout__icon c-icon--noun_agreement_1183842-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" x="0px" y="0px">
<path d="M87.92,31.35H87.6A10.9,10.9,0,0,0,77,42.19V56.28H67.52A7.53,7.53,0,0,0,60,63.8v27a2.5,2.5,0,0,0,2.5,2.5h10a2.5,2.5,0,0,0,2.5-2.5V71.28H88.47A10.54,10.54,0,0,0,99,60.75V42.19A10.84,10.84,0,0,0,87.92,31.35ZM94,60.75a5.54,5.54,0,0,1-5.53,5.53h-16a2.5,2.5,0,0,0-2.5,2.5v19.5H65V63.8a2.52,2.52,0,0,1,2.52-2.52h12a2.5,2.5,0,0,0,2.5-2.5V42.19a5.87,5.87,0,0,1,5.71-5.84H88A5.89,5.89,0,0,1,92.24,38,5.8,5.8,0,0,1,94,42.19Z"></path>
<path d="M88.15,6.72A10.85,10.85,0,1,0,99,17.57,10.86,10.86,0,0,0,88.15,6.72Zm0,16.69A5.85,5.85,0,1,1,94,17.57,5.85,5.85,0,0,1,88.15,23.41Z"></path>
<path d="M11.53,71.28H25v19.5a2.5,2.5,0,0,0,2.5,2.5h10a2.5,2.5,0,0,0,2.5-2.5v-27a7.53,7.53,0,0,0-7.52-7.52H23V42.19A10.9,10.9,0,0,0,12.4,31.36h-.32A10.84,10.84,0,0,0,1,42.19V60.75A10.54,10.54,0,0,0,11.53,71.28ZM6,42.19a5.84,5.84,0,0,1,6-5.84h.32A5.87,5.87,0,0,1,18,42.19V58.78a2.5,2.5,0,0,0,2.5,2.5h12A2.52,2.52,0,0,1,35,63.8V88.28H30V68.78a2.5,2.5,0,0,0-2.5-2.5h-16A5.54,5.54,0,0,1,6,60.75Z"></path>
<path d="M22.69,17.57A10.85,10.85,0,1,0,11.85,28.41,10.86,10.86,0,0,0,22.69,17.57ZM6,17.57a5.85,5.85,0,1,1,5.85,5.85A5.85,5.85,0,0,1,6,17.57Z"></path>
<path d="M28.5,47.78a2.5,2.5,0,0,0,2.5,2.5H47.5v40.5a2.5,2.5,0,0,0,5,0V50.28H69a2.5,2.5,0,0,0,0-5H31A2.5,2.5,0,0,0,28.5,47.78Z"></path>
<path d="M44.16,38.17a4.63,4.63,0,0,0,3.06,1.15h.33a4.64,4.64,0,0,0,3.2-1.59L68,18a4.67,4.67,0,0,0-.45-6.58l-4-3.51a4.67,4.67,0,0,0-6.58.45h0L46.26,20.52l-4.11-3.59a4.67,4.67,0,0,0-6.58.45l-3.51,4A4.67,4.67,0,0,0,32.5,28Zm-5-17.24,5.75,5a2.5,2.5,0,0,0,3.53-.24L60.45,11.86,64,14.93,47.2,34.18,36,24.45Z"></path>
</svg>
</span>
<h1 class='c-heading t-theme--education c-callouts__heading t-background--accent container-fluid'>
Benefit no. 2
</h1>
<div class='c-lead t-theme--education c-callouts__lead t-background--accent container-fluid'>
<p>The order of the benefits is irrelevant, but titles need to be focused and short. When in doubt, alphabetize.</p>
</div>
</div>
</div>
</li>
<li class='c-collection__items__item col'>
<div class='c-callout t-theme--education c-callouts__callout t-background--accent container-fluid c-callout--text-only c-callout--with-icon'>
<div class='c-callout__content-wrapper'>
<span class='c-icon c-icon--double c-callout__icon c-icon--noun_favorite_1428995-svg'>
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px">
<path d="M35.6,48.5V47.12A5.09,5.09,0,0,0,30.51,42h-13a5.09,5.09,0,0,0-5.09,5.09V92.41A5.09,5.09,0,0,0,17.5,97.5h13a5.08,5.08,0,0,0,5.06-4.87l3.32,2A19.54,19.54,0,0,0,49,97.42H70.88a19,19,0,0,0,7.67-1.52c7-3,8-8.54,7.5-12.14a11.35,11.35,0,0,0,3.33-12.64A11.24,11.24,0,0,0,92,63.68a10.78,10.78,0,0,0-2.13-5.88A9.41,9.41,0,0,0,87.49,47q-.32-.29-.66-.56a9.77,9.77,0,0,0-3.95-1.75l-.1,0c-6.88-1.46-11.52-1.55-18.32-1.55-.27-1.54-.29-4.85,1.79-11.14,1.89-5.7,1.73-10.4-.49-14a11.6,11.6,0,0,0-8.29-5.28l-.31,0a5.37,5.37,0,0,0-5.24,3.81,2.48,2.48,0,0,0-.08.36l-.78,5.59a16.75,16.75,0,0,1-1.45,4.87L42.1,43.21A9,9,0,0,1,35.6,48.5Zm-5,43.91a.09.09,0,0,1-.09.09h-13a.09.09,0,0,1-.09-.09V47.12A.09.09,0,0,1,17.5,47h13a.09.09,0,0,1,.09.09ZM46.66,45.27l7.48-15.8A21.74,21.74,0,0,0,56,23.14l.74-5.31A.36.36,0,0,1,57,17.7a6.66,6.66,0,0,1,4.54,2.93c1.38,2.24,1.38,5.62,0,9.79-2,6-2.63,10.79-1.86,14.14a4.6,4.6,0,0,0,4.51,3.57h0c6.88,0,11.07.06,17.58,1.45l.1,0a4.84,4.84,0,0,1,1.95.82l.33.28c2.76,2.5.85,5.79.63,6.14A2.53,2.53,0,0,0,85.18,60,6.23,6.23,0,0,1,87,63.94,7.23,7.23,0,0,1,84.62,69a2.53,2.53,0,0,0-.34,3c.47.82,2.55,5.12-2.5,8.83a2.54,2.54,0,0,0-.88,2.84c.28.84,1.41,5.15-4.35,7.67a14.06,14.06,0,0,1-5.67,1.1H49a14.54,14.54,0,0,1-7.49-2.08L35.6,86.81V53.59l.67-.12A13.93,13.93,0,0,0,46.66,45.27Z"></path>
<path d="M25.36,35.9a2.5,2.5,0,0,0,2.39,0C45.05,26.47,45.54,16.42,45,12.54A11.66,11.66,0,0,0,36,2.7a10.24,10.24,0,0,0-9.39,3,10.24,10.24,0,0,0-9.39-3,11.66,11.66,0,0,0-9,9.84C7.58,16.42,8.07,26.47,25.36,35.9ZM13.11,13.29a6.65,6.65,0,0,1,5-5.69,5.09,5.09,0,0,1,1-.1c2,0,3.9,1.24,5.27,3.5a2.5,2.5,0,0,0,4.28,0C30.3,8.36,32.58,7.12,35,7.6a6.65,6.65,0,0,1,5,5.69c.87,5.68-4.14,12.18-13.45,17.56C17.25,25.47,12.25,19,13.11,13.29Z"></path>
</svg>
</span>
<h1 class='c-heading t-theme--education c-callouts__heading t-background--accent container-fluid'>
Last not least
</h1>
<div class='c-lead t-theme--education c-callouts__lead t-background--accent container-fluid'>
<p>The text should be edited in order to have the columns have comparable heights on most screens.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class='{{ get_component_class( 'collection', display ) }}'>
<ul class='c-collection__items {{ class( collection.display.listClass ) }}'>
{% for item in collection.items %}
<li class='c-collection__items__item {{ class( collection.display.itemClass ) }}'>
{% include ( '@' ~ collection.display.itemTemplate ~ '.twig' ) with item %}
</li>
{% endfor %}
</ul>
</div>
{
"display": {
"component": "callouts",
"theme": "education",
"backgroundType": "accent",
"class": [
"container-fluid"
]
},
"collection": {
"display": {
"itemTemplate": "unit/callout/callout",
"listClass": [
"row"
],
"itemClass": [
"col"
]
},
"items": [
{
"icon": {
"basename": "noun_Communication_1435998.svg"
},
"heading": {
"text": "Benefit"
},
"lead": {
"content": "<p>A callout highlights a small section of a page. The text should provide an information scent for the link's target.</p>"
},
"link": null
},
{
"icon": {
"basename": "noun_agreement_1183842.svg"
},
"heading": {
"text": "Benefit no. 2"
},
"lead": {
"content": "<p>The order of the benefits is irrelevant, but titles need to be focused and short. When in doubt, alphabetize.</p>"
},
"link": null
},
{
"icon": {
"basename": "noun_Favorite_1428995.svg"
},
"heading": {
"text": "Last not least"
},
"lead": {
"content": "<p>The text should be edited in order to have the columns have comparable heights on most screens.</p>"
},
"link": null
}
]
}
}