Banner

A banner is an element used to highlight brief or temporary messages, alerts, or updates to users within a user interface.

When to use

When the information is general, persistent and in context to the page or interface the user is at.

If you need to notify users about information personal to the users actions (use notification/toast instead)

Best practice

Always use an icon and color combination relevant to the urgency of the message itself

Only use banners where other components/elements fall short in explaining or highlighting the importance

Variants

There are 4 variants of the banner, each pertaining to the context or urgency of the message: Informative (Neutral), Warning, Error (Critical) and Positive.


Informative (Neutral)	Warning	Error (Critical)	Positive
To be used for informative, neutral and non-criticial messaging	To be used for informative and potentially more important messaging	To be used for alerting and critically important error messaging	To be used for highlighting successful and positive messaging

Placement

The banner is persistent and aligns to the grid on a page or within a pattern together with other components.

A banner on a page

A banner inside a pattern

Content

Label copy should:

Ideally be no more than 1 sentence.

Be descriptive and contextual, using human language.

Accessibility

WIP