Components · Events

Event hero

The full-bleed banner header for an event detail page. A cover photo renders full-bleed behind a dark legibility scrim, with the title, viewer-local date-time range, and location overlaid; the badge cluster (Major / type / status / a "Past" chip) sits above, and an actions slot — the primary RSVP button — holds the top-right corner, outside any link.

EventHero · cover photo + scrim + RSVP action
Major Protest Published

Beagle Freedom Rally at City Hall

Saturday, September 12, 2026 · 2:30 – 5:00 PM EDT City Hall Plaza, 200 Main St

The primary RSVP action is pinned :hover. Photo cover is a layered CSS gradient standing in for the real coverPhotoUrl; the scrim keeps the overlaid title AA-legible over any image.

Fallback · no cover photo → accent-gradient band, ended → "Past" chip
Training Past

Foster Orientation & Onboarding

Monday, August 24, 2026 · 6:00 – 7:30 PM EDT Simple Heart HQ

Without a coverPhotoUrl the header falls back to a shorter accent-gradient band (--accent → --accent-strong). ended appends a neutral "Past" chip and the RSVP action drops away.

cover
Full-bleed coverPhotoUrl (h-56/72) behind a bottom-weighted scrim, or a shorter accent-gradient band (h-40/48) when absent — the page always leads with a real header.
badges
Major (outline) · type chip · optional status chip (showStatus) · a "Past" chip when ended. All flow from the shared eventTypeMeta / eventStatusMeta.
date-time
Viewer-local long form: "Saturday, September 12, 2026 · 2:30 – 5:00 PM EDT". Same-day collapses one meridiem; multi-day spans both dates. Client + suppressHydrationWarning.
actions
Top-right slot for the RSVP control / manage buttons, z-10 above the scrim and kept outside any link so its own controls stay clickable.
as
Heading element for the title — h1 (default, page lead) or h2 when embedded, so the hero nests at the correct level.

Source · ds/events/EventHero.tsx (cover, scrim, badge cluster, formatDateTime) · event-meta.ts · composed inside EventDetailLayout.tsx.