Role Summary - Everyday Interface Patterns

A static role summary shows Mina Lee, Editor badge, two access rows, a Change role button, and no auth service, permission enforcement, or role mutation.

Program

Role display should show what a role means without claiming to enforce or mutate permissions.

role_access_summary.html

Visuals: captured from real browser rendering

<section class="role-summary" aria-labelledby="role-title">
  <h2 id="role-title">Role access</h2>
  <p><strong>User</strong> Mina Lee</p>
  <p><strong>Role</strong> <span class="badge">Editor</span></p>
  <ul>
    <li>Can edit pages</li>
    <li>Can view billing</li>
  </ul>
  <button type="button">Change role</button>
  <p class="note">Static role summary only; no auth service, permission enforcement, or role mutation runs.</p>
</section>
<style>
  .role-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .role-summary p, .note { margin: 0; }
  .role-summary ul { margin: 0; padding-left: 1.25rem; }
  .role-summary button { justify-self: start; padding: 8px 12px; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the role summary.
The section is labelled by its visible heading.
Show the pinned user.
The user name is exact deterministic lesson data.
Show the role badge.
The badge makes the pinned role visible.
Use a list for access rows.
The list groups the displayed access rows.
Show the edit access row.
The first access row is fixed display text.
Show the billing access row.
The second access row is fixed display text.
Check role honesty.
Pinned user, role badge, access rows, and no auth service.

pinned user The user name is fixed display data.

role badge The Editor role is visible as a badge.

no enforcement The lesson should not imply auth service, permission enforcement, or role mutation behavior.