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.

Entrypoints

A handy list of links to quickly guide user in your interface.

last modified: 19/08/2022 10:20:10

Overview

Entrypoints allow the user to navigate through different screens in the interface, such as a dashboard.

Entrypoints aren't single call to action

An entrypoint is not a simple call to action, so it cannot be used on its own. Entrypoints are a list of links typically used in a dashboard to guide the user through different screens.
If you need a unique link, please choose a button or a link.

States

  1. Default state
    State visible before click.
  2. Hover/Focused state
    State visible when the cursor hovers the anchor and triggered by keyboard navigation or click.
  3. Disabled state
    State visible when no interraction is possible with the box. A tooltip can be added to inform the reason of deactivation.

Anatomy

  1. Label
    Label should be consistent with the title of the intended destination.
  2. Icon (optional)
    There is no icon by default. When words are not enough, you can use icons to better communicate what the entrypoint does. The icon used must be directly related to the action that the users are taking, and displayed at the left of the label.
  3. Container
    A container is displayed around the text label with a solid color.
  4. Small detail (optional)
    Provides complementary informations about the label. It can be an explanatory phrase, a price,…
  5. Action icon
    The arrow icon is considered as action icon and mandatorily displayed at the right of the container.

With notification dot

A notification dot can be added on the icon in the entrpoint to notify the user that something is new or updated. This option is only available for the positive entrypoint.

More info about notification dot

Composition options

We can have from 1 to 4 entrypoints per row in desktop and from 1 to 2 per row in mobile.
The height of the boxes is based on the highest box of the row.

Gridding usage

The composition options are based on our default grid. Please refer to the gridding article for more information.

Open in new window

Target_blank

For accessibility reason, give users advanced warning when opening a new window. To provide a warning before automatically opening a new window or tab, we display a target blank icon.

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 06/09/2022 13:55:05

Depending on the case, a button can be use with a simple link <a> or a <button> .

Each entrypoint must be wrapped with <div class="rs-entrypoint-container"> container. This container add a extra spacing of 10px at the bottom of the container to follow the guidelines.

Default entrypoint

Negative default entrypoint

rs-entrypoint-container-neg class added on <div class="rs-entrypoint-container"> allows to switch all entrypoints to negative version.

Entrypoint with icon

Entrypoint with icon notification

Unread message notification dot

Please, check accessibility and usage on Notification dot article.

Entrypoint with small details content

Entrypoint target blank

Entrypoint with small details and icon

Entrypoint disabled

rs-entrypoint-disabled class in addition with rs-entrypoint allows to switch entrypoint to disabled. A tooltip is provided in order to notify the reason for it

Accessibility

For Screen Reader add:

  • aria-disabled="true" to <a>
  • disabled to <button>

Multiple entrypoints

All the entrypoints must be wrapped one single <div class="rs-entrypoint-container"> container. The entrypoints have to be used with flex gridding to align all boxes to same height without any javascript.

Label
Label with a very veryy long text
Label with a very veryy long text €5.95/month

Entrypoint as a button

Replace the <a> with <button> to have the button functionnality.