Card

Flat surface container with a border and rounded corners, in three variants and three padding sizes.

Data Display

Default (variant=default, padding=md, with title)

Variants (default / muted / accent)

Paddings (sm / md / lg)

Explicit Card.Title (no title prop)

Source

<Card title="Card heading">
  <p>Body copy.</p>
</Card>

Injected into the previews above. Card

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */