# Confirmation panel

> What a page shows in place of its form after the form sent something: what happened, where it went, the next step.

- Block class: `.hs-confirm`
- CSS: `components/confirm.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-4.html
- Variants: Check your email
- HTML page: https://brand.honorsociety.org/components/confirmation-panel/

## What it is

A left-aligned block that replaces a form after a successful submit that sends something. The first row is a 24px icon in a 40px success disc with the heading beside it, on the same line; the disc centres on the heading’s first line. Under that row, one or two lines of `.hs-confirm__text` run the full width from the left edge. The address it went to is in `<strong>`, in ink. There is no button: the next step is a quiet [Form link](/components/form-note/).

## When to use

- After a reset request on `/user/password`: “Check your email”.
- After any form that sends an email or a request and has nothing more to ask, inside an [Auth card](/components/auth-card/), a card or a dialog.

## When not to use

- A short confirmation above a page that stays usable, such as a saved profile: use a [Callout](/components/callout/) `--success` with `role="status"`.
- A list with nothing in it yet: use the [Empty state](/components/empty-state/).
- An error: use the [form alert](/components/form/).

## Rules

- Markup: `div.hs-confirm`, then `svg.hs-confirm__icon`, the heading, then `p.hs-confirm__text`, in that order. The grid puts the icon and the heading on one row and the text under them.
- Use an `.hs-heading--h2` heading: the disc centres on its first line box. A heading that wraps continues beside the disc, never under it.
- The icon is an envelope when the action sent an email, a tick otherwise.
- On an account page the heading is the page `h1` with `hs-heading hs-heading--h2`, as in the auth card.
- Name the result, not the action: “Check your email”, not “Request submitted”. Put the address the email went to in `<strong>`.
- Say what the link does and its limits that the reader can check: it works once; it expires after the site’s reset timeout.
- Put the “did not get it” help in a `.hs-form-note` under a `.hs-form-divider`, with one link that sends it again.

## Accessibility

- Icon success on success surface 4.8:1 (3:1 needed); it is `aria-hidden`: the heading says what happened.
- Text slate 6.2:1, the address ink 13.0:1 on white. A long address breaks anywhere and never overflows at 320px.
- At 320px the heading column beside the disc is about 200px wide; “Check your email” wraps to two lines there, both beside the disc.
- The panel is a new page after a redirect, so it takes no live role. Shown in place without a reload, give the panel `role="status"` and `tabindex="-1"`, and move focus to it.
- No motion.

## Variants

### Check your email

The state after a reset request, in the auth card.

```html
<section class="hs-band" data-section="reset-sent" aria-labelledby="cp-sent-h">
  <div class="hs-container">
    <div class="hs-auth">
      <div class="hs-auth__card">
        <div class="hs-confirm">
          <svg class="hs-confirm__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="3.5" y="5.5" width="17" height="13" rx="2"/><path d="m4 7 8 6 8-6"/></svg>
          <h1 class="hs-heading hs-heading--h2" id="cp-sent-h">Check your email</h1>
          <p class="hs-confirm__text">We sent a link to set a new password to <strong>avery.example@example.com</strong>. The link works once and expires in 24 hours.</p>
        </div>
        <hr class="hs-form-divider">
        <p class="hs-form-note"><strong>Did not get the email?</strong> Check your spam folder, or <a class="hs-form-link" href="/user/password" data-ph-capture-attribute-cta="reset-password" data-ph-capture-attribute-cta-loc="reset-sent">send the link again</a>.</p>
      </div>
      <p class="hs-auth__alt"><a class="hs-form-link" href="/user/login" data-ph-capture-attribute-cta="sign-in" data-ph-capture-attribute-cta-loc="reset-sent">Back to sign in</a></p>
    </div>
  </div>
</section>
```