<div class="container component-spacer-margin">
<div class="w-full splide relative" data-vanilla-module="Slider" data-splide='{"type":"fade","perPage":1,"pagination":true,"arrows":true,"rewind":true,"interval":3000}'>
<div class="splide__track ">
<div class="splide__list">
<div class="splide__slide group/slide">
<div class="w-full h-full flex flex-col lg:grid lg:grid-cols-10 lg:grid-rows-1 lg:row-start-1 lg:row-end-2 relative reverse-focus">
<div class="lg:col-start-1 lg:col-end-8 xl:col-end-9 lg:row-start-1 lg:row-end-2 relative z-0">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-t-lg lg:rounded-lg w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-1 lg:col-start-7 xl:col-start-7 lg:col-end-11 lg:row-start-1 lg:row-end-2 relative z-10 lg:flex items-end lg:mb-14 lg:mt-10">
<div class="bg-bravo px-8 py-11 rounded-b-lg lg:rounded-lg h-full lg:h-auto relative transition ease-in-out duration-500 lg:-translate-x-20 lg:group-[.is-active]/slide:opacity-100 lg:group-[.is-active]/slide:translate-x-0">
<div class="gradient-dark absolute w-full h-full left-0 top-0 z-0 rounded-b-lg lg:rounded-lg"></div>
<div class="absolute w-full h-full top-0 left-0 bg-bravo-900 opacity-70 z-10 rounded-b-lg lg:rounded-lg"></div>
<div class="relative z-20">
<h2 class="text-white font-heading font-semibold text-3xl xl:text-5xl leading-tight mb-4">What is Lorem Ipsum?</h2>
<p class="text-white lg:text-lg">
It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.
</p>
<div class="mt-10">
<a href="./annual-report.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="splide__slide group/slide">
<div class="w-full h-full flex flex-col lg:grid lg:grid-cols-10 lg:grid-rows-1 lg:row-start-1 lg:row-end-2 relative reverse-focus">
<div class="lg:col-start-1 lg:col-end-8 xl:col-end-9 lg:row-start-1 lg:row-end-2 relative z-0">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-t-lg lg:rounded-lg w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-1 lg:col-start-7 xl:col-start-7 lg:col-end-11 lg:row-start-1 lg:row-end-2 relative z-10 lg:flex items-end lg:mb-14 lg:mt-10">
<div class="bg-grey-100 px-8 py-11 rounded-b-lg lg:rounded-lg h-full lg:h-auto relative transition ease-in-out duration-500 lg:-translate-x-20 lg:group-[.is-active]/slide:opacity-100 lg:group-[.is-active]/slide:translate-x-0">
<div class="gradient-alpha opacity-25 absolute w-full h-full left-0 top-0 z-0 rounded-b-lg lg:rounded-lg"></div>
<div class="relative z-20">
<h2 class="text-bravo font-heading font-semibold text-3xl xl:text-5xl leading-tight mb-4">Why do we use it?</h2>
<p class="text-bravo lg:text-lg">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p>
<div class="mt-10">
<a href="./nullam-porttitor-nibh.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>
</div>
<div class="splide__slide group/slide">
<div class="w-full h-full flex flex-col lg:grid lg:grid-cols-10 lg:grid-rows-1 lg:row-start-1 lg:row-end-2 relative reverse-focus">
<div class="lg:col-start-1 lg:col-end-8 xl:col-end-9 lg:row-start-1 lg:row-end-2 relative z-0">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-t-lg lg:rounded-lg w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example8@16-10@1200w.jpg 1200w 1200w" data-src="/front-end/images/test-imagery/example8@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-1 lg:col-start-7 xl:col-start-7 lg:col-end-11 lg:row-start-1 lg:row-end-2 relative z-10 lg:flex items-end lg:mb-14 lg:mt-10">
<div class="bg-grey-100 px-8 py-11 rounded-b-lg lg:rounded-lg h-full lg:h-auto relative transition ease-in-out duration-500 lg:-translate-x-20 lg:group-[.is-active]/slide:opacity-100 lg:group-[.is-active]/slide:translate-x-0">
<div class="gradient-echo opacity-25 absolute w-full h-full left-0 top-0 z-0 rounded-b-lg lg:rounded-lg"></div>
<div class="relative z-20">
<h2 class="text-bravo font-heading font-semibold text-3xl xl:text-5xl leading-tight mb-4">Where does it come from?</h2>
<p class="text-bravo lg:text-lg">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
<div class="mt-10">
<a href="./lorem-ipsum-dolor.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>
</div>
<div class="splide__slide group/slide">
<div class="w-full h-full flex flex-col lg:grid lg:grid-cols-10 lg:grid-rows-1 lg:row-start-1 lg:row-end-2 relative reverse-focus">
<div class="lg:col-start-1 lg:col-end-8 xl:col-end-9 lg:row-start-1 lg:row-end-2 relative z-0">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-t-lg lg:rounded-lg w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-1 lg:col-start-7 xl:col-start-7 lg:col-end-11 lg:row-start-1 lg:row-end-2 relative z-10 lg:flex items-end lg:mb-14 lg:mt-10">
<div class="bg-grey-100 px-8 py-11 rounded-b-lg lg:rounded-lg h-full lg:h-auto relative transition ease-in-out duration-500 lg:-translate-x-20 lg:group-[.is-active]/slide:opacity-100 lg:group-[.is-active]/slide:translate-x-0">
<div class="gradient-charlie opacity-25 absolute w-full h-full left-0 top-0 z-0 rounded-b-lg lg:rounded-lg"></div>
<div class="relative z-20">
<h2 class="text-bravo font-heading font-semibold text-3xl xl:text-5xl leading-tight mb-4">Where can I get some?</h2>
<p class="text-bravo lg:text-lg">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</p>
<div class="mt-10">
<a href="./lorem-ipsum-dolor.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>
</div>
</div>
</div>
<div class="flex items-end justify-around pt-5 lg:pt-0 lg:h-20 lg:absolute lg:right-0 lg:bottom-0">
<div class="flex items-center w-full justify-between lg:justify-around gap-4 2xl:gap-8">
<ul class="splide__pagination max-lg:order-last"></ul>
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-2.5">
<button class="group splide__arrow splide__arrow--prev w-8 h-8 rounded-full flex items-center bg-bravo text-white justify-center disabled:bg-grey-200 transition ease-in-out duration-300">
<div class="rotate-90">
<svg class="w-4 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-8 h-8 rounded-full flex items-center bg-bravo text-white justify-center disabled:bg-grey-200 transition ease-in-out duration-300">
<div class="-rotate-90">
<svg class="w-4 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% set buttonClass = "rounded-full flex items-center bg-bravo text-white justify-center disabled:bg-grey-200" %}
<div class="container component-spacer-margin">
<div class="w-full splide relative" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
<div class="splide__track ">
<div class="splide__list">
{% for item in list %}
<div class="splide__slide group/slide">
{% render "@single-panel", item, true %}
</div>
{% endfor %}
</div>
</div>
<div class="flex items-end justify-around pt-5 lg:pt-0 lg:h-20 lg:absolute lg:right-0 lg:bottom-0">
<div class="flex items-center w-full justify-between lg:justify-around gap-4 2xl:gap-8">
<ul class="splide__pagination max-lg:order-last"></ul>
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-2.5">
<button class="group splide__arrow splide__arrow--prev w-8 h-8 {{ buttonClass }} transition ease-in-out duration-300">
<div class="rotate-90">
{% render "@icon", { name: "icon-chevron", modifier: "w-4 h-3 relative fill-current -mb-0.5", ariaHidden: true } %}
</div>
<span class="sr-only text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-8 h-8 {{ buttonClass }} transition ease-in-out duration-300">
<div class="-rotate-90">
{% render "@icon", { name: "icon-chevron", modifier: "w-4 h-3 relative fill-current -mb-0.5", ariaHidden: true } %}
</div>
<span class="sr-only text-white">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{
"siteName": "BIR Pattern Library",
"list": [
{
"heading": "What is Lorem Ipsum?",
"description": "It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.",
"link": {
"text": "Find out more",
"url": "./annual-report"
},
"buttonColour": "white",
"theme": {
"bgColour": "bg-bravo",
"bgGradColour": "gradient-dark",
"textColour": "text-white",
"richTextColour": "prose-white"
},
"image": {
"src": "images/test-imagery/example1@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-10@1200w.jpg 1200w",
"size": 1200
}
],
"width": 1200,
"height": 900
}
},
{
"heading": "Why do we use it?",
"description": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
"link": {
"text": "Find out more",
"url": "./nullam-porttitor-nibh"
},
"theme": {
"bgGradColour": "gradient-alpha opacity-25",
"bgColour": "bg-grey-100",
"textColour": "text-bravo"
},
"buttonColour": "bravo",
"image": {
"src": "images/test-imagery/example3@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example3@16-10@1200w.jpg 1200w",
"size": 1200
}
],
"width": 1200,
"height": 900
}
},
{
"heading": "Where does it come from?",
"description": "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",
"link": {
"text": "Find out more",
"url": "./lorem-ipsum-dolor"
},
"buttonColour": "bravo",
"theme": {
"bgGradColour": "gradient-echo opacity-25",
"bgColour": "bg-grey-100",
"textColour": "text-bravo",
"richTextColour": "prose-bravo"
},
"image": {
"src": "images/test-imagery/example8@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example8@16-10@1200w.jpg 1200w",
"size": 1200
}
],
"width": 1200,
"height": 900
}
},
{
"heading": "Where can I get some?",
"description": "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.",
"link": {
"text": "Find out more",
"url": "./lorem-ipsum-dolor"
},
"buttonColour": "bravo",
"theme": {
"bgGradColour": "gradient-charlie opacity-25",
"bgColour": "bg-grey-100",
"textColour": "text-bravo"
},
"image": {
"src": "images/test-imagery/example11@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example11@16-10@1200w.jpg 1200w",
"size": 1200
}
],
"width": 1200,
"height": 900
}
}
],
"sliderData": {
"type": "fade",
"perPage": 1,
"pagination": true,
"arrows": true,
"rewind": true,
"interval": 3000
}
}
No notes defined.