Skip to Content
Patternfly Logo

Avatar

The avatar is used to represent a user. It may contain an image that represents the user or a placeholder graphic in the absence of an image. Typical usage is to represent the current user in the masthead. Related design guidelines: Masthead

ExamplesPropsCSS Variables

Examples

Basic

avatar

Props

Avatar properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the Avatar.
srcstringNo''Attribute that specifies the URL of the image for the Avatar.
altstringYesAttribute that specifies the alternate text of the image for the Avatar.

CSS Variables

.pf-c-avatar--pf-c-avatar--BorderRadiusc_avatar_BorderRadius
30em
.pf-c-avatar--pf-c-avatar--Widthc_avatar_Width
2.25rem
.pf-c-avatar--pf-c-avatar--Heightc_avatar_Height
2.25rem