Page

A page layout organizes sections on a page using a grid and grid columns.

#With a panel

Put supporting context in a panel beside the main content.

Reps on shift

Reps
Rep	Open
Ava Mensah	7
Mei Tan	3

import { Heading, PageLayout, Panel, Table } from '@wolf-rayet/react';

<PageLayout panel={<Panel title="Coverage"><p style={{ margin: 0 }}>7 of 8 seats staffed.</p></Panel>}>
  <div>
    <Heading size="large">Reps on shift</Heading>
    <Table
      caption="Reps"
      columns={[{ key: 'rep', label: 'Rep' }, { key: 'open', label: 'Open', align: 'end' }]}
      rows={[{ rep: 'Ava Mensah', open: 7 }, { rep: 'Mei Tan', open: 3 }]}
    />
  </div>
</PageLayout>