Banner

Banners are prominent messages that appear at the top of a page. They show users important information and any actions they can take

How it works

Banners prominently communicate something to users. Banners are persistent, so they won’t disappear unless the user dismisses them or takes action. They can be used to communicate things like:

An update on an action a user has taken
Information on important changes
Warning messages
Persistent conditions
Extra content for users, for example, tips

Usage

Banners show users vital information and any actions they might need to take. They stay there until a user takes action or dismisses them.

Android: banner with action button

Android: banner without action button

Android banners differ can also differ in size, and contain either a specific call to action, or an option to dismiss as minimum.

iOS: large banner

iOS: small banner

iOS has both large and small banner size: large for sharing important information and small for more urgent calls to action.

Best practice

Don't: show more than one banner at a time

Banners interrupt the user. Make sure they are used sparingly for important information. Don’t use banners for marketing information or other non-essential communication.

Show only one banner at a time.

Make sure that the design of the interruption matches the urgency of the information they contain. For example, don’t have any warning colours in a general information banner.

Calls to action in banners should be low-emphasis text buttons, containing one optional action (e.g. ‘Learn more’, ‘Print document’). See our button documentation for more guidance on button best practice.

Place banners in context. If they refer to an entire page, they should appear at the top of that page. If they refer to a section or specific element, they should be immediately above that element.

Content

Banners should only tell the user a single piece of information and any specific required actions.

Be concise - keep content to 1 to 2 sentences.

Write in sentence case and use punctuation sparingly.