Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
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)

Was this helpful?

  1. Native

Avatars

Avatars are used to represent users.

PreviousUser CardsNextBanners

Last updated 5 years ago

Was this helpful?

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)

1. Body

max-width: 64px
max-height: 64px
background-color: blue-light

Booking avatars are used in to represent the service. The icon in the avatar will correspond with the service and will take on the .

1. Image Avatar (avatar-human)
2. Pro Default Avatar (avatar-pro-default)
3. Customer Default Avatar (avatar-customer-default)
4. Booking Avatar (avatar-booking)
card-bookings
two-tone styling