Handoff Blocker - Everyday Interface Patterns

A static blocker notice shows Legal approval needed, Ask Priya for sign-off, and Needs attention severity with no notifications or APIs.

Program

Blocker notices should show the exact blocker, next action, and severity without sending alerts or changing project state.

handoff_blocker_notice.html

Visuals: captured from real browser rendering

<section class="blocker-notice" aria-labelledby="blocker-title">
  <h2 id="blocker-title">Handoff blocker</h2>
  <p class="severity" role="status">Needs attention</p>
  <p><strong>Blocker</strong> Legal approval needed</p>
  <p><strong>Next action</strong> Ask Priya for sign-off</p>
  <button type="button">Review blocker</button>
  <p class="note">Static blocker notice only; the button does not route, save, send, notify, or call a project or collaboration service.</p>
</section>
<style>
  .blocker-notice { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .blocker-notice p, .note { margin: 0; }
  .severity { border: 1px solid #f59e0b; background: #fef3c7; padding: 8px; font-weight: 700; }
  .blocker-notice button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the blocker notice.
The section is labelled by its visible heading.
Expose the severity readback.
The severity is exposed as status text.
Show the exact blocker text.
The blocker text is exact pinned data.
Show the next action.
The next action is exact pinned data.
Show the review affordance.
The button is type button and does not route, save, or send.
Check blocker honesty.
Severity, blocker, next action, button, and no live service.

status surface Needs attention is visible as the severity readback.

exact blocker Legal approval needed is exact pinned blocker text.

no notification service The lesson should not imply routing, saving, sending, notifications, project APIs, or collaboration services.