Webmail

Authorable Notification

This component is used to display information banners on a page.
 

Variants

Warning

Helping users to avoid error situations or warn for potential road blockers.

Alert

Showing errors or denied access in a user journey.

Information

Information to help the user understand a context or situation. 

Succes

Providing a positive response to an action.

Warning

Helping users to avoid error situations or warn for potential road blockers.

Alert

Showing errors or denied access in a user journey.

Information

Information to help the user understand a context or situation. 

Succes

Providing a positive response to an action.

Warning

Helping users to avoid error situations or warn for potential road blockers.

Alert

Showing errors or denied access in a user journey.

Information

Information to help the user understand a context or situation. 

Succes

Providing a positive response to an action.

Warning

Helping users to avoid error situations or warn for potential road blockers.

Alert

Showing errors or denied access in a user journey.

Information

Information to help the user understand a context or situation. 

Succes

Providing a positive response to an action.

Warning

Helping users to avoid error situations or warn for potential road blockers.

Alert

Showing errors or denied access in a user journey.

Information

Information to help the user understand a context or situation. 

Succes

Providing a positive response to an action.

Warning

Helping users to avoid error situations or warn for potential road blockers.

Alert

Showing errors or denied access in a user journey.

Information

Information to help the user understand a context or situation. 

Succes

Providing a positive response to an action.

Options

Default

Notification with title and description

Title message with a short title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Notification with a long title and description

Title message with a really long title that goes on and on and on and on and on and on and on and on

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Notification description without a title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Notification title without a description

Title message with a short title

Closeable

Notification with title and description

Title message with a short title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Notification with a long title and description

Title message with a really long title that goes on and on and on and on and on and on and on and on

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Notification description without a title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Notification title without a description

Title message with a short title

Interaction & Behavior

Notifications appear on initial start-up of the page or app. 
 

They consists of:

  • Icon: Use one of the predefined icons.
  • Title: A clear title to describe the situation.
  • Message: A brief description of the issue.
  • Action url (optional): a call-to-action link to resolve the issue (if possible).
  • Close button: A call-to-action to hide the system message once read. 

Notifications are visible the entire session or until the user dismissed them by tapping the cross icon. 

Usage Guidelines

  • Notifications should only appear when important site-wide information needs to be shown or platform related issues show-up that potentially break the user's experience. 
  • Only one notification can appear at a time. 
  • No user interaction is required to display a system message.