vert-ui
Browse docs
All components

Card

Surface container with header, content and footer sections — the default frame for grouped information and actions.

Preview

Live preview

Storage plan

Team

64% of 500 GB used across 3 workspaces.

Usage

Examples

Card with a form

Invite teammate

They will receive an email invitation.

<Card className="max-w-sm">
  <CardHeader>
    <CardTitle>Invite teammate</CardTitle>
    <CardDescription>They will receive an email invitation.</CardDescription>
  </CardHeader>
  <CardContent className="space-y-2">
    <Label htmlFor="invite">Work email</Label>
    <Input id="invite" type="email" placeholder="teammate@acme.com" />
  </CardContent>
  <CardFooter className="gap-2">
    <Button size="sm">Send invite</Button>
  </CardFooter>
</Card>

Minimal card, custom sections

Weekly digest

Every Monday at 09:00, summarising open work.

<Card className="p-5">
  <p className="text-sm font-semibold">Weekly digest</p>
  <p className="mt-1 text-sm text-muted-foreground">
    Every Monday at 09:00, summarising open work.
  </p>
</Card>

Variant surfaces

Interactive

Hover or focus me.

Raised

Elevated shadow.

Glow

Brand border.

<Card variant="interactive">
  <CardHeader>
    <CardTitle>Hoverable</CardTitle>
    <CardDescription>Lifts on hover and on focus-within.</CardDescription>
  </CardHeader>
</Card>

<Card variant="glow">…</Card>

Header + footer only

Deploy #412

Production · 4 minutes ago

Passed
<Card>
  <CardHeader>
    <CardTitle>Deploy #412</CardTitle>
    <CardDescription>Production · 4 minutes ago</CardDescription>
  </CardHeader>
  <CardFooter className="gap-2">
    <Badge dot variant="secondary">Passed</Badge>
    <Button size="sm" variant="outline">View logs</Button>
  </CardFooter>
</Card>

Reference

Props

PropTypeDefaultDescription
variant"default" | "interactive" | "raised" | "glow""default"Surface treatment: hoverable lift (interactive), stronger shadow (raised) or the brand luminous border (glow). Exposed as data-variant for styling.
CardHTMLAttributes<HTMLDivElement>—Outer surface: rounded-2xl, border, bg-card and shadow-sm. className merges last.
CardHeaderHTMLAttributes<HTMLDivElement>—Vertical stack for the title and description with 24px padding.
CardTitleHTMLAttributes<HTMLHeadingElement>—Renders an <h3> — heading level is fixed, so place it under the page's h1/h2.
CardDescriptionHTMLAttributes<HTMLParagraphElement>—Muted supporting line under the title.
CardContentHTMLAttributes<HTMLDivElement>—Body region — top padding removed so it sits flush under the header.
CardFooterHTMLAttributes<HTMLDivElement>—Row for actions, aligned with the same horizontal padding.

Accessibility

Accessibility notes

  • CardTitle renders a fixed <h3> — keep heading order intact (h1 page, h2 sections, then the card title).
  • Cards are layout only: they add no landmarks or roles. Use <section aria-labelledby> when a card needs to be identified.
  • variant="interactive" only styles hover and focus-within — it adds no role and no keyboard behaviour. Pair it with an onClick or, better, a real link/button inside.
  • Give an interactive card tabIndex={0} only if the card itself is the control; otherwise leave it out so focus order stays on the inner action.
  • Avoid nesting interactive cards (a card that is also a link) — put one link or button inside instead of making the whole surface clickable.
  • Rely on real form controls inside cards; the surface itself is never focusable.