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.

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, 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 --success with role="status".
• A list with nothing in it yet: use the Empty state.
• An error: use the form alert.

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.

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