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.

Status

Allowing the user to have an information concerning a status.

last modified: 24/11/2021 10:25:04

Overview

  1. Status OK
  2. Status NOK
  3. Status on going
  4. Status warning
Other status?

Currently we do not allow using other status. If you ever need another status that the ones stated above, please contact us and we'll add it to the Design System.


Show / hide status label

The label is not a mandatory element in the status. If necessary, it can be hidden in one of the breakpoints and shown in others.

  1. Default with the label
  2. Without the label
    If a status is used only with an icon, a tooltip should be added to explain the user what it means.

Anatomy

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

  1. Status icon
  2. Status label (not mandatory)
last modified: 13/12/2021 16:35:04

Sizes and colors

last modified: 08/09/2022 10:20:06

Icon with text

Razor

All @rsStatus objects can receive all following optional parameters by specifying the parameter name with its value (ex: @rsStatus.rsOK(bIsParagraph: true, bIsIconOnly: true) ) or in this exact order if you don't specify parameter names:

Parameter Default value if nothing is set
sStatusText .rsOK : "Status is OK"
.rsNOK : "Status is NOK"
.rsOngoing : "Status is Ongoing"
.rsWarning : "Status is Warning"
bIsIconOnly (boolean) false
bIsParagraph (boolean) false
sXtraClass ""

Status is OK
Status is NOK
Status is Ongoing
Status is Warning

Icon only

If a status is used only with an icon, a tooltip should be added to explain the user what it means.


Negative

You just need to add rs-neg class as parent of any rs-status version to have it with negative colors.

Status is OK
Status is NOK
Status is Ongoing
Status is Warning