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 class to set a background color.

hs hs hs hs hs hs hs hs hs hs hs hs hs
Sizes

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

sm md lg xl xxl xxxl
Status

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

hs hs hs
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.



More avatars

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

Add avatar

For this example we take advantage of a modaler component.