<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 ">
<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="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">
<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 ">What we're about...</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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</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>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Join Us</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="w-full space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-2">
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex p-4 flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Uk Membership</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example1@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex p-4 flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">International membership</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example11@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto ">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-first lg:pr-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading 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-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<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 class="order-first lg:order-last flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl 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>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto ">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-last lg:pl-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading 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-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<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 class="first lg:order-first flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-variant-2--bravo-background", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "BIR Pattern Library",
"pageName": "Join us",
"hero": {
"heading": "What we're about...",
"caption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
},
"breadcrumbs": [
{
"text": "Lorem",
"url": "./"
},
{
"text": "Ipsum",
"url": "./"
},
{
"text": "Dolor",
"url": "./"
}
],
"componentsList": [
{
"name": "cta-card-list-style-2-component",
"data": {
"headline": {
"heading": "Join Us",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco."
},
"ctaList": [
{
"heading": "Uk Membership",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"image": {
"src": "images/test-imagery/example1@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example1@1-1@1200w.jpg",
"size": "1200"
}
],
"mdMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example11@16-10@1200w.jpg",
"size": 1200
}
]
}
}
},
{
"heading": "International membership",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"image": {
"src": "images/test-imagery/example11@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example11@1-1@1200w.jpg",
"size": "1200"
}
],
"mdMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example11@16-10@1200w.jpg",
"size": 1200
}
]
}
}
}
]
}
},
{
"name": "media-content-panel-style-1-component"
},
{
"name": "media-content-panel-style-1-component--flipped"
}
]
}
No notes defined.