Avatar

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Variants
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states
  1. Style
  2. Variants
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states

Style

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.

Anatomy

Anatomy of an avatar group with numbered annotations
  1. Thumbnail
  2. Job details text

Variants

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.

Image of all avatar groups including default, photo, green squares, purple squares, and blue triangles

Plain

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

Image of a row of only avatar thumbnails

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

Warning

Do not apply links to full name and job details text at the same time.

 Image of two avatar groups; one has the full name linked and the other has the company name linked

Theme

All avatar variants are available in both light and dark themes.

Light and dark themes

Image of a light theme avatar group Image of a dark theme avatar group
Element Light theme Dark theme
Color - job details text #4D4D4D #C7C7C7

Configuration

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.

Image of two avatar groups showing specs like height, width, and centering/alignment

Job details text

Job details text has specific styles applied to it.

Image of two avatar groups showing only job details text left justified and center justified
Property Current Value
Font weight - full name Medium
Font weight - job title and company name Regular
Font style - company name Italic

Space

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

Image of all avatar groups with spacing values in between

Interaction states

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

Hover

Image of light theme avatar group hover states Image of dark theme avatar group hover states
Property Light theme Dark theme
Color - full name text #004080 #BEE1FA
Text decoration - full name text Underline Underline

Focus

Property Light theme Dark theme
Color - focus ring #0066CC #73BCF7
Image of light theme avatar group focus states Image of dark theme avatar group focus states
Property Light theme Dark theme
Color - focus ring #0066CC #73BCF7

Active

Helpful tip

The Active state has the same styles as the Hover state.

 Image of light theme avatar group active states Image of dark theme avatar group active states
Property Light theme Dark theme
Color - full name text #004080 #BEE1FA
Text decoration - full name text Underline Underline
Edit this page on GitHub