MerchCard

organisms

Merchandise item card with image, price, quantity selector. Renders in merch tab of event details.

ARIA Role: article

Demo

Card Title

Card description text goes here.

Props

PropTypeRequiredDefaultDescription
itemMerchandiseItemYes—Merchandise item data
onAddToCart(item: MerchandiseItem, qty: number) => voidYes—Add to cart handler
maxQtynumberNo10Maximum quantity

TypeScript Interface

interface MerchCardProps {
  item: MerchandiseItem;
  onAddToCart: (item: MerchandiseItem, qty: number) => void;
  maxQty?: number;
}

Assertions (NASA Rule 5)

  • [aria]Card itself is not interactive; wrapping link/button does the action(WCAG 1.3.1)
  • [validation]Price must be a valid currency amount(NASA Rule 5)

Usage

Import

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

Basic

<Merchcard />

With Variants

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