Job Cards
Job cards give pros the most important details about a job and lead to a Job Details page.
Last updated
Job cards give pros the most important details about a job and lead to a Job Details page.
Last updated
The Claims and Schedule page are made up of jobs cards. Jobs cards are used to represent a single job. When a user is viewing a job card, they will see key information like type of service and date/time of that job.
1. Pre-Claim Job Card (card-PA-job-pre-claim)
2. Claimed Job Card (card-PA-job-claimed)
The pre-claim job card lives in the Claims tab where pros look for jobs that they can manually claim. Pre-claim job cards are stacked vertically and organized by the date and time of the booking.
1. Job Information (text-h4, text-tert) Reflects key information about the job. H4 styling for the Service Name and Tertiary styling for secondary job information like Time and Location.
2. Pricing Reflects the pay of a specific job. Different styling is applied when there is a bonus attache to the booking.
3. Callout (a-card-callout) Jobs can have callouts to bring attention to important things like bonuses or if there's a pick up involved.
4. Icon Metadata (a-text-tert) Metadata gives pros more context about the job. Each job card can have up to 3 piece of metadata. Font Awesome (a-icon-line) and tertiary styling is used for metadata icon and text.
5. Divider (a-divider-light-75) For easy viewing and consumption, cards will have divider lines.
After a job is claimed and on a pro's schedule, the job card changes so that the H1 is replaced with the client's name. The same pricing, callout, icon metadata (and same styling) used in the Pre-Claim state of the card will be used in the Claimed state. Like Pre-claim job cards, Claimed job cards are also stacked vertically and organized by the date and time of the booking.
1. Job Information (text-h4, text-tert) Reflects key information about the job. H4 styling for the Client Name and Tertiary styling for secondary job information like Service Name, Time, and Location.
