<div class="container component-spacer-margin">
<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">Title that can be a couple lines</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. Nunc nunc pulvinar adipiscing vitae. Lorem convallis lorem diam ornare. Sed ornare et diam risus arcu id.</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">
Click here
</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 class="grid gap-6 md:grid-cols-3 md:grid-rows-1">
<div>
<a class="w-full h-full block transition ease-in-out duration-300 hover:shadow-xl group rounded-2xl overflow-hidden relative before:h-[80%] before:opacity-60 before:bg-gradient-to-t before:from-black before:to-transparent before:w-full before:bottom-0 before:left-0 before:absolute before:z-10 " href="./index.html">
<div class=" absolute text-white w-full p-7 bottom-0 z-20 ">
<div>
<div class="flex-2 flex gap-5 justify-between items-end">
<h2 class=" text-white font-bold block text-xl md:text-2xl ">Title that can be a couple lines</h2>
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@1-1@1200w.jpg">
</picture>
</a>
</div>
<div>
<a class="w-full h-full block transition ease-in-out duration-300 hover:shadow-xl group rounded-2xl overflow-hidden relative before:h-[80%] before:opacity-60 before:bg-gradient-to-t before:from-black before:to-transparent before:w-full before:bottom-0 before:left-0 before:absolute before:z-10 " href="./index.html">
<div class=" absolute text-white w-full p-7 bottom-0 z-20 ">
<div>
<div class="flex-2 flex gap-5 justify-between items-end">
<h2 class=" text-white font-bold block text-xl md:text-2xl ">Title that can be a couple lines</h2>
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@1-1@1200w.jpg">
</picture>
</a>
</div>
<div>
<a class="w-full h-full block transition ease-in-out duration-300 hover:shadow-xl group rounded-2xl overflow-hidden relative before:h-[80%] before:opacity-60 before:bg-gradient-to-t before:from-black before:to-transparent before:w-full before:bottom-0 before:left-0 before:absolute before:z-10 " href="./index.html">
<div class=" absolute text-white w-full p-7 bottom-0 z-20 ">
<div>
<div class="flex-2 flex gap-5 justify-between items-end">
<h2 class=" text-white font-bold block text-xl md:text-2xl ">Title that can be a couple lines</h2>
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="-rotate-90 group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@1-1@1200w.jpg">
</picture>
</a>
</div>
</div>
</div>
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
<div class="container component-spacer-margin">
{% render "@headline", headline %}
{% if twoItems %}
<div class="grid gap-6 md:grid-cols-2 md:grid-rows-1">
<div>
{% render "@image-card", card1, true %}
</div>
<div>
{% render "@image-card", card2, true %}
</div>
</div>
{% elseif threeItems %}
<div class="grid gap-6 md:grid-cols-3 md:grid-rows-1">
<div>
{% render "@image-card", card1, true %}
</div>
<div>
{% render "@image-card", card2, true %}
</div>
<div>
{% render "@image-card", card3, true %}
</div>
</div>
{% elseif fourItems %}
<div class="grid gap-6 md:grid-cols-2 md:grid-rows-2 xl:grid-cols-4 xl:grid-rows-1">
<div>
{% render "@image-card", card1, true %}
</div>
<div>
{% render "@image-card", card2, true %}
</div>
<div>
{% render "@image-card", card3, true %}
</div>
<div>
{% render "@image-card", card4, true %}
</div>
</div>
{% else %}
<div class="cta-grid-5">
<div>
{% render "@image-card--large", card1, true %}
</div>
<div>
{% render "@image-card", card2, true %}
</div>
<div>
{% render "@image-card", card3, true %}
</div>
<div>
{% render "@image-card", card4, true %}
</div>
<div>
{% render "@image-card", card5, true %}
</div>
</div>
{% endif %}
</div>
{
"siteName": "Gigaclear Pattern Library",
"headline": {
"heading": "Title that can be a couple lines",
"preheading": "Heading Label",
"summary": "Lorem ipsum dolor sit amet consectetur. Nunc nunc pulvinar adipiscing vitae. Lorem convallis lorem diam ornare. Sed ornare et diam risus arcu id.",
"link": {
"text": "Click here",
"url": "./index"
}
},
"card1": {
"heading": "Title that can be a couple lines",
"description": "Sed luctus arcu tincidunt felis elementum, a venenatis justo dignissim. Vestibulum ornare neque eu hendrerit bibendum. ",
"url": "./index",
"image": {
"src": "images/test-imagery/example3@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example3@1-1@1200w.jpg",
"size": "1200"
}
]
}
},
"card2": {
"heading": "Title that can be a couple lines",
"description": "Sed luctus arcu tincidunt felis elementum, a venenatis justo dignissim. Vestibulum ornare neque eu hendrerit bibendum. ",
"url": "./index",
"image": {
"src": "images/test-imagery/example4@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example4@1-1@1200w.jpg",
"size": "1200"
}
]
}
},
"card3": {
"heading": "Title that can be a couple lines",
"description": "Sed luctus arcu tincidunt felis elementum, a venenatis justo dignissim. Vestibulum ornare neque eu hendrerit bibendum. ",
"url": "./index",
"image": {
"src": "images/test-imagery/example5@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example5@1-1@1200w.jpg",
"size": "1200"
}
]
}
},
"card4": {
"heading": "Title that can be a couple lines",
"description": "Sed luctus arcu tincidunt felis elementum, a venenatis justo dignissim. Vestibulum ornare neque eu hendrerit bibendum. ",
"url": "./index",
"image": {
"src": "images/test-imagery/example4@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example4@1-1@1200w.jpg",
"size": "1200"
}
]
}
},
"card5": {
"heading": "Title that can be a couple lines",
"description": "Sed luctus arcu tincidunt felis elementum, a venenatis justo dignissim. Vestibulum ornare neque eu hendrerit bibendum. ",
"url": "./index",
"image": {
"src": "images/test-imagery/example5@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example5@1-1@1200w.jpg",
"size": "1200"
}
]
}
},
"threeItems": true
}
No notes defined.