Skip to main content
Version: 2.0.2

Avatar

The avatar component allows you to create a profile image, from a picture or text. It must be created from the .ms-avatar class.

Basic usage

Live Editor
Result
Loading...

It is possible to change the size of the avatars with the class .ms-small, .ms-medium and .ms-large.

Live Editor
Result
Loading...

It is also possible to add a link to the profile picture, with an a tag.

Live Editor
Result
Loading...

Text

For users who do not have a profile picture, it is possible to display the initials instead of the image. To do this, simply add these initials in a tag with the .ms-text class.

Live Editor
Result
Loading...

Status

The presence indicator is used to highlight the user's status. The .ms-status class allows you to add a small dot under the profile image, through different colors. Three types of status are available, .ms-on, .ms-off and .ms-out.

Live Editor
Result
Loading...

Shadow

Finally, it is also possible to add a shadow with the helper class .ms-box-shadow.

Live Editor
Result
Loading...