Alert

<div class="alert-stack">
  <div class="alert alert--loading" role="status" aria-live="polite">
    <span class="alert__spinner" aria-hidden="true"></span>
    <div class="alert__body">
      <div class="alert__title">Syncing data</div>
      <p class="alert__text">Fetching the latest project metrics.</p>
    </div>
  </div>
  <div class="alert alert--info" role="status">
    <span class="alert__glyph" aria-hidden="true">ⓘ</span>
    <div class="alert__body">
      <div class="alert__title">Maintenance window</div>
      <p class="alert__text">Read-only mode Sunday 02:00–04:00 UTC.</p>
    </div>
  </div>
  <div class="alert alert--success" role="status">
    <span class="alert__glyph" aria-hidden="true">✓</span>
    <div class="alert__body">
      <div class="alert__title">Saved</div>
      <p class="alert__text">Workspace settings were updated.</p>
    </div>
  </div>
  <div class="alert alert--warning" role="status">
    <span class="alert__glyph" aria-hidden="true">!</span>
    <div class="alert__body">
      <div class="alert__title">Action required</div>
      <p class="alert__text">Verify your billing email to avoid interruption.</p>
    </div>
  </div>
  <div class="alert alert--danger" role="alert">
    <span class="alert__glyph" aria-hidden="true">✕</span>
    <div class="alert__body">
      <div class="alert__title">Payment failed</div>
      <p class="alert__text">Update your card or retry the charge.</p>
    </div>
  </div>
</div>