<!-- Email badges --> <div class="badge-container sm-gutter"> <div class="email-badge"> <i class="fas fa-envelope fa-2x xs-padding"></i> </div> <div class="badge xs-padding full-brr para-sm-xs">10</div> </div> <div class="badge-container sm-gutter"> <div class="email-badge"> <i class="fas fa-envelope xs-padding"></i> </div> <div class="badge full-brr para-xs xxs-padding pos-small"> 10 </div> </div> <!-- notification bell --> <div class="badge-container sm-gutter"> <div class="notifs-badge full-brr"> <i class="fas fa-bell fa-2x sm-padding"></i> </div> <div class="badge xs-padding full-brr para-sm-xs">10</div> </div> <!-- button badge--> <div class="badge-container sm-gutter"> <button class="button-badge para-sm xs-gutter md-brr"> Action </button> <div class="badge xs-padding full-brr para-sm-xs">10</div> </div> <div class="badge-container sm-gutter"> <button class="button-badge para-xs xs-gutter md-brr"> Action </button> <div class="badge xxs-padding full-brr para-xs pos-small"> 10 </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