Notifications

Notifications

Notifications are used to tell the user when an event has occurred. Notifications are less in the user's face and don't take priority like an alert would. For example, a notification is used to let the user know that changes they made were saved. Another example is the negative notification announcing that there is a problem. There are two ways for notifications to be dismissed. They can be dismissed by clicking the X or they can auto-dismiss after a few seconds.

Normal Notification
Positive Notification
Warning Notification
Negative Notification
<div class="notification notification-info">
   Normal Notification
   <button data-dismiss="alert" class="btn-icon close icon-cross">
       <span class="sr-only">Close</span>
   </button>
</div>
<div class="notification notification-success">
   Positive Notification
   <button data-dismiss="alert" class="btn-icon close icon-cross">
       <span class="sr-only">Close</span>
   </button>
</div>
<div class="notification notification-warning">
   Warning Notification
   <button data-dismiss="alert" class="btn-icon close icon-cross">
       <span class="sr-only">Close</span>
   </button>
</div>
<div class="notification notification-error">
   Negative Notification
   <button data-dismiss="alert" class="btn-icon close icon-cross">
       <span class="sr-only">Close</span>
   </button>
</div>

How To Use

Don't put a button within a notification
Your changes are saved
Ckick to save changes
Don't change the color of the background, text, or the icon
Your changes are saved
Ckick to save changes