Card

A raised container with 12px corners, a default border, 24px padding and a 16px gap. Title in Poppins / text-xl / semibold.

Figma: 10 / Components / Card

Supporter growth

New supporters in January 2026

350

Across four channels

Usage

Source: src/components/ui/card.tsx

import {
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle
} from '@/components/ui/card'

<Card>
    <CardHeader>
        <CardTitle>Supporter growth</CardTitle>
        <CardDescription>New supporters this month</CardDescription>
    </CardHeader>
    <CardContent>{/* content */}</CardContent>
</Card>

When to use

When to reach for it, and when to use something else.

Use it for

Grouping one topic on a dashboard or form.

Inside Layout/Container when a page needs several separate surfaces.

Avoid

Cards inside cards.

Changing the corner radius or shadow; cards stay flat with a border.

API reference

Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter

Prop	Type	Default	Description
className	string	–	Layout adjustments only, such as width.

PreviousButton NextCheckbox