Elements

If you can dream it, you can do it

Alerts

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

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

markup

<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

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

markup

<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

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment


markup
<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.

We are because of you

All of all our customers are happy with our current and upcoming projects. The other 5% are learning the secret of appreciating good stuff. It is possible for you to do whatever you choose, if you first get to know who you are


markup
<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

new
legend
note


markup
<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.

new
legend
note


1
2
3
4
5


markup
<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>
demo