Avatar

Basic

Avatars can be characters or images. You can use <a>elements as well.

  • Basic

    ma

  • Tooltip

    hs...

  • Linked

    th
Colors

You can use .bg-*utility classto set a background color.

hshshshshshshshshshshshshs
Sizes

Sizes are respectively: 32, 38, 50, 64, 96, 128

smmdlgxlxxlxxxl
Status

Available statuses are: primary, success, info, warning, danger, dark

hshshs
Pills

While you can use a tooltips to attach a name to an avatar, we also provided pill avatars to show a name besides your avatars.

Maryam Amiri×Maryam Amiri×Maryam Amiri×Maryam Amiri×

Avatar list

Basic

Display a list of avatars.



Overlap

Save some space by overlaping avatar.



Moreavatars

Basic

Display hidden avatars after clicking .avatar-more.

+3
URL

Fetch rest of avatars from a specified url.

+3
Modal

Display avatars inside a modal.

+3

Addavatar

For this example we take advantage of a modaler component.