AccentCard

organisms

Dark accent card variant — always #0A0A0A background regardless of theme. Used for Door Revenue. White text, 32px/800 value, split stat row with teal and amber sub-values.

ARIA Role: region

Demo

Card Title

Card description text goes here.

Props

PropTypeRequiredDefaultDescription
bigValuestringYes

TypeScript Interface

interface AccentCardProps {
  title: string;
  bigValue: string;
  subText: string;
  split: { value: string; label: string; color: 'teal' | 'amber' | 'green' | 'red' }[];
}

Assertions (NASA Rule 5)

  • [type]All props required(NASA Rule 5)
  • [aria]Must have role='region' and aria-label(WCAG 1.3.1)

Usage

Import

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

Basic

<Accentcard />

With Variants

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