Kinetic Component Library

CTA: Large: Contained 

<!-- image left -->
<div class="border border-dark/10 rounded flex flex-col md:flex-row overflow-hidden mb-10">
    <div class="aspect-[16/9] md:aspect-auto w-full md:w-1/2 relative">
        <picture class="">
            <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>
    <div class="flex-1 p-8 sm:p-16 space-y-8">
        <h3 class="text-4xl font-bold">Time to talk</h3>
        <div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
        </div>
        <a href="#" class="link link-lg">Find out more</a>
    </div>
</div>
<!-- image right -->
<div class="border border-dark/10 rounded flex flex-col md:flex-row overflow-hidden mb-10">
    <div class="aspect-[16/9] md:aspect-auto w-full md:w-1/2 relative md:order-last">
        <picture class="">
            <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>
    <div class="flex-1 p-8 sm:p-16 space-y-8">
        <h3 class="text-4xl font-bold">Time to talk</h3>
        <div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
        </div>
        <a href="#" class="link link-lg">Find out more</a>
    </div>
</div>
 
{{#if left}}
<!-- image left -->
<div class="border border-dark/10 rounded flex flex-col md:flex-row overflow-hidden mb-10">
	<div class="aspect-[16/9] md:aspect-auto w-full md:w-1/2 relative">
		<picture class="">
			<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>
	<div class="flex-1 p-8 sm:p-16 space-y-8">
		<h3 class="text-4xl font-bold">Time to talk</h3>
		<div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
			</div>
		<a href="#" class="link link-lg">Find out more</a>
	</div>
</div>
{{/if}}
{{#if right}}
<!-- image right -->
<div class="border border-dark/10 rounded flex flex-col md:flex-row overflow-hidden mb-10">
	<div class="aspect-[16/9] md:aspect-auto w-full md:w-1/2 relative md:order-last">
		<picture class="">
			<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>
	<div class="flex-1 p-8 sm:p-16 space-y-8">
		<h3 class="text-4xl font-bold">Time to talk</h3>
		<div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
			</div>
		<a href="#" class="link link-lg">Find out more</a>
	</div>
</div>
{{/if}}
 
{
  "image": "https://picsum.photos/640/480?random=1",
  "left": true,
  "right": true
}

No notes defined.