Components

Alert

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

Filled alerts

The alert offers four severity levels that set a distinctive icon and color.

This is an info alert!

This is an success alert!

This is an warning alert!

This is a error alert!

Code Snippets

              
                <!-- Info Alert -->
              <div class="alert-box  info-alert filled-alert row-flex m-1 p-1">
                <p class="alert-msg">
                  <i class="fa fa-info-circle" aria-hidden="true"></i>
                  This is an info alert!
                </p>
              </div>

              <!-- Success Alert -->
              <div class="alert-box  success-alert filled-alert row-flex m-1 p-1">
                <p class="alert-msg">
                  <i class="fa fa-check-circle-o" aria-hidden="true"></i>
                  This is an success alert!
                </p>
              </div>

              <!-- Warning Alert -->
              <div class="alert-box  warning-alert filled-alert row-flex m-1 p-1">
                <p class="alert-msg">
                  <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                  This is an warning alert!
                </p>
              </div>

              <!-- Error Alert -->
              <div class="alert-box  error-alert filled-alert row-flex m-1 p-1">
                <p class="alert-msg">
                  <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                  This is a error alert!
                </p>
              </div>

Outlined alerts

This is a primary alert!

This is an info alert!

This is an success alert!

This is an warning alert!

This is a error alert!

Code Snippets

              
                <!-- Primary Alert -->
                <div class="alert-box primary-alert row-flex m-1 p-1">
                  <p class="alert-msg">This is a primary alert!</p>
                </div>

                <!-- Info Alert -->
                <div class="alert-box info-alert row-flex m-1 p-1">
                  <p class="alert-msg">
                    <i class="fa fa-info-circle" aria-hidden="true"></i>
                    This is an info alert!
                  </p>
                </div>

                <!-- Success Alert -->
                <div class="alert-box success-alert row-flex m-1 p-1">
                  <p class="alert-msg">
                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
                    This is an success alert!
                  </p>
                </div>

                <!-- Warning Alert -->
                <div class="alert-box warning-alert row-flex m-1 p-1">
                  <p class="alert-msg">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                    This is an warning alert!
                  </p>
                </div>

                <!-- Error Alert -->
                <div class="alert-box error-alert row-flex m-1 p-1">
                  <p class="alert-msg">
                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                    This is a error alert!
                  </p>
                </div>

Demo transition alert with close button

You can use a transition component such as transition-alert to transition the appearance of the alert. Click on close icon to see the transition.

This is an success alert!

ACTION!

Code Snippets

HTML snippet

              
                <!-- Transition alert -->
                <div class="alert-box transition-alert success-alert row-flex m-1 p-1">
                  <p class="alert-msg">
                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
                    This is an success alert!
                  </p>
                  <div class="alert-action">
                    <a class="action-link">ACTION!</a>
                    <i class="icon-toggle icon-btn demo-close p-1 rd-bdr centered-text fa fa-times" aria-hidden="true"></i>
                  </div>
                </div>

JS snippet

              
                /*----------TRANSITION ALERT------------*/
                const transitionAlert = document.querySelector(".transition-alert");
                const demoClose = document.querySelector(".demo-close");
                const reopenBtn = document.querySelector(".reopen-alert");

                demoClose.addEventListener("click", () => {
                  transitionAlert.classList.add("removeTransition");
                  transitionAlert.addEventListener("transitionend", (e) => {
                    transitionAlert.style.display = "none";
                  });
                });

                reopenBtn.addEventListener("click", () => {
                  transitionAlert.classList.remove("removeTransition");
                  transitionAlert.style.display = "flex";
                });
Next