PatternFly

Avatar

An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.

Usage

There are four size variations available to use for different scenarios. The typical usage for an avatar is to represent the current user in the masthead. However, based on your product's use cases and needs, there is room for customization.

Small (24 px)

This size variation should be used in components such as accordions, data lists, tables, etc.

Image displaying small avatar usage in data list and accordion

Medium (36 px)

This size variation is the default avatar size and should be used in the masthead component.

Image displaying medium avatar usage in masthead 

Large (72 px)

This size variation should be used in components such as cards.

Image displaying large avatar usage in card 

Extra Large (128 px)

This size variation should be used in components such as profile displays.

Image displaying extra large avatar usage in profile display

Accessibility

For information regarding accessibility, visit the avatar accessibility tab.


View source on GitHub