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 is a small colored indicator placed on an icon or UI element, signaling unseen alerts or updates to the user. A notification dot is a small colored indicator placed on an icon or UI element, signaling unseen alerts or updates, prompting user engagement and attention to new information.

last modified: 01/01/1601 01:00:00

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

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: 01/01/1601 01:00:00

Sizes and colors

last modified: 01/01/1601 01:00:00
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
Copied to clipboard
<i class="icon-Overview icon-lh rs-txt-s7 rs-txt-primary rs-has-notif-unread" role="status" title="Unread message"><span class="show-for-sr">Unread message</span></i>

More than 30px icon

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

Unread message
Copied to clipboard
<i class="icon-Overview icon-lh rs-txt-s9 rs-txt-primary rs-has-notif-unread rs-has-notif-large" role="status" title="Unread message"><span class="show-for-sr">Unread message</span></i>

Unread notification with copy

Usage

Copy must be in bold.

Unread message

et scelerisque magna. Aliquam commodo consectetur massa at fermentum lorem

Copied to clipboard
<div class="rs-flex-row rs-flex-collapse">
    <div class="rs-flex-column rs-flex-shrink">
        <span class="rs-notif-unread" role="status" title="Unread message"><span class="show-for-sr">Unread message</span></span>
    </div>
    <div class="rs-flex-column">
        <p><strong>et scelerisque magna. Aliquam commodo consectetur massa at fermentum lorem </strong></p>
    </div>
</div>