Alerts are used to notify the user with information that might have originated from a user action for example, the result of an attempted picture upload or placing an order. This component library offers four variants of alerts.

Basic Alerts

These alerts consist of basic texts. To use these alerts, one must use the below code and can change the class for the type of alert "primary-alert","success-alert","warning-alert", "error-alert" for primary, success, warning and error alerts respectively, as the naming suggests.

<div class="alert primary-alert"> 
<p class="alert-text">A simple 
<span class="alert-highlight-text">Primary Alert!</span>
 check it out now.</p>
 </div>

Alerts with Icons

For alerts with icons, the below code can be used, the aforementioned instructions are applicable, one need only change the type of alert

<div class="alert-icon primary-alert">
    <img class="icon icon-alert" src="/CSS/Components/assets/info.png">
    <p class="alert-text">A simple 
    <span class="highlight-text">Primary Alert!</span>
     with icons, check it out now.</p>
    </div>

A simple Primary Alert! with icon, check it out now.

A simple Success Alert! with icon, check it out now.

A simple Warning Alert! with icon, check it out now.

A simple Error Alert! with icon, check it out now.

Icon Alerts with Links

This variant allows you to insert links in the avatar for easier navigation.

 <div class="alert-icon primary-alert">
<img class="icon icon-alert" src="/CSS/Components/assets/info.png">
<p class="alert-text">A simple <a href="#" class="link-text">
Primary Alert!</a> with links, check it out now.</p>
 </div>

A simple Primary Alert! with links, check it out now.

A simple Success Alert! with links, check it out now.

A simple Warning Alert! with links, check it out now.

A simple Error Alert! with links, check it out now.

Icon Alerts with Dismiss

This variant allows the user to dismiss the alerts.
Note: The component library doesn't use any JavaScript, therfore you would need to add the dismiss function yourself.

 <div class="alert-icon primary-alert">
<img class="icon icon-alert" src="/CSS/Components/assets/info.png">
<p class="alert-text">A simple 
<span class="alert-highlight-text">Primary Alert!</span>
 check it out now.</p>
<button class="close-btn">X</button>
</div>

A simple Primary Alert! check it out now.

X

A simple Success Alert! check it out now.

X

A simple Warning Alert! check it out now.

X

A simple Error Alert! check it out now.

X