<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex p-4 flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla ullamcorper nunc sed luctus. Quisque vehicula, lacus sed aliquam sagittis, lacus lectus ullamcorper eros, in vulputate ex felis id erat.</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
{%if bgContrast %}
{% set bgColor = "bg-white hover:bg-grey-100" %}
{% else%}
{% set bgColor = "bg-grey-100 hover:bg-grey-100" %}
{% endif %}
<a href="#" class="{{ bgColor }} border border-transparent flex {% if horizontal %} p-4 flex-col lg:flex-row {% else %} px-4 pt-4 pb-6 gap-6 flex-col{% endif %} h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col {% if centerText %} justify-center text-center items-center{% endif %}{% if horizontal %} justify-center flex-2 py-8 lg:px-8 {% else %} flex-1 justify-start {% endif %}" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
{% if heading %}
<h2 class="relative {% if biggerFont %} text-2xl {% else %} text-xl {% endif %} font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">{{ heading }}</h2>
{% endif %}
{% if copy %}
<p class="mt-2 text-bravo-900 {% if bio %} line-clamp-3 {% endif %}">{{ copy }}</p>
{% endif %}
{% if tag %}
<ul class="mt-4 flex gap-1">
{% for item in tag %}
{% render "@tag", item %}
{% endfor %}
</ul>
{% endif %}
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 {% if orderImageFirst %}order-first{% endif %} {% if bio %} w-32 md:w-auto {% endif %} {% if not horizontal %} grow-0 {% endif %}">
<div class="w-full h-full">
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: image.width, height: image.height, xsmMax: image.xsmMax, smMax: image.smMax, mdMax: image.mdMax, modifier: 'transition ease-in-out duration-300 group-hover:scale-110', frameModifier: 'rounded-lg' } %}
</div>
</div>
</a>
{
"siteName": "BIR Pattern Library",
"heading": "Lorem ipsum",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla ullamcorper nunc sed luctus. Quisque vehicula, lacus sed aliquam sagittis, lacus lectus ullamcorper eros, in vulputate ex felis id erat.",
"image": {
"src": "images/test-imagery/example4@1-1@1200w.jpg",
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example4@1-1@1200w.jpg",
"size": "1200"
}
]
},
"horizontal": true
}
No notes defined.