Components
Card
Product and content card patterns composed using utility classes.
Cards are composed using utility classes. Wrap bg-card text-card-foreground in a rounded-md shadow-sm overflow-clip container, then structure header, media, text, and footer elements using utilities.
Default
Loading components…
<a class="grid cursor-pointer" href="#"> <div class="grid gap-sm bg-card text-card-foreground rounded-md shadow-sm overflow-clip"> <figure class="grid aspect-landscape rounded-t-md overflow-clip"> <img class="size-full object-cover hover:scale-102 hover:opacity-75 transition" width="300" height="200" loading="lazy" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?auto=format&fit=crop&w=300&h=200&q=60" alt="Elephants crossing a dusty riverbed" /> </figure> <div class="grid gap-sm px-sm pb-sm"> <header class="grid gap-xs"> <div class="flex items-center gap-xs"> <span class="ui-badge" data-variant="muted">Research</span> </div> <hgroup class="grid gap-xs"> <h3 class="text-lg font-heading">Migration patterns</h3> <p class="text-sm text-muted-foreground line-clamp-2"> Satellite collars reveal ancient routes herds still follow each dry season across the floodplain. </p> </hgroup> </header> <footer class="grid justify-start gap-sm pt-sm border-t"> <div class="flex items-center gap-xs"> <figure class="grid grid-area-pile border size-lg rounded-full overflow-clip" role="img"> <img class="size-full object-cover order-last bg-transparent" width="64" height="64" loading="lazy" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=facearea&facepad=2&w=64&h=64&q=90" alt="John Doe" aria-hidden="true" /> <figcaption class="order-first size-full bg-primary text-primary-foreground flex items-center justify-center text-center text-md font-strong" > <span class="sr-only">John Doe</span> <span aria-hidden="true">JD</span> </figcaption> </figure> <div class="flex flex-col"> <span class="text-sm font-strong leading-none">John Doe</span> <span class="text-xs text-muted-foreground">Founder, ACME Inc.</span> </div> </div> </footer> </div> </div></a>Subgrid alignment
Use grid-rows-* and grid-rows-subgrid to align card headers, content, and actions across columns:
Loading components…
<div class="grid grid-rows-3 grid-cols-2 gap-md"> <a class="grid grid-rows-subgrid row-span-3 cursor-pointer" href="#"> <div class="grid grid-rows-subgrid row-span-3 gap-sm bg-card text-card-foreground rounded-md shadow-sm overflow-clip" > <figure class="grid grid-rows-subgrid row-span-1 aspect-landscape rounded-t-md overflow-clip"> <img class="size-full object-cover hover:scale-102 hover:opacity-75 transition" width="300" height="200" loading="lazy" src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?auto=format&fit=crop&w=300&h=200&q=60" alt="Elephants crossing a dusty riverbed" /> </figure> <div class="grid grid-rows-subgrid row-span-2 gap-sm px-sm pb-sm"> <header class="grid gap-xs"> <div class="flex items-center gap-xs"> <span class="ui-badge" data-variant="muted">Research</span> </div> <hgroup class="grid gap-xs"> <h3 class="text-lg font-heading">Migration patterns</h3> <p class="text-sm text-muted-foreground line-clamp-2"> Satellite collars reveal ancient routes herds still follow each dry season across the floodplain. </p> </hgroup> </header> <footer class="grid justify-start gap-sm pt-sm border-t"> <div class="flex items-center gap-xs"> <figure class="grid grid-area-pile border size-lg rounded-full overflow-clip" role="img" > <img class="size-full object-cover order-last bg-transparent" width="64" height="64" loading="lazy" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=facearea&facepad=2&w=64&h=64&q=90" alt="John Doe" aria-hidden="true" /> <figcaption class="order-first size-full bg-primary text-primary-foreground flex items-center justify-center text-center text-md font-strong" > <span class="sr-only">John Doe</span> <span aria-hidden="true">JD</span> </figcaption> </figure> <div class="flex flex-col"> <span class="text-sm font-strong leading-none">John Doe</span> <span class="text-xs text-muted-foreground">Founder, ACME Inc.</span> </div> </div> </footer> </div> </div> </a> <a class="grid grid-rows-subgrid row-span-3 cursor-pointer" href="#"> <div class="grid grid-rows-subgrid row-span-3 gap-sm bg-card text-card-foreground rounded-md shadow-sm overflow-clip" > <figure class="grid grid-rows-subgrid row-span-1 aspect-landscape rounded-t-md overflow-clip"> <img class="size-full object-cover hover:scale-102 hover:opacity-75 transition" width="300" height="200" loading="lazy" src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=300&h=200&q=60" alt="Zebras grazing at dawn on the savanna" /> </figure> <div class="grid grid-rows-subgrid row-span-2 gap-sm px-sm pb-sm"> <header class="grid gap-xs"> <div class="flex items-center gap-xs"> <span class="ui-badge" data-variant="muted">Field notes</span> </div> <hgroup class="grid gap-xs"> <h3 class="text-lg font-heading">How quickly zebras jump</h3> <p class="text-sm text-muted-foreground line-clamp-2"> Striped coats and sudden bursts of speed help herds evade predators when the grasslands go quiet at dusk. </p> </hgroup> </header> <footer class="grid justify-end gap-sm pb-xs pt-sm border-t"> <div class="ui-button" data-variant="link"> Read article <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </div> </footer> </div> </div> </a></div>