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

See deprecated code
expiry date: 16/06/2023

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

last modified: 15/09/2023 15:55: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.
  6. Extra zone(optional)
    Provides complementary informations 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: 14/09/2023 11:00:15
Razor

The entrypoints can be generated with the helper called @rsEntryPoints.rsStd inside element with rs-entrypoint-container class.

Here is the list of all the parameters for this helper:

Name Purpose Default value
bIcon Boolean to show Icon part false
bIconNotif Boolean to show Icon with notification part false
bImg Boolean to show image on icon place false
bTxt Boolean to show text below label false
bExtra Boolean to show extra text part false
bTargetBlank Boolean to have target blank link false
bDisabled Boolean to disabled element false
bBtn Boolean to use button instead of link false
sLink Link path for link version "#"
sIcon Icon class to use "icon-Innovation"
sImg Image path "http://placehold.it/44x44"
sLabel Copy of label "Label"
sTxt Copy of text below label "€5.95/month"
sExtra Copy of description inside extra part "<strong>€19.99</strong><br /><span class=\"rs-txt-details\">/month</span>"

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

All the entrypoints must be wrapped by one single <div class="rs-entrypoint-container"> container. This container add an extra spacing of 10px at the bottom of the container to follow the guidelines.

Default entrypoint

Negative default entrypoint

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

Entrypoint with icon

With notification

Accessibility

Please, check accessibility and usage on Notification dot article.

Entrypoint with image

Entrypoint with details

Entrypoint with extra text

Entrypoint target blank

Accessibility

Please, check accessibility and usage on Link with target="_blank" article.

Entrypoint disabled

Accessibility

A tooltip is provided in order to notify the reason why. It's only visible via keyboard navigation. Please, check accessibility and usage on Tooltips article.

For Screen Reader add:

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

Multiple entrypoints

All the entrypoints must be wrapped by one single <div class="rs-entrypoint-container"> container. This container add an extra spacing of 10px at the bottom of the container to follow the guidelines.

The entrypoints have to be used with flex gridding to align all boxes to same height without any javascript.

Label
Label with a very 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.

Deprecated

EXPIRY DATE: 16/06/2023

The entrypoint below should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class:

  • rs-entrypoint-disabled-info
  • rs-entrypoint-disabled
Split Billing Link not available
EXPIRY DATE: 14/09/2023

The entrypoint below should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class:

  • rs-entrypoint-container-neg must be replace by rs-neg added around the element (section, div, panel...)
Label