Card

Card is the base surface for grouped content — a rounded, bordered box with a subtle shadow and an adjustable padding scale (none, sm, md, lg). Drop any content inside it, or compose the parts below for a structured layout.

Example

Anatomy

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Button,
} from '@officina/ui';

<Card>
  <CardHeader>
    <div>
      <CardTitle>Acme Operations</CardTitle>
      <CardDescription>Growth plan — renews May 11, 2026.</CardDescription>
    </div>
    <Button size="sm" variant="soft">
      Manage
    </Button>
  </CardHeader>
  <CardContent>
    <p>Compose header, content, and footer to build a card surface.</p>
  </CardContent>
  <CardFooter>
    <Button size="sm">Save</Button>
  </CardFooter>
</Card>;

Every part is optional. A Card with nothing but children is valid; reach for the parts when you want the padding, dividers, and heading semantics handled for you.

API

Card

The surface itself.

CardHeader

The top section. Lays children out in a row with space between them, so a title/description block sits on the left and an action sits on the right, with padding below separating it from the content. Use it as the first child.

CardHeader is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

CardTitle

The card's heading — a semantic <h3> sized and weighted for a card surface. Goes inside CardHeader, typically above a CardDescription.

CardTitle is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

CardDescription

The small, muted supporting line under a CardTitle — a styled <p> for a subtitle, status, or one-line summary.

CardDescription is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

CardContent

The body region: an unstyled wrapper marking the main content between header and footer, so a card's sections read in a predictable order.

CardContent is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

CardFooter

The bottom section. Draws a top border and lays children out in a row — the place for action buttons or summary metadata. Use it as the last child.

CardFooter is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.