Avatar

Introduction

Avatars give each user their own identity on the ever growing number of social platforms.
Using our various types of avatars, you can give your users flexibililty in the way they want to express themselves, while also ensuring the avatars stick to your theme.
Each avatar must have the class avatar inside it's parent.
There are four sizes available: avatar-sm , avatar-md , avatar-lg & avatar-xl .

Sqaure Image Avatar

To ensure your image is sqaure, use the avatar-square class on the parent element.

square-avatar
square-avatar
square-avatar
square-avatar

Round Corners Avatar

To apply a rounded corner to your image, use the avatar-corner class on the parent element.

round-corner-avatar
round-corner-avatar
round-corner-avatar
round-corner-avatar

Round Avatar

To make your avatar completely round, use the avatar-round class on the parent element.

round-avatar
round-avatar
round-avatar
round-avatar

Text Avatar

Easily create a simple text avatar for those who would like to remain anonymous or do not have an avatar image.
By default this uses the avatar-round class.

AB
HH
Hamza
neoG