<div class="js-component md:bg-grey-50 relative block md:grid grid-cols-1 auto-rows-auto md:grid-cols-1 md:grid-rows-1 overflow-hidden z-0 bg-bravo-900 md:bg-transparent ">
<div class="hero absolute w-full h-full z-10 hidden md:block"></div>
<div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">
<picture class="block overflow-hidden h-full w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w">
<img class="lazyload h-full object-cover w-full" alt="" width="1920" height="720" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example4@16-6@2000w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-6@2000w.jpg">
</picture>
</div>
<div class="md:col-start-1 md:col-end-1 md:row-start-1 md:row-end-2 md:flex md:items-center relative -mt-3/10 md:mt-0">
<div class="hero-mobile absolute w-full h-48 z-10 md:hidden -top-48"></div>
<div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
<div class="px-6 py-7 lg:px-12 lg:py-13 md:w-96 lg:w-[420px] xl:w-[580px] relative rounded-3xl bg-bravo-900 md:bg-transparent">
<div class="relative flex flex-col justify-center z-20">
<h1 class="text-5xl xl:text-9xl font-medium font-heading leading-none text-white ">Radiotherapy</h1>
<div class="block prose prose-p:font-light prose-lg lg:prose:xl prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl mt-6 prose-white">
<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">
<a href="./.html" class="btn group bg-white border-2 border-white text-bravo-800">
<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#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</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-bravo-900' %}
{% set richTextColourClass = '' %}
{% endif %}
<div class="js-component md:bg-grey-50 relative block md:grid grid-cols-1 auto-rows-auto md:grid-cols-1 md:grid-rows-1 overflow-hidden z-0 {{ bgColourClass }} ">
{% if gradient %}
<div class="{{gradient}} absolute w-full h-full z-10 hidden md:block"></div>
{% endif %}
<div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">
{% if image %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, mdMax: image.mdMax, modifier: 'h-full object-cover', frameModifier: 'h-full', width: image.width, height: image.height } %}
{% elseif backgroundVideo %}
<div class="aspect-[16/10] lg:aspect-[16/6]"></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 class="md:col-start-1 md:col-end-1 md:row-start-1 md:row-end-2 md:flex md:items-center relative -mt-3/10 md:mt-0">
{% if gradientMobile %}
<div class="{{gradientMobile}} absolute w-full h-48 z-10 md:hidden -top-48"></div>
{% endif %}
<div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
<div class="px-6 py-7 lg:px-12 lg:py-13 md:w-96 lg:w-[420px] xl:w-[580px] relative rounded-3xl {{ bgColourClass }}">
<div class="relative flex flex-col justify-center z-20">
{% if heading %}
<h1 class="text-5xl xl:text-9xl font-medium font-heading leading-none {{textColourClass}} ">{{ heading }}</h1>
{% endif %}
{% if caption %}
<div class="block prose prose-p:font-light prose-lg lg:prose:xl prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl mt-6 {{richTextColourClass}}">
<p>{{ caption }}</p>
</div>
{% endif %}
{% if link %}
<div class="mt-6">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "BIR Pattern Library",
"heading": "Radiotherapy",
"caption": "Nullam vel metus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"image": {
"src": "images/test-imagery/example4@16-6@2000w.jpg",
"width": 1920,
"height": 720,
"srcSet": [
{
"url": "images/test-imagery/example4@16-6@2000w.jpg",
"size": 1200
}
],
"mdMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example4@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"link": {
"text": "Find out more",
"url": "./"
},
"buttonColour": "white",
"gradientMobile": "hero-mobile",
"gradient": "hero",
"theme": {
"bgColour": "bg-bravo-900 md:bg-transparent",
"textColour": "text-white",
"richTextColour": "prose-white"
}
}
No notes defined.