Pattern

Dashboard

Key numbers first, then the main chart with a supporting list. Tiles reflow on their own; the chart row uses page columns.

.b-wrapper.b-region.b-flow.b-grid.b-layout-grid.b-repel

Use for at-a-glance status across many things. Lead with 3–6 numbers people check daily, then one main visual. Avoid packing every metric in — link to detail pages instead.

Preview

Acuity Brands Lighting

Each kit renders in its own frame and follows the theme and density set in the header. Open full-size ↗

HTML

Layout uses Beam compositions and utilities only. Buttons, inputs, toggles, badges and tables here are stand-ins so the preview renders — in product, use the Cantina components below.

<div class="[ b-wrapper b-region b-flow ]">
  <div class="[ b-repel ]">
    <h1>Portfolio</h1>
    <div class="[ b-cluster ] [ b-segmented ]" data-gap="xs" role="group" aria-label="Period">
      <button class="[ b-button ]" data-variant="outline" type="button" aria-pressed="false">Week</button>
      <button class="[ b-button ]" data-variant="outline" type="button" aria-pressed="true">Month</button>
      <button class="[ b-button ]" data-variant="outline" type="button" aria-pressed="false">Year</button>
    </div>
  </div>
  <div class="[ b-grid ]" data-min="xs">
    <div class="[ b-flow ] [ b-card ]" data-space="xs"><p class="[ u-type-label-sm u-text-neutral-secondary ]">Energy used</p><p class="[ u-type-h2 ]">48.2 MWh</p><p><span class="[ b-badge ]" data-tone="success">−6% vs last month</span></p></div>
    <div class="[ b-flow ] [ b-card ]" data-space="xs"><p class="[ u-type-label-sm u-text-neutral-secondary ]">Devices online</p><p class="[ u-type-h2 ]">98.7%</p><p><span class="[ b-badge ]">Steady</span></p></div>
    <div class="[ b-flow ] [ b-card ]" data-space="xs"><p class="[ u-type-label-sm u-text-neutral-secondary ]">Open alerts</p><p class="[ u-type-h2 ]">3</p><p><span class="[ b-badge ]" data-tone="warning">2 new</span></p></div>
    <div class="[ b-flow ] [ b-card ]" data-space="xs"><p class="[ u-type-label-sm u-text-neutral-secondary ]">Sites</p><p class="[ u-type-h2 ]">24</p><p><span class="[ b-badge ]">—</span></p></div>
  </div>
  <div class="[ b-layout-grid ]">
    <section class="[ b-flow ] [ b-card ]" data-space="sm" data-span="8"><h2 class="[ u-type-h5 ]">Usage by day</h2><div class="[ b-frame ] [ b-placeholder ]">Chart</div></section>
    <section class="[ b-flow ] [ b-card ]" data-space="sm" data-span="4"><h2 class="[ u-type-h5 ]">Top sites</h2>
      <ol class="[ b-flow ]" data-space="xs"><li class="[ b-repel ]"><span>Atlanta HQ</span><span class="[ u-text-neutral-secondary ]">9.1 MWh</span></li><li class="[ b-repel ]"><span>Conyers</span><span class="[ u-text-neutral-secondary ]">6.4 MWh</span></li><li class="[ b-repel ]"><span>Cochran</span><span class="[ u-text-neutral-secondary ]">5.0 MWh</span></li></ol>
    </section>
  </div>
</div>

Cantina components

dashboard
badge
segmented-button

Open Cantina ↗

Recipe

The rules an agent follows to build this pattern. This is what goes into beam.skill.

Order: page title + period control (.b-repel), KPI tiles (.b-grid[data-min="xs"]), then detail rows (.b-layout-grid).
KPI tile: label (type-label-sm text-neutral-secondary), value (type-h2), change (badge with tone). 3–6 tiles.
Main chart 8 columns + supporting list 4 at md; both full width on phones.
Cards: surface-raised, border-neutral-secondary, radius-rounded, inset-lg. Use depth-low only if cards sit on a tinted surface.
Colour in charts comes from accent and status ramps; follow the dataviz guidance, not ad-hoc colours.

beam.skill recipe (Markdown)

## Pattern: Dashboard
Key numbers first, then the main chart with a supporting list. Tiles reflow on their own; the chart row uses page columns.

Compositions: .b-wrapper, .b-region, .b-flow, .b-grid, .b-layout-grid, .b-repel
Cantina: dashboard, badge, segmented-button

1. Order: page title + period control (.b-repel), KPI tiles (.b-grid[data-min="xs"]), then detail rows (.b-layout-grid).
2. KPI tile: label (type-label-sm text-neutral-secondary), value (type-h2), change (badge with tone). 3–6 tiles.
3. Main chart 8 columns + supporting list 4 at md; both full width on phones.
4. Cards: surface-raised, border-neutral-secondary, radius-rounded, inset-lg. Use depth-low only if cards sit on a tinted surface.
5. Colour in charts comes from accent and status ramps; follow the dataviz guidance, not ad-hoc colours.