Card
A card component for displaying content in a container.
Card Title
Card Description
Card Content
Installation
npx shadcn@latest add cardUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
export function CardDemo() {
return (
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>
)
}Props
| Component | Props | Description |
|---|---|---|
| Card | HTMLDivElement | The main card container. |
| CardHeader | HTMLDivElement | The header section of the card. |
| CardTitle | HTMLHeadingElement | The title of the card. |
| CardDescription | HTMLParagraphElement | The description of the card. |
| CardContent | HTMLDivElement | The content section of the card. |
| CardFooter | HTMLDivElement | The footer section of the card. |