Booking Cards
Booking cards live in the customer app and lead users to review details of any bookings and edit any upcoming bookings.
Last updated
Was this helpful?
Booking cards live in the customer app and lead users to review details of any bookings and edit any upcoming bookings.
Last updated
Was this helpful?
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 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.
4. Divider Line (a-divider-light-343) For easy viewing and consumption, cards have divider lines.
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.
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)
2. Booking Information (text-h4, text-tert) Reflects key information about the booking. for the Date and for the Time and Service Name.
3. Icon Metadata (text-tert) and 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.
1. Booking Card (card-booking) component is reused here. The will be updated with "Today"
