StatGrid

Implemented

Responsive KPI grid composing StatCard molecules — 16px gap, equal columns, stacks to 1 column on mobile. Renders up to 4 cards by default; showAll lifts the cap, columns pins the layout.

Categoryorganisms

Sourcecomponents/organisms/StatGrid/StatGrid.tsx

AI HintUse for complex UI sections. Compose molecules and atoms into page sections.

StatGrid component.

StatGrid

design-system

StatGrid component preview and API reference.

Revenus

48 250$

+12,4 %

Billets vendus

1 284

+3,1 %

Remboursements

1 204$

−0,8 %

Frais EP

962$

0,0 %

Props

Preview

StatGrid

Prop

Type

Required

Default

Description

stats

StatConfig[]

Required

—

Stat configs — { id: string; label: string; value: string | number; unit?: string; trend?: StatCardTrend; icon?: React.ReactNode; href?: string; labelClassName?: string; valueMuted?: boolean; hint?: string }. Renders the first 4 unless showAll is set.

ariaLabel

string

Optional

"Key metrics"

Accessible label for the grid region (role='region'). English default "Key metrics" — French consumers should pass a localized string (e.g. "Indicateurs clés").

columns

1 | 2 | 3 | 4 | 6

Optional

(derived)

Explicit column count (§126 Wave 3 gap-1). Default derived from rendered count: 1→1, 2→2, 3→3, 4→4, 5-6→3 (two balanced rows), 7+→4. Derived layouts stay responsive (stack on mobile).

showAll

boolean

Optional

false

Render ALL stats instead of capping at 4 (§126 Wave 3 gap-1 — the StatisticsEventDetail 6-card grid dropped comps/refunds/epFees cards under the legacy cap).

Quick use:<StatGrid />

Accessibility

ARIA roleregion

Usage

Import

tsxSnippet

import { StatGrid } from "@epasslive/design-system"

Example 1

tsxSnippet

<StatGrid stats={kpis} ariaLabel="Key metrics" />

Example 2

tsxSnippet

<StatGrid stats={eventStats} showAll columns={6} ariaLabel="Indicateurs clés" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources