Code box

What it is

A coupon or promotion code a member copies. Soft panel, 1px line-strong, 8px radius; the code in --hs-font-mono, 18px/600. One tap selects the whole code.

When to use

• After “Redeem benefit” on a coupon benefit page under /benefits-coupons/*.
• Any single coupon or promotion code that a member copies and types somewhere else.

When not to use

• For a field the member types into, use a Form control.
• For a route to a partner site, use a Text link.
• For other text, keep the body face. The mono face is for a code a member copies only.

Rules

• Markup: .hs-code holds p.hs-code__label, then .hs-code__box with span.hs-code__value and the Copy button, then an optional p.hs-code__note, then p.hs-code__status.hs-visually-hidden with role="status".
• The value holds the code only. code-box.js copies its trimmed text.
• The Copy button is .hs-button.hs-button--secondary.hs-button--sm.hs-code__copy, type="button", with data-hs-copy set to the value id and the hidden attribute. Its label sits in .hs-code__copy-label.
• The secondary pill fits here because the Copy button is a card action. Load code-box.js.

Accessibility

• The value carries aria-labelledby="LABEL-ID VALUE-ID", so a screen reader reads the label, then the code.
• Contrast: code ink on soft 12.2:1, label slate 6.2:1.
• The mono face keeps 0 and O, 1 and l apart. One tap selects the whole code (user-select: all).
• After a copy the label reads “Copied” for two seconds, and the border turns navy as a second cue. The status line says “Code copied.” to a screen reader.
• Without JavaScript, or without the clipboard API, the button stays hidden. The member selects the code and copies it.

Variants

Code box

The Copy button is a small secondary pill. It ships hidden; code-box.js shows it and says “Copied” for two seconds.

<div class="hs-code">
  <p class="hs-code__label" id="code-1-label">Your promotion code</p>
  <div class="hs-code__box">
    <span class="hs-code__value" id="code-1" aria-labelledby="code-1-label code-1">HSRDC-7Q4M-2K9P</span>
    <button class="hs-button hs-button--secondary hs-button--sm hs-code__copy" type="button" data-hs-copy="code-1" hidden><svg class="hs-code__copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="8.5" y="8.5" width="11" height="11" rx="2"/><path d="M15.5 8.5V6.5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2"/></svg><span class="hs-code__copy-label">Copy</span></button>
  </div>
  <p class="hs-code__note">We emailed this code to you as well.</p>
  <p class="hs-code__status hs-visually-hidden" role="status"></p>
</div>