Callout

<!--
  The documentation callout - the "Note:" / "Tip:" block in a page of prose. It
  is an alert only in family resemblance; what makes it its own thing is the
  ARIA it deliberately does NOT have:

  - No role="alert", no role="status", no live region of any kind. This is body
    copy. It was on the page before the reader arrived and will be there after
    they leave; there is no event to announce.
  - <aside>, so it is exposed as a complementary landmark - a screen-reader user
    can skip it, or jump straight to it, exactly like a sighted reader skims
    past a sidebar.
  - The "Note" label is real text, not a ::before. It is the first thing read
    aloud, and it's what makes the block make sense out of context.

  The left accent bar is decoration on top of that, never the signal.
-->
<aside class="callout">
  <p class="callout__label">
    <svg class="callout__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm1 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2 3a1 1 0 0 1 2 0v5a1 1 0 1 1-2 0V9Z" />
    </svg>
    Note
  </p>
  <p class="callout__text">
    Rotating a key invalidates every token signed with it. Deploy the new key to
    all consumers before you revoke the old one.
  </p>
</aside>