WidgetCard

Usage

WidgetCard is the dashboard card shell — pick the variant by slot: chart for primary content (tables, charts, KPI lists), side for right-rail / secondary columns, and accent for theme-stable dark surfaces (settlement boxes, dark CTAs). The header renders only when at least one of title / subtitle / action is set — omit all three for headless cards (empty-state boxes, error shells). Site-specific inner lists stay as children with their own classes; do not hand-roll a div.chart-card or div.side-card wrapper.

import { WidgetCard, Button } from '@epasslive/design-system'

<WidgetCard
  variant="chart"
  title={t('timeseries')}
  subtitle={t('last30Days')}
  action={<DateFilter value={range} onChange={setRange} />}
  footer={<SampleDataDisclaimer />}
>
  <SalesTable rows={rows} />
</WidgetCard>

Accessibility

The card is a landmark-friendly <section> (switch with as) whose accessible name auto-wires to its own <h3> via aria-labelledby, unless you name it explicitly with aria-label / aria-labelledby. The accent variant is dark in both themes — put only inverse-text children inside (WCAG 1.4.3), and keep interactive content in the action slot at or above the 44×44px minimum (--ep-tap-min, WCAG 2.5.8).

Props