Invitation and Access Patterns

Invite Pending

A static invite card shows masked email m***@example.test, Pending status, a Resend invite button, and no email delivery, invite mutation, or backend service.

Program

Invitation display should make the invite state visible without implying that email or backend work runs.

invite_pending_status.html
Visuals: captured from real browser rendering
<section class="invite-card" aria-labelledby="invite-title">
  <h2 id="invite-title">Invite pending</h2>
  <p><strong>Email</strong> <span class="code">m***@example.test</span></p>
  <p><strong>Status</strong> <span class="badge">Pending</span></p>
  <button type="button">Resend invite</button>
  <p class="note">Static invite status only; no email delivery, invite mutation, or backend service runs.</p>
</section>
<style>
  .invite-card { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .invite-card p, .note { margin: 0; }
  .invite-card button { justify-self: start; padding: 8px 12px; }
  .code { font-family: monospace; background: #e2e8f0; padding: 2px 6px; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the invite card.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show the invite heading.

    The heading names the static invitation state.
    The heading names the static invitation state.

  3. Show the masked email.

    The email is masked static display data.
    The email is masked static display data.

  4. Show the pending status.

    The badge makes the pinned invite state visible.
    The badge makes the pinned invite state visible.

  5. Show the resend affordance.

    The button names a possible action without delivering email.
    The button names a possible action without delivering email.

  6. Check invite honesty.

    Masked email, Pending badge, button, and no email service.
    Masked email, Pending badge, button, and no email service.
masked email The invite email is masked display data.
pending status The Pending status is visible and pinned.
no email delivery The lesson should not imply email delivery, invite mutation, or backend service behavior.