Quiet Hours - Everyday Interface Patterns

A static quiet-hours summary shows a pinned time window, timezone text, Override button, and no scheduler, clock watcher, or delivery service.

Program

Quiet-hours summaries should show when delivery is paused and which timezone the window uses. This lesson is pinned display state only.

quiet_hours_summary.html

Visuals: captured from real browser rendering

<section class="quiet-hours" aria-labelledby="quiet-title">
  <h2 id="quiet-title">Quiet hours</h2>
  <p><strong>Window</strong> 21:00 to 07:00</p>
  <p><strong>Timezone</strong> America/Chicago</p>
  <button type="button">Override quiet hours</button>
  <p class="note">Static quiet-hours summary only; no scheduler, clock watcher, or delivery service runs.</p>
</section>
<style>
  .quiet-hours { display: grid; gap: 10px; max-width: 36rem; border: 1px solid #64748b; padding: 12px; }
  .quiet-hours p, .note { margin: 0; }
  .quiet-hours button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the quiet-hours summary.
The section is labelled by its visible heading.
Name the notification state.
The heading tells the user that delivery timing is being summarized.
Show the pinned time window.
The time window is deterministic lesson data.
Show the timezone text.
The timezone clarifies how to read the time window.
Show the override affordance.
The button names a possible action without scheduling anything.
Check the quiet-hours summary.
The card shows a pinned window, timezone, button, and no delivery service.

time window The card shows exact pinned quiet-hours times.

timezone text The timezone label makes the time window easier to interpret.

no delivery service The lesson should not imply a scheduler, clock watcher, or delivery service.