Banners inform the user about the status of a page or section. On a page level, we use the full-widht version. For sections, the island version can be used. If we need to display an inline message, the corresponding message size is available.


There a three sizes that work well with the other components of the UI Library.


A banner should always be dismissable. Aditionally, a ‘remind me later’ CTA can be served.


Text & icon color follows the background by using the darkest tint in that range. For Icons, the 0.84 opacity rule is applied.

Hyperlinks are defined by the text. For colored text, we use underline and for default text, aqua.


Banners should only have short and primary information. Too much content will clutter the page and overwhelm the user. By default, we aim for a one-liner. If needed, the banner be expanded with an title and body component.