Avatar
Overview
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
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
