Provide feedback for common user behaviors.

Alert will be removed from DOM once the user clicks on close icon.

Icon such as exclamation mark, stop mark , and others can be added to your alert icon container, you can use font awesome, flaticon and others:

<span class="null-alert-icon-container">
     <!--Add icon here-->
</span><!--End null-alert-icon-container-->

- Alert warning

<!-- Start null Alert-->

<section class="null-alert-section"> 
        
        <div class="null-alert-container null-position-relative null-border-radius null-alert-warning"><!--Add alert type here-->
    
            <div class="null-alert null-display-flex null-align-items-center"> 

                <span class="null-alert-icon-container">
                    <!--Add icon here-->
                </span><!--End null-alert-icon-container-->

                <div class="null-alert-message-container">
                    <span class="null-alert-message">Null Alert Warning</span>
                </div><!--End null-alert-message-container-->

                <span class="null-alert-exit-icon null-cursor-pointer null-font-size-20">&times;</span>

            </div><!--null-alert-->
    
        </div><!--End null-alert-container-->
    
</section><!--End null-alert-section-->


<!-- End null Alert-->

- Alert success

<section class="null-alert-section"> 
        
        <div class="null-alert-container null-position-relative null-border-radius null-alert-success"><!--Add alert type here-->
    
            <div class="null-alert null-display-flex null-align-items-center"> 

                <span class="null-alert-icon-container">
                    <!--Add icon here-->
                </span><!--End null-alert-icon-container-->

                <div class="null-alert-message-container">
                    <span class="null-alert-message">Null Alert Success</span>
                </div><!--End null-alert-message-container-->

                <span class="null-alert-exit-icon null-cursor-pointer null-font-size-20">&times;</span>

            </div><!--null-alert-->
    
        </div><!--End null-alert-container-->
    
</section><!--End null-alert-section-->

- Alert danger

<section class="null-alert-section"> 
        
        <div class="null-alert-container null-position-relative null-border-radius null-alert-danger"><!--Add alert type here-->
    
            <div class="null-alert null-display-flex null-align-items-center"> 

                <span class="null-alert-icon-container">
                    <!--Add icon here-->
                </span><!--End null-alert-icon-container-->

                <div class="null-alert-message-container">
                    <span class="null-alert-message">Null Alert Danger</span>
                </div><!--End null-alert-message-container-->

                <span class="null-alert-exit-icon null-cursor-pointer null-font-size-20">&times;</span>

            </div><!--null-alert-->
    
        </div><!--End null-alert-container-->
    
</section><!--End null-alert-section-->

- Alert primary

<section class="null-alert-section"> 
        
        <div class="null-alert-container null-position-relative null-border-radius null-alert-primary null-color-white"><!--Add alert type here-->
    
            <div class="null-alert null-display-flex null-align-items-center"> 

                <span class="null-alert-icon-container">
                    <!--Add icon here-->
                </span><!--End null-alert-icon-container-->

                <div class="null-alert-message-container">
                    <span class="null-alert-message">Null Alert Primary</span>
                </div><!--End null-alert-message-container-->

                <span class="null-alert-exit-icon null-cursor-pointer null-font-size-20">&times;</span>

            </div><!--null-alert-->
    
        </div><!--End null-alert-container-->
    
</section><!--End null-alert-section-->

If your brand color needs a white text color when you use it as a background , use the following class ".null-color-white", this will give white color to your text.