Alert Component with icon

 <div class="alert-box alert-success">
     <span><i class="fa fa-check-circle"></i> Success! Indicates positive action to the user.</span>
     <i class="fa fa-times close-alert"></i>
 </div>
 <div class="alert-box alert-danger">
     <span><i class="fa fa-exclamation-triangle"></i> Danger! Indicates danger or negative action to
         the
         user.</span>
     <i class="fa fa-times close-alert"></i>
 </div>
 <div class="alert-box alert-warning">
     <span> <i class="fa fa-exclamation-triangle"></i> Warning Alert. Indicates warning to the user.
     </span>
     <i class="fa fa-times close-alert"></i>
 </div>
 <div class="alert-box alert-primary">
     Primary Alert. Indicates any regular or normal information to the
     user.
     <i class="fa fa-times close-alert"></i>
 </div>
 <div class="alert-box alert-secondary">
     Secondary Alert. Indicates any secondary information to the user.
     <i class="fa fa-times close-alert"></i>
 </div>