Alerts

Alerts are used to attract user's attention for important information without interrupting the user's flow.

Primary Alert

Make a primary alert for your project by using alert & alert-primary classes. Have a look at the demo & code example below for reference.

        
  <div class="alert alert-primary">
    <span class="alert-content">This is a PRIMARY alert</span>
  </div>
        
      

Warning Alert

A warning alert can be made with the help of alert & alert-warning classes. Look for demo & code reference below.

        
  <div class="alert alert-warning">
    <span class="material-icons"> warning </span>
    <span class="alert-content">This is a WARNING alert</span>
  </div>
        
      

Error Alert

An error alert can be made with the help of alert & alert-error classes. Look for demo & code reference below.

        
  <div class="alert alert-error">
    <span class="material-icons alert-icon"> error </span>
    <span class="alert-content">This is an ERRRRROR alert</span>
  </div>
        
      

Success Alert

A success alert can be made with the help of alert & alert-success classes. Look for demo & code reference below.

        
  <div class="alert alert-success">
    <span class="material-icons alert-icon"> check_circle </span>
    <span class="alert-content">This is a SUCCESS alert</span>
  </div>