Pattern

Detail page

One record: title, status and actions up top; the main content on the left and a metadata rail on the right.

.b-wrapper.b-region.b-flow.b-repel.b-sidebar[data-side="right"].b-cluster

Use for a single record (a device, a site, a user). The title row answers “what is this and what state is it in”; the rail holds facts people look up; the main column holds what people work on.

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 ]" data-space="sm">
  <ol class="[ b-cluster ] [ b-breadcrumb ]" data-gap="xs" role="list"><li><a href="#">Devices</a></li><li aria-current="page">Gateway 07</li></ol>
  <div class="[ b-repel ]">
    <div class="[ b-cluster ]" data-gap="sm"><h1>Gateway 07</h1><span class="[ b-badge ]" data-tone="warning">Update available</span></div>
    <div class="[ b-cluster ]" data-gap="sm">
      <button class="[ b-button ]" data-variant="outline" type="button">Restart</button>
      <button class="[ b-button ]" data-variant="solid" type="button">Update firmware</button>
    </div>
  </div>
  <div class="[ b-sidebar ]" data-side="right" style="--sidebar-width: var(--beam-width-3xs)">
    <div class="[ b-flow ]" data-space="lg">
      <section class="[ b-flow ] [ b-card ]" data-space="sm"><h2 class="[ u-type-h5 ]">Connected devices</h2><p class="[ u-type-body-sm u-text-neutral-secondary ]">142 devices report through this gateway.</p><div class="[ b-frame ] [ b-placeholder ]">Topology</div></section>
      <section class="[ b-flow ] [ b-card ]" data-space="sm"><h2 class="[ u-type-h5 ]">Activity</h2><p class="[ u-type-body-sm u-text-neutral-secondary ]">Restarted 3 days ago by J. Doe.</p></section>
    </div>
    <aside class="[ b-card ]">
      <dl class="[ b-flow ] [ b-meta ]" data-space="sm">
        <div><dt>Location</dt><dd>Floor 1 · IT closet</dd></div>
        <div><dt>Firmware</dt><dd>1.9.0</dd></div>
        <div><dt>Serial</dt><dd>GW-07-2291</dd></div>
        <div><dt>Last seen</dt><dd>2 minutes ago</dd></div>
      </dl>
    </aside>
  </div>
</div>

Cantina components

breadcrumb
badge
button
tab-bar
accordion-item

Open Cantina ↗

Recipe

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

Top: breadcrumb, then .b-repel — title + status badge (.b-cluster) left, actions right (primary last).
Body: .b-sidebar[data-side="right"] — main content first in source order, metadata rail second. Stacks without a media query.
Main: sections as cards or a Cantina <TabBar> when there are more than ~3 sections.
Rail: key/value pairs as a <dl> (dt type-label-sm text-neutral-tertiary, dd type-body).

beam.skill recipe (Markdown)

## Pattern: Detail page
One record: title, status and actions up top; the main content on the left and a metadata rail on the right.

Compositions: .b-wrapper, .b-region, .b-flow, .b-repel, .b-sidebar[data-side="right"], .b-cluster
Cantina: breadcrumb, badge, button, tab-bar, accordion-item

1. Top: breadcrumb, then .b-repel — title + status badge (.b-cluster) left, actions right (primary last).
2. Body: .b-sidebar[data-side="right"] — main content first in source order, metadata rail second. Stacks without a media query.
3. Main: sections as cards or a Cantina <TabBar> when there are more than ~3 sections.
4. Rail: key/value pairs as a <dl> (dt type-label-sm text-neutral-tertiary, dd type-body).