Card

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

Cards

Defaults

Default

Accent

Muted

Padding: sm

Padding: md

Padding: lg

Interactive

VariantPaddingTitle

Source

import { Card, ProseP } from "@zudo-composer/ui";

<Card title="Card heading">
  <ProseP>Use a card to group a small amount of related information.</ProseP>
</Card>

Live CSS

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