<div class="js-component relative z-0 overflow-x-hidden w-full xl:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl component-spacer-margin">
<div class="flex flex-col justify-center xl:col-start-2 xl:col-end-6 xl:row-start-1">
<div class="w-full mx-auto xl:w-10/12 2xl:w-9/12 xl:mx-0 px-4 pt-0 pb-4 xl:py-12 2xl:px-6">
<h2 class="text-bravo-800 text-4xl lg:text-7xl mb-4 font-heading font-bold leading-tight">Our Locations</h2>
<div class="mb-8 prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal xl:prose-lg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed.</p>
</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 class="w-full h-full overflow-hidden pl-4 pt-4 relative lg:row-start-1 lg:col-start-6 lg:col-end-15">
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":false,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"},"updateOnMove":true,"breakpoints":{"640":{"perPage":2,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"}},"768":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"}},"1024":{"perPage":4,"arrows":true,"gap":"1.5rem","padding":{"right":"4rem"}},"1284":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"8rem"}}}}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Oxford</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Gloucestershire</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example31@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Somerset</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Devon</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Devon</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
</div>
</div>
<div class="flex items-center w-auto xsm:w-100 mt-7 lg:mt-12">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-3">
<button class="group splide__arrow splide__arrow--prev w-12 h-12 rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center transition ease-in-out duration-300">
<div class="rotate-90">
<svg class="w-5 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-12 h-12 rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center transition ease-in-out duration-300">
<div class="-rotate-90">
<svg class="w-5 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center pl-5 lg:pl-8 pr-4">
<div class="w-full">
<div class="bg-bravo-800/20 rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-bravo-800 transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if bgContrast %}
{% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
{% set bgClass = "component-spacer-margin" %}
{% endif %}
{% set buttonClass = "rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center" %}
<div class="js-component relative z-0 overflow-x-hidden w-full xl:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl {{bgClass}}">
<div class="flex flex-col justify-center xl:col-start-2 xl:col-end-6 xl:row-start-1">
<div class="w-full mx-auto xl:w-10/12 2xl:w-9/12 xl:mx-0 px-4 pt-0 pb-4 xl:py-12 2xl:px-6">
<h2 class="{{headingColourClass}} text-4xl lg:text-7xl mb-4 font-heading font-bold leading-tight">{{heading}}</h2>
<div class="mb-8 prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal xl:prose-lg">
<p>{{description}}</p>
</div>
{% render "@button--" + buttonModifier, link, true %}
</div>
</div>
<div class="w-full h-full overflow-hidden pl-4 pt-4 relative lg:row-start-1 lg:col-start-6 lg:col-end-15">
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
{% for item in cardList %}
<div class="splide__slide">
{% render "@content-card", {
heading: item.heading,
copy: item.copy,
centerText: true,
orderImageFirst: true,
image: item.image,
bgContrast: bgContrast
}, true %}
</div>
{% endfor %}
</div>
</div>
<div class="flex items-center w-auto xsm:w-100 mt-7 lg:mt-12">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-3">
<button class="group splide__arrow splide__arrow--prev w-12 h-12 {{ buttonClass }} transition ease-in-out duration-300">
<div class="rotate-90">
{% render "@icon", { name: "icon-chevron", modifier: "w-5 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-12 h-12 {{ buttonClass }} transition ease-in-out duration-300">
<div class="-rotate-90">
{% render "@icon", { name: "icon-chevron", modifier: "w-5 h-3 relative fill-current -mb-0.5", ariaHidden: true } %}
</div>
<span class="sr-only text-white">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center pl-5 lg:pl-8 pr-4">
<div class="w-full">
<div class="bg-bravo-800/20 rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-bravo-800 transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"heading": "Our Locations",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed.",
"buttonColour": "default",
"headingColourClass": "text-bravo-800",
"link": {
"text": "Find out more",
"url": "./index"
},
"cardList": [
{
"heading": "Oxford",
"copy": "Lorem ipsum dolor sit amet consectetur. Pharetra enim.",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"width": 1200,
"height": 675,
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
},
{
"heading": "Gloucestershire",
"copy": "Lorem ipsum dolor sit amet consectetur. Pharetra enim.",
"image": {
"src": "images/test-imagery/example2@16-9@1200w.jpg",
"width": 1200,
"height": 675,
"srcSet": [
{
"url": "images/test-imagery/example2@16-9@1200w.jpg",
"size": "1200"
}
]
}
},
{
"heading": "Somerset",
"copy": "Lorem ipsum dolor sit amet consectetur. Pharetra enim.",
"image": {
"src": "images/test-imagery/example31@16-9@1200w.jpg",
"width": 1200,
"height": 675,
"srcSet": [
{
"url": "images/test-imagery/example3@16-9@1200w.jpg",
"size": "1200"
}
]
}
},
{
"heading": "Devon",
"copy": "Lorem ipsum dolor sit amet consectetur. Pharetra enim.",
"image": {
"src": "images/test-imagery/example4@16-9@1200w.jpg",
"width": 1200,
"height": 675,
"srcSet": [
{
"url": "images/test-imagery/example4@16-9@1200w.jpg",
"size": "1200"
}
]
}
},
{
"heading": "Devon",
"copy": "Lorem ipsum dolor sit amet consectetur. Pharetra enim.",
"image": {
"src": "images/test-imagery/example2@16-9@1200w.jpg",
"width": 1200,
"height": 675,
"srcSet": [
{
"url": "images/test-imagery/example2@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
],
"sliderData": {
"perPage": 1,
"mediaQuery": "min",
"pagination": false,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "4.5rem"
},
"updateOnMove": true,
"breakpoints": {
"640": {
"perPage": 2,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "4.5rem"
}
},
"768": {
"perPage": 3,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "4.5rem"
}
},
"1024": {
"perPage": 4,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "4rem"
}
},
"1284": {
"perPage": 3,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "8rem"
}
}
}
}
}
No notes defined.