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.
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.
Warning:
Update your billing details before your next payment
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.
New:
Connect your accounting software to export data in a click
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.
Error:
Card declined — check your balance and try again
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.
Information:
3 employee cards don’t have any limits set. Manage limits
Information:
Some of your employees don’t have limits on their cards
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page