User Cards
User cards have various information about pros and customers.
Usage of User Cards
User cards are used to represent customers on the pro app and pros on the consumer app. The cards give a basic overview of pros and customers like name, star rating, number of jobs completed, location, and date of recent booking. Depending on the context of the card, metadata will be used to give extra information about that user their availability (consumer app) or the neighborhood of a customer's home (pro app).
Types of User Cards
1. Basic Pro Card (card-CA-pro)
2. Pro Search Card (card-CA-pro-search)
3. Pro Search with Availability Card (card-CA-pro-search)
5. Account Card (card-account)
Anatomy of Basic Pro Card (card-ca-pro)
Basic Pro Cards are found on the My Pros page. This page is a list of a user's pro team members.
1. Avatar (a-avatar-standard)
2. Pro Name (a-text-h4)
3. Pro Stats (a-text-tert) Pro stats take on metadata styling : font Awesome (a-icon-line) is used for the star icon and tertiary text.
4. Divider Line (a-divider-light) For easy viewing and consumption, cards have divider lines.
Anatomy of Pro Search Card (card-pro-search)
Pro Search cards allow users to access pro profiles so that users can book or add a particular pro to their pro team. They are found in the pro search experience (users can navigate to this experience from the My Pros page). The Pro Search Card has the same basic structure of the Basic Pro card but it includes metadata (max of 2) to help customers differentiate pros from one another.
2. Icon Metadata (Activity Status) The first piece of metadata shown in a Pro Search card is the activity of the pro. A pro can be active or inactive.
3. Icon Metadata The second piece of metadata show in a Pro Search card is between a Premium badge or a Neighborhood indicator. If a pro is a Handy Premium Pro, the Premium badge takes precedence over the Neighborhood indicator [which uses Font Awesome (a-icon-line)].
4. Divider Line (a-divider-light) For easy viewing and consumption, cards have divider lines.
Anatomy of a Pro Search with Availability Card (card-pro-search)
The Pro Search with Availability card is shown when a user accesses the pro search experience from a reschedule or change pro flow. It is very similar to the pro search card but includes information about the pro’s availability status for a specific date and time and up to 3 pieces of metadata.
The metadata used is the same as the ones used in the pro search card but a pro can have all 3 pieces shown at once.
1. Availability Information (a-text-tert) - Available
2. Availability Information (a-text-tert) - Request or Not Available
3. Divider Line (a-divider-light) For easy viewing and consumption, cards have divider lines.
Anatomy of Client Card (card-PA-cust)
The Client Card has the same structure as the basic pro card. Client cards can be found on the Client page in the pro app.
1. Avatar
2. Customer Information
3. Divider Line (a-divider-light) For easy viewing and consumption, cards have divider lines.
Anatomy of Account Card
The most basic user card. Account cards represent the owner of the account and can be found on account pages.
1. Avatar
2. Account Name
3. Divider Line (a-divider-light) For easy viewing and consumption, cards have divider lines.
Last updated
