build69
build69  /  Components  /  Data Display  /  Card

Card

v1.0.5Updated 28 Sept 2026

Generic container with subtle border, padding, and slots for header / title / description / content / footer. Adds elevation levels, hover lift, selected state, tonal tint, and a loading overlay for richer surface compos

View source← Back to catalog

Preview

Live · 15 stories
DefaultOpen ↗
▸Why this is recommendedcontainerpanelboxsurface+2

The default, out-of-the-box Card.

Recommended for+14
  • ✓Dashboard tiles
  • ✓Form sections
  • ✓Content groupings
  • ✓Selectable tiles
  • ✓Marketing / pricing cards
  • ✓A settings page built from cards, where each card is a section that needs its own heading
Tags+6
containerpanelboxsurfaceelevationdefault
Features+4
  • Composable slots
  • Consistent spacing
  • Bordered surface
  • Composable slots (header / media / body / footer)
  • Elevation 0-5
  • Hover lift
  • Selected state
  • Tonal tint variants
  • Loading overlay
  • Clickable variant
  • i18n: labels prop overrides the loading-overlay screen-reader announcement (DEFAULT_CARD_LABELS)
  • CardTitle can render a real heading (headingLevel) so a page of cards has a screen-reader heading outline
Not recommended for−2
  • ✕Layout shells (use AppShell)
  • ✕Single inline alerts (use Alert)
  • ✕Trivial framing (use Paper)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Card" })

Usage

import { Card } from '@/components/data-display/card';

<Card elevation={2} hoverLift selected={isSelected} onClick={pick}>
  <Card.Header>Plan</Card.Header>
  <Card.Body>฿199 / month</Card.Body>
</Card>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
elevation

Shadow elevation

0 | 1 | 2 | 3 | 4 | 5—
hoverLift

Animate elevation on hover

boolean—
selected

Selected state ring

boolean—
tone

Tonal tint

'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'—
loading

Show loading overlay

boolean—
labels

Override built-in UI strings (loading-overlay screen-reader announcement) for i18n; English defaults exported as DEFAULT_CARD_LABELS

Partial<CardLabels>—
headingLevel

On CardTitle: render the title as a real h1..h6 instead of the default div, with an identical class list so nothing restyles. Pass it when a card is a page section (a settings screen built of cards) so the page has a heading outline and the title is reachable by getByRole("heading"). Omitted keeps the historic div. MCP feedback fb_138ab81d.

1 | 2 | 3 | 4 | 5 | 6—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files