EventHero

organisms

Large event hero on detail page — 16:9 image, overlay gradient, title, date pill, venue, share/save buttons. Below: tabbed info (Details, Venue, Reviews, FAQ).

ARIA Role: region

Demo

Demo for EventHero (organisms)

Large event hero on detail page — 16:9 image, overlay gradient, title, date pill, venue, share/save buttons. Below: tabbed info (Details, Venue, Reviews, FAQ).

Props

Prop	Type	Required	Default
`id`	`string`	Yes	`—`
`title`	`string`	Yes	`—`
`image`	`EventImage`	Yes	`—`
`date`	`EventDate`	Yes	`—`

TypeScript Interface

interface EventHeroProps {
  id: string;
  title: string;
  image: { url: string; alt: string };
  date: { start: string; end?: string; formatted: string; iso: string };
  venue: { name: string; address: string; city: string; country: string };
  category: { label: string; href: string };
  actions: { id: 'share' | 'save' | 'gift'; label: string; onClick: () => void }[];
}

Assertions (NASA Rule 5)

[type]id, title, image, date all required(NASA Rule 5)
[aria]<section aria-labelledby=titleId>; image alt required(WCAG 1.1.1)

Usage

Import

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

Basic

<Eventhero />

With Variants

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