Header, body, footer
Account settings
Update your profile, password, and notification preferences.
Body only
Simple surface with no header or footer.
Header and body
Weekly summary
12 entries · 4 collaborators
Quiet surface (muted borders)
Nested in marketing chrome
Use surfaceEmphasis="quiet" inside sections and product windows — default omits the prop for full frames.
Default surface (normal borders)
Settings panel
Full --atelier-border frame for data-heavy layouts.
Footer actions
Discard unsaved edits?
Your changes will be lost if you leave without saving.
Uniform grid tiles
film
Narrow halls
2024
4.5/5
Slow burn with a sharp final act.
film
A much longer title that wraps to two lines
No rating
film
Quiet archive
2019
3/5
More mood than plot, but the cinematography carries it through the second half.
Loading skeleton
Compact skeleton
Animation variants
animationVariant — click each control to compare press feedback.
Default
None
Ripple
Scale
Sink
Lift
Pulse
Glow
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| surfaceEmphasis | Optional | "default" | "soft" | "quiet" | "plain" | default | Border weight — default is full frame (normal); soft/quiet/plain for muted hairlines on nested marketing surfaces. |
| CardHeader / CardTitle / CardBody / CardFooter | Optional | subcomponents | — | Composable sections separated by padding, not divider lines. |
| CardSkeleton | Optional | component | — | Loading preset — lines, optional footer bar, aria-busy. |
| lines / hasFooter | Optional | CardSkeleton props | — | Body line count and footer placeholder. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |