Tell a user something…

<div class="p-alert">
    <h4 class="p-alert-heading">Alert!</h4>
    <p>This is default alert!</p>
</div>

<div class="p-alert alert--success">
    <h4 class="p-alert-heading">Success alert</h4>
    <p>This is success alert!</p>
</div>

<div class="p-alert alert--notice">
    <h4 class="p-alert-heading">Notice me!</h4>
    <p>This is notice alert. Nothing scary, just something you need to be aware of.</p>
    <p>It might contain additional stuff, possibly even <a href="#">a link to something</a>.</p>
</div>

<div class="p-alert alert--warning">
    <h4 class="p-alert-heading">Warning alert!</h4>
    <p>This is default alert!</p>
</div>

<div class="p-alert alert--error">
    <h4 class="p-alert-heading">Error alert!</h4>
    <p>This is an error alert, with <a href="#">a link to something</a>.</p>
</div>