<div class="js-component relative z-0 component-spacer-margin">
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Switching is easy</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl 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>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</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 z-0 {{bgClass}}">
<div class="container relative">
{% 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 flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover {% if bgContrast %}bg-white {% else %} bg-grey-50 {% endif %} {% if summaryList.length == 4 %} px-6 pb-14 lg:pb-9 {% else %} px-6 lg:px-11 pb-14 lg:pb-12 {% endif %}">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
{% 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="text-center block font-extrabold text-8xl lg:text-10xl leading-tight text-bravo"><span data-vanilla-module="CountUp" data-number="{{ item.counter }}" data-suffix="{{item.suffix}}" data-prefix="{{item.prefix}}">0</span></div>
{% endif %}
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">{{ item.heading }}</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
{{ item.copy }}
</div>
</a>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"headline": {
"preheading": "Heading Label",
"heading": "Switching is easy",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
},
"summaryList": [
{
"counter": "",
"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": "",
"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": "",
"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"
}
]
}
No notes defined.