Banner (design)

In-page banners appear inline and are displayed in an non-blocking way. They should be used to alert users about important information.

1) Icon: Conveys more meaning to the message.

2) Message: Provide a clear and short description of the alert. Include an appropriate action or suggest next steps to help the user.

3) Dismiss action: An optional dissmiss icon button.

Banners should be used sparingly to communicate cleary the severity of the issue or situation.

Informational banner

Communicates additional information without requiring an action. Informational states are always being displayed in supportive-blue colors.

Succcess banner

Communicates positive feedback to user actions. Success message states are always being displayed in supportive-green colors.

Error banner

Communicates negative feedback to user actions. Always try to explain the problem in a understandable human way and provide potential next steps to resolve the situation. Error message states are always being displayed in supportive-red colors.

The size of a banner is responsive to the browser window. On smaller screen the banner text should wrap onto multiple lines.