Card
Displays content in a structured container with an optional header, content, and footer.
Last updated January 1, 1980
CreditsUnchangedPublished
Copied from shadcn/ui.
Overview
Installation
Usage
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
export function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
<CardAction>Card Action</CardAction>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>
)
}Examples
Size
Use size="sm" for a compact card with smaller spacing.
Image
Add an image before the card header to create a card with an image.
RTL
Product card
A Persian e-commerce pattern: Toman pricing with a discount badge and a right-to-left price line.
API Reference
Card
API reference: shadcn/ui Card .