Role Seats - Everyday Interface Patterns

A static role seat breakdown shows Admins 2 seats, Editors 3 seats, Viewers 1 seat, and Total 6 seats used.

Program

Role seat breakdowns should show counts by role without implying permission enforcement, billing changes, or live seat quota APIs.

role_seat_breakdown.html

Visuals: captured from real browser rendering

<section class="role-seats" aria-labelledby="role-seats-title">
  <h2 id="role-seats-title">Role seat breakdown</h2>
  <dl>
    <div><dt>Admins</dt><dd>2 seats</dd></div>
    <div><dt>Editors</dt><dd>3 seats</dd></div>
    <div><dt>Viewers</dt><dd>1 seat</dd></div>
    <div><dt>Total</dt><dd><span class="badge">6 seats used</span></dd></div>
  </dl>
  <p class="note">Static role seat breakdown only; no route, save, invite, bill, charge, change seats, update users, or call a permission service runs.</p>
</section>
<style>
  .role-seats { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .role-seats dl { display: grid; gap: 8px; margin: 0; }
  .role-seats dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .role-seats dt { color: #475569; }
  .role-seats dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the role seat breakdown.
The section is labelled by its visible heading.
Show the admin row.
The admin seat count is exact pinned data.
Show the editor row.
The editor seat count is exact pinned data.
Show the viewer row.
The viewer seat count is exact pinned data.
Show the total readback.
The total is exact pinned data.
Check role seats honesty.
Role counts, total, and no permission service.

static breakdown The section heading names the role seat breakdown surface.

role rows Admins, Editors, Viewers, and Total are exact pinned data.

no permission service The lesson should not imply permission APIs, user APIs, billing APIs, subscription APIs, or seat/quota APIs.