<div class="js-component relative component-spacer-margin">
<div class=" absolute top-0 left-0 w-full h-full angled-mask-media-content z-0"></div>
<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">Lorem ipsum dolor</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 class="mt-12">
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="relative z-0 rounded-2xl lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 lg:angled-mask">
<div class="relative w-full h-full rounded-2xl">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0 rounded-2xl" muted autoplay loop playsinline>
<source src="https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if flipped %}
{% set imageContainer = 'order-1 lg:col-start-1 lg:col-end-8 lg:row-start-1 lg:angled-mask-flipped' %}
{% set descriptionContainer = 'order-2 lg:col-start-8 col-end-14 lg:justify-end' %}
{% else %}
{% set imageContainer = 'lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 lg:angled-mask' %}
{% set descriptionContainer = 'lg:order-none lg:col-start-2 lg:col-end-8 relative' %}
{% endif %}
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
{% if theme %}
{% set bgColourClass = theme.bgColour %}
{% set textColourClass = theme.textColour %}
{% set richTextColourClass = theme.richTextColour %}
{% set bgClass = theme.bgColour %}
{% set spacer = "component-spacer-padding" %}
{% else %}
{% set bgColourClass = 'bg-grey-50' %}
{% set textColourClass = 'text-grey-800' %}
{% set richTextColourClass = '' %}
{% set bgClass = "" %}
{% set spacer = "component-spacer-margin" %}
{% endif %}
<div class="js-component relative {{ spacer }}">
<div class="{{bgClass}} absolute top-0 left-0 w-full h-full angled-mask-media-content z-0"></div>
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
{% render "@headline", headline %}
</div>
<div class="relative z-0 rounded-2xl {{imageContainer}}">
{% if image %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, modifier: 'h-full object-cover rounded-2xl', frameModifier: 'h-full rounded-2xl', width: 1200, height: 750 } %}
{% elseif backgroundVideo %}
<div class="relative w-full h-full rounded-2xl">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0 rounded-2xl" muted autoplay loop playsinline>
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
</div>
{% endif %}
</div>
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"componentModifier": "text-center",
"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.",
"link": {
"text": "Find out more",
"url": "./index"
},
"preheading": "Heading Label"
},
"icon": "icon-play",
"image": "",
"heading": "Check this out - with video button",
"description": "Mauris ultricies arcu rhoncus, venenatis nibh non, malesuada nisl. Nam varius finibus lectus at molestie. Proin venenatis nisi eu erat consectetur, sed gravida odio laoreet.",
"backgroundVideo": {
"src": "https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175"
},
"link": {
"text": "Play full video",
"url": "https://www.youtube.com/embed/vqNZngMjgko",
"modal": true,
"id": "video-modal-1234",
"renderAsButton": true
}
}
No notes defined.