Card

Displays a card with header, content, and footer.

Default

Cards are composed of header, content, and footer slots.

Card Title

Card Description

Card Content

<Card Class="max-w-sm">
    <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
    </CardHeader>
    <CardContent>
        <p>Card Content</p>
    </CardContent>
    <CardFooter>
        <Button>Action</Button>
    </CardFooter>
</Card>

Example: Notifications

Use cards to group related content.

Notifications

You have 3 unread messages.

Your call has been confirmed.

1 hour ago

You have a new message!

2 hours ago

<Card Class="max-w-md">
    <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>You have 3 unread messages.</CardDescription>
    </CardHeader>
    <CardContent>
        <div class="space-y-4">
            <div class="flex items-start gap-4">
                <div class="h-2 w-2 rounded-full bg-primary mt-2"></div>
                <div class="space-y-1">
                    <p class="text-sm font-medium">Your call has been confirmed.</p>
                    <p class="text-sm text-muted-foreground">1 hour ago</p>
                </div>
            </div>
            <div class="flex items-start gap-4">
                <div class="h-2 w-2 rounded-full bg-primary mt-2"></div>
                <div class="space-y-1">
                    <p class="text-sm font-medium">You have a new message!</p>
                    <p class="text-sm text-muted-foreground">2 hours ago</p>
                </div>
            </div>
        </div>
    </CardContent>
    <CardFooter>
        <Button Class="w-full">Mark all as read</Button>
    </CardFooter>
</Card>