Avatars

Avatars displays user image or initials as profile picture.

Elixir offers the following range of avatars - Circle Avatars, Square Avatars, and Text Avatars in 5 different sizes - extra small, small, medium, large, and extra large.

To use avatars of different sizes, add any one of the size classs along with the base class- avatar-xs, avatar-sm, avatar-md, avatar-lg, and avatar-xl.
By default a medium sized, circle avatar is generated.

Circle Avatars

To generate a circle avatar use the base class avatar.

Extra Large Size Avatar Large Size Avatar Medium Size Avatar Small Size Avatar Extra Small Size Avatar

Copy the code below to use the circle shaped avatars of varying sizes.

Square Avatars

To generate a square avatar use the base class avatar-square along with the base class.

Extra Large Size Avatar Large Size Avatar Medium Size Avatar Small Size Avatar Extra Small Size Avatar

Copy the code below to use squared avatars of varying sizes.

Text Avatars

To generate a text avatar use the base class avatar-text along with the base class.

Copy the code below to use circled text avatars of different sizes.

To generate a squared text avatar, use the base class and add the classes avatar-square and avatar-text class.

Copy the code below to use squared text avatars of different sizes.