Kinetic Component Library

Card: Video 

<div class="border border-dark/10 rounded flex flex-col overflow-hidden">
    <a href="#" class="h-[200px] 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-xl font-bold">What's normal anxiety -- and what's an anxiety disorder?</h4>
        <a href="#" class="link icon"><i class="fas fa-play-circle fa-lg"></i> Watch</a>
    </div>
</div>
 
<div class="border border-dark/10 rounded flex flex-col overflow-hidden">
	<a href="#" class="h-[200px] 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-xl font-bold">What's normal anxiety -- and what's an anxiety disorder?</h4>
		<a href="#" class="link icon"><i class="fas fa-play-circle fa-lg"></i> Watch</a>
	</div>
</div>
 
{
  "image": "http://placeimg.com/640/480/people"
}

No notes defined.