TicketCard

Implemented

Single ticket card — barcode (Barcode atom), event title, date, venue, seat/tier, status. Real organism; the molecules placeholder twin was de-cataloged.

Categoryorganisms

Sourcecomponents/organisms/TicketCard/TicketCard.tsx

AI HintInteractive wallet ticket row — use for tappable ticket lists (client-portal /tickets pattern). The whole card is one button; navigate from onSelect, never by wrapping it in a link.

TicketCard component.

TicketCard

design-system

TicketCard component preview and API reference.

Props

Preview

TicketCard

Prop

Type

Required

Default

Description

id

string

Required

—

Unique ticket id, exposed as data-ticket-id.

eventTitle

string

Required

—

Event name (primary line; first segment of the composed aria-label).

eventImage

{ url: string; alt: string }

Required

—

Thumbnail image source and alt text (48×48).

date

{ formatted: string; iso: string }

Required

—

Display date + machine-readable ISO date; only formatted is rendered (locale-format at call site).

venue

{ name: string }

Required

—

Venue name.

tier

string

Required

—

Ticket tier label.

seat

string

Optional

—

Optional seat identifier — appended to the metadata line and aria-label.

status

'upcoming' | 'used' | 'expired' | 'cancelled' | 'refunded'

Required

—

Lifecycle status badge (semantic tint tokens per status).

barcodeValue

string

Required

—

Code-128 barcode payload (rendered decoratively).

onSelect

() => void

Required

—

Whole-card button activation handler.

Quick use:<TicketCard />

Usage

Import

tsxSnippet

import { TicketCard } from "@epasslive/design-system"

Example 1

tsxSnippet

<TicketCard />

Anti-patterns

— Do not wrap TicketCard in an <a>/next/link — it is already a <button>; nesting interactive content is invalid HTML (WCAG 4.1.2). Navigate from onSelect instead

— Do not deep-import — barrel only

— Do not hardcode status colors — pill styling is semantic tint tokens keyed by TicketStatus