Expired Offer - Everyday Interface Patterns

A static expired-offer notice shows Offer expired, code SPRING, fixed expiry date 2026-05-31, an Apply another code button, and no clock watcher, coupon service, or form submission.

Program

Expired-offer display should explain the status and next possible action without running a clock or coupon service.

expired_offer_notice.html

Visuals: captured from real browser rendering

<section class="expired-offer" aria-labelledby="expired-title">
  <h2 id="expired-title">Offer expired</h2>
  <p><strong>Code</strong> <span class="code">SPRING</span></p>
  <p><strong>Expired</strong> 2026-05-31</p>
  <button type="button">Apply another code</button>
  <p class="note">Static expired-offer notice only; no clock watcher, coupon service, or form submission runs.</p>
</section>
<style>
  .expired-offer { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fff7ed; }
  .expired-offer p, .note { margin: 0; }
  .expired-offer button { justify-self: start; padding: 8px 12px; }
  .code { font-family: monospace; background: #ffedd5; padding: 2px 6px; }
  .note { color: #475569; }
</style>

Label the expired-offer notice.
The section is labelled by its visible heading.
Show the expired status.
The heading makes the status visible.
Show the pinned code.
The code is exact deterministic lesson data.
Show the fixed expiry date.
The date is fixed text, not read from a clock watcher.
Show the alternate-code affordance.
The button names a possible next action without submitting a form.
Check expired-offer honesty.
Expired status, pinned code, fixed date, and no coupon service.

expired status The heading states the offer status.

fixed expiry The expiry date is fixed lesson data.

no form submission The lesson should not imply a clock watcher, coupon service, or form submission.