Alert

Alert components for notifications and messages

Variants

Info

This is an info message.

Success

The operation was successful.

Warning

Please note this warning.

Error

An error has occurred.

HTML

<div class="bl-alert bl-alert-info">
  <h4 class="bl-alert-title">Info</h4>
  <p class="bl-alert-message">Message</p>
</div>

<div class="bl-alert bl-alert-success">
  <h4 class="bl-alert-title">Success</h4>
  <p class="bl-alert-message">Message</p>
</div>

<div class="bl-alert bl-alert-warning">
  <h4 class="bl-alert-title">Warning</h4>
  <p class="bl-alert-message">Message</p>
</div>

<div class="bl-alert bl-alert-error">
  <h4 class="bl-alert-title">Error</h4>
  <p class="bl-alert-message">Message</p>
</div>

Dismissible Alerts

Dismissible Alert

Click the X to close this alert.

HTML

<div class="bl-alert bl-alert-info bl-alert-dismissible">
  <h4 class="bl-alert-title">Dismissible Alert</h4>
  <p class="bl-alert-message">Message</p>
  <button class="bl-alert-close"></button>
</div>