# Code box

> Shows the coupon or promotion code a member copies after they redeem a benefit.

- Block class: `.hs-code`
- CSS: `components/code-box.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: `components/code-box.js`. Load it only on a page that has this component.
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2b.html
- Variants: Code box
- HTML page: https://brand.honorsociety.org/components/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](/components/form/) control.
- For a route to a partner site, use a [Text link](/components/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.

```html
<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>
```