Avatar

Style

An avatar can be used in light and dark themes. They feature a circular silhouette icon and are always grouped with text, like attribution or some kind of descriptor.

Theme

Size

The size of an avatar depends on where they are used and how much information is included. For example, the size of an avatar used in the navigation needs to be smaller than an avatar used in a bigger layout with more space. The maximum size of an avatar is 64px, so be mindful of the amount of text that is included next to it.

Text positioning

Text is positioned to the right or centered below an avatar.

Attribution or descriptor text is vertically-aligned

Attribution or descriptor text is horizontally-aligned

Spacing

An avatar uses PatternFly 4 spacers to define spacing values between the avatar and text.