Card

DESIGN GUIDE · 6 MIN READ

Designing for clarity

Make complex interfaces easier to read, navigate and trust.

Product team · Oct 04, 2026

Installation

npx paubha@latest add card

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardEyebrow,
  CardFooter,
  CardHeader,
  CardImage,
  CardMeta,
  CardTitle,
} from "@/components/ui/card";

<Card>
  <CardImage src="/photo.jpg" alt="" />
  <CardContent>
    <CardHeader>
      <CardEyebrow>DESIGN GUIDE · 6 MIN READ</CardEyebrow>
      <CardTitle>Designing for clarity</CardTitle>
      <CardDescription>Make complex interfaces easier to read, navigate and trust.</CardDescription>
    </CardHeader>
    <CardFooter>
      <CardMeta>Product team · Oct 04, 2026</CardMeta>
      <Button variant="link" size="sm" trailingIcon={<ArrowRight />}>Read the guide</Button>
    </CardFooter>
  </CardContent>
</Card>

Anatomy

CardImage: optional 160px media slot.
CardContent: body region, 32px padding, 16px between blocks.
CardHeader: groups CardEyebrow, CardTitle and CardDescription (12px apart).
CardFooter: divider-topped region with a CardMeta line and an optional action.

Examples

States

DESIGN GUIDE · 6 MIN READ

Designing for clarity

Make complex interfaces easier to read, navigate and trust.

Access unavailable

DESIGN GUIDE · 6 MIN READ

Designing for clarity

Make complex interfaces easier to read, navigate and trust.

Couldn’t sync. Try again.

Variants

default

Card content preview.

outlined

Card content preview.

elevated

Card content preview.

Interactive

Clickable card

Entire card is a role="button"; Enter/Space activates it.

API reference

Prop	Type	Default	Description
variant	"default" \| "outlined" \| "elevated"	"default"	Visual style of the container.
onClick	(event: MouseEvent) => void	—	Makes the card interactive: role="button", focusable, Enter/Space activates.
disabled	boolean	false	Muted surface and text; sets aria-disabled and blocks activation on interactive cards.
error	boolean	false	Error-subtle surface and error border; CardMeta switches to the error color.

Accessibility

Static cards. Rendered with role="article".
Interactive cards. Passing onClick switches the card to role="button", adds tabIndex=0, and wires Enter/Space to activate it, matching a real button.
Tab order. Interactive elements nested inside a card (e.g. a secondary link or button) remain independently focusable via Tab.
Focus ring. Visible on Tab via shadow-glow-focus, only on interactive cards.
Disabled. disabled sets aria-disabled, removes an interactive card from the tab order, and blocks activation.
Error. The error state is never color-only: put the message in CardMeta so it is read as text.
Contrast. Ensure sufficient color contrast between the card background and its content text: all variants use semantic foreground/background tokens that meet this by default.

When to use

Use to group related content: product listings, user profiles, dashboard widgets, article previews. Cards work best in grids or lists.

Do:

Keep a clear content hierarchy (image, title, description)
Make the entire card clickable when it represents one action
Use consistent sizes within the same grid

Don't:

Overload a card with too many actions
Mix variants within the same grid
Nest cards inside cards

Modal: for expanded card content
Accordion: for collapsible sections
Table: for structured data

On this page