Alert

Alert component is used to display important messages to users like succes, error, info and warning

          
            <!-- Error Alert -->
            <div class="alert error">
              <svg width="20px" height="20px" viewBox="0 0 24 24">
                <path
                  d="M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2z"
                ></path>
              </svg>
              This is a error alert
            </div>
            
            <!-- Success Alert -->
            <div class="alert success">
              <svg width="20px" height="20px" viewBox="0 0 36 36">
                <path
                  class="clr-i-solid clr-i-solid-path-1"
                  d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2zm10.45 10.63L15.31 25.76L7.55 18a1.4 1.4 0 0 1 2-2l5.78 5.78l11.14-11.13a1.4 1.4 0 1 1 2 2z"
                ></path>
              </svg>
              This is a success alert
            </div>
            
            <!-- Warning Alert -->
            <div class="alert warning">
              <svg width="20px" height="20px" viewBox="0 0 24 24">
                <path
                  d="M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2z"
                ></path>
              </svg>
              This is a warning alert
            </div>
            
            <!-- Info Alert -->
            <div class="alert info">
              <svg width="20px" height="20px" viewBox="0 0 24 24">
                <path
                  d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2z"
                ></path>
              </svg>
              This is a info alert
            </div>