Card
Displays a card with header, content, and footer.
Card Title
Card Description
Card Content
Card Footer
Installation
npx shadcn@latest add https://exawizards.com/exabase/design/registry/card.json
Usage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
<CardFooter>
<p>Card Footer</p>
</CardFooter>
</Card>
API
Props of each element are available.
Component | Element |
---|---|
Card | div |
CardHeader | div |
CardTitle | p |
CardDescription | p |
CardContent | div |
CardFooter | div |