Kinetic Component Library

Header: Small 

<div class="w-full h-[300px] relative">
    <picture class="">
        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
    </picture>
    <div class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-10 h-full flex items-end relative">
        <h1 class="text-5xl font-bold text-white text-shadow-md">Mental health</h1>
    </div>
</div>
 
<div class="w-full h-[300px] 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 class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>
	
	<div class="max-w-7xl mx-auto px-4 sm:px-6 py-10 h-full flex items-end relative">
		<h1 class="text-5xl font-bold text-white text-shadow-md">Mental health</h1>
	</div>
</div>
 
{
  "image": "https://picsum.photos/1000/500?random=1"
}

No notes defined.