Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Notification dot

A notification dot notifies the user that something is new or updated, without showing a count.

last modified: 06/10/2021 14:20:04

Overview

A notification dot notifies the user that something is new or updated without showing a count, such as an "unread report", or activity notification. It may be useful as a less prominent notification, even when the count is known.

A notification dot will appear on an icon or close to the relevant item, often a label.

  1. On an icon
  2. Close to the relevant item

Size matters

The notification dot comes with two sizes for desktop, and one on mobile.

  1. Small notification dot
    For icon from 24px to 30px.
  2. Big notification dot (desktop only)
    For icon bigger than 30px.

Best practices

Bold text

Use bold text to indicate that a notification hasn't been read.

  1. Unread
    Notification dot visible + text label in bold.
  2. Read
    No notification dot + text label in regular.

Icon minimum size

The minimum size of an icon is 2rem in mobile and 2.4rem in desktop.

Do

Don't


Related elements

Patches

If you need a text label, use a patch instead. Patches provide a way to highlight two types of content: informational and promotional messages.

More info about patches

last modified: 05/10/2021 14:35:04

Sizes and colors

last modified: 17/03/2022 12:00:04
Accessibility

Add role="status" or role="alert" depend of your needs on the notification dot:

  • status: A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar.
  • alert: A message with important, and usually time-sensitive, information.

Don't forget the screenreader message ( show-for-sr ) inside the notification dot and on the title .

Unread notification with icon

Mobile and less then 30px icon

Add rs-has-notif-unread and icon-lh to the icon with notification.

Unread message

More than 30px icon

Add rs-has-notif-large to the icon.

Unread message

Unread notification with copy

Usage

Copy must be in bold.

Unread message

posuere cubilia Curae; Suspendisse id massa vel nunc vestibulum posuere