Style Guide
Search
⌃K

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 3yr ago