Avatar
Avatar
Overview
An Avatar is a placeholder graphic for a photo or an image that is placed to the left or on top of text.
Installation
npm install @rhds/elementsUsage
Slots
- Default Slot
-
The subject's name
subtitle-
auxiliary information about the subject, e.g. job title
Attributes
src-
The URL to the user's custom avatar image.
It will be displayed instead of a random pattern.
- DOM Property
src- Type
-
string | undefined - Default
-
unknown
name-
The user's name, either given name and family name, or username.
When displaying a pattern, the name will be used to seed the pattern generator.
- DOM Property
name- Type
-
string | undefined - Default
-
unknown
subtitle-
The auxiliary information about the user, e.g. job title
- DOM Property
subtitle- Type
-
string | undefined - Default
-
unknown
layout-
The type of pattern to display.
- DOM Property
layout- Type
-
'inline'|'block' | undefined - Default
-
unknown
pattern-
The type of pattern to display.
- DOM Property
pattern- Type
-
'squares'|'triangles' | undefined - Default
-
unknown
plain-
When true, hides the title and subtitle
- DOM Property
plain- Type
-
boolean - Default
-
false
on- DOM Property
on- Type
-
ColorTheme | undefined - Default
-
unknown
Methods
updatePattern()
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-avatar-colors |
list of colors to use when generating avatars |
— |
--rh-avatar-size |
size of the avatar. Use icon tokens. |
64px |
CSS Shadow Parts
None
