Alert

Defines styles for success, warning and error messages.

Usage

To apply this component, add the .uk-alert class to a block element.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Markup

<div class="uk-alert">...</div>

Close button

To apply a close button, add the .uk-alert-close class to a <button> or <a> element inside the alert box. To enable the JavaScript for the close button, just add the data-uk-alert attribute to the alert box. We recommend adding the .uk-close class from the Close component to give the button a proper styling, though you can also use text or an image.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

<div class="uk-alert" data-uk-alert>
    <a href="" class="uk-alert-close uk-close"></a>
    <p>...</p>
</div>

Color modifiers

There are several color modifiers available. Just add one of the following classes to apply a different look.

Example

To indicate success or a positive message add the .uk-alert-success class.

To indicate a message containing a warning add the .uk-alert-warning class.

To indicate an important message add the .uk-alert-danger class.

Markup

<div class="uk-alert uk-alert-success"> ... </div>
<div class="uk-alert uk-alert-warning">...</div>
<div class="uk-alert uk-alert-danger">...</div>

Size modifier

Add the .uk-alert-large class to increase the spacing in an alert box. This can be useful, if you want to use richer typography.

Example

Today's headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Markup

<div class="uk-alert uk-alert-large">...</div>