Components

Notification

sketch:Readyscss:Ready
vue
:Ready
freemarker
:Ready

Notifications are used to bring the user's attention on a piece of information that needs to be known. A notification is usually the result of an action made by the user.

The notification pattern is made of:

  • An icon: In addition to the frame color, it allows to specify the degree of importance.
  • A title (optional): Concise and precise, to quickly guide the user.
  • A paragraph: To complete the title to be more precise, or indicate the actions to follow.
  • A Link (optional):** A link can be used when the message indicates the user actions to be done on a different page.
Be aware

For SEO & accessibility reasons, a paragraph is always required inside a notification.

Four types of notifications

To learn more about the colors usage, please read the color documentation.

Information

Informational notifications are blue. They are used to highlight a piece of relevant information but don't require immediate action.

Success

Success notifications are green. They are used when an action is successful.

Warning

Warning notifications are orange. They warn the user about important information that deserves caution.

Danger

Danger notifications are red. They are used to warn the user of an error or a problem. This may require immediate action.

Variations

Sizes

Notifications are available in two sizes.

Small

This size is less common and must be used inside a box only. The message or required action must be related to the content of the box.

notification-small-zoning

Medium (default)

This is the default variation to use in most cases and is mainly positioned at the top of a page.

Closable notifications

You can use a closable notification in your projet to go further.

Be aware

Closable notification can be used with the medium size variation only.

Do's and Dont's

Always use the type of notification that matches the displayed message.