Avatar

An Avatar is a graphical representation of a user or the user's character or persona. They can be custom photos uploaded by users, or generated as Identicons as a placeholder.

Profile Avatars

Profile Avatars can be created by adding the .avatar class on the <img> tag.

Copy
        <img src="/assets/images/avatar-1.jpg" class="avatar"/>
        <img src="/assets/images/avatar-2.jpg" class="avatar"/>
        <img src="/assets/images/avatar-4.jpg" class="avatar"/>

Sized Avatars

Size of the avatars can be adjusted by choosing either .avatar-lg | .avatar-md | .avatar-sm classes.

Copy
        <img src="/assets/images/avatar-1.jpg" class="avatar avatar-lg"/>
        <img src="/assets/images/avatar-3.jpg" class="avatar avatar-md"/>
        <img src="/assets/images/avatar-2.jpg" class="avatar avatar-sm"/>

Square Avatars

Add square avatars using the .avatar-square class.

Copy
        <img src="/assets/images/avatar-1.jpg" class="avatar avatar-lg avatar-square"/>
        <img src="/assets/images/avatar-3.jpg" class="avatar avatar-md avatar-square"/>
        <img src="/assets/images/avatar-2.jpg" class="avatar avatar-sm avatar-square"/>