EventCard

molecules

Upcoming event preview card — 240px wide. Top: 120px gradient thumbnail with absolute date badge. Body: 13px/700 event name + 11px muted location with map pin.

ARIA Role: listitem (in EventsRow)

Demo

Card Title

Card description text goes here.

Props

PropTypeRequiredDefaultDescription
idstringYes—
namestringYes—
locationstringYes—
date{ day: string; month: string }Yes—

TypeScript Interface

interface EventCardProps {
  id: string;
  name: string;
  location: string;
  date: { day: string; month: string };
  thumbnail?: { url: string; alt: string };
  href?: string;
  onSelect?: (id: string) => void;
}

Assertions (NASA Rule 5)

  • [type]id, name, location, date all required(NASA Rule 5)
  • [aria]Thumbnail must have alt text or be aria-hidden when decorative(WCAG 1.1.1)

Usage

Import

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

Basic

<Eventcard />

With Variants

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