Avatars

Avatars are images that users can set as their profile picture. They can be regular squares, rounded squares or completely rounded.


Regular Square Avatars

Below are examples of regular square avatars of different sizes. Add a .avatar class to turn an img tag into an avatar. Additionally you can add .avatar-small, .avatar-large and .avatar-xlarge class with the .avatar class to increas or decrease it's size.

small avatar avatar large avatar extra large avatar

Rounded Square Avatars

Below are examples of rounded square avatars of different sizes. Add a .avatar.avatar-rounded-square class to turn an img tag into an avatar. Additionally you can add .avatar-small, .avatar-large and .avatar-xlarge class with the .avatar class to increas or decrease it's size.

small avatar avatar large avatar extra large avatar

Rounded Avatars

Below are examples of rounded avatars of different sizes. Add a .avatar.avatar-rounded class to turn an img tag into an avatar. Additionally you can add .avatar-small, .avatar-large and .avatar-xlarge class with the .avatar class to increas or decrease it's size.

small avatar avatar large avatar extra large avatar