<div class="section section--mt-large section--mb-large ">
<div class="section__inner h-container">
<div class="grid">
<div class="grid__col grid__col--xs-4 grid__col--sm-12 grid__col--md-11 grid__col--offset-md-1">
<div class="section__title animation__target">
<h2>Section title</h2>
</div>
<div class="section__content ">
<div class="index index-list animation__target ">
<a class="index__item animation__target js-index-item" href="#" target="_blank">
<h3 class="h3 index__item-title">Bauhub Lorem Ipsum name of the Project</h3>
<p class="index__item-tag text-small">2020</p>
<p class="index__item-tag text-small">Digital Branding</p>
<p class="index__item-tag text-small">Lorem Client</p>
<svg class="icon index__icon index__icon--rotating">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-54"></use>
</svg>
<div class="index__image-container">
<div class="index__image-overflow">
<figure class="image index__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20352%20264%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x270 360w, //via.placeholder.com/720x540 720w, //via.placeholder.com/672x504 672w, //via.placeholder.com/352x264 352w, //via.placeholder.com/704x528 704w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
</a>
<a class="index__item animation__target js-index-item" href="#">
<h3 class="h3 index__item-title">New website for Estonian Marketing Association</h3>
<p class="index__item-tag text-small">2020</p>
<p class="index__item-tag text-small">Digital Branding</p>
<p class="index__item-tag text-small">Lorem Client</p>
<svg class="icon index__icon index__icon--sliding">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-54"></use>
</svg>
<div class="index__image-container">
<div class="index__image-overflow">
<figure class="image index__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20352%20264%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x270 360w, //via.placeholder.com/720x540 720w, //via.placeholder.com/672x504 672w, //via.placeholder.com/352x264 352w, //via.placeholder.com/704x528 704w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
</a>
<div class="index__item animation__target ">
<h3 class="h3 index__item-title">Bauhub Lorem Ipsum name of the Project. Example which is multiple lines for demo.</h3>
<p class="index__item-tag text-small">2020</p>
<p class="index__item-tag text-small">Digital Branding</p>
<p class="index__item-tag text-small">Lorem Client</p>
</div>
<div class="index__item animation__target ">
<h3 class="h3 index__item-title">New website for Estonian Marketing Association</h3>
<p class="index__item-tag text-small">2020</p>
<p class="index__item-tag text-small">Digital Branding</p>
<p class="index__item-tag text-small">Lorem Client</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% set topSpacing %}
{% apply spaceless %}
{% if 'small' in data.topSpacing %}
section--mt-small
{% elseif 'medium' in data.topSpacing %}
section--mt-medium
{% else %}
section--mt-large
{% endif %}
{% endapply %}
{% endset %}
{% set bottomSpacing %}
{% apply spaceless %}
{% if 'small' in data.bottomSpacing %}
section--mb-small
{% elseif 'medium' in data.bottomSpacing %}
section--mb-medium
{% else %}
section--mb-large
{% endif %}
{% endapply %}
{% endset %}
{% set content %}
{% include '@index' with { class: 'index-list animation__target', modifier: '', data: data.index } %}
{% endset %}
{% include '@section' with { class: '', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { content: content, title: data.title }, container: true } %}
{
"language": "en-US",
"data": {
"title": "Section title",
"index": {
"items": [
{
"image": true,
"title": "Bauhub Lorem Ipsum name of the Project",
"link": "#",
"newTab": true,
"tags": [
{
"name": "2020"
},
{
"name": "Digital Branding"
},
{
"name": "Lorem Client"
}
]
},
{
"image": true,
"title": "New website for Estonian Marketing Association",
"link": "#",
"tags": [
{
"name": "2020"
},
{
"name": "Digital Branding"
},
{
"name": "Lorem Client"
}
]
},
{
"title": "Bauhub Lorem Ipsum name of the Project. Example which is multiple lines for demo.",
"tags": [
{
"name": "2020"
},
{
"name": "Digital Branding"
},
{
"name": "Lorem Client"
}
]
},
{
"title": "New website for Estonian Marketing Association",
"tags": [
{
"name": "2020"
},
{
"name": "Digital Branding"
},
{
"name": "Lorem Client"
}
]
}
]
}
}
}
