Notification Bars (Notifications)

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

Variants

Notifications
Variant Usage

Notifications

Notifications are used to provide warnings.

Anatomy

Notification Bars

 

Notifications are made up of the following:

 

  1. Icon: Symbolises the type of notifications. 
  2. Title: Overview of notification content. 
  3. Content: Description of notification.

 

Size

 

  1. Desktop: Spans across 8 columns on the Desktop Grid system, has a radius of 16px and a padding of 24px.
  2. Mobile: Stretches beyond the grid, spans from edge to edge.

 

Desktop
Mobile

Text Style

Desktop

 

  1. Title is at 20px. Use “Card-Small Header/H4_semibold” text style on Figma.
  2. Content is at 16px. Use “Body/main” text style on Figma.

 

Mobile

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

 

 

Dos and Don'ts