Invite Seat - Everyday Interface Patterns

A static pending invite notice shows invitee Lee, role Editor, seat impact Uses 1 seat, and remaining after invite 1 seat.

Program

Pending invite notices should show the seat impact before implying a real invite, billing change, permission update, or user service.

pending_invite_seat_notice.html

Visuals: captured from real browser rendering

<section class="invite-seat" aria-labelledby="invite-seat-title">
  <h2 id="invite-seat-title">Pending invite seat</h2>
  <dl>
    <div><dt>Invitee</dt><dd>Lee</dd></div>
    <div><dt>Role</dt><dd>Editor</dd></div>
    <div><dt>Seat impact</dt><dd>Uses 1 seat</dd></div>
    <div><dt>Remaining after invite</dt><dd><span class="badge">1 seat</span></dd></div>
  </dl>
  <p class="note">Static invite seat notice only; no route, save, invite, bill, charge, change seats, update users, or call an invite service runs.</p>
</section>
<style>
  .invite-seat { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .invite-seat dl { display: grid; gap: 8px; margin: 0; }
  .invite-seat dl div { display: grid; grid-template-columns: 11rem 1fr; gap: 8px; }
  .invite-seat dt { color: #475569; }
  .invite-seat dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the pending invite notice.
The section is labelled by its visible heading.
Show the invitee row.
The invitee is exact pinned data.
Show the role row.
The role is exact pinned data.
Show the seat impact.
The seat impact is exact pinned data.
Show remaining seats.
The remaining count is exact pinned data.
Check invite seat honesty.
Invitee, role, impact, remaining count, and no invite service.

labelled notice The section heading names the pending invite seat surface.

seat impact Invitee, role, impact, and remaining count are exact pinned data.

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