Inline Alert

<!--
  Four severities, four icon SHAPES - circle-i, check, triangle, cross. Someone
  who can't separate red from green still reads the alert correctly, because the
  colour was never doing the work alone.

  The role tracks severity, and only the error gets the assertive one:

    error                    -> role="alert"   (interrupts; the user must know now)
    info | success | warning -> role="status"  (polite; waits its turn)

  Slapping role="alert" on all four is the most common mistake in this
  component. "Saved" does not get to cut a screen-reader user off mid-sentence.
-->
<div class="alert alert--error" role="alert">
  <svg class="alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
    <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM7.7 7.7a1 1 0 0 1 1.4 0L10 8.6l.9-.9a1 1 0 1 1 1.4 1.4l-.9.9.9.9a1 1 0 0 1-1.4 1.4l-.9-.9-.9.9a1 1 0 0 1-1.4-1.4l.9-.9-.9-.9a1 1 0 0 1 0-1.4Z" />
  </svg>
  <div class="alert__body">
    <p class="alert__title">Payment declined</p>
    <p class="alert__text">Your card was declined by the issuer. Try another card.</p>
  </div>
</div>

<div class="alert alert--success" role="status">
  <svg class="alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
    <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4Z" />
  </svg>
  <div class="alert__body">
    <p class="alert__text">Domain verified.</p>
  </div>
</div>