Components
Card
Token-driven surface container with optional header.
Default
Subtle layered shadow surface.
Elevated
Stronger elevation.
Inset
Inset hairline border.
Variants
default (subtle layered shadow), elevated (stronger elevation), and inset
(hairline inner border). Background, radius, and divider all read from tokens.
Usage
import { Card } from '@cdz/ui';
<Card header="Profile">Body content</Card>
<Card variant="elevated">No header, padded body</Card>
<Card variant="inset" disableBodyPadding>
<img src="/cover.jpg" alt="" />
</Card>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | default | inset | elevated | default | Surface treatment |
header | ReactNode | — | Title row above a divider |
disableBodyPadding | boolean | false | For full-bleed content |
All other native <div> attributes pass through; the component forwards its
ref.