<div class="alert alert--error"> <i class="alert__icon alert__icon--error fas fa-exclamation-circle"></i> <span class="alert__msg--error">This a a error message</span> </div> <div class="alert alert--warning"> <i class="alert__icon alert__icon--warning fas fa-exclamation-triangle"></i> <span class="alert__msg alert__msg--alert">This a a warning message</span> </div> <div class="alert alert--info"> <i class="alert__icon alert__icon--info fas fa-info-circle"></i> <span class="alert__msg alert__msg--info">This a a info message</span> </div> <div class="alert alert--success"> <i class="alert__icon alert__icon--success far fa-check-circle"></i> <span class="alert__msg alert__msg--success">This a a success message</span> </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