Alert Bars

Used to communicate system- or screen-level error, success, or system alert messages, these messages should dismiss themselves after 10 seconds, or the user can dismiss them using the close button/icon.

When needed, simply add a .show class to the appropriate .alert-bar. The CSS should do the rest.

Show Error Alert

Show Confirm Alert

Show Success Alert

Show System Alert

Notes

Click or tap any button to see an alert bar example

html

<section id="alerts" class="alerts">
  <div class="alert-bar error">
    <div class="alert-bar-details">
      <span><i class="la la-exclamation-circle"></i></span>
      <div class="alert-bar-message">
        <span>This is an error alert message</span>
      </div>
      <span class="dismiss error"><i class="la la-times-circle"></i></span>
    </div>
  </div>
<div class="alert-bar confirm">
  <div class="alert-bar-details">
    <span><i class="la la-exclamation-circle"></i></span>
    <div class="confirm-details">
      <div class="alert-bar-message">
        <span>You have unsaved changes. If you continue, these changes will be lost. Do you want to continue?</span>
      </div>
      <span class="confirm-action-box">
        <span class="confirm-action secondary dismiss confirm">No</span>
        <span class="confirm-action dismiss confirm">Yes</span>
      </span>
    </div>
  </div>
</div>
  <div class="alert-bar success">
    <div class="alert-bar-details">
      <div class="alert-bar-message">
        <span>This is a success alert message</span>
      </div>
      <span class="dismiss success"><i class="la la-times-circle"></i></span>
    </div>
  </div>
  <div class="alert-bar system">
    <div class="alert-bar-details">
      <div class="alert-bar-message">
        <span>This is a system alert message</span>
      </div>
      <span class="dismiss system"><i class="la la-times-circle"></i></span>
    </div>
  </div>
</section>