Card
Container for related content and actions.
Usage
<a class="flex flex-col bg-background border border-black-100 dark:border-black-500 rounded-12px min-w-[200px] no-underline transition-all overflow-hidden hover:shadow-lg">
<div class="aspect-[30/25] w-full bg-black-50 dark:bg-black-800">
<!-- <img src="*your-path-to-image*"
class="h-full w-full object-cover"
loading="lazy"
alt="image caption" /> -->
</div>
<div class="flex flex-col p-16px gap-16px">
<div class="flex flex-col gap-4px">
<p class="text-h8">Card title</p>
<p class="text-p2">Card description.</p>
</div>
<div class="flex gap-16px items-center text-black-700 dark:text-black-200">
<div class="flex gap-12px items-center">
<div class="flex rounded-full w-32px h-32px overflow-hidden">
<img src="https://images.unsplash.com/flagged/photo-1595514191830-3e96a518989b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3ODgwODB8MHwxfGFsbHx8fHx8fHx8fDE3NTY1NzI0NzB8&ixlib=rb-4.1.0&q=80&w=200&utm_source=Kaida&utm_medium=referral&utm_campaign=api-credit"
class="object-cover w-full h-full"
loading="lazy"
alt="temp avatar" />
</div>
<p class="text-p2">John Doe</p>
</div>
<div class="h-12px w-[1px] bg-black-200"></div>
<p class="text-p3">Sep 6, 2024</p>
</div>
</div>
</a>
