<div class="js-component relative z-0 container component-spacer-margin bg-grey-50">
<div class="bg-gradient-to-b relative text-white rounded-md overflow-hidden">
<div class="flex flex-col items-center justify-center px-8 py-12 lg:py-24 relative z-10">
<div class="max-w-xl text-center">
<h2 class="text-5xl font-heading font-bold leading-tight text-grey-800">Ellentesque feugiat purus in euismod tempus</h2>
<div class="prose prose-lg mt-8 ">
<p>Nullam vel metus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="mt-8">
<a href="./.html" class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</div>
</div>
</div>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if theme %}
{% set bgColourClass = theme.bgColour %}
{% set textColourClass = theme.textColour %}
{% set richTextColourClass = theme.richTextColour %}
{% else %}
{% set bgColourClass = 'bg-grey-50' %}
{% set textColourClass = 'text-grey-800' %}
{% set richTextColourClass = '' %}
{% endif %}
<div class="js-component relative z-0 container component-spacer-margin {{ bgColourClass }}">
<div class="bg-gradient-to-b relative text-white rounded-md overflow-hidden">
<div class="flex flex-col items-center justify-center px-8 py-12 lg:py-24 relative z-10">
<div class="max-w-xl text-center">
<h2 class="text-5xl font-heading font-bold leading-tight {{ textColourClass }}">{{heading}}</h2>
<div class="prose prose-lg mt-8 {{ richTextColourClass }}">
<p>{{description}}</p>
</div>
</div>
{% if link %}
<div class="mt-8">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
</div>
{% if backgroundImage %}
<picture class="w-full h-full z-0 top-0 left-0 absolute {{ backgroundImageOpacity }}">
<img alt="" data-srcset="{{ backgroundImage | path }}" class="lazyload object-cover object-center w-full h-full" />
</picture>
{% endif %}
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"heading": "Ellentesque feugiat purus in euismod tempus",
"description": "Nullam vel metus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"link": {
"text": "Find out more",
"url": "./"
}
}
No notes defined.