Alert
Defines styles for success, warning and error messages.
Usage
To apply this component, add the .uk-alert class to a block element.
Example
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>
