<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto component-spacer-padding bg-grey-50">
<div class="container">
<div class="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 lg:order-last lg:pl-12">
<div>
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.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>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
<div class="relative w-full h-full">
<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>
</div>
</div>
</div>
</div>
</div>
{% if bgContrast %}
{% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
{% set bgClass = "" %}
{% endif %}
{% if flipped %}
{% set flippedClass = "lg:order-last lg:pl-12" %}
{% else %}
{% set flippedClass = "lg:pr-12" %}
{% endif %}
{% set headingColour = "text-bravo" %}
<div class="js-component relative z-0 {% if fullWidthBackground and bgContrast %} {{bgClass}} {% else %}component-spacer-margin{% endif %}">
<div class="max-w-[1532px] mx-auto {% if not fullWidthBackground and bgContrast %}{{bgClass}}{% endif %}">
<div class="container">
<div class="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 {{flippedClass}}">
<div>
{% if subHeading %}
<span class="text-base mb-1 block font-heading font-bold leading-tight">{{ subHeading }}</span>
{% endif %}
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight {{headingColour}}">{{heading}}</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<p>{{description}}</p>
</div>
<div class="flex gap-4 flex-wrap">
{% for item in links %}
{% set buttonColour = "default" %}
{% if item.buttonColour %}
{% set buttonColour = item.buttonColour %}
{% endif %}
<div>
{% render "@button--" + buttonColour, item, true %}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
{% if image %}
<div class="relative w-full h-full">
{% if image.modal %}
<button class="rounded-md overflow-hidden relative w-full" data-micromodal-trigger="{{ image.modal.id }}">
<span class="sr-only">Open Video</span>
<div class="w-24 h-24 absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 z-20 pointer-events-none">
{% render "@icon", { name: "icon-play", modifier: "fill-current w-full h-full text-white drop-shadow-lg" } %}
</div>
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 750, modifier: 'transition ease-in-out duration-300 hover:scale-110' } %}
</button>
{% render "@video-modal", { id: image.modal.id, url: image.modal.url } %}
{% else %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 750, modifier: 'rounded-md' } %}
{% endif %}
</div>
{% elseif backgroundVideo %}
<div class="relative w-full h-auto">
<div class="relative w-full">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0 rounded-md" muted autoplay loop playsinline>
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"heading": " Ut bibendum dui leo, non consectetur nisl auctor sed.",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.",
"image": {
"src": "images/test-imagery/example2@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example2@16-10@1200w.jpg",
"size": "1200"
}
]
},
"links": [
{
"buttonColour": "bravo",
"text": "Find out more",
"url": "./index"
}
],
"bgContrast": true,
"flipped": true
}
No notes defined.