Messaging components are essential in user - interface interactions since they are the answer of the interface to the user. They thus guarantee that there is an actual interaction by informing users of successful or pending actions, or of specific contexts so they are not frustrated to ignore what is wrong.

You can find the below components in _alert.scss.


Flash messages inform users of successful or pending actions. A specific background color helps to convey their meaning. To not confuse the users, don't show more than one message at a time.

<div class="alert alert-danger" role="alert">
  <p>Please fill in all of the fields so we can best respond to your query.</p>

<div class="alert alert-success" role="alert">
  <p>Thank you. Your query has successfully been sent. We'll be in touch shortly.</p>

Availability message

Availability message is a specific message that informs the users that a product is not available at the time or in their country. They are usually inserted below the name of the product, so it is one of the first informations that the users can read.

<div class="alert alert-info" role="alert">
    <i class="fa fa-exclamation-circle"></i>
    <span>Machine not available</span>
  <p>Would you like to be notified when this machine is available in your country?</p>
  <a target="_blank" class="btn btn-info" title="">
    <i class="fa fa-envelope"></i>
    <span>Subscribe to Newsletter</span>