# Food delivery app cart

> A food delivery cart for Figma: items with quantity steppers, subtotal and service fee, promo and cutlery rows, Go to checkout, and the empty cart state.

The basket in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Your order from Ramen Kitchen arriving 19:20 to 19:35, Shoyu ramen and Sushi set with steppers, a subtotal of $32.90 and a service fee of $1.49, and Go to checkout with $34.39. Empty, the same screen says Your cart is empty and offers Browse restaurants.

Page: https://www.appetiteui.com/screens/food-delivery/cart. Every screen of the app: https://www.appetiteui.com/docs/screens-foodie.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Cart | Items with steppers, a price breakdown and a Go to checkout bar | Top Bar, Stepper, Price Row, List, Button |
| Cart empty | The state of a cart with nothing in it | Top Bar, Empty State |

- Cart, light: Foodie app Cart screen: Your order from Ramen Kitchen arriving 19:20 to 19:35, Shoyu ramen and Sushi set items with quantity steppers, a subtotal of $32.90 and a service fee of $1.49, Add a promo code and Add cutlery rows, and a Go to checkout bar with $34.39
  Picture: https://www.appetiteui.com/images/au_foodie_cart_light.webp (dark: https://www.appetiteui.com/images/au_foodie_cart_dark.webp)
- Cart empty, light: Foodie app Cart screen with nothing in it: a shopping bag icon, Your cart is empty, one line explaining that nothing is ordered until you confirm, and a Browse restaurants button
  Picture: https://www.appetiteui.com/images/au_foodie_cart_empty_light.webp (dark: https://www.appetiteui.com/images/au_foodie_cart_empty_dark.webp)

## How the screen follows the checkout pattern

| Rule | On this screen |
| --- | --- |
| Show the total before the button | Subtotal and service fee sit directly above the Go to checkout bar, which repeats the total, $34.39. |
| The button says what it does | The button says Go to checkout, not Pay: this screen builds the order and the next one takes the money. |
| Every choice is a row | Quantities are Steppers on each item, and Add a promo code and Add cutlery are List rows, so the cart never grows a form. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | Cart, Cart empty |
| Stepper | Cart |
| Price Row | Cart |
| List | Cart |
| Button | Cart |
| Empty State | Cart empty |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Sheet corner | 12 pt | 28 dp | `platform/sheet/corner` |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Sheet | iOS / Sheet - Full Screen | M3 / Bottom sheet 412 wide and Side Sheet 320 wide | Material adds a side sheet for large screens |
| List | iOS / List with a 44 minimum row | M3 / List Item, 56, 72 or 88 high by Lines | Material sets the row height by lines of text, iOS sets only a minimum |

## Related

- Food delivery app: [Food delivery app home](https://www.appetiteui.com/screens/food-delivery/home)
- Food delivery app: [Food delivery app restaurant menu](https://www.appetiteui.com/screens/food-delivery/restaurant-menu)
- Food delivery app: [Food delivery app checkout](https://www.appetiteui.com/screens/food-delivery/checkout)
- Food delivery app: [Food delivery app order tracking](https://www.appetiteui.com/screens/food-delivery/order-tracking)
- Docs: [Foodie app screens, every screen and token](https://www.appetiteui.com/docs/screens-foodie)
- Pattern: [Checkout and payment screens](https://www.appetiteui.com/screens/patterns/checkout)
- Finance app: [Finance app payment screen](https://www.appetiteui.com/screens/finance/payment)
- Booking app: [Booking app checkout](https://www.appetiteui.com/screens/booking/checkout)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Docs: [Input](https://www.appetiteui.com/docs/input)
- Docs: [Modal](https://www.appetiteui.com/docs/modal)
- Glossary: [Bottom sheet](https://www.appetiteui.com/academy/glossary/bottom-sheet)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)
- Article: [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android)