Mittsu
GitHub
Back to Components

Foundation

Card

Generic surface — the atom most other UI sits on top of when it needs to read as an enclosed thing.

Examples

Flat (default)

Flat card

Default surface for any panel boundary.

<Card>
  <strong>Flat card</strong>
  <p>Default surface for any panel boundary.</p>
</Card>

Tinted

Tinted card

Soft accent gradient for primary-action regions.

<Card variant="tinted">
  <strong>Tinted card</strong>
  <p>Soft accent gradient for primary-action regions.</p>
</Card>

Padding off

Bring your own padding.
<Card padding={false}>
  <div style="padding: var(--uin-s-3);">Bring your own padding.</div>
</Card>

Props

PropTypeDefaultDescription
variant'flat' | 'tinted''flat'Flat is neutral; tinted adds an accent gradient wash.
paddingbooleantrueSet to false when the card contains its own padded sections.
...restHTMLAttributes<HTMLDivElement>—Spread onto the underlying <div>.

Install

CLI

npx @a3tai/mittsu add card