Kinetic Component Library

CTA: Card with Image 

<div class="rounded flex flex-col overflow-hidden relative bg-dark">
    <picture class="opacity-60">
        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random&#x3D;1 800w, https://picsum.photos/640/480?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;1">
    </picture>
    <div class="flex-1 py-20 px-16 sm:px-20 space-y-8 text-center text-light relative">
        <h3 class="text-4xl font-bold text-shadow-md">Gift a coffee</h3>
        <div class="text-xl text-shadow-md">Why not check-in with a co-worker over a coffee?</div>
        <a href="#" class="btn btn-light">Redeem a voucher</a>
    </div>
</div>
 
<div class="rounded flex flex-col overflow-hidden relative bg-dark">
	<picture class="opacity-60">
		<img class="absolute w-full h-full object-cover" srcset="{{image}} 800w, {{image}} 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="{{image}}">
	</picture>
	<div class="flex-1 py-20 px-16 sm:px-20 space-y-8 text-center text-light relative">
		<h3 class="text-4xl font-bold text-shadow-md">Gift a coffee</h3>
		<div class="text-xl text-shadow-md">Why not check-in with a co-worker over a coffee?</div>
		<a href="#" class="btn btn-light">Redeem a voucher</a>
	</div>
</div>
 
{
  "image": "https://picsum.photos/640/480?random=1",
  "left": true,
  "right": true
}

No notes defined.