# Banner

A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.

Tabs: [Guidelines](/components/web/banner/banner.guidelines.md) · [Code](/components/web/banner/banner.code.md) · [Content](/components/web/banner/banner.content.md)

## Front-load key information

Put the most important part of the message or key words at the start of the sentence.

This helps users grasp the point quickly without having to read the whole banner.

**Do:**

Warning:

Update your billing details before your next payment

**Don't:**

Warning:

You may need to update your card details on the relevant billing pages to avoid payment issues

## Keep your message brief

Limit banners to a maximum of 20 words, including the call to action — ideally much fewer.

Prioritise clarity over brevity, but avoid unnecessary detail. Include only mission-critical information.

Link out to secondary or optional details.

**Do:**

New:

Connect your accounting software to export data in a click

**Don't:**

New:

To save time and ensure accounting accuracy, connect your accounting system via direct integration or custom format

## Consider the overall experience

Write in plain, user-focused language. Explain clearly and avoid jargon or technical terms.

Be aware of other banners and messages on the page and try to avoid information overload.

**Do:**

Error:

Card declined — check your balance and try again

**Don't:**

Error:

Payment error: card declined due to insufficient funds. Contact vendor for resolution \[Error log 0×8A3F].

## Make sure the next step is clear

Include a relevant call to action whenever possible. This should be directly connected to the message and help the user move forward confidently.

**Do:**

Information:

**3** employee cards don’t have any limits set. [Manage limits]()

**Don't:**

Information:

Some of your employees don’t have limits on their cards