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

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 © 2021 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines