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

Weekly planning

12 tasks · due Friday

Q2 Roadmap

Best for: dense lists on tinted backgrounds

B Outlined

Weekly planning

12 tasks · due Friday

Q2 Roadmap

Best for: default content cards on ivory

C Elevated

Weekly planning

12 tasks · due Friday

Q2 Roadmap

Best for: draggable items, popovers

D Stripe

Weekly planning

12 tasks · due Friday

Q2 Roadmap

Best for: pinned or priority items

E Inset

Weekly planning

12 tasks · due Friday

Q2 Roadmap

Best for: nested cards inside white panels

F Horizontal

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