Kinetic Component Library

CTA: Large: Full Width 

<!-- image left -->
<div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
    <div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute">
        <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="max-w-7xl mx-auto px-4 sm:px-6 flex justify-end">
        <div class="md:w-1/2 p-8 sm:p-16 space-y-8">
            <h3 class="text-4xl sm: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>
</div>
<!-- image right -->
<div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
    <div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute right-0">
        <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="max-w-7xl mx-auto px-4 sm:px-6 flex justify-start">
        <div class="md:w-1/2 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>
</div>
 
{{#if left}}
<!-- image left -->
<div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
	<div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute">
		<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="max-w-7xl mx-auto px-4 sm:px-6 flex justify-end">
		<div class="md:w-1/2 p-8 sm:p-16 space-y-8">
			<h3 class="text-4xl sm: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>
</div>
{{/if}}
{{#if right}}
<!-- image right -->
<div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
	<div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute right-0">
		<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="max-w-7xl mx-auto px-4 sm:px-6 flex justify-start">
		<div class="md:w-1/2 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>
</div>
{{/if}}
 
{
  "image": "https://picsum.photos/640/480?random=1",
  "left": true,
  "right": true
}

No notes defined.