TicketCard

molecules

Single ticket — barcode (Barcode component) + event title + date + venue + seat/tier + status pill. Tappable to open ticket detail with full barcode.

ARIA Role: button

Demo

Card Title

Card description text goes here.

Props

Prop	Type	Required	Default	Description
`id`	`string`	Yes	`—`
`status`	`TicketStatus`	Yes	`—`
`barcodeValue`	`string`	Yes	`—`	Raw QR/Barcode payload

TypeScript Interface

interface TicketCardProps {
  id: string;
  eventTitle: string;
  eventImage: { url: string; alt: string };
  date: { formatted: string; iso: string };
  venue: { name: string };
  tier: string;
  seat?: string;
  status: 'upcoming' | 'used' | 'expired' | 'cancelled' | 'refunded';
  barcodeValue: string;
  onSelect: () => void;
}

Assertions (NASA Rule 5)

[type]status must be valid enum; barcodeValue required(NASA Rule 5 + 7)
[aria]Entire card is <button> with descriptive aria-label; barcode is decorative (text alternative)(WCAG 1.1.1, 2.4.4)

Usage

Import

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

Basic

<Ticketcard />

With Variants

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