Skip to content
Patternfly Logo

Avatar

Examples

Basic

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.
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-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

View source on GitHub