Promo Applied - Everyday Interface Patterns

A static promo display card shows pinned code SAVE10, discount text -$4.00, a Remove promo button, and no coupon validation, cart update, or backend service.

Program

Promotion display should show the applied code and discount without pretending to validate or update a cart.

promo_code_applied.html

Visuals: captured from real browser rendering

<section class="promo-card" aria-labelledby="promo-title">
  <h2 id="promo-title">Promotion applied</h2>
  <p><strong>Code</strong> <span class="code">SAVE10</span></p>
  <p><strong>Discount</strong> -$4.00</p>
  <button type="button">Remove promo</button>
  <p class="note">Static promo display only; no coupon validation, cart update, or backend service runs.</p>
</section>
<style>
  .promo-card { display: grid; gap: 10px; max-width: 36rem; border: 1px solid #64748b; padding: 12px; }
  .promo-card p, .note { margin: 0; }
  .promo-card button { justify-self: start; padding: 8px 12px; }
  .code { font-family: monospace; background: #e2e8f0; padding: 2px 6px; }
  .note { color: #475569; }
</style>

Label the promo card.
The section is labelled by its visible heading.
Show the promo heading.
The heading tells users this is a displayed promo state.
Show the pinned promo code.
The code is exact deterministic lesson data.
Show the discount text.
The discount text is fixed display data.
Show the remove affordance.
The button names a possible action without mutating a cart.
Check promo honesty.
Pinned code, discount, button, and no validation service.

pinned code SAVE10 is fixed display data.

discount text The discount amount is shown as pinned text.

no validation The lesson should not imply coupon validation, cart updates, or backend service behavior.