<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>
<button class="btn bg-charlie border-2 border-charlie text-bravo hover:border-charlie-800 hover:bg-charlie-800" data-micromodal-trigger="video-modal-1234">
Play full video
</button>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="video-modal-1234" aria-hidden="true" data-vanilla-module="Modal">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-xl m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md">
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://player.vimeo.com/video/755602543?autoplay=1" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</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-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="https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175" type="video/mp4">
</video>
</div>
</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": "",
"links": [
{
"buttonColour": "charlie",
"text": "Play full video",
"url": "https://player.vimeo.com/video/755602543?autoplay=1",
"modal": true,
"id": "video-modal-1234",
"renderAsButton": true
}
],
"bgContrast": true,
"flipped": true,
"backgroundVideo": {
"src": "https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175"
}
}
No notes defined.