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