Card variant matrix
Six structural treatments of the Acme <Card /> component. Adjust density and emphasis with the controls, hover a variant to see its prop combo.
A · Flat
WP
Weekly planning
12 tasks · due Friday
Q2
Roadmap
best for: dense lists on tinted backgrounds
B · Outlined
WP
Weekly planning
12 tasks · due Friday
Q2
Roadmap
best for: default content cards on ivory
C · Elevated
WP
Weekly planning
12 tasks · due Friday
Q2
Roadmap
best for: draggable items, popovers
D · Accent stripe
WP
Weekly planning
12 tasks · due Friday
Q2
Roadmap
best for: pinned or priority items
E · Inset
WP
Weekly planning
12 tasks · due Friday
Q2
Roadmap
best for: nested cards inside white panels
F · Horizontal
WP
Weekly planning
12 tasks · due Friday
Q2
Roadmap
best for: compact row lists, sidebars
JSX — hover a variant above
// hover a card to preview its props