<div class="js-component relative">
<div class="absolute w-full h-full top-0 left-0 bg-grey-50 z-0 opacity-30 lg:opacity-100"></div>
<div class="container flex flex-col lg:flex-row lg:items-center gap-8 py-8 lg:py-16 relative z-20 lg:min-h-[250px]">
<div class="flex-1 flex order-last lg:order-first lg:items-center">
<div class="items-start lg:text-left flex flex-col w-full">
<div class="uppercase font-semibold font-heading leading-tight text-bravo-900">
Pre Heading
</div>
<h1 class="text-6xl lg:text-9xl font-medium font-heading leading-tight text-bravo-900">
Where the future of imaging began
<span class="font-medium font-heading leading-none text-alpha-600">
Extra Colour
</span>
</h1>
<div class="max-w-xl prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-6 prose-bravo-900">
<p>Nullam vel metus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-6">
<button class="btn group bg-bravo-900 text-white border-2 border-bravo-900" data-micromodal-trigger="video-modal-1234">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Play full video
</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>
</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-2xl">
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/NZrX_ES93JA" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative z-10 flex-1 order-first lg:order-last">
<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 rounded-xl" 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>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if theme %}
{% set bgColourClass = theme.bgColour %}
{% set textColourClass = theme.textColour %}
{% set textColourHeadingClass = theme.textColourHeading %}
{% set richTextColourClass = theme.richTextColour %}
{% else %}
{% set bgColourClass = 'bg-grey-50' %}
{% set textColourClass = 'text-bravo-900' %}
{% set textColourHeadingClass = 'text-alpha-600' %}
{% set richTextColourClass = 'prose-bravo-900' %}
{% endif %}
<div class="js-component relative">
<div class="absolute w-full h-full top-0 left-0 {{bgColourClass}} z-0 opacity-30 lg:opacity-100"></div>
{% if theme.bgColour == 'gradient-dark' %}
<div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-50 z-10"></div>
{% endif %}
<div class="container flex flex-col lg:flex-row lg:items-center gap-8 py-8 lg:py-16 relative z-20 lg:min-h-[250px]">
<div class="flex-1 flex order-last lg:order-first lg:items-center">
<div class="items-start lg:text-left flex flex-col w-full">
{% if preHeading %}
<div class="uppercase font-semibold font-heading leading-tight {{ textColourClass }}">
{{ preHeading }}
</div>
{% endif %}
{% if heading %}
<h1 class="text-6xl lg:text-9xl font-medium font-heading leading-tight {{ textColourClass }}">
{{ heading }}
{% if colourHeading %}
<span class="font-medium font-heading leading-none {{ textColourHeadingClass }}">
{{ colourHeading }}
</span>
{% endif %}
</h1>
{% endif %}
{% if caption %}
<div class="max-w-xl prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-6 {{ richTextColourClass }}">
{{ caption| safe }}
</div>
{% endif %}
{% if link %}
<div class="mt-6">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
</div>
</div>
{% if image or backgroundVideo %}
<div class="relative z-10 flex-1 order-first lg:order-last">
{% if image %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, smMax: image.smMax, mdMax: image.mdMax, modifier: 'h-full object-cover rounded-xl', 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 rounded-xl" muted autoplay loop playsinline>
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
{% endif %}
</div>
{% endif %}
</div>
</div>
{
"siteName": "BIR Pattern Library",
"preHeading": "Pre Heading",
"heading": "Where the future of imaging began",
"colourHeading": "Extra Colour",
"caption": "<p>Nullam vel metus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
"buttonColour": "bravo",
"image": "",
"link": {
"text": "Play full video",
"url": "https://www.youtube.com/embed/NZrX_ES93JA",
"modal": true,
"id": "video-modal-1234",
"renderAsButton": true
},
"backgroundVideo": {
"src": "https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175"
}
}
No notes defined.