Unkey — Design

Card

A surface for grouping related content — title, description, body, and an optional footer row.

Card is a bordered surface with consistent padding. It’s the right container when a set of elements belongs together but needs visual separation from the surrounding page — a settings panel, a stat tile, a small preview of a resource.

The subcomponents are composable and optional: you can render a card with only <CardContent>, or with a full header + content + footer layout, or anywhere in between.

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@unkey/ui";

Anatomy

Production

Keys created in this workspace will hit your production API.

2,431 keys · 12,486 verifications today

Minimal

A card with only content. Use this for a single block of information that doesn’t need a title — a callout, a summary row, an embedded editor.

You’re on the free plan. Your first 1,000 verifications each month are on us.

Composition

<Card> is a thin bordered <div>. The subcomponents each have their own padding and spacing rules so they compose predictably:

  • <CardHeader> — flex column with 1.5rem horizontal padding, 1.5rem top padding, zero bottom (so it sits flush against <CardContent>).
  • <CardTitle> — an <h2> with tight tracking, medium weight.
  • <CardDescription> — a muted <p> sized for supporting copy.
  • <CardContent> — 1.5rem padding on all sides.
  • <CardFooter> — horizontal flex row, 1.5rem side padding, a top border, and a small top margin so it visually separates from the content.

All accept className and are forwarded refs, so you can restyle or hook into them without breaking composition.

Accessibility

Card does not impose any ARIA landmark. If the card represents a navigational region or a labelled section, give it a semantic role and a label at the call site:

<Card role="region" aria-labelledby="prod-card-title">
  <CardHeader>
    <CardTitle id="prod-card-title">Production</CardTitle>
    …
  </CardHeader>
</Card>

<CardTitle> renders as <h2>. If the card is nested inside a section that already has an <h2> (or the page layout requires different heading levels), override the element via a wrapping <h3> and render your own title text — Card doesn’t prescribe heading hierarchy.

Props

Card

Renders a bordered <div> with rounded corners and a subtle border. The outer shell.

className string Optional

Additional Tailwind classes. Commonly used to constrain width (max-w-md) or adjust spacing.

children ReactNode Optional

Typically <CardHeader>, <CardContent>, and/or <CardFooter>.

...rest HTMLAttributes<HTMLDivElement> Optional

All standard div attributes pass through — useful for role, aria-labelledby, onClick, etc.

CardHeader

A flex column with 1.5rem horizontal and top padding, zero bottom padding. Sits flush against <CardContent>. Holds <CardTitle> and <CardDescription>.

className string Optional

Additional Tailwind classes. Override spacing (py-4) or layout (flex-row items-center) when the default layout doesn’t fit.

children ReactNode Optional

Usually <CardTitle> and/or <CardDescription>, optionally with a trailing action button.

...rest HTMLAttributes<HTMLDivElement> Optional

Standard div attributes pass through.

CardTitle

Renders as <h2> with semi-bold weight, tight tracking, and no bottom margin. The primary label for the card.

className string Optional

Additional Tailwind classes. Override text-2xl when the card needs a smaller or larger title, or change the color for emphasis.

children ReactNode Optional

The title text. Keep it short — a single short phrase.

...rest HTMLAttributes<HTMLHeadingElement> Optional

Standard heading attributes pass through. Useful for id when pairing with aria-labelledby on the wrapping <Card>.

CardDescription

Renders as <p> in muted color and small size. Supporting copy that sits beneath the title.

className string Optional

Additional Tailwind classes.

children ReactNode Optional

The body text. Keep it to one or two sentences; longer prose belongs in <CardContent>.

...rest HTMLAttributes<HTMLParagraphElement> Optional

Standard paragraph attributes pass through.

CardContent

1.5rem padding on all sides. The main body of the card.

className string Optional

Additional Tailwind classes. Override padding (p-0) when embedding content that provides its own padding (e.g. a data table).

children ReactNode Optional

The body content — text, form fields, data, whatever the card is for.

...rest HTMLAttributes<HTMLDivElement> Optional

Standard div attributes pass through.

CardFooter

Horizontal flex row with 1.5rem side padding, small vertical padding, a top border, and a small top margin. Use for action buttons or metadata that belongs at the bottom.

className string Optional

Additional Tailwind classes. Typical overrides are justify-between or justify-end depending on footer content alignment.

children ReactNode Optional

Usually one or more action <Button>s, or secondary metadata text.

...rest HTMLAttributes<HTMLDivElement> Optional

Standard div attributes pass through.

  • Alert — for time-sensitive context that should announce itself.
  • Separator — to divide regions inside a card without adding subcards.