<div class="alert alert--error">
    <i class="alert__icon alert__icon--error fas fa-exclamation-circle"></i>
    <span class="alert__msg--error">This a a error message</span>
</div>

<div class="alert alert--warning">
    <i class="alert__icon alert__icon--warning fas fa-exclamation-triangle"></i>
    <span class="alert__msg alert__msg--alert">This a a warning message</span>
</div>

<div class="alert alert--info">
    <i class="alert__icon alert__icon--info fas fa-info-circle"></i>
    <span class="alert__msg alert__msg--info">This a a info message</span>
</div>

<div class="alert alert--success">
    <i class="alert__icon alert__icon--success far fa-check-circle"></i>
    <span class="alert__msg alert__msg--success">This a a success message</span>
</div>