Card

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

Data Display

Usage

import { Card } from "@zudo-sg/ui/src/cards/card/card";

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

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

Variants (default / muted / accent)

Paddings (sm / md / lg)

Explicit Card.Title (no title prop)

<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; } */