StatCard

molecules

KPI metric card — 40×40 colored icon + trend pill + 28px/800 value + 12px muted label. White card with 1px border, hover lift -2px + card shadow.

ARIA Role: article

Demo

Card Title

Card description text goes here.

Props

PropTypeRequiredDefaultDescription
labelstringYes—
valuestringYes—
iconReact.ReactNodeYes—

TypeScript Interface

interface StatCardProps {
  label: string;
  value: string;
  icon: React.ReactNode;
  iconColor?: 'teal' | 'blue' | 'green' | 'amber';
  trend?: { value: string; direction: 'up' | 'down'; ariaLabel: string };
  href?: string;
}

Assertions (NASA Rule 5)

  • [type]label, value, icon all required(NASA Rule 5)
  • [aria]Article element must be aria-labelledby pointing to the value id, so SR reads the value first(WCAG 1.3.1)

Usage

Import

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

Basic

<Statcard />

With Variants

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