<div class="js-component relative z-0 container component-spacer-margin">
<div class="mx-auto">
<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">Heading text</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 h-full overflow-hidden pl-4 pt-4 relative lg:row-start-1 lg:col-start-7 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":"8rem"},"updateOnMove":true,"breakpoints":{"640":{"perPage":2,"arrows":true,"gap":"1.5rem","padding":{"right":"0"}},"768":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"0"}},"1024":{"perPage":5,"arrows":true,"gap":"1.5rem","padding":{"right":"0"}},"1284":{"perPage":5,"arrows":true,"gap":"1.5rem","padding":{"right":"0"}}}}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/rospa-gold.jpg 1200w" data-src="/front-end/images/logo-imagery/rospa-gold.jpg">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/servicemark.png 1200w" data-src="/front-end/images/logo-imagery/servicemark.png">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/winners-logos-2024-business-innovation-award.png 1200w" data-src="/front-end/images/logo-imagery/winners-logos-2024-business-innovation-award.png">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/women-in-utilities-winner-seal_june-2025.png 1200w" data-src="/front-end/images/logo-imagery/women-in-utilities-winner-seal_june-2025.png">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/wwu-kitemark-inclusive-service-energy-provision-2023-26-300dpi-black.png 1200w" data-src="/front-end/images/logo-imagery/wwu-kitemark-inclusive-service-energy-provision-2023-26-300dpi-black.png">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/rospa-gold.jpg 1200w" data-src="/front-end/images/logo-imagery/rospa-gold.jpg">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/servicemark.png 1200w" data-src="/front-end/images/logo-imagery/servicemark.png">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/winners-logos-2024-business-innovation-award.png 1200w" data-src="/front-end/images/logo-imagery/winners-logos-2024-business-innovation-award.png">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/women-in-utilities-winner-seal_june-2025.png 1200w" data-src="/front-end/images/logo-imagery/women-in-utilities-winner-seal_june-2025.png">
</picture>
</div>
</div>
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
<picture class="block overflow-hidden w-full">
<img class="lazyload w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/logo-imagery/wwu-kitemark-inclusive-service-energy-provision-2023-26-300dpi-black.png 1200w" data-src="/front-end/images/logo-imagery/wwu-kitemark-inclusive-service-energy-provision-2023-26-300dpi-black.png">
</picture>
</div>
</div>
</div>
</div>
<div class="flex items-center lg:w-8/12 mt-5">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-4">
<button class="group splide__arrow splide__arrow--prev w-8 h-8 rounded-full flex items-center bg-bravo-900 hover:bg-bravo-700 border-bravo-900 hover:border-bravo-700 text-white justify-center border 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-bravo-900 hover:text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-8 h-8 rounded-full flex items-center bg-bravo-900 hover:bg-bravo-700 border-bravo-900 hover:border-bravo-700 text-white justify-center border 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-bravo-900 hover:text-white">Next</span>
</button>
</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-900 hover:bg-bravo-700 border-bravo-900 hover:border-bravo-700 text-white justify-center border" %}
<div class="js-component relative z-0 container component-spacer-margin">
<div class="mx-auto">
{% render "@headline", headline %}
<div class="w-full h-full overflow-hidden pl-4 pt-4 relative lg:row-start-1 lg:col-start-7 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 logoList %}
<div class="splide__slide">
<div class="w-full h-full flex justify-center items-center p-5">
{% render "@image-frame", { src: item.image.src, srcSet: item.image.srcSet, width: item.image.width, height: item.image.height, modifier: '' } %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="flex items-center lg:w-8/12 mt-5">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-4">
<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-bravo-900 hover: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-bravo-900 hover:text-white">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"siteName": "BIR Pattern Library",
"heading": "Markets",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed.",
"buttonColour": "bravo",
"link": {
"text": "Find out more",
"url": "./index"
},
"logoList": [
{
"image": {
"src": "images/logo-imagery/rospa-gold.jpg",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/rospa-gold.jpg",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/servicemark.png",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/servicemark.png",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/winners-logos-2024-business-innovation-award.png",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/winners-logos-2024-business-innovation-award.png",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/women-in-utilities-winner-seal_june-2025.png",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/women-in-utilities-winner-seal_june-2025.png",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/wwu-kitemark-inclusive-service-energy-provision-2023-26-300dpi-black.png",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/wwu-kitemark-inclusive-service-energy-provision-2023-26-300dpi-black.png",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/rospa-gold.jpg",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/rospa-gold.jpg",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/servicemark.png",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/servicemark.png",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/winners-logos-2024-business-innovation-award.png",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/winners-logos-2024-business-innovation-award.png",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/women-in-utilities-winner-seal_june-2025.png",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/women-in-utilities-winner-seal_june-2025.png",
"size": "1200"
}
]
}
},
{
"image": {
"src": "images/logo-imagery/wwu-kitemark-inclusive-service-energy-provision-2023-26-300dpi-black.png",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/logo-imagery/wwu-kitemark-inclusive-service-energy-provision-2023-26-300dpi-black.png",
"size": "1200"
}
]
}
}
],
"sliderData": {
"perPage": 1,
"mediaQuery": "min",
"pagination": false,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "8rem"
},
"updateOnMove": true,
"breakpoints": {
"640": {
"perPage": 2,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "0"
}
},
"768": {
"perPage": 3,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "0"
}
},
"1024": {
"perPage": 5,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "0"
}
},
"1284": {
"perPage": 5,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "0"
}
}
}
}
}
No notes defined.