Booking Cards
Booking cards live in the customer app and lead users to review details of any bookings and edit any upcoming bookings.
Usage of Booking Cards
Booking lists are made up of booking cards. Booking cards are used to represent a single booking (can be an upcoming or past booking). When a user is viewing a booking card, they will see key information like type of service and date/time of that booking.
Booking Card Types
1. Booking Card (card-booking-basic)
2. Active Booking Card (card-booking-active)
Anatomy of Booking Card (card-booking)
Booking cards can be stacked vertically to show upcoming bookings or past bookings in sequential order.
1. Booking Avatar (avatar-bookings) Adds a visual element to the card and represents the service.
2. Booking Information (text-h4, text-tert) Reflects key information about the booking. H4 styling for the Date and Tertiary styling for the Time and Service Name.
3. Icon Metadata (text-tert) Font Awesome (a-icon-line) and tertiary styling is used for metadata icon and text. Metadata is only shown in booking cards if the booking is made through a partner(Wayfair, Walmart, HomeAdvisor, etc). Partner metadata will be differentiated by the partner's logo.
4. Divider Line (a-divider-light-343) For easy viewing and consumption, cards have divider lines.
Anatomy of Active Booking States (card-booking-active)
On the day of the booking, the basic booking card will have a map component added to it that will give the customer updates about their booking.
1. Booking Card (card-booking) Booking Card component is reused here. The H4 will be updated with "Today"
2. Map (a-card-map) Visualization of the status of the booking.
3. Status Bar (a-card-booking-status) Reflects the status of the booking and pro's ETA and floats inside the map.
a. Container
b. Status Indicator (a-icon-indicator)
c. Status Text (a-text-paragraph)
Last updated
