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.
1
max-width: 64px
2
max-height: 64px
Copied!
2. Customer app only - When a pro is favorited, the status will be represented by a heart.
1
max-width: 14px
2
max-height: 14px
Copied!

Default Avatars - Pros (avatar-pro-default)

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

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)
1
font-size: 24px
2
font-weight: book
3
font-color: text-black
Copied!
2. Body
1
max-width: 64px
2
max-height: 64px
3
background-color: slate-light
Copied!

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
1
max-width: 64px
2
max-height: 64px
3
background-color: blue-light
Copied!
Last modified 2yr ago