# Notifications

```
<div class="notification-box">
    <a href="#" class="notification-box--close">&times;</a>
    <div class="notification-box--content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia laudantium ea delectus incidunt accusantium repudiandae deserunt excepturi non esse vero distinctio et reprehenderit, cupiditate quidem consectetur rerum iste magnam voluptatibus.</p>
    </div>
</div>
```

## Error

```
<div class="notification-box -error">
    <a href="#" class="notification-box--close">&times;</a>
    <div class="notification-box--content">
        <p>An error occured, here are the facts:</p>
        <ul>
            <li>Fact 1: You made a mistake</li>
            <li>Fact 2: You <em>really</em> made a mistake</li>
            <li>Fact 3: You <strong>should fix it</strong></li>
        </ul>
    </div>
</div>
```

## Warning

```
<div class="notification-box -warning">
    <a href="#" class="notification-box--close">&times;</a>
    <div class="notification-box--content">
        <p>This is a warning. You may ignore it, but bad things might happen.</p>
    </div>
</div>
```

## Success

```
<div class="notification-box -success">
    <div class="notification-box--icon -check"></div>
    <a href="#" class="notification-box--close">&times;</a>
    <div class="notification-box--content">
        <p>Successful update. <a href="#">A link to the past</a></p>
    </div>
</div>
```