EventCardPublic

molecules

Public event card — 320px wide. Top: 200px image with hover scale. Body: date (large) + title + venue + price-from + Buy button. Larger and more visual than admin EventCard.

ARIA Role: article

Demo

Card Title

Card description text goes here.

Props

Prop	Type	Required	Default	Description
`id`	`string`	Yes	`—`
`title`	`string`	Yes	`—`
`image`	`EventImage`	Yes	`—`
`date`	`EventDate`	Yes	`—`
`priceFrom`	`number`	Yes	`—`	0+
`href`	`string`	Yes	`—`

TypeScript Interface

interface EventCardPublicProps {
  id: string;
  title: string;
  image: { url: string; alt: string };
  date: { day: string; month: string; year: string; iso: string };
  venue: { name: string; city: string };
  priceFrom: number;
  currency: string;
  href: string;
  soldOut?: boolean;
  badges?: { label: string; variant: 'new' | 'hot' | 'last-chance' }[];
}

Assertions (NASA Rule 5)

[type]All required; priceFrom >= 0 (NASA Rule 7)(NASA Rule 7)
[aria]Entire card is <a> with descriptive aria-label; image alt required(WCAG 1.1.1, 2.4.4)

Usage

Import

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

Basic

<Eventcardpublic />

With Variants

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