EventGrid

organisms

Responsive event grid — 1/2/3/4 columns at sm/md/lg/xl. Same shape across all event listing pages. Loading state shows Skeleton grid.

ARIA Role: list

Demo

Demo for EventGrid (organisms)

Responsive event grid — 1/2/3/4 columns at sm/md/lg/xl. Same shape across all event listing pages. Loading state shows Skeleton grid.

Props

PropTypeRequiredDefaultDescription
eventsEventCardPublicConfig[]Yes—0-48 events

TypeScript Interface

interface EventGridProps {
  events: EventCardPublicConfig[];
  columns?: { sm?: 1; md?: 2; lg?: 3; xl?: 4 };
  emptyState?: EmptyStateConfig;
  isLoading?: boolean;
  skeletonCount?: number;
}

Assertions (NASA Rule 5)

  • [type]events bounded 0-48 (NASA Rule 2)(NASA Rule 2)
  • [aria]role='list' aria-label='Events'; loading state has aria-busy(WCAG 4.1.3)

Usage

Import

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

Basic

<Eventgrid />

With Variants

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