Skip to content
Patternfly Logo

Avatar

Examples

Basic

Avatar image

Bordered - light

Avatar image light

Bordered - dark

Avatar image dark

Documentation

Overview

The avatar component provides a default SVG icon. If an image is used it should be 36px by 36px.

Accessibility

Attribute
Applied to
Outcome
alt
.pf-c-avatar
The alt attribute specifies an alternate text for an image, if the image cannot be displayed. Required

Usage

Class
Applied to
Outcome
.pf-c-avatar
<img>
Initiates an avatar image. Required
.pf-m-light
.pf-c-avatar
Modifies an avatar for use against a light background.
.pf-m-dark
.pf-c-avatar
Modifies an avatar for use against a dark background.

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