Alert

Colors

Primary

This is a primary alert. You should probably pay attention to it.

<div class="alert alert--primary" role="alert">
  <button aria-label="Close" class="clean-btn close" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  This is a
  <strong>primary</strong>
  alert. You should probably pay attention to it.
</div>

Secondary

This is a secondary alert. It's not too important, you may ignore it.

<div class="alert alert--secondary" role="alert">
  <button aria-label="Close" class="clean-btn close" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  This is a
  <strong>secondary</strong>
  alert. It's not too important, you may ignore it.
</div>

Success

This is a success alert. Something good must have happened!

<div class="alert alert--success" role="alert">
  <button aria-label="Close" class="clean-btn close" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  This is a
  <strong>success</strong>
  alert. Something good must have happened!
</div>

Info

This is an info alert. For your information only.

<div class="alert alert--info" role="alert">
  <button aria-label="Close" class="clean-btn close" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  This is an
  <strong>info</strong>
  alert. For your information only.
</div>

Warning

This is a warning alert. Be warned, you should pay attention!

<div class="alert alert--warning" role="alert">
  <button aria-label="Close" class="clean-btn close" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  This is a
  <strong>warning</strong>
  alert. Be warned, you should pay attention!
</div>

Danger

This is a danger alert. Something has gone wrong, please investigate!

<div class="alert alert--danger" role="alert">
  <button aria-label="Close" class="clean-btn close" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  This is a
  <strong>danger</strong>
  alert. Something has gone wrong, please investigate!
</div>