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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-avatar
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
fullNamefull-name

full name of the user

stringA custom string
undefined
scalescale

specify the scale of the avatar, defaults to m

typedChoose from a set of typed values
lm (default)s
thumbnailthumbnail

src to an image (remember to add a token if the user is private)

stringA custom string
undefined
userIduser-id

unique id for user

stringA custom string
undefined
usernameusername

user name

stringA custom string
undefined

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.