EventsRow

organisms

Horizontal scroll row of EventCards with scroll-snap. 240px cards, 16px gap. Hidden scrollbar styled to 4px thumb.

ARIA Role: list

Demo

Demo for EventsRow (organisms)

Horizontal scroll row of EventCards with scroll-snap. 240px cards, 16px gap. Hidden scrollbar styled to 4px thumb.

Props

PropTypeRequiredDefaultDescription
eventsEventCardConfig[]Yes—

TypeScript Interface

interface EventsRowProps {
  events: EventCardConfig[];
  ariaLabel?: string;
  emptyState?: { title: string; description: string; cta?: { label: string; href: string } };
}

Assertions (NASA Rule 5)

  • [type]events required, can be empty (render empty state)(NASA Rule 7)
  • [aria]When empty, must render empty state with role='status' and visible text(WCAG 1.3.1)

Usage

Import

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

Basic

<Eventsrow />

With Variants

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