Card

Surface for grouping related content and actions. Use when a bordered container clarifies a unit of work.

Examples

Composition

Project settings

Update the name and visibility for this workspace.

Changes apply to everyone with access to the project.

Overview

Card is a presentational shell: header, title, description, content, and footer slots. It does not manage state — nest forms, lists, or actions inside as needed.

tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Button,
} from "@standard-ui/react"

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Short supporting line.</CardDescription>
  </CardHeader>
  <CardContent>Body</CardContent>
  <CardFooter>
    <Button>Continue</Button>
  </CardFooter>
</Card>

Usage

Slots

Use CardHeader for title and description, CardContent for the main body, and CardFooter for actions aligned in a row.

tsx

<CardHeader>
  <CardTitle>Billing</CardTitle>
  <CardDescription>Manage your plan and invoices.</CardDescription>
</CardHeader>
<CardContent>{/* fields or summary */}</CardContent>
<CardFooter>
  <Button variant="outline">Cancel</Button>
  <Button>Save</Button>
</CardFooter>

When to use

Prefer a card when the block is a discrete unit — a setting group, summary, or call-to-action. Skip cards for simple stacked text on a page that already has clear sections.

API

All parts render semantic HTML and accept standard attributes plus className.

Part	Element	Description
Card	div	Bordered surface container.
CardHeader	div	Top region for title and description.
CardTitle	h3	Primary heading for the card.
CardDescription	p	Secondary supporting text.
CardContent	div	Main body with default padding.
CardFooter	div	Action row, typically buttons.