Cards overview
Content surfaces that group related information through matte depth.
Design thinking
A card is a content boundary, not a larger button. Matte luminance establishes grouping: an island is L1, its first card is L2 and a nested well is L3. More borders, shadows or padding do not make the hierarchy clearer.
Size and spacing
Content-driven; no mandatory height. There is no mandatory card height. Card padding has four tiers: sm .75rem, md 1rem (default), lg 1.5rem and xl 2rem. LayerCard sections own their boundaries without doubling padding; headers use 1rem horizontal and .75rem vertical insets. Use Body for same-level layout and Well for raised content. Internal buttons keep compact control spacing.
Interaction and motion
Expose explicit actions instead of making a whole rich card clickable around nested buttons. Approval and recommendation surfaces keep hover feedback local to the actual choice and preserve pending, selected and completed states.
Best practices
- Group one coherent subject per surface. Use SectionRule between regions rather than wrapping every paragraph in another card.
- Use Header asChild on full-width disclosure triggers and Body inside unstyled disclosure content. Attached code owns its inset; do not wrap it in another padded Body.
- Model empty, loading, error and populated states at the same boundary so content does not unexpectedly disappear.
- Keep approval and upload state in the application ViewModel. Present real effects and do not treat a visual selection as a completed operation.