<div class="alert-item sm-gutter long"> <h3 class="xs-gutter"> <i class="fas fa-info-circle xs-gutter"></i>Alert </h3> <p class="xs-gutter para-sm-xs"> you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. </p> <p class="xs-gutter para-sm-xs"> Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </p> </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