Elements

Alerts

To emphasize a point with an alert box, use the uk-alert class

<div class="uk-alert">Your alert message here</div>

Color variations

You can change the color scheme of the alert box by adding the following classes: uk-alert-success, uk-alert-warning, or uk-alert-danger

<div class="uk-alert-success uk-alert">Your alert message here</div>

Closable alerts

To add a close button to an alert, use the uk-alert-close uk-close class

<div class="uk-alert-danger uk-alert">
  <a href="#" class="uk-alert-close uk-close"></a>
  <p>Your alert message here</p>
</div>

Size modifier

To create a large alert with added padding, use the uk-alert-large class.

<div class="uk-alert uk-alert-success uk-alert-large" data-uk-alert>
  <a href="#" class="uk-alert-close uk-close"></a>
  <h3 class="uk-module-title">Your title goes here</h3>
  <p>your content goes here</p>
</div>

---

Badges

You can use badges to highlight a segment of text within your content by using the uk-badge class

<div class="uk-badge">new</div>

Color variations

You can change the color scheme of the badge by adding the following classes: uk-badge-success, uk-badge-warning, or uk-badge-danger. You can also use the uk-badge-notification class to have a rounded badge, normally used with numbering.

<div class="uk-badge-success uk-badge">new</div>
<div class="uk-badge-warning uk-badge">legend</div>
<div class="uk-badge-danger uk-badge">note</div>
<div class="uk-badge-note uk-badge-notification uk-badge">1</div>