Settings layout

Configuration screens: a section menu beside grouped sections of labelled setting rows, never a grid of cards.

.settings · .settings__menu · .settingsec · .setting · .setting__control

Web Mobile 375px

Profile

Who you are in this console.

Display nameShown on audit entries and approvals.

RoleSet by your administrator; shown here for reference.

Appearance

How this console looks on this device.

ThemeLight by default. Your choice is remembered on this device.

Security

Session and access rules for this workspace.

Two-step verificationRequired for settlement and configuration changes.

Other sessionsSign out every other browser signed in as you.

Settings: a section menu beside grouped rows

<div class="settings">
  <nav class="settings__menu" aria-label="Settings sections">
    <a class="settings__link" href="#sl-profile">Profile</a>
    <a class="settings__link" href="#sl-appearance">Appearance</a>
    <a class="settings__link" href="#sl-security">Security</a>
  </nav>
  <div class="settings__sections">
    <section class="settingsec" id="sl-profile" aria-labelledby="sl-profile-h">
      <div class="settingsec__head"><h2 id="sl-profile-h">Profile</h2><p class="muted">Who you are in this console.</p></div>
    <div class="setting">
      <div class="setting__text"><span class="setting__label">Display name</span><span class="setting__desc">Shown on audit entries and approvals.</span></div>
      <div class="setting__control"><input class="input" id="sl-name" value="Operations Admin"></div>
    </div>
    <div class="setting">
      <div class="setting__text"><span class="setting__label">Role</span><span class="setting__desc">Set by your administrator; shown here for reference.</span></div>
      <div class="setting__control"><span class="selectwrap"><select class="select" id="sl-role"><option>Operations</option><option>Finance</option></select></span></div>
    </div>
    </section>
    <section class="settingsec" id="sl-appearance" aria-labelledby="sl-appearance-h">
      <div class="settingsec__head"><h2 id="sl-appearance-h">Appearance</h2><p class="muted">How this console looks on this device.</p></div>
    <div class="setting">
      <div class="setting__text"><span class="setting__label">Theme</span><span class="setting__desc">Light by default. Your choice is remembered on this device.</span></div>
      <div class="setting__control"><button type="button" class="btn btn--secondary btn--sm toggle44" data-theme-toggle>Switch light and dark</button></div>
    </div>
    </section>
    <section class="settingsec" id="sl-security" aria-labelledby="sl-security-h">
      <div class="settingsec__head"><h2 id="sl-security-h">Security</h2><p class="muted">Session and access rules for this workspace.</p></div>
    <div class="setting">
      <div class="setting__text"><span class="setting__label">Two-step verification</span><span class="setting__desc">Required for settlement and configuration changes.</span></div>
      <div class="setting__control"><input type="checkbox" id="sl-2fa" checked></div>
    </div>
    <div class="setting">
      <div class="setting__text"><span class="setting__label">Other sessions</span><span class="setting__desc">Sign out every other browser signed in as you.</span></div>
      <div class="setting__control"><button type="button" class="btn btn--secondary btn--sm">Sign out other sessions</button></div>
    </div>
    </section>
  </div>
</div>

Usage

Configuration is a settings layout, never a grid of cards: a section menu beside grouped sections, each section a list of rows.
One row, one setting: the label says what it is, the description says what it affects, and a single control sits at the end of the row. On phones the control moves under its description.
The menu is plain anchors and every section stays on the page, so the screen works with JavaScript off and deep links survive.
Group by subject (profile, appearance, notifications, security, access), not by control type. Five to seven rows per section reads well; beyond that, split the section.
Destructive actions sit in their own row with a plain description of what they end, and use the danger button only when the action is irreversible.

CSS

These rules ship in the console pattern layer, admin-kits/shared/novus-admin.css, which this site and every Admin Kit flavor load after tokens.css. Copy the whole layer, or only the sections below; every value is a token.

@pattern settings-layout

/* Configuration screens: a section menu beside grouped sections of labelled
   rows. Anchors, so it works with JavaScript off (constitution 1.12.0, VII). */
.settings { display: flex; flex-direction: column; gap: var(--space-4); }
.settings__menu { display: flex; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-1); border-bottom: 1px solid var(--border); }
.settings__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; }
.settings__link:hover { color: var(--text); background: var(--bg-subtle); text-decoration: none; }
.settingsec { scroll-margin-top: var(--space-5); }
.settingsec:target .settingsec__head { border-inline-start-color: var(--accent); }
.settingsec__head { padding-inline-start: var(--space-3); border-inline-start: 2px solid transparent; margin-bottom: var(--space-3); }
.settingsec__head p { margin: var(--space-1) 0 0; }
.setting { display: grid; gap: var(--space-2) var(--space-5); grid-template-columns: minmax(0, 1fr); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.setting:first-of-type { border-top: 0; }
.setting__text { min-width: 0; }
.setting__label { display: block; font-weight: var(--weight-medium); }
.setting__desc { display: block; margin-top: calc(var(--space-1) / 2); color: var(--text-secondary); }
.setting__control { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.setting__control .input, .setting__control .select, .setting__control md-filled-text-field, .setting__control md-outlined-text-field { width: 100%; }
.setting .field { margin: 0; }
@media (min-width: 900px) {
  .settings { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .settings__menu { position: sticky; top: var(--space-4); flex-direction: column; overflow: visible; padding: 0; border-bottom: 0; border-inline-end: 1px solid var(--border); }
  .settings__link { border-inline-start: 2px solid transparent; border-radius: 0; }
  .settings__link:hover { border-inline-start-color: var(--border-strong); }
  .setting { grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem); align-items: center; }
}
@media (pointer: coarse) { .settings__link { min-height: 2.75rem; } }

‹ Signed-out page