<div class="js-component relative z-0 container component-spacer-margin">
<div class="bg-gradient-to-b relative text-white rounded-2xl overflow-hidden bg-grey-50">
<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-medium leading-tight text-bravo-900">Ellentesque feugiat purus in euismod tempus</h2>
<div class="prose prose-p:leading-snug prose-xl mt-4 ">
<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 group bg-alpha-700 text-white border-2 border-alpha-700">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</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-bravo-900' %}
{% set richTextColourClass = '' %}
{% endif %}
<div class="js-component relative z-0 container component-spacer-margin">
<div class="bg-gradient-to-b relative text-white rounded-2xl overflow-hidden {{ bgColourClass }}">
<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-medium leading-tight {{ textColourClass }}">{{heading}}</h2>
<div class="prose prose-p:leading-snug prose-xl mt-4 {{ 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": "BIR 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.