Default card
Border + surface background
Standard card with a header, body and right-aligned footer.
Flat card
No border, base background
Use inside already-bordered containers where a border would be redundant.
Shadow card
Shadow is opt-in via .ui-shadow@*
Elevated appearance useful for primary actions or featured content.
Footer default (end)
Footer .ui-justify-start
Footer .ui-justify-between
Image card
Full-bleed image sitting above the body.
Image + footer
Image, body and footer combination.
Image + spread footer
Meta on the left, action on the right.
Sarah Chen
Product Designer
Creates accessible design systems and component libraries used across products.
MONTHLY REVENUE
+12%$48,295
vs $43,120 last month
Building a scalable component system
How to structure tokens, primitives and patterns that scale across products.
| Class | Description |
|---|---|
.ui-card | Base card container flex column, surface background, border |
.ui-card-header | Optional top section padded, border-bottom |
.ui-card-body | Main content area padded, flex: 1 |
.ui-card-footer | Optional bottom section padded, border-top, flex end-aligned |
.ui-card-flat | Removes border, uses base background instead of surface |
| Class | Description |
|---|---|
.ui-shadow@s/m/l/xl | Adds a drop shadow combine with .ui-card |
.ui-rounded@* | Adds border radius combine with .ui-card |
| Class | Description |
|---|---|
.ui-justify-start | Left-aligns footer actions add to .ui-card-footer |
.ui-justify-between | Spreads footer content add to .ui-card-footer |