Avatar
Calcite Avatars are visual representations of users' accounts that can be presented by an image or initials.
Overview
Avatars can be used inside of other components or by themselves to represent the user.
Avatars can display an image or simply the initials of the profile. A randomly generated AA accessible background will fill behind the initials. That generated fill will stay assigned to the user until their account is deleted or an image is used.
Usage
- Quick representation of the user or groups of users
- Within Chips for filtering
- User profiles
Sample
Edit sample on Codepen
Edit sample on Codepen
API reference
calcite-avatar
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| fullName | full-name | full name of the user | undefined | |
| scale | scale | specify the scale of the avatar, defaults to m | lm (default)s | |
| thumbnail | thumbnail | src to an image (remember to add a token if the user is private) | undefined | |
| userId | user-id | unique id for user | undefined | |
| username | username | user name | undefined |