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
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
bigValue | string | Yes | — |
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" />