Card — Design System

Examples

Simple content

A bounded surface gives one related idea a clear visual home.

Usage this month

Keep the summary and its next action together.

18,420 events

12% more than last month.

Card with header, description, and content

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@phuctech/ui/components/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Usage this month</CardTitle>
        <CardDescription>Keep the summary and its next action together.</CardDescription>
      </CardHeader>
      <CardContent>18,420 events</CardContent>
    </Card>
  );
}

Header and footer

Heading hierarchy and the next action stay in their named regions.

Workspace settings

Review the current configuration.

Last updated 8 minutes ago.

Card with footer action

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@phuctech/ui/components/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Usage this month</CardTitle>
        <CardDescription>Keep the summary and its next action together.</CardDescription>
      </CardHeader>
      <CardContent>18,420 events</CardContent>
    </Card>
  );
}

Grouped actions

Actions remain real buttons or links in the footer.

Draft release

Two actions with clear emphasis.

Card with grouped actions

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@phuctech/ui/components/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Usage this month</CardTitle>
        <CardDescription>Keep the summary and its next action together.</CardDescription>
      </CardHeader>
      <CardContent>18,420 events</CardContent>
    </Card>
  );
}

Form surface

Cards can frame a form while Field keeps labels and validation connected.

Invite a teammate

Send an invitation to the workspace.

Card framing a form

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@phuctech/ui/components/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Usage this month</CardTitle>
        <CardDescription>Keep the summary and its next action together.</CardDescription>
      </CardHeader>
      <CardContent>18,420 events</CardContent>
    </Card>
  );
}

Long content

Long lists use their own scroll region instead of clipping the surface.

Recent activity

Automation run 1 completed successfully.

Automation run 2 completed successfully.

Automation run 3 completed successfully.

Automation run 4 completed successfully.

Automation run 5 completed successfully.

Automation run 6 completed successfully.

Automation run 7 completed successfully.

Automation run 8 completed successfully.

Card with bounded long content

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@phuctech/ui/components/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Usage this month</CardTitle>
        <CardDescription>Keep the summary and its next action together.</CardDescription>
      </CardHeader>
      <CardContent>18,420 events</CardContent>
    </Card>
  );
}

When to use

Use Card for a related set of content that benefits from a visual boundary. Use a plain section when grouping alone is enough, and use a Dialog when the task needs a temporary modal surface.

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@phuctech/ui/components/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Usage this month</CardTitle>
        <CardDescription>Keep the summary and its next action together.</CardDescription>
      </CardHeader>
      <CardContent>18,420 events</CardContent>
    </Card>
  );
}

Composition

Use CardHeader for the title and description, CardContent for the primary information, and CardFooter for actions. Omit a region when it does not apply; do not add empty padding wrappers.

Clear hierarchy

Keep one primary heading and place the next action in the footer.

Not a catch-all

Do not nest a full page, unrelated cards, or long unbounded lists inside one Card.

API

Component API
Prop	Type	Default	Description	Constraints
`Card`	`HTMLDivElement props`	`—`	The bounded surface and its border/elevation contract.	Use a semantic heading inside when it represents a distinct region.
`CardHeader`	`HTMLDivElement props`	`—`	Heading and supporting metadata region.	Keep the primary title in CardTitle.
`CardTitle`	`HTMLHeadingElement props`	`—`	The card heading.	Use a meaningful heading level for the page hierarchy.
`CardDescription`	`HTMLParagraphElement props`	`—`	Short supporting context.	Do not put required instructions only in this low-emphasis text.
`CardContent / CardFooter`	`HTMLDivElement props`	`—`	Body and action regions.	Use the footer for actions, not for unrelated metadata.

Tokens

Component tokens
Token	Role	Effective value	Usage
`--color-bg-surface`	Surface	`semantic card background`	Separates the card from the page without a hard-coded color.
`--radius-xl`	Surface geometry	`shared large radius`	Gives content surfaces a consistent boundary.
`--elevation-sm`	Surface depth	`shared small shadow`	Adds a quiet layer of depth; avoid stacking arbitrary shadows.

Accessibility

Use a heading inside a Card when it introduces a distinct region.
Keep actions as real buttons or links; the Card itself is not interactive by default.
Long content needs its own bounded, scrollable region rather than clipping the Card.

Do and don’t

Use Card to make related content easier to scan and keep its heading hierarchy intact.

Don’t

Use nested borders to imitate a table or make every paragraph look like a separate surface.

Badge adds a short state label inside a Card.
Dialog is the temporary, focus-managed surface for a task.
Elevation documents surface layers and shadows.