Avatar

Overview Style Guidelines Code Demos Accessibility

Installation

  <rh-avatar></rh-avatar>

Slots 2

Slot Name	Description
	The subject's name
`subtitle`	auxiliary information about the subject, e.g. job title

Attributes 7

DOM Property	Description	Type	Default
`src`	The URL to the user's custom avatar image. It will be displayed instead of a random pattern.	`string \| undefined`	`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.	`string \| undefined`	`unknown`
`subtitle`	The auxiliary information about the user, e.g. job title	`string \| undefined`	`unknown`
`layout`	The type of pattern to display.	`'inline' \| 'block' \| undefined`	`unknown`
`pattern`	The type of pattern to display.	`'squares' \| 'triangles' \| undefined`	`unknown`
`plain`	When true, hides the title and subtitle	`boolean`	`false`
`on`		`ColorTheme \| undefined`	`unknown`

Methods 1

Method Name	Description
`updatePattern()`

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 2

CSS Property	Description	Default
`--rh-avatar-colors`	List of colors to use when generating avatars	`—`
`--rh-avatar-size`	Size of the avatar,	`64px`

Design Tokens 0

None