Avatar

Overview Style Guidelines Code Accessibility

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

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

Space

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

Image of all avatar groups with spacing values in between
Example Token Description
16 --rh-space-lg 16px spacer

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

Focus

Helpful tip

The Focus state has the same styles as the Hover state.
Image of light theme avatar group focus states
Image of dark theme avatar group focus states

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
© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top