<div class="js-component relative component-spacer-padding bg-grey-50">
<div class="absolute w-full h-full top-0 left-0 gradient-alpha opacity-50 z-0"></div>
<div class="container relative z-10">
<div class="max-w-screen-xl 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">Lorem ipsum dolor</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.</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-white flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="block font-bold text-8xl md:text-6xl lg:text-8xl xl:text-10xl leading-tight text-alpha-700"><span data-vanilla-module="CountUp" data-number="10" data-suffix="" data-prefix="">0</span></div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-white flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="block font-bold text-8xl md:text-6xl lg:text-8xl xl:text-10xl leading-tight text-alpha-700"><span data-vanilla-module="CountUp" data-number="100" data-suffix="%" data-prefix="">0</span></div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-white flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="block font-bold text-8xl md:text-6xl lg:text-8xl xl:text-10xl leading-tight text-alpha-700"><span data-vanilla-module="CountUp" data-number="50" data-suffix="" data-prefix="">0</span></div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
</div>
</div>
</div>
{% if bgContrast %}
{% set bgClass = "component-spacer-padding bg-grey-50" %}
{% else %}
{% set bgClass = "component-spacer-margin" %}
{% endif %}
{% if itemHeadingColour %}
{% set itemHeadingColourClass = itemHeadingColour %}
{% else %}
{% set itemHeadingColourClass = "text-bravo" %}
{% endif %}
<div class="js-component relative {{bgClass}}">
{% if bgContrast %}
<div class="absolute w-full h-full top-0 left-0 gradient-alpha opacity-50 z-0"></div>
{% endif %}
<div class="container relative z-10">
{% if headline %}
<div class="max-w-screen-xl mx-auto">
{% render "@headline", headline %}
</div>
{% endif %}
<div class="grid grid-cols-1 gap-8 {% if summaryList.length == 4 %} md:grid-cols-4 {% else %} md:grid-cols-3 {% endif %}">
{% for item in summaryList %}
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full {% if bgContrast %}bg-white {% else %} bg-grey-50 {% endif %} flex flex-col justify-start relative px-6 py-7 {% if summaryList.length == 4 %} xl:px-8 xl:py-10 {% else %} xl:px-13 xl:py-14 {% endif %}">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
{% if item.icon %}
<div class="w-full h-16">
{% render "@icon", { name: item.icon, modifier: "fill-current w-full h-full text-white", ariaHidden: true } %}
</div>
{% endif %}
</div>
</div>
<div>
{% if item.counter %}
<div class="block font-bold text-8xl md:text-6xl lg:text-8xl xl:text-10xl leading-tight text-alpha-700"><span data-vanilla-module="CountUp" data-number="{{ item.counter }}" data-suffix="{{item.suffix}}" data-prefix="{{item.prefix}}">0</span></div>
{% endif %}
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">{{ item.heading }}</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
{{ item.copy }}
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "BIR Pattern Library",
"headline": {
"heading": "Lorem ipsum dolor",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
"summaryList": [
{
"counter": "10",
"prefix": "",
"suffix": "",
"heading": "Lorem ipsum dolor",
"copy": " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
"icon": "icon-pin"
},
{
"counter": "100",
"prefix": "",
"suffix": "%",
"heading": "Lorem ipsum dolor",
"copy": " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
"icon": "icon-pin"
},
{
"counter": "50",
"prefix": "",
"suffix": "",
"heading": "Lorem ipsum dolor",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.",
"icon": "icon-pin"
}
],
"bgContrast": true
}
No notes defined.