Alert

Alerts are used to communicate a state that affects a system, feature or page.

            
              <!-- error alert>
              <div class="alert alert-error">
                <svg class="error-icon" ...> <path ...></path> </svg>
                <p>Error Alert</p>
                <svg class="close-icon"> <path ...></path> </svg>
              </div>


              <!-- success alert>
              <div class="alert alert-success">
                <svg class="success-icon" ...> <path ...></path> </svg>
                <p>Success Alert</p>
                <svg class="close-icon"> <path ...></path> </svg>
              </div>


              <!-- warning alert>
              <div class="alert alert-warning">
                <svg class="warning-icon" ...> <path ...></path> </svg>
                <p>Warning Alert</p>
                <svg class="close-icon"> <path ...></path> </svg>
              </div>


              <!-- info alert>
              <div class="alert alert-info">
                <svg class="info-icon" ...> <path ...></path> </svg>
                <p>Info Alert</p>
                <svg class="close-icon"> <path ...></path> </svg>
              </div>