EventDetail

organisms

Admin event detail header — event image, title, status pill, key metadata (date/venue/capacity), action buttons (edit/publish/cancel).

ARIA Role: region

Demo

Demo for EventDetail (organisms)

Admin event detail header — event image, title, status pill, key metadata (date/venue/capacity), action buttons (edit/publish/cancel).

Props

Prop	Type	Required	Default	Description
`id`	`string`	Yes	`—`
`title`	`string`	Yes	`—`
`date`	`EventDate`	Yes	`—`
`venue`	`Venue`	Yes	`—`
`capacity`	`Capacity`	Yes	`—`
`actions`	`Action[]`	Yes	`—`	1-4 actions

TypeScript Interface

interface EventDetailProps {
  id: string;
  title: string;
  status: EventStatus;
  image?: { url: string; alt: string };
  date: { start: string; end?: string; formatted: string };
  venue: { name: string; city: string; country: string };
  capacity: { sold: number; total: number; revenue: number };
  actions: { id: string; label: string; variant?: 'primary' | 'secondary' | 'danger'; onClick: () => void }[];
  breadcrumbs: { label: string; href?: string }[];
}

Assertions (NASA Rule 5)

[type]id, title, date, venue, capacity, actions all required(NASA Rule 5)
[aria]Breadcrumbs component at top; status pill has aria-label(WCAG 1.3.1)

Usage

Import

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

Basic

<Eventdetail />

With Variants

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