11.12.1

Avatars




Avatar

Default

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Monogram


This is used when there is no avatar for a particular user.

Bad Image Link


A monagram is used as a fallback when an invalid or missing image url is provided.

Status

Terry Johnson Status

Terry Johnson Online

Terry Johnson Away

Terry Johnson Offline

The Status prop is used to display a user's online status like popular chat apps.

Avatar Action Button

Default


Placement


Actions


On Click


Tooltip

Sophia Carden

Multiple Users

Default

+2



Reverse

+2



Size

xs
+2


xxs
+2


User avatar default size is xs or 28px, but you can pass in xxs to change avatar size to 20px.

Multiple Users Stacked

Default





+4

User

Default

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black


Anna Black


With Territory

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Anna Black

PHL • Remodeling Consultant

Text Only

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Horizontal Size

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Vertical Size

Anna Black

Remodeling Consultant


Anna Black

Remodeling Consultant


Anna Black

Remodeling Consultant

Subtitle

Anna Black

PHL • Remodeling Consultant
User ID: 12345

Anna Black

PHL • Remodeling Consultant
User ID: 12345

Block Content Subtitle

Anna Black

PHL • Remodeling Consultant
Admin

Anna Black

(349) 185-9988
(555) 555-5555
email@example.com

The kit accepts block content and whatever is passed as block content will display in the subtitle section.