Skip to main content

Avatar

Since 2.0.0

Guidelines​

Avatars are visual or textual representations of individual identities, most often used to represent users logged into a system. Identity providers or user management systems usually provide identity information, and the amount of information provided varies from system to system. The avatar component offers different options to handle this.

Options​

Avatar overview

OptionDescription and usage
Default (1)Without any option set, the visual is just a predefined placeholder graphic. It can be used when identity information is unavailable or cannot be used for other reasons.
Initials (2)Shows a string of one or two characters. Can be used when only textual information is available. Examples: A user’s initials (JD for John Doe) or the first character from the username (J for johndoe)
Image (3)Shows an image. Can be used when identity information includes an image

Behavior​

The avatar is a display-only component with no further interactions. Images provided are proportionally scaled to fill the content. A circle shape clips the image. All image formats that browser engines support can be used.

Dos and Don’ts​

Avatar dos and don‘ts

  • Don't use more than 2 characters when using the "Initials" option