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/elementsThen 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/elementsUsage
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 - Default
-
unknown
alt-
The alt text for the avatar image.
- DOM Property
alt- Type
-
string - 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' - 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-global--BorderRadius--lg |
30em
|
|
--pf-global--BorderColor--dark-100 |
#d2d2d2
|
|
--pf-global--palette--black-700 |
#4f5255
|
|
--pf-c-avatar--Height |
Height for avatar |
2.25rem
|
--pf-c-avatar--BorderRadius |
Border radius for avatar |
var(--pf-global--BorderRadius--lg, 30em)
|
--pf-c-avatar--BorderWidth |
Border width for avatar |
var(--pf-global--BorderWidth--sm, 1px)
|
--pf-global--BorderWidth--sm |
1px
|
|
--pf-c-avatar--BorderColor |
Border color for avatar |
var(--pf-c-avatar--m-dark--BorderColor)
|
--pf-c-avatar--m-dark--BorderColor |
Border color for dark avatar |
var(--pf-global--palette--black-700, #4f5255)
|
--pf-c-avatar--m-sm--Width |
Width for small avatar |
1.5rem
|
--pf-c-avatar--m-sm--Height |
Height for small avatar |
1.5rem
|
--pf-c-avatar--m-md--Width |
Width for medium avatar |
2.25rem
|
--pf-c-avatar--m-md--Height |
Height for medium avatar |
2.25rem
|
--pf-c-avatar--m-lg--Width |
Width for large avatar |
4.5rem
|
--pf-c-avatar--m-lg--Height |
Height for large avatar |
4.5rem
|
--pf-c-avatar--Width |
Width for avatar |
var(--pf-c-avatar--m-xl--Width)
|
--pf-c-avatar--m-xl--Width |
Width for extra large avatar |
8rem
|
--pf-c-avatar--m-xl--Height |
Height for extra large avatar |
8rem
|
CSS Shadow Parts
None
