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.

Padding 20px
Border
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