<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-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 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="space-y-6 md:space-y-0 md:justify-center md:flex md:flex-wrap">
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 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>
<h2 class="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 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>
<h2 class="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
</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">
<div class="max-w-screen-xl mx-auto">
{% render "@headline",
headline %}
</div>
<div class="space-y-6 md:space-y-0 md:justify-center md:flex md:flex-wrap">
{% for item in summaryList %}
<div class="md:p-4 flex justify-center {% if summaryList.length == 4 %}md:w-6/12 lg:w-3/12{% else %}md:w-6/12 lg:w-4/12{% endif %}">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 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 %}
<span class="text-center block font-semibold text-7xl leading-tight"><span data-vanilla-module="CountUp" data-number="{{ item.counter }}" data-suffix="{{item.suffix}}" data-prefix="{{item.prefix}}">0</span></span>
{% endif %}
<h2 class="text-center font-heading font-bold leading-tight text-2xl">{{ item.heading }}</h2>
</div>
<div class="prose text-center pt-3">
<p>{{ item.copy }}</p>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "MentorKit 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": "",
"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.