<div class="w-full h-full flex flex-col lg:grid lg:grid-cols-10 lg:grid-rows-1 lg:row-start-1 lg:row-end-2 relative reverse-focus">
<div class="lg:col-start-1 lg:col-end-8 xl:col-end-9 lg:row-start-1 lg:row-end-2 relative z-0">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-t-lg lg:rounded-lg w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-1 lg:col-start-7 xl:col-start-7 lg:col-end-11 lg:row-start-1 lg:row-end-2 relative z-10 lg:flex items-end lg:mb-14 lg:mt-10">
<div class="bg-grey-100 px-8 py-11 rounded-b-lg lg:rounded-lg h-full lg:h-auto relative transition ease-in-out duration-500 lg:-translate-x-20 lg:group-[.is-active]/slide:opacity-100 lg:group-[.is-active]/slide:translate-x-0">
<div class="gradient-charlie opacity-25 absolute w-full h-full left-0 top-0 z-0 rounded-b-lg lg:rounded-lg"></div>
<div class="relative z-20">
<h2 class="text-bravo font-heading font-semibold text-3xl xl:text-5xl leading-tight mb-4">What is Lorem Ipsum?</h2>
<p class="text-bravo lg:text-lg">
It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.
</p>
<div class="mt-10">
<a href="./.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if theme %}
{% set bgColourClass = theme.bgColour %}
{% set bgGradColourClass = theme.bgGradColour %}
{% set textColourClass = theme.textColour %}
{% set richTextColourClass = theme.richTextColour %}
{% else %}
{% set bgColourClass = 'bg-bravo' %}
{% set bgGradColourClass = 'gradient-dark' %}
{% set textColourClass = 'text-white' %}
{% set richTextColourClass = 'text-white' %}
{% endif %}
<div class="w-full h-full flex flex-col lg:grid lg:grid-cols-10 lg:grid-rows-1 lg:row-start-1 lg:row-end-2 relative reverse-focus">
<div class="lg:col-start-1 lg:col-end-8 xl:col-end-9 lg:row-start-1 lg:row-end-2 relative z-0">
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: image.width, height: image.height, modifier: 'rounded-t-lg lg:rounded-lg' } %}
</div>
<div class="flex-1 lg:col-start-7 xl:col-start-7 lg:col-end-11 lg:row-start-1 lg:row-end-2 relative z-10 lg:flex items-end lg:mb-14 lg:mt-10">
<div class="{{ bgColourClass}} px-8 py-11 rounded-b-lg lg:rounded-lg h-full lg:h-auto relative transition ease-in-out duration-500 lg:-translate-x-20 lg:group-[.is-active]/slide:opacity-100 lg:group-[.is-active]/slide:translate-x-0">
<div class="{{ bgGradColourClass }} absolute w-full h-full left-0 top-0 z-0 rounded-b-lg lg:rounded-lg"></div>
{% if bgGradColourClass == 'gradient-dark' %}
<div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-70 z-10 rounded-b-lg lg:rounded-lg"></div>
{% endif %}
<div class="relative z-20">
{% if heading %}
<h2 class="{{ textColourClass }} font-heading font-semibold text-3xl xl:text-5xl leading-tight mb-4">{{ heading }}</h2>
{% endif %}
{% if description %}
<p class="{{ textColourClass }} lg:text-lg">
{{ description }}
</p>
{% endif %}
{% if link %}
<div class="mt-10">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{
"siteName": "BIR Pattern Library",
"heading": "What is Lorem Ipsum?",
"description": "It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.",
"link": {
"text": "Find out more",
"url": "./"
},
"buttonColour": "bravo",
"theme": {
"bgColour": "bg-grey-100",
"bgGradColour": "gradient-charlie opacity-25",
"textColour": "text-bravo",
"richTextColour": "prose-white"
},
"image": {
"src": "images/test-imagery/example1@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-10@1200w.jpg 1200w",
"size": 1200
}
],
"width": 1200,
"height": 900
}
}
No notes defined.