Alerts

Alerts provide user feedback based on certain actions. These actions can help explain to a user that they've successfully done a task, or possibly messed one up.


Alert Building Blocks

All alerts are built with the .alert class, and are styled by modifier classes. For example, here's an info alert with a-is-primary class with an icon to the right.

EXAMPLE

This is some important information so please pay attention.

<div class="alert a-is-info">
 <p>This is some <strong>important information</strong> so please pay attention.<span class="fa fa-info"></span></p>
</div>

Remove or Hide Alerts With Jquery

Have the flexibility to remove alerts from the DOM, or, for validation purposes for example, just hide them so they're not visible. Here's an example of the Jquery.

$('.close').click(function(e) {
  var elem = $(e.currentTarget).parents('.alert-removed');
  elem.removeClass('in');
  
  setTimeout(function () {
    elem.remove();
  }, 450);
});

// This just hides the element
$('.close').click(function(e){
  var hiding = $(e.currentTarget).parents('.alert-hide');
  hiding.removeClass('in');
});

EXAMPLE

Click the X to remove this alert. Use class .alert-removed to remove this alert ×

Click the X to hide this alert. Use class .alert-hide to hide this alert ×

<div class="alert a-is-danger alert-removed fade in"></div>
 <div class="alert a-is-success alert-hide fade in"></div>
</div>

Alerts With Buttons And Links

Create alerts that have links and content, such as buttons.

EXAMPLE

×

No Success!

You need to do something. Go here for more info

<div class="alert a-is-danger alert-removed fade in">
 <span class="close">X</span>
 <h4>No Success!</h4>
 <p><a href="#">Go here for more info</a></p>
 <p>
  <button class="btn btn-danger">Do Some Action</button>
  <button class="btn btn-link">Cancel</button>
 </p>
</div>