Avatars

Usage of Avatars

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

Types of Avatars

1. Image Avatar (avatar-human)

2. Pro Default Avatar (avatar-pro-default)

3. Customer Default Avatar (avatar-customer-default)

4. Booking Avatar (avatar-booking)

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