Notifications (Cookies)

USER INTERFACE ELEMENTS

Notifications (Cookies)

met-life-des-foundations-standards-user-interface-elements-asset-01

Overview

Browser- or app-level notifications span the full width of the viewport and provide the user a variety of alerts — from system issues to process statuses. They can also be used to request the user accept terms such as browser cookies.

This notification pattern is pinned to the viewport base on first load of a site. It is intended to prompt users to accept the cookie tracking for the site. Clicking “ACCEPT” dismisses the alert but users can also dismiss via “X”.

Specifications

Desktop

Cookies Notification for Desktop
  • Box Background Color: #5F259F
  • Icon color: #FFFFFF
  • Text Color: #FFFFFF
  • Text: Noto Sans 16px Regular

Tablet

Cookies Notification for Tablet
  • Box Background Color: #5F259F
  • Icon color: #FFFFFF
  • Text Color: #FFFFFF
  • Text: Noto Sans 16px Regular

Mobile

Cookies Notifications for Mobile
  • Box Background Color: #5F259F
  • Icon color: #FFFFFF
  • Text Color: #FFFFFF
  • Text: Noto Sans 16px Regular

Scenario: Cookie Alert - Placement

Notifications Cookies Scenario Alert Placement