Card
Flexible container with header/body/footer/media slots. 4 variants.
npx shadcn@latest add https://ds.ptrckschrdtr.de/r/card.json Variants
Default
default variant
Body
Outlined
outlined variant
Body
Elevated
elevated variant
Body
Ghost
ghost variant
Body
Sizes
Small
Small padding
Medium
Medium padding
Large
Large padding
With Footer
Card with footer
Has a footer slot.
Body content here.
Do
Use `elevated` sparingly — one focal card per view reads as important; several elevated cards fight each other.
Don't
Don't nest interactive cards inside `card--interactive` — overlapping click targets confuse mouse and keyboard users alike.