Alert
An alert is used to attract user's attention by displaying a short message to a user without interrupting the user's flow.
Below is an example for Alert without close button.
Alert - This is danger bar
Alert - This is warning bar
Alert - This is success bar
<div class="alert__btn btn-danger">
<span
><i class="fas fa-exclamation-triangle alert-icon"></i>
<strong>Alert</strong> - This is danger bar</span
>
</div>
<div class="alert__btn btn-warning">
<span>
<i class="fas fa-exclamation-triangle alert-icon"></i
><strong>Alert</strong> - This is warning bar</span
>
</div>
<div class="alert__btn btn-success">
<span>
<i class="far fa-check-circle alert-icon"></i
><strong>Alert</strong> - This is success bar</span
>
</div>
Below is an example for Alert with close button.
Alert - This is danger bar
Alert - This is warning bar
Alert - This is success bar
<div class="alert__btn btn-danger">
<span
><i class="fas fa-exclamation-triangle alert-icon"></i>
<strong>Alert</strong> - This is danger bar<i
class="fas fa-times dismiss-icon"
></i
></span>
</div>
<div class="alert__btn btn-warning">
<span>
<i class="fas fa-exclamation-triangle alert-icon"></i
><strong>Alert</strong> - This is warning bar<i
class="fas fa-times dismiss-icon"
></i
></span>
</div>
<div class="alert__btn btn-success">
<span>
<i class="far fa-check-circle alert-icon"></i
><strong>Alert</strong> - This is success bar<i
class="fas fa-times dismiss-icon"
></i
></span>
</div>