WOW Alerts

Two themes: light (richer background, dark text) and dark (deeper background, white text). Wrap your list with wow-theme-light or wow-theme-dark.

Light · Dark

Light

Dark

Compact

HTML usage

<div class="wow-alerts wow-theme-dark">
  <div class="wow-alert wow-alert--success" role="alert">
    <div class="wow-alert__icon" aria-hidden="true">…</div>
    <div class="wow-alert__body">
      <span class="wow-alert__title">Title</span>
      <p class="wow-alert__message">Message body.</p>
    </div>
    <button type="button" class="wow-alert__close" aria-label="Dismiss alert">×</button>
  </div>
</div>

Theme on the container: wow-theme-light / wow-theme-dark. Variant: wow-alert--success, --error, --warning, --info, --neutral. Optional: wow-alert--compact.