Text banner

The text banner pattern is a full-width, short message with a background colour. This appears at the top of a web page to provide important information that may apply to the current page or even the entire website.

Rules for the text banner

• Must only be used at the very top of a page.
• May be used to indicate the status of a page (e.g. alpha or beta version) to alert the user that this is an example page, etc.

Options available

• Default
• Primary
• Secondary
• Success
• Info
• Warning
• Danger
• Primary left
• Primary right

Default

Text is centre-aligned and the background colour is grey.

Primary

Text is centre-aligned and the background colour is the primary palette colour (.primary).

Secondary

Text is centre-aligned and the background colour is the secondary palette colour (.secondary).

Success

To signal a positive action such as a successful login. In this example text is centre-aligned and the background colour is green (.success).

Info

To signal a neutral piece of information. In this example text is centre-aligned and the background colour is blue (.info).

Warning

To signal caution about information or available actions on the page. In this example text is centre-aligned and the background colour is yellow (.warning).

Danger

To signal a problem with an action take, such as a failed login attempt. In this example text is centre-aligned and the background colour is red (.danger).

Primary left

Text is left-aligned (.left) and the background colour is the primary palette colour (.primary).

Primary right

Text is right-aligned (.right) and the background colour is the primary palette colour (.primary).