Notification

Notifications are used to present timely information to the user. Windmolen offers four types of notifications for different context.

Notifications appear at the top of a website and deliver important messages within the current screen context. They are temporary messages used to alert users to something requiring their attention.

Notifications come in two sizes, desktop and mobile, and support four variants: positive, informative, warning, and error.

Anatomy

The anatomy of notification differs depending on the use case. The most complex variant is dissected in the image below.

  1. Background colour. In this instance the token color-accentblue-100.
  2. Highlight colour. In this instance color-brand-400.
  3. Heading with icon. In this instance the Information icon with the placeholder "Informational heading".
  4. Body text (optional). In this instance the placeholder "Body text".
  5. USPs (optional). In this instance the placeholder "USP 1".
  6. Action button (optional). In this instance Button - Static / Primary.
  7. Close button. In this instance the Cross icon.