Notification Bars (Announcements and Cookies)

Notification Bars communicate information to the user and provide time-sensitive or immediate feedback.

Variants

Announcements
Cookies
Variant Usage

Announcements

Announcements are used to alert the users and promote important messages.

Cookies

Cookie notifications are used to notify users about the usage of cookies on the page.

Anatomy

Announcement Notification Bars

Announcement Notification Bars are made up of the following:

 

  1. Icon: Symbolises the popup is an announcement. 
  2. Title: Overview of notification content. 
  3. Content: Description of notification. 
  4. Call-to-action: Redirects user to full relevant content. 
  5. Close Button: Dismisses the notification. 
  6. Toggle: Indicates navigation to previous/next page. 
  7. Pagination: Highlights current page and total number of pages

 

Cookie Notification Bars

Announcement Notification Bars are made up of the following:

  1. Icon: Symbolises the popup is an announcement.
  2. Content: Description of notification.
  3. Call-to-action: Redirects user to full relevant content.
  4. Close Button: Dismisses the notification.

 

Size

1, Desktop: Has a width fixed at 427px, a curved edge of 16px and a padding of 24px.
2. Mobile: All types of Notification Bars stretches beyond the grid, spans from edge to edge.

Desktop
Mobile

Text Style

Desktop

 

  1. Title is at 20px. Use “Card-Medium Header/H3_semibold” text style on Figma.
  2. Content is at 16px in Medium, Bold.

 

Mobile

 

  1. Title is at 16px. Use “Card-Small Header/H4_semibold” text style on Figma.
  2. Content is at 14px in Medium. Use “Body/Main” text style on Figma.

 

 

 

Dos and Don'ts