Notification Bars (Promotions)
Notification Bars communicate information to the user and provide time-sensitive or immediate feedback.
Variants
Promotions
/Notifications%20Promo%20Variants.png)
| Variant | Usage |
|---|---|
|
Health (Purple) |
For promotional offers related to the Health pillar. |
|
Savings (Green) |
For promotional offers related to the Savings pillar. |
|
General Insurance (Orange) |
For promotional offers related to the General Insurance pillar. |
|
Investment (Blue) |
For promotional offers related to the Investment pillar. |
|
MINDEF & MHA (Brown) |
For promotional offers related to the MINDEF & MHA Pillar. |
Anatomy
Promotion Notification Bars are made up of the following:
- Icon: Symbolises the popup is a promotion.
- Content: Description of notification.
- Close Button: Dismisses the notification.
/Notifications%20Promo%20Anatomy.png)
Size
Desktop: Stretches grid to grid (12 Columns) in the desktop grid system.
Mobile: Stretches beyond the grid in the mobile grid system, spans from edge to edge.
Desktop
/Notifications%20Promo%20Size%20Desktop.png)
Mobile
/Notifications%20Promo%20Size%20Mobile.png)
Text Style
For both desktop and mobile, promotion notification bars uses a font size of 14px, in semibold.
/Notifications%20Promo%20Text.png)