DashboardBody

templates

Main dashboard body — main landmark + 70/30 split (main-col / side-col), 24px section gap, 24px padding, 16px radius. Side col collapses below main on tablet (≤1100px).

Demo

Demo for DashboardBody (templates)

Main dashboard body — main landmark + 70/30 split (main-col / side-col), 24px section gap, 24px padding, 16px radius. Side col collapses below main on tablet (≤1100px).

Props

PropTypeRequiredDefaultDescription
mainColumnReact.ReactNodeYes—
sideColumnReact.ReactNodeYes—

TypeScript Interface

interface DashboardBodyProps {
  mainColumn: React.ReactNode;
  sideColumn: React.ReactNode;
}

Assertions (NASA Rule 5)

  • [type]mainColumn and sideColumn required(NASA Rule 5)
  • [aria]Main element must have role='main' and id='main' for skip link target(WCAG 2.4.1)

Usage

Import

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

Basic

<Dashboardbody />

With Variants

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