FeaturedEvents

organisms

Carousel of featured events — 1 large featured + 3 small. Auto-advance every 6s, pauses on hover. Swipeable on mobile.

ARIA Role: region

Demo

Demo for FeaturedEvents (organisms)

Carousel of featured events — 1 large featured + 3 small. Auto-advance every 6s, pauses on hover. Swipeable on mobile.

Props

PropTypeRequiredDefaultDescription
eventsEventCardPublicConfig[]Yes—2-6 events

TypeScript Interface

interface FeaturedEventsProps {
  events: EventCardPublicConfig[];
  autoAdvance?: boolean;
  interval?: number;
  ariaLabel: string;
}

Assertions (NASA Rule 5)

  • [type]events bounded 2-6 (NASA Rule 2)(NASA Rule 2)
  • [aria]role='region' aria-roledescription='carousel'; aria-live='polite' announces active slide(WAI-ARIA Carousel Pattern)

Usage

Import

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

Basic

<Featuredevents />

With Variants

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