Alerts

Elementric components - just copy the HTML code of an element and paste it into your code (after you read the installation guide).

Examples

         
Copy
         
  <div class="alerts alert-standard">
    <p>This is a standard alert!</p>
    <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>

  <div class="alerts alert-blue">
    <p>This is a blue alert!</p>
    <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>

  <div class="alerts alert-black">
    <p>This is a black alert!</p>
    <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>

  <div class="alerts alert-green">
    <p>This is a green alert!</p>
    <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>

  <div class="alerts alert-red">
    <p>This is a red alert!</p>
    <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>

  <div class="alerts alert-yellow">
    <p>This is a yellow alert!</p>
    <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>
         
       

Heading alerts

         
Copy
         
  <div class="alerts alert-standard">
    <h6 class="alert-title">Heading</h6>
    <p>This is a standard alert!</p>
    <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>
         
       

Icon alerts

         
Copy
         
  <div class="alerts alert-red">
    <div class="alert-icon">
      <i class="fas fa-exclamation-triangle"></i>
   </div>
     <p>This is a red icon alert!</p>
     <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>

  <div class="alerts alert-yellow">
    <div class="alert-icon">
      <i class="fas fa-exclamation-circle"></i>
   </div>
     <h6 class="alert-title">This is alert title</h6>
     <p>This is a yellow icon alert!</p>
     <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>

  <div class="alerts alert-green">
    <div class="alert-icon">
      <i class="far fa-check-circle"></i>
   </div>
     <h6 class="alert-title">This is alert title</h6>
     <p>This is a green icon alert!</p>
     <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>
         
       

Slim alerts

         
Copy
         
  <div class="slim-alerts alert-standard">
    <p>This is a standard slim alert!</p>
  </div>

  <div class="slim-alerts alert-blue">
    <p>This is a blue slim alert!</p>
  </div>

  <div class="slim-alerts alert-black">
    <p>This is a black slim alert!</p>
  </div>

  <div class="slim-alerts alert-green">
    <p>This is a green slim alert!</p>
  </div>

  <div class="slim-alerts alert-red">
    <p>This is a red slim alert!</p>
  </div>

  <div class="slim-alerts alert-yellow">
    <p>This is a yellow slim alert!</p>
  </div>
         
       

Icon slim alerts

    
Copy
    
  <div class="slim-alerts alert-red">
   <div class="alert-icon">
     <i class="fas fa-exclamation-triangle"></i>
  </div>
    <p>This is a red icon alert!</p>
  </div>

  <div class="slim-alerts alert-yellow">
    <div class="alert-icon">
      <i class="fas fa-exclamation-circle"></i>
   </div>
     <p>This is a yellow icon slim alert!</p>
  </div>

  <div class="slim-alerts alert-green">
   <div class="alert-icon">
     <i class="far fa-check-circle"></i>
  </div>
    <p>This is a green icon slim alert!</p>
  </div>

  <div class="slim-alerts alert-black">
    <div class="alert-icon">
      <i class="fas fa-check-circle"></i>
    </div>
     <p>This is a black icon slim alert!</p>
  </div>
    
  

Gradient Alerts

You can make gradient every alert you want. Just change the class of a alert (example: .alert-standard to .gradient-light) to: .gradient-light, .gradient-blue,
.gradient-black, .gradient-green, .gradient-red or .gradient-yellow

         
Copy
         
    <div class="alerts gradient-light">
      <p>This is a gradient light alert!</p>
      <span class="closeButton"><i class="fas fa-times"></i></span>
    </div>

    <div class="alerts gradient-blue">
      <p>This is a gradient blue alert!</p>
      <span class="closeButton"><i class="fas fa-times"></i></span>
    </div>

    <div class="alerts gradient-black">
      <p>This is a gradient black alert!</p>
      <span class="closeButton"><i class="fas fa-times"></i></span>
    </div>

    <div class="alerts gradient-green">
      <p>This is a gradient green alert!</p>
      <span class="closeButton"><i class="fas fa-times"></i></span>
    </div>

    <div class="alerts gradient-red">
      <p>This is a gradient red alert!</p>
      <span class="closeButton"><i class="fas fa-times"></i></span>
    </div>

    <div class="alerts gradient-yellow">
      <p>This is a gradient yellow alert!</p>
      <span class="closeButton"><i class="fas fa-times"></i></span>
    </div>
        
       

Square Alerts

You can make square every alert you want by adding the .square class

         
Copy
         
  <div class="alerts alert-blue square">
    <p>This is a square alert!</p>
    <span class="closeButton"><i class="fas fa-times"></i></span>
  </div>
         
       

Close Button

You can add the close button on every alert you want. Just add below code to your alert:

      
Copy
      
  <span class="closeButton"><i class="fas fa-times"></i></span>
      
    

Position

To choose the alerts position, use right bottom, right top, left bottom or left top in alert-position="" attribute.

        
Copy
        
  <div class="alerts alert-standard" alert-position="right bottom">
    <h6 class="alert-title">Notification</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Donec consequat purus sit amet odio egestas, ut euismod leo tempor.</p>
  </div>