<div class="container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Lorem ispum dolor</h2>
</div>
<div class="cta-grid-5">
<div>
<a class="block transition ease-in-out duration-300 hover:shadow-xl group rounded-md 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 lg:px-12">
<div class="flex items-end">
<div class="w-8/12">
<h2 class=" text-white font-bold block leading-none text-5xl md:text-7xl">Lorem ipsum dolor sit amet</h2>
<p class="hidden md:block text-xl mt-2 leading-tight">Sed luctus arcu tincidunt felis elementum, a venenatis justo dignissim. Vestibulum ornare neque eu hendrerit bibendum. </p>
</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/example1@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@1-1@1200w.jpg">
</picture>
</a>
</div>
<div>
<a class="block transition ease-in-out duration-300 hover:shadow-xl group rounded-md 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 class="flex items-end">
<div class="w-8/12">
<h2 class=" text-white font-bold block leading-none text-3xl md:text-3xl">Lorem ipsum dolor sit amet</h2>
</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/example2@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@1-1@1200w.jpg">
</picture>
</a>
</div>
<div>
<a class="block transition ease-in-out duration-300 hover:shadow-xl group rounded-md 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 class="flex items-end">
<div class="w-8/12">
<h2 class=" text-white font-bold block leading-none text-3xl md:text-3xl">Lorem ipsum dolor sit amet</h2>
</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="block transition ease-in-out duration-300 hover:shadow-xl group rounded-md 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 class="flex items-end">
<div class="w-8/12">
<h2 class=" text-white font-bold block leading-none text-3xl md:text-3xl">Lorem ipsum dolor sit amet</h2>
</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="block transition ease-in-out duration-300 hover:shadow-xl group rounded-md 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 class="flex items-end">
<div class="w-8/12">
<h2 class=" text-white font-bold block leading-none text-3xl md:text-3xl">Lorem ipsum dolor sit amet</h2>
</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>
<div class="container component-spacer-margin">
{% render "@headline", headline %}
<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>
</div>
{
"siteName": "MentorKit Pattern Library",
"headline": {
"heading": "Lorem ispum dolor"
},
"card1": {
"heading": "Lorem ipsum dolor sit amet",
"description": "Sed luctus arcu tincidunt felis elementum, a venenatis justo dignissim. Vestibulum ornare neque eu hendrerit bibendum. ",
"url": "./index",
"image": {
"src": "images/test-imagery/example1@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example1@1-1@1200w.jpg",
"size": "1200"
}
]
}
},
"card2": {
"heading": "Lorem ipsum dolor sit amet",
"description": "Sed luctus arcu tincidunt felis elementum, a venenatis justo dignissim. Vestibulum ornare neque eu hendrerit bibendum. ",
"url": "./index",
"image": {
"src": "images/test-imagery/example2@1-1@1200w.jpg",
"width": 1200,
"height": 1200,
"srcSet": [
{
"url": "images/test-imagery/example2@1-1@1200w.jpg",
"size": "1200"
}
]
}
},
"card3": {
"heading": "Lorem ipsum dolor sit amet",
"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"
}
]
}
},
"card4": {
"heading": "Lorem ipsum dolor sit amet",
"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": "Lorem ipsum dolor sit amet",
"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"
}
]
}
}
}
No notes defined.