<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">Our markets</h2>
<p class="text-bravo-900 font-heading text-tiny"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
<div class="flex-grow-0 px-6 pb-6 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
{% if colHeading %}
<h2 class="text-1xl lg:text-xl flex font-heading font-medium lg:font-extrabold leading-tight lg:block text-bravo-900 mb-3">
{{ colHeading }}
</h2>
{% endif %}
<a class="bg-white p-3 block rounded-xl transition ease-in-out duration-150 shadow-md lg:shadow-none hover:shadow-xl lg:hover:shadow-card" href="{{ url | path}}">
<div class="mb-4">
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 675, frameModifier: 'rounded-xl' } %}
</div>
<div>
<h2 class="text-bravo-900 font-bold font-heading mb-1 text-lg">{{ heading }}</h2>
<p class="text-bravo-900 font-heading text-tiny"> {{description}} </p>
</div>
</a>
</div>
{
"siteName": "BIR Pattern Library",
"url": "./index",
"heading": "Our markets",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
No notes defined.