Alert

The new AHA alert is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.

Toast Messages

Congratulations! Form Submitted Successfully.

Sorry! Fill all the mandatory fields.

Form Submitted Successfully.

Fill all the mandatory fields.

HTML

<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Congratulations!</strong> Form Submitted Successfully.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Sorry!</strong> Fill all the mandatory fields.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="alert-check alert-icon aha-icon-tick-circle" aria-hidden="true"></i> Form Submitted Successfully.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <div class="alert-cross alert-icon" aria-hidden="true">
    <i class="aha-icon-cross"></i>
    </div> Fill all the mandatory fields.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>