Developer mode
Opens components on the React tab by default.
Your bookmarks

CallOutBanner

Encourages users to take an action to add additional services or the like.

Callout banners are useful when you want to highlight special offers that require users to opt in, such as adding the AirHelp service. The banner lets you attract attention with an illustration, present clear context, and offer a clear action.

Component status

Figma
Designing
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Content structure

Illustration: visually supports the banner; title: creates the context for the banner message and works best when short; description: presents the main message and can use List for more complex info; action area: creates an area where actions can be placed and works best with small secondary Button and ButtonLink.

Guidelines

Keep title focused       

Users will be scanning the banner to get a quick idea of what is involved. Make sure the title shows them at a glance what benefit they could gain by taking advantage of the offer.

Lost baggage protection
Save money
Rooms in Warsaw
Protect yourself from the chance of losing your baggage
This option is cheaper than your original selection
Search for rooms near Warsaw

Structure information

Callout banners need to get users’ attention quickly. So don’t include a wall of text describing the pros and cons of your offer. 

Instead, structure the information with something like a list so users can scan it quickly.

Support with an illustration

Illustrations in callout banners can help add an emotional pull to the message. But these illustrations are just for decoration. This means they don’t need to have alternative text embedded in the image.

Instead, focus on making the title and any other text clear on their own so the message of what to do is accessible to everyone.

Make the action clear

Whether you’re using a button-type component or have the whole callout banner as actionable, you want users to know how to take advantage of the offer. 

Follow the guidelines for actionable button text so users know what to expect and how to get it.

Related components

Tile

Callout banners are great for specific structures of information. If you have other structures that are associated with a single action, use a tile.

Card

Callout banners are generally associated with an action. To collect information into structured groups without a single associated action, use a card.