Style Guide
Search…
Avatars
Avatars are used to represent users.

Usage of Avatars

Avatars house an image that represent the user (profile picture or user's initials).

Types of Avatars

Image Avatars (avatar-image)

Image avatars are used to represent pros and customers, if they have a profile image.
1. Body: The image that represents the user.
max-width: 64px
max-height: 64px
2. Customer app only - When a pro is favorited, the status will be represented by a heart.
max-width: 14px
max-height: 14px

Default Avatars - Pros (avatar-pro-default)

Default Avatars are used when a pro does not have a profile picture.
1. Body
max-width: 64px
max-height: 64px
background-color: blue-light
2. Status: When a pro is favorited, the status will be represented by a heart.
max-width: 14px
max-height: 14px

Default Avatars - Customer (avatar-customer-default)

Default Avatars are used when a customer does not have a profile picture.
1. Customer Initials (a-text-avatar)
font-size: 24px
font-weight: book
font-color: text-black
2. Body
max-width: 64px
max-height: 64px
background-color: slate-light

Booking Avatar (avatar-bookings)

Booking avatars are used in card-bookings to represent the service. The icon in the avatar will correspond with the service and will take on the two-tone styling.
1. Body
max-width: 64px
max-height: 64px
background-color: blue-light
Last modified 2yr ago
Copy link
On this page
Usage of Avatars
Types of Avatars
Image Avatars (avatar-image)
Default Avatars - Pros (avatar-pro-default)
Default Avatars - Customer (avatar-customer-default)
Booking Avatar (avatar-bookings)