StatGrid

organisms

4-up responsive KPI grid — 16px gap, equal columns. Collapses to 2-col on tablet (≤1100px) and 1-col on mobile (≤800px).

ARIA Role: region

Demo

Demo for StatGrid (organisms)

4-up responsive KPI grid — 16px gap, equal columns. Collapses to 2-col on tablet (≤1100px) and 1-col on mobile (≤800px).

Props

PropTypeRequiredDefaultDescription
statsStatConfig[]Yes—1-4 stat configs

TypeScript Interface

interface StatGridProps {
  stats: StatConfig[];
  ariaLabel?: string;
}

Assertions (NASA Rule 5)

  • [type]stats must have 1-4 items(NASA Rule 2 + 5)
  • [aria]Section must have aria-label describing the metric group(WCAG 1.3.1)

Usage

Import

import { Statgrid } from '@epasslive/design-system'

Basic

<Statgrid />

With Variants

<Statgrid variant="primary" size="md" />