Display

Card

A surface for one thing: header with title, description and an action, content, footer. A leading image bleeds to the edges.

packages/design-system/components/ui/card.tsx

Examples

Brand sprint
Two weeks, one team, a finished identity.
Popular
Kickoff, two rounds of concepts and a handover with every file.
Header, action, content, footer
Builtwell placeholder artwork
Case study
A fintech brand, from zero to launch.
Small, and with a leading image

Anatomy

  1. 01Card, rounded-4xl with a shadow
  2. 02Header: title, description, action top right
  3. 03Content
  4. 04Footer

Usage

import {
  Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
} from "@repo/design-system/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Brand sprint</CardTitle>
    <CardDescription>Two weeks, one team.</CardDescription>
    <CardAction><Badge variant="secondary">Popular</Badge></CardAction>
  </CardHeader>
  <CardContent>...</CardContent>
  <CardFooter><Button>Book a call</Button></CardFooter>
</Card>

Props

PropTypeDefaultDescription
size"default" | "sm""default"Sets --card-spacing: 24px, or 16px for sm. Every part reads it.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Let the card spacing do the work; don't pad the parts.

Don't

  • Nest cards.
  • Make the whole card a link and put buttons inside it.

Where it's used