<div class="js-component bg-charlie">
<div class="flex flex-col lg:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl">
<div class="w-full order-last lg:order-none lg:row-start-1 lg:col-start-2 lg:col-end-8 relative z-10 flex items-center align-end lg:py-14 xsm:max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none mx-auto lg:mx-0">
<div class="text-center items-center lg:items-start lg:text-left flex flex-col w-full pt-8 pb-16 lg:pt-0 lg:pb-0 lg:mt-0 px-4 xl:px-6">
<h1 class="text-4xl lg:text-4xl xl:text-7xl font-bold font-heading leading-tight text-grey-800">Title here</h1>
<div class="block prose xl:prose-xl mt-8 ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id magna dolor.</p>
</div>
<div class="mt-6">
<a href="./.html" class="btn bg-bravo text-white border-2 border-bravo hover:border-bravo-600 hover:bg-bravo-600">
Find out more
</a>
</div>
</div>
</div>
<div class="order-first lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 relative z-0 lg:angled-mask">
<picture class="block overflow-hidden h-full w-full">
<source media="(max-width: 767px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w">
<source media="(max-width: 1023px)" width="1920" height="720" srcset=",/front-end/images/test-imagery/example5@16-6@2000w.jpg 1200w">
<img class="lazyload h-full object-cover w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if theme %}
{% set bgColourClass = theme.bgColour %}
{% set textColourClass = theme.textColour %}
{% set richTextColourClass = theme.richTextColour %}
{% else %}
{% set bgColourClass = 'bg-grey-50' %}
{% set textColourClass = 'text-grey-800' %}
{% set richTextColourClass = '' %}
{% endif %}
<div class="js-component {{bgColourClass}}">
<div class="flex flex-col lg:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl">
<div class="w-full order-last lg:order-none lg:row-start-1 lg:col-start-2 lg:col-end-8 relative z-10 flex items-center align-end lg:py-14 xsm:max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none mx-auto lg:mx-0">
<div class="text-center items-center lg:items-start lg:text-left flex flex-col w-full pt-8 pb-16 lg:pt-0 lg:pb-0 lg:mt-0 px-4 xl:px-6">
{% if heading %}
<h1 class="text-4xl lg:text-4xl xl:text-7xl font-bold font-heading leading-tight {{ textColourClass }}">{{ heading }}</h1>
{% endif %}
{% if caption %}
<div class="block prose xl:prose-xl mt-8 {{ richTextColourClass }}">
<p>{{ caption }}</p>
</div>
{% endif %}
{% if link %}
<div class="mt-6">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
</div>
</div>
<div class="order-first lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 relative z-0 lg:angled-mask">
{% if image %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, smMax: image.smMax, mdMax: image.mdMax, modifier: 'h-full object-cover', frameModifier: 'h-full', width: 1200, height: 750 } %}
{% elseif backgroundVideo %}
<div class="aspect-[16/10] md:aspect-[16/6] lg:aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
{% endif %}
</div>
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"heading": "Title here",
"caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id magna dolor.",
"image": {
"src": "images/test-imagery/example5@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
],
"mdMax": {
"width": 1920,
"height": 720,
"srcSet": [
{
"url": "images/test-imagery/example5@16-6@2000w.jpg",
"size": 1200
}
]
},
"smMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"link": {
"text": "Find out more",
"url": "./"
},
"buttonColour": "bravo",
"theme": {
"bgColour": "bg-charlie",
"textColour": "text-grey-800",
"richTextColour": ""
}
}
No notes defined.