Components
Avatar
Display user images and badges on Thumbtack.
Usage
The Avatar component is a visual representation of a user or entity. The presentation can vary dependent on the existance on image uploaded by the user to represent an individual (customer) or a business (entity).
Options
Sizes
Badging
A badge can be added to denote the online status of a user. The badge will be placed on the top right portion of the avatar and use the 400-level green color as positive indicator of their online status.
Blank Avatars
When images aren’t provided for avatars we use blank states in their place.
Initials are used for blank profiles and differ for entities and users. For entities, we use the first letter of the business name. For users, we use the first and last initial of the user’s name.
The initials will display capitalized and bolded.
Type Sizes
Sizing for the initials will be automatically applied based the sizing options. Below is the list of type size mapping:
Entity avatars get the first initial of the business name
User avatars get the first and last initial
Color
Blank avatars get assigned a background 100-level color and 600-level text color from our extended palette based on the ascii value of the initials attached to the user name or entity.
Accessibility
- The full name or the entity name will be used as the
titleandalttext.