Quiet Hours - Everyday Interface Patterns

A static quiet-hours notice shows 6:00 PM-8:00 AM, America/Chicago, Urgent alerts only, and Scheduled silence.

Program

Quiet-hours notices should show the boundary and override clearly without running a clock, timer, scheduler, route, or notification API.

quiet_hours_notice.html

Visuals: captured from real browser rendering

<section class="quiet-hours" aria-labelledby="quiet-hours-title">
  <h2 id="quiet-hours-title">Quiet hours notice</h2>
  <dl>
    <div><dt>Quiet hours</dt><dd>6:00 PM-8:00 AM</dd></div>
    <div><dt>Time zone</dt><dd>America/Chicago</dd></div>
    <div><dt>Override</dt><dd>Urgent alerts only</dd></div>
    <div><dt>Status</dt><dd><span class="badge">Scheduled silence</span></dd></div>
  </dl>
  <p class="note">Static quiet-hours notice only; no clock, timer, scheduler, notification service, storage, route, or API runs.</p>
</section>
<style>
  .quiet-hours { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .quiet-hours dl { display: grid; gap: 8px; margin: 0; }
  .quiet-hours dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .quiet-hours dt { color: #475569; }
  .quiet-hours dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the quiet-hours notice.
The section is labelled by its visible heading.
Show the quiet-hours boundary.
The boundary is exact pinned data.
Show the time zone row.
The time zone is exact pinned data.
Show the override row.
The override is exact pinned data.
Show the scheduled silence status.
The status is visible as a static badge.
Check quiet-hours honesty.
Boundary, time zone, override, status, and no scheduler.

visual notice The section heading names the quiet-hours notice surface.

boundary readback Quiet hours, time zone, override, and status rows are exact pinned data.

no scheduler The lesson should not imply clocks, timers, schedulers, notification services, storage, routes, or APIs.