Skip to main content

FeaturedEvents

Implemented

Section wrapper for an EventGrid (or any children) — locale-ready heading (h1–h6 via headingAs, default h2, useId-derived id unless headingId given), optional 'View all' link (rendered only when both viewAllLabel and viewAllHref are set, sized at --ep-tap-min), tone light/dark background, responsive max-w-7xl padding, locale-aware empty-state message (locale 'en' default / 'fr' opt-in; emptyMessage override). NOT a carousel — no events prop, no auto-advance; children-less render shows a dashed role='status' 'No content available.' fallback. Server-renderable (no 'use client').

Categoryorganisms
Sourcecomponents/organisms/featuredevents/FeaturedEvents.tsx
AI HintUse for the storefront event-section shell (homepage) — wrap an <EventGrid> as children: <FeaturedEvents heading="À la une" locale="fr" viewAllLabel="Voir tout" viewAllHref="/evenements"><EventGrid events={events} locale="fr" /></FeaturedEvents>. There is no carousel behavior; pass tone="dark" for the alternate section background.

Section wrapper that adds a locale-aware heading, an optional "View all" link, and responsive padding around an EventGrid (or any children). Not a carousel — content arrives via children. Server-renderable layout organism (no "use client" directive).

FeaturedEvents

Storefront organism (Family 7 — Tier 1)

Section wrapper that adds a locale-aware heading, a "View all" link, and responsive padding around an EventGrid (or any children). Pure server-renderable layout component — no "use client" directive.

Default — light tone, view-all link

Upcoming Events

View all
EventGrid would render here

Dark tone

Featured Events

EventGrid would render here

Empty state — locale="fr"

À la une

Voir tout

Aucun contenu disponible.

Subheading — headingAs=3

Also happening

View all
EventGrid would render here

Usage

import { FeaturedEvents, EventGrid } from '@epasslive/design-system'

<FeaturedEvents
  heading="Upcoming Events"
  viewAllLabel="View all"
  viewAllHref="/events"
  headingId="upcoming-events-heading"
  tone="light"
>
  <EventGrid events={eventConfigs} columns={{ sm: 1, md: 2, lg: 4 }} />
</FeaturedEvents>

// French — locale switches the organism-authored empty-state message
<FeaturedEvents
  heading="À la une"
  locale="fr"
  viewAllLabel="Voir tout"
  viewAllHref="/evenements"
>
  <EventGrid events={events} locale="fr" />
</FeaturedEvents>

Accessibility

Semantic <section> named via aria-labelledby pointing at the heading id (level configurable via headingAs, default <h2>). The "View all" link is sized at --ep-tap-min and has focus-visible:ring-2 focus-visible:ring-ep-text-teal (5.45:1 on the light section background — WCAG 1.4.11). The empty state uses role="status".

Props

Prop
Type
Default
Description
heading*
string
—

Section heading text (already localized by the caller).

viewAllLabel
string
—

Localized "View all" link text. If omitted, the link is not rendered.

viewAllHref
string
—

"View all" link target. If omitted, the link is not rendered.

headingId
string
—

Optional id applied to the rendered heading tag (default <h2>; use headingAs to change the level) so the consuming page can link to it.

headingAs
1 | 2 | 3 | 4 | 5 | 6
2

Heading level for the section title — renders <h1>–<h6>. Pass 3/4 when embedding inside a page that already owns the h2 (FooterColumn headingAs precedent). The aria-labelledby id follows the rendered tag.

locale
"en" | "fr"
en

Locale for the strings FeaturedEvents itself authors — the default empty-state message ("No content available." / « Aucun contenu disponible. »). EN default keeps the pre-i18n output byte-identical; FR is opt-in via "fr". heading/viewAllLabel stay caller-localized.

emptyMessage
string
locale default

Overrides the locale default for the empty-state message.

tone
'light' | 'dark'
light

Visual tone. "light" = light background, "dark" = dark background. The empty-state fallback surface is identical for both tones (theme-adaptive).

className
string
—

Extra class names merged onto the inner container.

children
React.ReactNode
—

Pass-through. Typically a <EventGrid> instance; when omitted, a dashed role="status" empty state renders.

Props

Preview

FeaturedEvents

Prop
Type
Required
Default
Description
heading
string
Required
—

Section heading text (already localized by the caller).

viewAllLabel
string
Optional
—

Localized 'View all' link text; link renders only when both label and href are provided.

viewAllHref
string
Optional
—

'View all' link target; link renders only when both label and href are provided.

headingId
string
Optional
useId-derived

Optional id on the rendered heading tag (default <h2>; use headingAs to change the level) so the consuming page can link to it.

headingAs
HeadingLevel (1 | 2 | 3 | 4 | 5 | 6)
Optional
'2'

Heading level for the section title — renders <h1>–<h6>. Pass 3/4 when the page already owns the h2 (FooterColumn headingAs precedent); the aria-labelledby id follows the rendered tag.

locale
"en" | "fr"
Optional
'en'

Locale for the strings FeaturedEvents itself authors (the default empty-state message). EN default keeps the pre-i18n output byte-identical; FR is opt-in via 'fr' (EventGrid inline-literal precedent). heading/viewAllLabel stay caller-localized.

emptyMessage
string
Optional
locale default

Overrides the locale default for the empty-state message ('No content available.' / 'Aucun contenu disponible.').

tone
FeaturedEventsTone
Optional
'light'

'light' (bg-ep-bg-secondary) or 'dark' (bg-ep-bg); the empty-state fallback surface is identical for both tones (theme-adaptive ep-bg/ep-border).

className
string
Optional
—

Extra classes merged onto the inner container.

children
React.ReactNode
Optional
fallback

Pass-through content — typically an <EventGrid>. When omitted, a dashed role='status' 'No content available.' block renders.

Quick use:<FeaturedEvents />

Accessibility

ARIA roleregion

ARIA

1 rule

WCAG 1.3.1

section is named via aria-labelledby pointing at the rendered heading id (explicit or useId-derived; level via headingAs, default h2)

tap-target

1 rule

WCAG 2.5.8

'View all' link sized at --ep-tap-min on the min axis with focus-visible ring

token

1 rule

WCAG 1.4.11

empty-state fallback surface is theme-adaptive (ep-bg/ep-border swap per theme) — visible on light and dark themes and both tones

layout

1 rule

WCAG 1.4.10 reflow

heading row uses flex-wrap so a 320px viewport wraps heading + link instead of squeezing both to min-content

Usage

Import

tsxSnippet
import { FeaturedEvents } from "@epasslive/design-system"

Example 1

tsxSnippet
<FeaturedEvents heading="Featured events"><EventGrid events={events} /></FeaturedEvents>

Example 2

tsxSnippet
<FeaturedEvents heading="À la une" locale="fr" viewAllLabel="Voir tout" viewAllHref="/evenements"><EventGrid events={events} locale="fr" /></FeaturedEvents>

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not pass data props — the organism takes none; the grid comes in as children

Design System v4.1.0 | ePassLive