# Alerts

Alerts are boxes styled in such a way that they attract the attention of the user which makes them ideal to provide important information to the user. Alerts are often used on a page header, footer or as popup.

## Examples

### Ok

![Alert ok](Developer-Guide/frontend/elements/alerts/ok.png)

```html
<div class="log-msg log-lvl-ok"><i class="fa fa-check"></i>This is ok</div>
```

#### Advanced

![Alert ok advanced](Developer-Guide/frontend/elements/alerts/ok_advanced.png)

```html
<div class="log-msg log-lvl-ok">
    <h1 class="log-msg-title">This is a Title</h1><i class="close fa fa-times"></i>
    <div class="log-msg-content">This is a message</div>
</div>
```

### Info

![Alert info](Developer-Guide/frontend/elements/alerts/info.png)

```html
<div class="log-msg log-lvl-info"><i class="fa fa-bell"></i>This is a info</div>
```

### Warning

![Alert warning](Developer-Guide/frontend/elements/alerts/warning.png)

```html
<div class="log-msg log-lvl-warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
```

### Error

![Alert error](Developer-Guide/frontend/elements/alerts/error.png)

```html
<div class="log-msg log-lvl-error"><i class="fa fa-times"></i>This is an error</div>
```