User Cards
User cards have various information about pros and customers.
Last updated
Was this helpful?
User cards have various information about pros and customers.
Last updated
Was this helpful?
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).
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)
4. Divider Line (a-divider-light) For easy viewing and consumption, cards have divider lines.
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.
4. Divider Line (a-divider-light) For easy viewing and consumption, cards have divider lines.
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.
1. Avatar
2. Customer Information
3. Divider Line (a-divider-light) For easy viewing and consumption, cards have divider lines.
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.
3. Pro Stats (a-text-tert) Pro stats take on metadata styling : is used for the star icon and tertiary text.
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 but it includes metadata (max of 2) to help customers differentiate pros from one another.
1.
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 ].
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 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 but a pro can have all 3 pieces shown at once.
The Client Card has the same structure as the . Client cards can be found on the Client page in the pro app.
