<figure class="status-badge-wrapper">
<img src="images/avatar-image.jpg" alt="status-badge" class="image-large" />
<span class="status bottom-right-badge-lg online"></span>
</figure>
<figure class="status-badge-wrapper">
<img src="images/avatar-image.jpg" alt="status-badge" class="image-small" />
<span class="status bottom-right-badge-sm online"></span>
</figure>
<figure class="status-badge-wrapper">
<img src="images/avatar-image.jpg" alt="status-badge" class="image-large" />
<span class="status bottom-right-badge-lg offline"></span>
</figure>
<figure class="status-badge-wrapper">
<img src="images/avatar-image.jpg" alt="status-badge" class="image-small" />
<span class="status bottom-right-badge-sm offline"></span>
</figure>
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