Kinetic Component Library

Card: PREVIEW 

<div class="my-20 grid sm:grid-cols-2 gap-8 lg:gap-16">
    <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="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>

<div class="my-20 grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
    <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="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="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>

<hr>

<div class="my-20 grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-16">
    <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="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="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="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>

<hr>

<div class="my-20 grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-16">
    <div class="bg-blue-light rounded flex flex-col overflow-hidden">
        <div class="h-[130px] relative" 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>
        </div>
        <div class="flex-1 p-6 relative">
            <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                <i class="fas fa-file-pdf fa-lg"></i>
            </div>
            <h4 class="text-2xl font-bold">Document title</h4>
            <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
            <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
        </div>
        <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
            <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
            <i class="fas fa-arrow-circle-down fa-2x"></i>
        </a>
    </div>
    <div class="bg-blue-light rounded flex flex-col overflow-hidden">
        <div class="h-[130px] relative" 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>
        </div>
        <div class="flex-1 p-6 relative">
            <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                <i class="fas fa-file-pdf fa-lg"></i>
            </div>
            <h4 class="text-2xl font-bold">Document title</h4>
            <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
            <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
        </div>
        <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
            <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
            <i class="fas fa-arrow-circle-down fa-2x"></i>
        </a>
    </div>
    <div class="bg-blue-light rounded flex flex-col overflow-hidden">
        <div class="h-[130px] relative" 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>
        </div>
        <div class="flex-1 p-6 relative">
            <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                <i class="fas fa-file-pdf fa-lg"></i>
            </div>
            <h4 class="text-2xl font-bold">Document title</h4>
            <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
            <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
        </div>
        <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
            <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
            <i class="fas fa-arrow-circle-down fa-2x"></i>
        </a>
    </div>
    <div class="bg-blue-light rounded flex flex-col overflow-hidden">
        <div class="h-[130px] relative" 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>
        </div>
        <div class="flex-1 p-6 relative">
            <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                <i class="fas fa-file-pdf fa-lg"></i>
            </div>
            <h4 class="text-2xl font-bold">Document title</h4>
            <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
            <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
        </div>
        <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
            <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
            <i class="fas fa-arrow-circle-down fa-2x"></i>
        </a>
    </div>
</div>
 
<div class="my-20 grid sm:grid-cols-2 gap-8 lg:gap-16">
		{{> @card--standard}}
		{{> @card--standard}}
	</div>
	
	<div class="my-20 grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
		{{> @card--standard}}
		{{> @card--standard}}
		{{> @card--standard}}
	</div>
	
	<hr>
	
	<div class="my-20 grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-16">
		{{> @card--video}}
		{{> @card--video}}
		{{> @card--video}}
		{{> @card--video}}
	</div>
	
	<hr>
	
	<div class="my-20 grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-16">
		{{> @card--document}}
		{{> @card--document}}
		{{> @card--document}}
		{{> @card--document}}
	</div>
 
{
  "image": "http://placeimg.com/640/480/people"
}

No notes defined.