Studiov1.2.3
Studio/Patterns/Card Grid

Card Grid

Layout

Responsive grid of data-driven cards. Each card links to a detail page. Supports badges, metadata, and thumbnail images.

All patterns
card grid
Reusable pane preview
Use Cases
  • Project listings (PRT projects)
  • Brand entity listing
  • Component gallery grid
  • Team member directory
Do
  • Use consistent card structure across the grid
  • Show 2-3 key metadata items per card
  • Include hover state with subtle border or shadow change
  • Support loading skeletons for async data
Avoid
  • Show more than 5 metadata items per card
  • Mix card layouts (some with images, some without) in one grid
  • Use cards for single-action items (use a list instead)
  • Forget pagination or virtual scroll for large datasets
Reference component: CardGridVariants: 2Token bindings: 6