Email verification notice

How to use it

Show it right after sign-up or an email change, while the account waits for its address to be confirmed. Do not use it to report an error; use an alert for that. The resend handler only shows a demo message: the developer must insert the real address, wire Resend to the real endpoint (keeping a cooldown to limit repeated sends), and point Use a different email at the page where the address can be changed.

Accessibility

A <section> labelled by its "Check your inbox" heading; the envelope illustration is inline SVG with aria-hidden="true". Resend is a native <button> that uses aria-disabled for a 60-second cooldown, so it stays focusable, and its outcome is announced through a role="status" region; changing the address is an ordinary link. Text #0f172a on #f8fafc is 17.06:1, secondary text #334155 on #f8fafc 9.90:1, the link #1d4ed8 on #f8fafc 6.41:1, the button's white on #1d4ed8 (#1e40af hovered) 6.70:1 (8.72:1), and #475569 on #f1f5f9 during the cooldown 6.92:1.

Source (copy-ready)

Copy code

<section class="dcl-verify" aria-labelledby="dcl-verify-title">
  <svg class="dcl-verify__icon" viewBox="0 0 48 48" width="48" height="48" aria-hidden="true" focusable="false"><rect x="4" y="10" width="40" height="28" rx="4" fill="#dbeafe" stroke="#1d4ed8" stroke-width="2"/><path d="M5 13l19 14 19-14" fill="none" stroke="#1d4ed8" stroke-width="2"/></svg>
  <h2 id="dcl-verify-title" class="dcl-verify__title">Check your inbox</h2>
  <p class="dcl-verify__text">We sent a verification link to <strong class="dcl-verify__email">ana.ruiz@example.com</strong>. Open it within 24 hours to finish setting up your account.</p>
  <p class="dcl-verify__note">Nothing there after a few minutes? Check your spam or junk folder.</p>
  <div class="dcl-verify__actions">
    <button type="button" class="dcl-verify__resend" aria-disabled="false">Resend email</button>
    <a href="../index.html" class="dcl-verify__link">Use a different email</a>
  </div>
  <p class="dcl-verify__status" role="status"></p>
</section>
<style>
.dcl-verify { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; max-width: 28rem; padding: 1.5rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; font: inherit; color: #0f172a; background-color: #f8fafc; box-sizing: border-box; }
.dcl-verify__icon { flex: none; }
.dcl-verify__title { margin: 0; font-size: 1.375rem; color: #0f172a; background-color: #f8fafc; }
.dcl-verify__text { margin: 0; color: #0f172a; background-color: #f8fafc; overflow-wrap: anywhere; }
.dcl-verify__email { color: #0f172a; background-color: #f8fafc; }
.dcl-verify__note { margin: 0; font-size: 0.9rem; color: #334155; background-color: #f8fafc; }
.dcl-verify__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.dcl-verify__resend { padding: 0.55rem 1rem; border: none; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; color: #ffffff; background-color: #1d4ed8; }
.dcl-verify__resend:hover { color: #ffffff; background-color: #1e40af; }
.dcl-verify__resend:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-verify__resend[aria-disabled="true"] { cursor: not-allowed; color: #475569; background-color: #f1f5f9; }
.dcl-verify__link { color: #1d4ed8; background-color: #f8fafc; }
.dcl-verify__link:hover { color: #1e40af; background-color: #f8fafc; }
.dcl-verify__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-verify__status { margin: 0; font-size: 0.9rem; color: #334155; background-color: #f8fafc; }
</style>
<script>
(function () {
  document.querySelectorAll(".dcl-verify").forEach(function (root) {
    if (root.dataset.dclBound) {
      return;
    }
    root.dataset.dclBound = "true";
    var button = root.querySelector(".dcl-verify__resend");
    var status = root.querySelector(".dcl-verify__status");
    if (!button) {
      return;
    }
    button.addEventListener("click", function () {
      if (button.getAttribute("aria-disabled") === "true") {
        return;
      }
      button.setAttribute("aria-disabled", "true");
      button.textContent = "Email sent";
      if (status) {
        status.textContent = "A new link is on its way. You can resend again in 60 seconds. (Demo only: nothing was sent.)";
      }
      setTimeout(function () {
        button.setAttribute("aria-disabled", "false");
        button.textContent = "Resend email";
      }, 60000);
    });
  });
})();
</script>