VenueCard

Planned

Venue preview — image, name, address, capacity, link to venue page. Static, server-rendered.

Categorymolecules

Sourcepatterns/molecules/venuecard.html

AI HintPlanned molecule — no React component exists yet (not exported from the barrel). Venue preview card: optional image + name + street address + city/country + capacity + link to venue page. Props are pre-localized by the caller (address ordering, '{n} seats/places', CTA label). NOT a SelectionCard variant — SelectionCard is picker-confirmation; VenueCard is a display card. First adoption sites: the public/private event-page venue panels and EventCard grid venue line (compact variant).

Venue preview — image, name, address, capacity, link to venue page. Static, server-rendered.

VenueCard

molecules

Planned molecule — not yet implemented.

Planned molecule — design reference only; no component to render yet.

Status

Planned molecule — the React component is not yet implemented. Nothing is exported from the DS barrel; the props table above is the planned contract, not a rendered component.

Planned API

Sketch of the intended contract. Until the component ships, this is not importable code.

interface VenueCardProps {
  id: string;
  name: string;
  address: string;
  city: string;
  country: string;
  image?: { url: string; alt: string };
  capacity: number;
  href: string;
}

// Sketch — VenueCard is planned and NOT exported from the barrel yet.
<VenueCard
  id="v-1"
  name="Olympia"
  address="12 Rue de la Paix"
  city="Paris"
  country="France"
  image={{ url: '/venues/olympia.webp', alt: 'Olympia concert hall façade' }}
  capacity={2000}
  href="/venues/olympia"
/>

Props

Prop

Type

Default

Description

id*

string

—

Stable venue identifier.

name*

string

—

Venue display name.

address*

string

—

Street address (caller preformats with locale-aware order).

city*

string

—

City name.

country*

string

—

Country name.

image

{ url: string; alt: string }

—

Venue image — URL and alt text (alt required by a11y contract).

capacity*

number

—

Seating capacity.

href*

string

—

Link to venue detail page.

Props

Preview

VenueCard

Prop

Type

Required

Default

Description

id

string

Required

—

Stable venue identifier.

name

string

Required

—

Venue display name.

address

string

Required

—

Street address (caller preformats with locale-aware order).

city

string

Required

—

City name.

country

string

Required

—

Country name.

image

{ url: string; alt: string }

Optional

—

Venue image — URL and alt text (alt required by a11y contract).

capacity

number

Required

—

Seating capacity.

href

string

Required

—

Link to the venue detail page.

Quick use:<VenueCard />

Accessibility

ARIA rolearticle

Usage

Import

tsxSnippet

import { VenueCard } from "@epasslive/design-system"

Example 1

tsxSnippet

<VenueCard id="v-1" name="Olympia" address="12 Rue de la Paix" city="Paris" country="France" image={{ url: "/venues/olympia.webp", alt: "Olympia concert hall façade" }} capacity={2000} href="/venues/olympia" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules