Banner
A full-width announcement in a solid tone.
Examples
Banner
Danger
Anatomy
.banner | A full-width row, centred, in the solid tone with its contrast colour for text. Links inside inherit that colour. Hidden in print. |
API
| Attribute | Values | Description |
|---|---|---|
data-tone | accentsuccesswarningdangerinfo | Background colour; the text takes the tone's contrast colour. Default accent. |
Accessibility
- A banner has no role. If it appears after the page loads and must be heard, give it
role="status"(orrole="alert"for a failure). - Links keep their underline, so they stay distinct when they take the banner's text colour.
- Say the problem in words: the danger tone alone does not.