Alerts¶

Variants¶

Use .alert with variant classes for callouts:

Class	Purpose
`.alert`	Neutral (default)
`.alert.note`	Blue, informational
`.alert.warning`	Orange, caution
`.alert.success`	Green, confirmation
`.alert.error`	Red, error/failure

Simple alert¶

Failed to install plugin. Show details

<div class="alert error" role="alert">
  Failed to install plugin. <a href="#">Show details</a>
</div>

Alert with title¶

Use <strong> as the first child for a styled title:

Connection lost

Attempting to reconnect...

<div class="alert warning" role="alert">
  <strong>Connection lost</strong>
  <p>Attempting to reconnect...</p>
</div>

Alert with icon¶

Add data-icon to the title:

Installation failed

Could not install plugin. View logs

<div class="alert error" role="alert">
  <strong data-icon="error">Installation failed</strong>
  <p>Could not install plugin. <a href="#">View logs</a></p>
</div>