Back to Components

Order summary

Overview

An order summary is an at-a-glance breakdown of billable items that make up an order.

warning-icon
This component is under development
There will likely be breaking changes to the API. Proceed with caution.


Features still in consideration include:

  • Displaying per-unit prices
  • Edit support
  • Customizable content
  • Customizable title and header content
  • Customizable footer

Best Practices

Order summaries should:

  • Show pricing information across various line items
  • Minimize clutter by only including values relevant to the data's purpose.
  • Include a totals section to surface a summary of the values that factor into the total for the order. This should include any added costs or discounts applied to the order, such as taxes, delivery charges, coupons and/or gift cards.
  • Be used within an Page
  • Clearly identify the Order by providing a title when using optional actions, such that the target of the action is clear.

Order summaries should not:

  • Be used for an actionable list. Line items should not link to details pages.
  • Be used to present the Order without prices/totals (i.e for order prep)
  • Be nested within a Card. An order summary represents a cohesive set of content and should not be grouped with other card content.

Examples

Order summary

An order summary should be used to present an at-a-glance breakdown of billable items that make up an order.

Code example
Playroom

Order XYZ-123

Optional subtitle
QtyItemPrice
2
Make-Your-Own Bowl @ $120.00
Base: Vermicelli Noodles
Proteins: Ginger-Curry Chicken, Ginger-Curry Tofu
Dressings: Ginger Miso Dressing
This group includes: 4 Vegetarians
$240.00
1
Caesar Salad w/ Chicken @ $34.99
Special Instructions:
Salad dressing and croutons on the side please!
$34.99
14
Chocolate Chunk Cookies @ $1.29
$18.06
Tableware
Include: Cups, Napkins, Plates, Utensils
Subtotal$471.97
Delivery Fee$20.00
ezRewards Promo-$15.00
7.0% Sales Tax$33.04
Total$510.01
Price per head$13.03/person

Current theme

Theme

Contents