Skip to content
Patternfly Logo

Avatar

Examples

Basic

avatar

Size variations

Small
avatar
Medium
avatar
Large
avatar
Extra Large
avatar

Bordered - light

avatar

Bordered - dark

avatar

Props

Avatar

*required
NameTypeDefaultDescription
altrequiredstringAttribute that specifies the alternate text of the image for the Avatar.
border'light' | 'dark'Border to add
classNamestring''Additional classes added to the Avatar.
size'sm' | 'md' | 'lg' | 'xl'Size variant of avatar.
srcstring''Attribute that specifies the URL of the image for the Avatar.

CSS variables

.pf-c-avatar--pf-c-avatar--BorderColor
transparent
.pf-c-avatar--pf-c-avatar--BorderWidth
0
.pf-c-avatar--pf-c-avatar--BorderRadius
30em
.pf-c-avatar--pf-c-avatar--Width
2.25rem
.pf-c-avatar--pf-c-avatar--Height
2.25rem
.pf-c-avatar--pf-c-avatar--m-sm--Width
1.5rem
.pf-c-avatar--pf-c-avatar--m-sm--Height
1.5rem
.pf-c-avatar--pf-c-avatar--m-md--Width
2.25rem
.pf-c-avatar--pf-c-avatar--m-md--Height
2.25rem
.pf-c-avatar--pf-c-avatar--m-lg--Width
4.5rem
.pf-c-avatar--pf-c-avatar--m-lg--Height
4.5rem
.pf-c-avatar--pf-c-avatar--m-xl--Width
8rem
.pf-c-avatar--pf-c-avatar--m-xl--Height
8rem
.pf-c-avatar--pf-c-avatar--m-light--BorderColor
#d2d2d2
.pf-c-avatar--pf-c-avatar--m-light--BorderWidth
1px
.pf-c-avatar--pf-c-avatar--m-dark--BorderColor
#4f5255
.pf-c-avatar--pf-c-avatar--m-dark--BorderWidth
1px
.pf-c-avatar.pf-m-light--pf-c-avatar--BorderColor
#d2d2d2
.pf-c-avatar.pf-m-light--pf-c-avatar--BorderWidth
1px
.pf-c-avatar.pf-m-dark--pf-c-avatar--BorderColor
#4f5255
.pf-c-avatar.pf-m-dark--pf-c-avatar--BorderWidth
1px
.pf-c-avatar.pf-m-sm--pf-c-avatar--Width
1.5rem
.pf-c-avatar.pf-m-sm--pf-c-avatar--Height
1.5rem
.pf-c-avatar.pf-m-md--pf-c-avatar--Width
2.25rem
.pf-c-avatar.pf-m-md--pf-c-avatar--Height
2.25rem
.pf-c-avatar.pf-m-lg--pf-c-avatar--Width
4.5rem
.pf-c-avatar.pf-m-lg--pf-c-avatar--Height
4.5rem
.pf-c-avatar.pf-m-xl--pf-c-avatar--Width
8rem
.pf-c-avatar.pf-m-xl--pf-c-avatar--Height
8rem

View source on GitHub