<div class="js-component relative z-0 component-spacer-margin ">
<div class="max-w-[1532px] mx-auto component-spacer-padding bg-grey-50 rounded-lg ">
<div class="container ">
<div class="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0">
<div class="relative w-full h-full">
<button class="rounded-2xl overflow-hidden relative w-full" data-micromodal-trigger="video-modal-1234">
<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">
<svg class="fill-current w-full h-full text-white drop-shadow-lg">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</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" data-video-modal data-prev-id="" data-next-id="">
<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?v=1.2#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 " data-video-container>
<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" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 flex flex-col justify-center align-center lg:order-first">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 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 prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<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-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</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-first" %}
{% else %}
{% set flippedClass = "" %}
{% 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}} rounded-lg {% endif %}">
<div class="container ">
<div class="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0">
{% if image %}
<div class="relative w-full h-full">
{% if image.modal %}
<button class="rounded-2xl 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-2xl' } %}
{% 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-2xl" muted autoplay loop playsinline>
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
</div>
</div>
{% endif %}
</div>
<div class="lg:flex-1 flex flex-col justify-center align-center {{flippedClass}}">
<div>
{% if subHeading %}
<span class="text-base text-grey-600 mb-1 uppercase block font-heading font-semibold leading-tight">{{ subHeading }}</span>
{% endif %}
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 font-heading font-bold leading-tight {{headingColour}}">{{heading}}</h2>
<div class="mb-8 max-w-none prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>{{description}}</p>
</div>
<div class="flex gap-6 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>
</div>
</div>
</div>
{
"siteName": "Gigaclear 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/example4@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example4@16-10@1200w.jpg",
"size": "1200"
}
],
"modal": {
"url": "https://player.vimeo.com/video/755602543?autoplay=1",
"id": "video-modal-1234"
}
},
"links": [
{
"text": "Find out more",
"url": "./index"
}
],
"bgContrast": true,
"flipped": true
}
No notes defined.