Skip to content
Nexus Application Design nadesign

CardGrid

<CardGrid> is a responsive grid for Cards — 1 column on mobile, 2 / 3 / 4 columns at md and up.

import from "@na/ui/components/CardGrid" ▶ Open in Storybook packages/ui/src/components/CardGrid.tsx

When to use

  • Stat / KPI tiles at the top of a dashboard.
  • Card-style entity grid (when a flat list isn’t enough).
  • Settings card collections — connected integrations, team members, etc.

Don’t use CardGrid for: list / table data (DataTable), board / kanban (BoardView), or hero marketing layouts (this is admin-only).

Default

Total
128
Active
96
Archived
32
 
<CardGrid columns={3}>
  <Card>…</Card>
  <Card>…</Card>
  <Card>…</Card>
</CardGrid>

API

Prop Type Default Description
columns 2 | 3 | 4 3 Desktop column count. 4 collapses to 2 columns at md and 4 at lg. Mobile is always 1.
children * ReactNode — Cards (or any equally-sized item).
className string — Forwarded.

Design guidelines

✓ Do

  • Match all cards in shape — header / footer presence, height. Mixed cards in a grid look broken.
  • Use columns={3} as default. columns={4} only when each card is small.

✗ Don't

  • Mix Card sizes within one CardGrid. Either each card spans the same number of grid cells or they're in separate grids.
  • Stuff a list-shaped data into CardGrid. List = DataTable.

Accessibility

  • Plain semantic <div>. Each Card carries its own structure.
  • Card — The expected child.
  • StatRow — Lighter-weight horizontal metric strip.
  • DataTable — When the data is list-shaped.

▶ Open CardGrid stories in Storybook