PatternFly

Avatar

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

Examples

Basic

Avatar image

Bordered - light

Avatar image light

Bordered - dark

Avatar image dark

Small

Avatar image small

Medium

Avatar image medium

Large

Avatar image large

Extra large

Avatar image extra large

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-v5-c-avatar
The alt attribute describes the appearance and function of the avatar image. Required

Usage

Class
Applied to
Outcome
.pf-v5-c-avatar
<img>
Initiates an avatar image. Required
.pf-m-light
.pf-v5-c-avatar
Modifies an avatar for use against a light background.
.pf-m-dark
.pf-v5-c-avatar
Modifies an avatar for use against a dark background.
.pf-m-sm{-on-[breakpoint]}
.pf-v5-c-avatar
Modifies an avatar to be small on an optional breakpoint.
.pf-m-md{-on-[breakpoint]}
.pf-v5-c-avatar
Modifies an avatar to be medium on an optional breakpoint. Note: This is the default size.
.pf-m-lg{-on-[breakpoint]}
.pf-v5-c-avatar
Modifies an avatar to be large on an optional breakpoint.
.pf-m-xl{-on-[breakpoint]}
.pf-v5-c-avatar
Modifies an avatar to be extra large on an optional breakpoint.

CSS variables

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

View source on GitHub