display

Card

A bounded container grouping related content into a scannable unit.

Cards are the most versatile layout component — they package content into scannable, portable units that work in grids, lists, and feeds. Good card design maintains consistent height in grids and has a clear internal hierarchy.

Anatomy

  • Media area (top, optional)
  • Header (title + badges)
  • Body (description)
  • Footer (metadata + actions)

Variants

Default (content)Media (image-led)Horizontal (image left)Stat card (number-led)Interactive (fully clickable)

States

DefaultHover (lift + shadow)Selected (accent border)Loading (skeleton)Error

Rules

✓ Do

  • •Consistent image aspect ratio across grids
  • •Equal-height cards in a grid
  • •Hover state on interactive cards
  • •Clear hierarchy: title > description > metadata

✗ Don't

  • ×Don't put nested links inside a linked card
  • ×Don't let cards have wildly different heights in a grid
  • ×Don't forget the hover state on interactive cards

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Cards: 20px padding, 12px radius, 1px border (#E2E8F0), soft shadow. Image: 16:9 aspect-ratio, object-fit cover. Hover: shadow lifts + translateY(-2px). All cards equal-height via CSS Grid align-items: stretch.