You can create styled alerts by applying the alert class to any <div> element.

There are currently four alert styles: info, success, warning, and error.

If you add <button class="close"></button> inside of <div class="alert" /> component, it will become closable by user interaction.

Sample info alert component. Apply different modifier class for different color variation

<div class="alert info">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque a error tenetur quo expedita pariatur soluta modi mollitia. Deserunt voluptas repellendus, sint sunt voluptatem doloremque repellat iure modi eius libero!
  </div>

  <button type="button" class="close"></button>
</div>

Want close on the other side? No problems, move the button.close before div.content

<div class="alert info">
  <button type="button" class="close"></button>

  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque a error tenetur quo expedita pariatur soluta modi mollitia. Deserunt voluptas repellendus, sint sunt voluptatem doloremque repellat iure modi eius libero!
  </div>
</div>