Submitted by admin on

Node Title

Alerts Style 1

Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit

                            
<section class="alert">
    <div class="container">
        <div class="alert-block">
            <h2>Alerts Title</h2>
            <div class="alert-area alert1">
                <h4><i class="fas fa-info"></i>Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
            <div class="alert-area alert1" role="alert">
                <h4><i class="fas fa-exclamation-triangle"></i>Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
            <div class="alert-area alert1 alert-last" role="alert">
                <h4><i class="fas fa-check"></i>Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</section>
                            
                        
                        

Alerts Style 2

Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit

                            
<section class="alert">
    <div class="container">
        <div class="alert-block">
            <h2>Alerts Title</h2>
            <div class="alert-area alert2">
                <h4><i class="fas fa-info"></i>Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
            <div class="alert-area alert2" role="alert">
                <h4><i class="fas fa-exclamation-triangle"></i>Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
            <div class="alert-area alert2 alert-last" role="alert">
                <h4><i class="fas fa-check"></i>Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</section>
                            
                        
                        

Alerts Style 3

Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit

                            
<section class="alert">
    <div class="container">
        <div class="alert-block">
            <h2>Alerts Title</h2>
            <div class="alert-area alert3">
                <h4><i class="fas fa-info"></i>Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
            <div class="alert-area alert3" role="alert">
                <h4><i class="fas fa-exclamation-triangle"></i>Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
            <div class="alert-area alert3 alert-last" role="alert">
                <h4><i class="fas fa-check"></i>Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <button type="button" class="close">
                    <svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</section>