Banners
Intro

Banner examples: mobile (left) and tablet (right)
Banners show a short and concise message that displays at the top of the screen. It allows the user to take action or ignore it at any time. Apps may choose to use it for communicating internet connectivity, errors, synchronization statuses, or in-app notifications.
Usage
- Banners must remain on screen until dismissed by the user.
- Only show one banner at a time.
- Only use a text button for actions.
- Optionally, you can add icons or images.
Anatomy
A. Icon or image (optional)
B. Text (one to three lines for mobile, one to two lines for tablet)
C. Buttons (text button only, the maximum is two actions)

Banner anatomy
Behavior and Interaction
Banners typically appear when a screen loads content and it will remain on screen until dismissed by the user.

Banner appearing

Banner behavior while scrolling (without taking action)

Dismissing banners
Variations
One-line text with one action or two actions
A. One-line text with one action
B. Icon or image and one-line text with two actions
C. One-line text with two actions
Specifications
One-line text with one action

One-line text with one action: mobile (top) and tablet (bottom)

Specification for one-line text with one action: mobile (top) and tablet (bottom)
Two-line text with two actions

Two-line text with two actions: mobile (top) and tablet (bottom)

Specification for two-line text with two actions: mobile (top) and tablet (bottom)
One-line text with one action and icon/image

One-line text with two actions and icon/image: mobile (top) and tablet (bottom)

Specification for one-line text with two actions and icon/image: mobile (top) and tablet (bottom)
Two-line text with two actions and icon/image

Two-line text with two actions and icon/image: mobile (top) and tablet (bottom)

Specification for two-line text with two actions and icon/image: mobile (top) and tablet (bottom)
Resources
Development: Banner Messages
SAP Fiori for iOS: Banners