SideCard

organisms

Generic side panel card — 16px padding, white bg, 1px border, 16px radius. Contains: title (13px/700) + body. Used for Ticket Sales Breakdown, Recent Activity.

ARIA Role: region

Demo

Card Title

Card description text goes here.

Props

Prop	Type	Required	Default	Description
`title`	`string`	Yes	`—`
`children`	`React.ReactNode`	Yes	`—`

TypeScript Interface

interface SideCardProps {
  title: string;
  titleId?: string;
  children: React.ReactNode;
  variant?: 'default' | 'accent';
}

Assertions (NASA Rule 5)

[type]title and children required(NASA Rule 5)
[aria]Card region must be aria-labelledby pointing to title id(WCAG 1.3.1)

Usage

Import

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

Basic

<Sidecard />

With Variants

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