<div class="js-component relative z-0 component-spacer-margin">
<div class="container ">
<div class="w-full mx-auto gap-6 flex flex-col md:flex-row justify-center">
<div class="flex-1 flex justify-center">
<div class="w-full max-w-screen-lg">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
<div class="mt-3 text-grey-800">
Lorem ipsum dolor
</div>
</div>
</div>
</div>
</div>
</div>
{% if cropAlias === "10:16 Aspect Ratio" or cropAlias === "9:16 Aspect Ratio" or cropAlias === "12:16 Aspect Ratio" %}
{% set childClass = "w-full sm:max-w-screen-xsm" %}
{% else %}
{% set childClass = "w-full max-w-screen-lg" %}
{% endif %}
<div class="js-component relative z-0 component-spacer-margin">
<div class="container ">
<div class="w-full mx-auto gap-6 flex flex-col md:flex-row justify-center">
{% for item in list %}
<div class="flex-1 flex justify-center">
<div class="{{ childClass }}">
{% render "@image-frame", { src: item.image.src, srcSet: item.image.srcSet, width: item.image.width, height: item.image.height, modifier: 'rounded-md' } %}
{% if item.caption %}
<div class="mt-3 text-grey-800">
{{ item.caption }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"list": [
{
"caption": "Lorem ipsum dolor",
"image": {
"src": "images/test-imagery/example2@16-10@1200w.jpg",
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example2@16-10@1200w.jpg",
"size": 1200
}
]
}
}
]
}
No notes defined.