Alerts

Alerts are used to grab user attention to show important message on the screen without interrupting the user's flow.

Simple Alerts

There are 5 types of simple alerts available to use as per the situation like success, warning, info, error, custom.
To use alert add common class (e.g., .alert) and add second class as per the message you want to give user, for example to give error alert message use (e.g., class = "alert alert-error").

A success alert example!!!!

A warning alert example!!!

A information alert example!!!

A error alert example!!!

A custom message alert example!!!


<div clbss="alert alert-success">
  <div class="alert-content">
    <img class="alert-icon" src="./Components/icons/checked.png" />
    <h3 class="bold-normal">A success alert example!!!!</h3>
  </div>
</div>
            
<div class="alert alert-warning">
  <div class="alert-content">
    <img class="alert-icon" src="./Components/icons/warning.png" />
    <h3 class="bold-normal">A warning alert example!!!</h3>
  </div>
</div>
            
<div class="alert alert-info">
  <div class="alert-content">
    <img class="alert-icon" src="./Components/icons/information.png" />
    <h3 class="bold-normal">A information alert example!!!</h3>
  </div>
</div>
            
<div class="alert alert-error">
  <div class="alert-content">
    <img class="alert-icon" src="./Components/icons/error.png" />
    <h3 class="bold-normal">A error alert example!!!</h3>
  </div>
</div>
            
<div class="alert alert-custom-msg">
  <div class="alert-content">
    <img class="alert-icon" src="./Components/icons/message.png" />
    <h3 class="bold-normal">A custom message alert example!!!</h3>
  </div>
</div>