Alerts

Alerts help a user understand the current status of action without interrupting the user's flow. There are 5 variants available - success alert, warning alert, danger alert, primary alert with a link, and secondary alert with a link.

Simple Alerts

These are alerts without any icons, they only hold the text.
Use the class alerts along with the variant class as preferred - success-alert, warning-alert, danger-alert, primary-alert-link or secondary-alert-link.

Here are some simple alerts:
This is a simple success alert!
This is a simple warning alert!
This is a simple danger alert!
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like. 

<!-- add class="alerts" along with "success-alert", "warning-alert", "danger-alert", 
"primary-alert-link", or "secondary-alert-link"-->
<div class="alerts success-alert">
    This is a simple success alert!
</div>

Alerts with Icons

These are alerts with message icons and a dismiss button. Use the class icon-alerts along with the classes alerts and the preferred variant.
These alerts have two child containers - one for the icon and alert message, and the other for the dismiss button.
Use class icon-text in the first child and close-btn in the second child.

Here are some alerts with icons:
check_circle This is a success alert!
error_outline This is a warning alert!
report_problem This is a simple danger alert!
A primary alert with an example link
A secondary alert with an example link 

<!-- add class="icon-alerts" along with "alerts" and the required variant class.
add class="icon-text" in the first child container
add class="close-btn" in the second child container-->

<div class="alerts warning-alert icon-alerts">
    <div class="icon-text">
        <span class="alert-icons material-icons md-18 material-icons-outlined">
            error_outline
        </span>
        This is a warning alert!
    </div>
    <div class="close-alert-icon">
        <button class="close-btn">
            <span class="alert-icons material-icons md-18 material-icons-outlined">
                close
            </span>
        </button>
    </div>
</div>
< Installation Avatars >