<div class="alert alert--primary center-children"> <div class="alert__info center-children"> <span class="material-icons md-18">sync</span> <span class="alert__desc text"> <span class="alert__desc__keyword text">Upload </span> your photos to your gallery </span> </div> <div class="alert__action"> <span class="material-icons">close</span> </div> </div> <div class="alert alert--secondary center-children"> <div class="alert__info center-children"> <span class="material-icons md-18">cloud</span> <span class="alert__desc text" ><span class="alert__desc__keyword text">Backup </span>your photos to your gallery</span > </div> <div class="alert__action"> <span class="material-icons">close</span> </div> </div> <div class="alert alert--success center-children"> <div class="alert__info center-children"> <span class="material-icons md-18">check</span> <span class="alert__desc text" ><span class="alert__desc__keyword text" >Congratulations!</span >added products to cart.</span > </div> <div class="alert__action"> <span class="material-icons">close</span> </div> </div> <div class="alert alert--warning center-children"> <div class="alert__info center-children"> <span class="material-icons md-18">info</span> <span class="alert__desc text" ><span class="alert__desc__keyword text">Warning!</span>you're being redirected to an external website</span > </div> <div class="alert__action"> <span class="material-icons">close</span> </div> </div> <div class="alert alert--failure center-children"> <div class="alert__info center-children"> <span class="material-icons md-18">error</span> <span class="alert__desc text" ><span class="alert__desc__keyword text">Failure!</span>your purchase failed. Try again.</span > </div> <div class="alert__action"> <span class="material-icons">close</span> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter