CartItem

molecules

Single cart line — event thumbnail, title, tier, date, quantity stepper, line total, remove button. Hover-only remove on desktop.

ARIA Role: article

Demo

Demo for CartItem (molecules)

Single cart line — event thumbnail, title, tier, date, quantity stepper, line total, remove button. Hover-only remove on desktop.

Props

Prop	Type	Required	Default	Description
`id`	`string`	Yes	`—`
`quantity`	`number`	Yes	`—`	1 to maxQuantity
`onRemove`	`() => void`	Yes	`—`

TypeScript Interface

interface CartItemProps {
  id: string;
  eventId: string;
  eventTitle: string;
  eventImage: { url: string; alt: string };
  tierName: string;
  date: { formatted: string; iso: string };
  unitPrice: number;
  quantity: number;
  maxQuantity: number;
  lineTotal: number;
  currency: string;
  onQuantityChange: (qty: number) => void;
  onRemove: () => void;
}

Assertions (NASA Rule 5)

[type]quantity in [1, maxQuantity] (NASA Rule 7)(NASA Rule 7)
[aria]Remove button has aria-label='Remove {tierName} for {eventTitle}'(WCAG 4.1.2)

Usage

Import

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

Basic

<Cartitem />

With Variants

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