Avatar

Usage

An avatar is a subtle placeholder graphic used in the absence of a photo or image. When a user does not provide their own photo or image, an avatar is used instead.

Text options

Text options can be placed to the right or under an avatar. For example, a name can be placed on one line and their job information on the second line. Always group an avatar with text, attribution, or some other kind of descriptor text. Never use it by itself, unless absolutely necessary in the right context, like in the navigation.

Layout

An avatar can be used in containers or layouts. They can be stacked vertically (or horizontally) depending on the amount of people and the container size.

Best practices

An avatar should not be used without text unless absolutely necessary in the right context, like in the navigation.

Do not use a dark theme avatar in the light theme.

Do not include job information on the same line as a name, break it to the second line.

Do not allow vertically-aligned attribution or a descriptor become too compressed, otherwise change to horizontal alignment.

Behavior

Vertical vs. top alignment

If the height of text exceeds the height of an avatar, it becomes aligned to the top edge instead.

Attribution or descriptor text vertically-aligned

Attribution or descriptor text aligned to the top edge

Responsive design

An avatar can be used with text on desktop and mobile. If text that is positioned on the right becomes too compressed, it will flow under and its alignment will change to centered. On mobile, an avatar with text always stack vertically.

Interaction states

Sometimes a company name in attribution text can link out to their website. Refer to the specific interaction states that are assigned to Link for more information. Otherwise, there are no other interaction states.