Text banner
The text banner pattern is a full-width, short message with a background colour.
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
Text is centre-aligned and the background colour is grey.
Example
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
Text is centre-aligned and the background colour is green (.success).
Info
Text is centre-aligned and the background colour is blue (.info).
Warning
Text is centre-aligned and the background colour is yellow (.warning).
Danger
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).