Kinetic Component Library

Card: Standard 

<div class="border border-dark/10 rounded flex flex-col overflow-hidden">
    <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
        <picture class="">
            <img class="absolute w-full h-full object-cover" srcset="http://placeimg.com/640/480/people 800w, http://placeimg.com/640/480/people 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="http://placeimg.com/640/480/people">
        </picture>
    </a>
    <div class="flex-1 p-8 space-y-4">
        <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
        <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
        <a href="#" class="link">Find out more</a>
    </div>
</div>
 
<div class="border border-dark/10 rounded flex flex-col overflow-hidden">
	<a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
		<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>
	</a>
	<div class="flex-1 p-8 space-y-4">
		<h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
		<div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
		<a href="#" class="link">Find out more</a>
	</div>
</div>
 
{
  "image": "http://placeimg.com/640/480/people"
}

No notes defined.