PatternFly Elements

Avatar

Overview

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

Installation

npm install @patternfly/elements

Usage

<pf-avatar alt="Eleanore Stillwagon"></pf-avatar>
<pf-avatar alt="Libbie Koscinski"></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

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
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'
dark

Whether or not the Avatar image is dark

DOM Property
dark
Type
boolean
Default
false

DOM Properties

None

Methods

None

Events

None

CSS Custom Properties

None

CSS Shadow Parts

None

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