ComponentsFree
Card
Content containers for grouped information
Card
Cards group related content — title, media, summary, and actions.
Structure
- Header (title, meta)
- Media (image or icon)
- Body (text)
- Footer (actions)
Example
function ProductCard() {
return (
<div className="card">
<img src="/images/product.jpg" alt="Product" />
<div className="p-4">
<h3 className="text-lg font-semibold">Product name</h3>
<p className="text-sm text-muted-foreground">Short description.</p>
<div className="mt-3">
<button className="btn btn-primary">Buy</button>
<button className="btn btn-ghost">Details</button>
</div>
</div>
</div>
);
}Notes
- Make the entire card or specific CTA tabbable. Use role/link semantics for clickable cards.