EventDetailPublic

templates

Event detail page layout — EventHero + (Description + Artists + Venue + Reviews + FAQ) on left, sticky TicketTierList + Buy CTA on right.

ARIA Role: main

Demo

Demo for EventDetailPublic (templates)

Event detail page layout — EventHero + (Description + Artists + Venue + Reviews + FAQ) on left, sticky TicketTierList + Buy CTA on right.

Props

Prop	Type	Required	Default
`hero`	`React.ReactNode`	Yes	`—`
`description`	`React.ReactNode`	Yes	`—`
`venue`	`React.ReactNode`	Yes	`—`
`ticketPanel`	`React.ReactNode`	Yes	`—`

TypeScript Interface

interface EventDetailPublicProps {
  hero: React.ReactNode;
  description: React.ReactNode;
  artists?: React.ReactNode;
  venue: React.ReactNode;
  reviews?: React.ReactNode;
  faq?: React.ReactNode;
  ticketPanel: React.ReactNode;
}

Assertions (NASA Rule 5)

[type]hero, description, venue, ticketPanel all required(NASA Rule 5)
[render]Sticky right column on desktop, stacks on mobile (NASA Rule 6)(NASA Rule 6)

Usage

Import

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

Basic

<Eventdetailpublic />

With Variants

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