Avatar

An avatar is a placeholder graphic, custom photo, or generated image. It can be used by itself, but it is often paired with detailed text about the user including their full name, job title, and company.

The Default variant is visible when a user has not uploaded a custom image (like a photo). Once they do, what they provided replaces the gray thumbnail. If they choose not to, a colored pattern will be generated instead based on their name. A specific name is linked to the same pattern, so thumbnails can stay static without storing lots of generated images.

The avatar thumbnail can be used on its own in places like accordions, cards, navigations, tables, and more.

Links can be applied to full name or job details text.

All avatar variants are available for both light and dark color schemes.

The default size of the avatar thumbnail is 64px x 64px and the avatar thumbnail and job details text are horizontally centered. To see alignment examples, go to the Guidelines page.

Job details text has specific styles applied to it.

Space values are the same for all variants and on all breakpoints.

Interaction states are visual representations used to communicate the status of an element or pattern.