Finder | Alerts

Basic example

A simple primary alert with an example link. Give it a click if you like.

A simple accent alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

<!-- Primary alert -->
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Accent alert -->
<div class="alert alert-accent" role="alert">
  A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Secondary alert -->
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Success alert -->
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Info alert -->
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Light alert -->
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<!-- Dark alert -->
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

// Primary alert
.alert.alert-primary(role="alert")
  | A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Accent alert
.alert.alert-accent(role="alert")
  | A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Secondary alert
.alert.alert-secondary(role="alert")
  | A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Success alert
.alert.alert-success(role="alert")
  | A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Danger alert
.alert.alert-danger(role="alert")
  | A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Warning alert
.alert.alert-warning(role="alert")
  | A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Info alert
.alert.alert-info(role="alert")
  | A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Light alert
.alert.alert-light(role="alert")
  | A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

// Dark alert
.alert.alert-dark(role="alert")
  | A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.

Alert with icon