Avatar

An avatar is a visual representation of a user, which can contain an image or placeholder graphic.

Examples

Basic

Avatar image

Bordered

Avatar image bordered

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

Usage

Class
Applied to
Outcome
.pf-v6-c-avatar
<img>
Initiates an avatar image. Required
.pf-m-bordered
.pf-v6-c-avatar
Modifies an avatar to have a border.
.pf-m-sm{-on-[breakpoint]}
.pf-v6-c-avatar
Modifies an avatar to be small on an optional breakpoint.
.pf-m-md{-on-[breakpoint]}
.pf-v6-c-avatar
Modifies an avatar to be medium on an optional breakpoint. Note: This is the default size.
.pf-m-lg{-on-[breakpoint]}
.pf-v6-c-avatar
Modifies an avatar to be large on an optional breakpoint.
.pf-m-xl{-on-[breakpoint]}
.pf-v6-c-avatar
Modifies an avatar to be extra large on an optional breakpoint.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-avatar--pf-v6-c-avatar--BorderColor
transparent
.pf-v6-c-avatar--pf-v6-c-avatar--BorderWidth
0
.pf-v6-c-avatar--pf-v6-c-avatar--BorderRadius
999px
.pf-v6-c-avatar--pf-v6-c-avatar--Width
2.25rem
.pf-v6-c-avatar--pf-v6-c-avatar--Height
2.25rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-sm--Width
1.5rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-sm--Height
1.5rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-md--Width
2.25rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-md--Height
2.25rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-lg--Width
4.5rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-lg--Height
4.5rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-xl--Width
8rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-xl--Height
8rem
.pf-v6-c-avatar--pf-v6-c-avatar--m-bordered--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-avatar--pf-v6-c-avatar--m-bordered--BorderWidth
1px
.pf-v6-c-avatar.pf-m-bordered--pf-v6-c-avatar--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-avatar.pf-m-bordered--pf-v6-c-avatar--BorderWidth
1px
.pf-v6-c-avatar.pf-m-sm--pf-v6-c-avatar--Width
1.5rem
.pf-v6-c-avatar.pf-m-sm--pf-v6-c-avatar--Height
1.5rem
.pf-v6-c-avatar.pf-m-md--pf-v6-c-avatar--Width
2.25rem
.pf-v6-c-avatar.pf-m-md--pf-v6-c-avatar--Height
2.25rem
.pf-v6-c-avatar.pf-m-lg--pf-v6-c-avatar--Width
4.5rem
.pf-v6-c-avatar.pf-m-lg--pf-v6-c-avatar--Height
4.5rem
.pf-v6-c-avatar.pf-m-xl--pf-v6-c-avatar--Width
8rem
.pf-v6-c-avatar.pf-m-xl--pf-v6-c-avatar--Height
8rem