Skip to content
Versions v3 v2 v1

Avatar

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

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-avatar/pf-avatar.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Installation

npm install @patternfly/elements

Usage

View HTML Source
<pf-avatar alt="Eleanore Stillwagon"></pf-avatar>
<pf-avatar alt="Libbie Koscinski" size="md"></pf-avatar>
<pf-avatar alt="Blanca Rohloff"></pf-avatar>
<pf-avatar alt="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>

Slots

None

Attributes

src

The URL to the user's custom avatar image.

DOM Property
src
Type
string | undefined
Default
unknown
alt

The alt text for the avatar image.

DOM Property
alt
Type
string | undefined
Default
'Avatar image'
size

Size of the Avatar

DOM Property
size
Type
'sm' | 'md' | 'lg' | 'xl'
Default
'sm'
border

Whether to display a border around the avatar

DOM Property
border
Type
'light' | 'dark' | undefined
Default
unknown
dark

Whether or not the Avatar image is dark

DOM Property
dark
Type
boolean
Default
false

DOM Properties

None

Methods

None

Events

load

when the avatar loads

Event Type:
PfAvatarLoadEvent

CSS Custom Properties

CSS Property Description Default
--pf-c-avatar--Width 24px
--pf-c-avatar--Height 24px
--pf-c-avatar--BorderRadius var(--pf-global--BorderRadius--lg, 128px)
--pf-c-avatar--BorderWidth 0
--pf-c-avatar--BorderColor var(--pf-global--BorderColor--dark-100, #d2d2d2)
--pf-c-avatar--m-dark--BorderColor var(--pf-global--palette--black-700, #4f5255)
--pf-c-avatar--m-sm--Width 24px
--pf-c-avatar--m-sm--Height 24px
--pf-c-avatar--m-md--Width 36px
--pf-c-avatar--m-md--Height 36px
--pf-c-avatar--m-lg--Width 72px
--pf-c-avatar--m-lg--Height 72px
--pf-c-avatar--m-xl--Width 28px
--pf-c-avatar--m-xl--Height 28px

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify