System banners
A system banner can be used to return feedback, display status related messages and confirmation toasts as well as loading states.
Statuses
Four types of status related banners: Success, Warning, Error and Info.
Placement
Page level, full-width and can be placed top/bottom or at a fixed position.
Text wrapping
Messages can wrap on my many lines but ultimately should be clear and concise. Subtitles can also be used.
Promo banners
A promo banner is used for marketing or promotional purposes that is directly tied to Deliveroo branded content.
Intent
Use to display one of our ongoing marketing campaigns or promos.
Use to display service/status related information.
Actions
It is best practice to take an action on banner either through an icon (arrow, cross) or a button.
Colour themes
Teal (Default), Berry (M+) and Plus gradient. Plus gradient is tied to Deliveroo Plus content and should not be used outside of this.
Placement
Card: to call attention at the top of a list or in a card feed.
Row: most applications, as a row will suffice
Call to actions
Identical offers: If the banner leads to a collection of restaurants with the same offer, the CTA should be ** *View X restaurants* **
Different offers: If the banner leads to a collection of restaurants with different offers, the CTA should be ** *View X offers* **
Service banners
A service banner is used for service and upsell purposes. It should not be used for Deliveroo-branded services.
Intent
Use to display service or upsell related information such as a delay in service.
Use to display marketing and promotional content that is Roo branded.
Actions
It is best practice to take an action on banner either through an icon (arrow, cross) or a button.
Placement
Same behaviour as the promo banner
