Skip to content
PatternFly logo

Avatar

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

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines