Skip to content
Acuity Experience Design
Menu

Pattern

Settings

A section list beside grouped settings. Each row pairs a label and description with its control; the list stacks above the content on narrow screens.

.b-wrapper.b-region.b-sidebar.b-flow.b-repel

Use for preferences and configuration. Group settings by what people are trying to do, not by system structure. Put destructive actions last, separated, and always behind a confirmation.

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 ]">
  <h1>Settings</h1>
  <div class="[ b-sidebar ]" style="--sidebar-width: var(--beam-width-3xs)">
    <nav class="[ b-flow ]" data-space="xs" aria-label="Settings sections">
      <a class="[ b-nav-item ]" href="#" aria-current="page">General</a>
      <a class="[ b-nav-item ]" href="#">Notifications</a>
      <a class="[ b-nav-item ]" href="#">Users &amp; roles</a>
      <a class="[ b-nav-item ]" href="#">Integrations</a>
    </nav>
    <div class="[ b-flow ]" data-space="lg">
      <section class="[ b-flow ] [ b-card ]" data-space="md">
        <h2 class="[ u-type-h5 ]">Display</h2>
        <div class="[ b-repel ]"><div class="[ b-flow ]" data-space="xs"><p class="[ u-type-label ]">Dark mode</p><p class="[ u-type-body-sm u-text-neutral-secondary ]">Follow the system setting or choose one.</p></div>
          <select class="[ b-input ]" aria-label="Theme"><option>System</option><option>Light</option><option>Dark</option></select></div>
        <div class="[ b-repel ]"><div class="[ b-flow ]" data-space="xs"><p class="[ u-type-label ]">Compact tables</p><p class="[ u-type-body-sm u-text-neutral-secondary ]">Show more rows per page.</p></div>
          <button class="[ b-toggle ]" type="button" role="switch" aria-checked="true" aria-label="Compact tables"></button></div>
      </section>
      <section class="[ b-flow ] [ b-card ]" data-space="md">
        <h2 class="[ u-type-h5 ]">Alerts</h2>
        <div class="[ b-repel ]"><div class="[ b-flow ]" data-space="xs"><p class="[ u-type-label ]">Offline devices</p><p class="[ u-type-body-sm u-text-neutral-secondary ]">Email when a device is offline for 15 minutes.</p></div>
          <button class="[ b-toggle ]" type="button" role="switch" aria-checked="false" aria-label="Offline device alerts"></button></div>
      </section>
      <section class="[ b-flow ] [ b-card ]" data-space="sm" data-tone="danger">
        <h2 class="[ u-type-h5 ]">Delete organisation</h2>
        <div class="[ b-repel ]"><p class="[ u-type-body-sm u-text-neutral-secondary ]">Removes all sites and devices. This can’t be undone.</p>
          <button class="[ b-button ]" data-variant="danger" type="button">Delete…</button></div>
      </section>
    </div>
  </div>
</div>

Cantina components

  • vertical-tab-bar
  • toggle
  • dropdown
  • button

Open Cantina ↗

Recipe

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

  1. Layout: .b-sidebar — section nav first (Cantina <VerticalTabBar>), settings second. It stacks with no media query.
  2. Group settings in cards, one heading per group. Each row is a .b-repel: label + description (.b-flow[data-space="xs"]) and the control.
  3. Toggles apply immediately; settings that need confirmation get an explicit Save in the group footer.
  4. Destructive settings go last in their own group, with error-tone styling and a confirmation dialog.
beam.skill recipe (Markdown)
## Pattern: Settings
A section list beside grouped settings. Each row pairs a label and description with its control; the list stacks above the content on narrow screens.

Compositions: .b-wrapper, .b-region, .b-sidebar, .b-flow, .b-repel
Cantina: vertical-tab-bar, toggle, dropdown, button

1. Layout: .b-sidebar — section nav first (Cantina <VerticalTabBar>), settings second. It stacks with no media query.
2. Group settings in cards, one heading per group. Each row is a .b-repel: label + description (.b-flow[data-space="xs"]) and the control.
3. Toggles apply immediately; settings that need confirmation get an explicit Save in the group footer.
4. Destructive settings go last in their own group, with error-tone styling and a confirmation dialog.