Card

Quick Preview

Composition

Use this public composition when building Card:

Card
├── CardAction (optional)
├── CardHeader
│   ├── CardTitle
│   └── CardDescription
├── CardContent
└── CardFooter

Usage

<Card>
  <CardHeader>
    <CardTitle>Pre-approval</CardTitle>
    <CardDescription>Complete your affordability check.</CardDescription>
  </CardHeader>
  <CardContent>Ready for review.</CardContent>
  <CardFooter>
    <Button>Continue</Button>
  </CardFooter>
</Card>

Examples

Default Card

Use this as the starting point for Card. Keep product data, routing, fetching, and authorization logic in the consuming app.

Multiple Selection with Checkboxes

Use a controlled Checkbox when people can select more than one option. Rendering CardAction as a label makes the full card a pointer target while the checkbox remains the keyboard-accessible control.

PreviewCode

Select Cedar House

Selected

Cedar House

Lekki, Lagos

3 beds · 3.5 baths

₦120,000,000

Select Olive Terrace

Select

Olive Terrace

Maitama, Abuja

4 beds · 4 baths

₦185,000,000

Select Coral Apartment

Select

Coral Apartment

Ikoyi, Lagos

2 beds · 2 baths

₦95,000,000

Selection with an Explicit Button

Use a button when selection should be a deliberate action rather than an implicit card click. Pass the same state to Card.selected and the button's aria-pressed attribute.

Single Selection with Radio Cards

Use a RadioGroup when exactly one option can be selected. Each CardAction is rendered as a label so the full card selects its associated radio item.

PreviewCode

Choose The Townhouse

The Townhouse

Banana Island, Lagos

From ₦240m

Choose Garden Bungalow

Garden Bungalow

Asokoro, Abuja

From ₦175m

Interaction Patterns

• Use selected only for presentation; keep the selection state in a checkbox, radio group, or button in the consuming app.
• Use CardAction for whole-card interaction instead of rendering the Card itself as a button or link.
• Render CardAction as a label associated with a checkbox or radio item when the form control owns selection.
• Add className="relative z-20" to secondary controls inside a card with CardAction so they remain above its full-card target.

Props

Accessibility

• Preserve the documented Card composition so labels, triggers, content, and controls remain connected.
• Match Card.selected to the checked or pressed state of the control that owns selection.
• Provide visible labels or accessible names for interactive controls.
• Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
• Do not communicate state with color alone; include text, icons, or helper copy.