Avatar

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Usage
  2. Sizes
  3. Writing content
  4. Layout
  5. Responsive design
  6. Best practices
  1. Usage
  2. Sizes
  3. Writing content
  4. Layout
  5. Responsive design
  6. Best practices

Usage

The avatar thumbnail is commonly used to represent a user in a masthead or navigation. However, depending on other use cases and needs, there is more room for customization.

Sizes

The avatar thumbnail can be used at different sizes based on our design tokens. The default size is 64px.

Image of all avatar thumbnail sizes and their pixel values underneath
Variation and range Use case
Small (16px - 32px) Use these sizes in accordions, data lists, or tables
Medium (40px - 80px) Use these sizes in layouts, bands, or cards
Large (96px - 128px) Use these sizes in profile displays or account interfaces

Writing content

Separate each part of the job title and company name with a comma.

Image of three job details text, ranging from short to long

Layout

Alignment

The avatar thumbnail and job details text can be horizontally or vertically centered.

Image of two avatar groups; one is horizontally centered and the other is vertically centered

Stacking

There should be a spacing of --rh-space-3xl between avatar groups that are stacked vertically.

Image of three avatar groups stacked vertically

Responsive design

Large breakpoints

Image of two avatar groups used on large breakpoints; one is aligned left and the other is aligned in the center

Small breakpoints

Image of four avatar groups used on small breakpoints; two are aligned left and the other two are aligned in the center

Line breaks

As breakpoints or containers get smaller, regardless if job details text will break to more lines, it is still anchored at the top.

Image of two avatar groups with specs on top; one has two lines and the other has five lines

Best practices

Thumbnail shape

Default avatar thumbnail in a circle next to 'Ada Lovelace, Computer programmer' text

Keep the thumbnail in a circle.

 Default avatar thumbnail in a square next to 'Ada Lovelace, Computer programmer' text

Do not change the shape of the avatar thumbnail.

Thumbnail theme

Light theme avatar against light theme background and dark theme avatar against dark theme background

Use the right avatar thumbnail for the theme.

 Dark theme avatar against light theme background and light theme avatar against dark theme background

Do not use a light theme avatar thumbnail in the dark theme and vice versa.

Icon vs. avatar thumbnail

Avatar thumbnail above the text 'You are logged in as Ada Lovelace'

Use an avatar thumbnail to represent an authenticated user.

 Avatar thumbnail above the text 'Login'

Do not use an avatar thumbnail when an icon is more suitable.
Edit this page on GitHub