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.

Links

Default links allow users to navigate from page to page in the website and give access to informative, non-mandatory content.

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

Types

  1. Default link
    Default links are mostly used within paragraphs or chunks of text.
  2. Action link
    Action link allows the user to do a concrete action in the interface such as a composition of products, a profile settings, etc.

A list of action icons is defined to ensure consistency on all Proximus' interfaces:

  1. Edit
  2. Add
  3. Remove
  4. Close
  5. Send by email
  6. Reset
  7. Need help
Other actions?

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

Show / hide action label

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

  1. Desktop
  2. Mobile
    On mobile, the label is hidden by default but can be displayed if required.

States

  1. Basic state
    State visible before click. Label is underlined and its colour differs from default text.
  2. Hover state
    State visible when the cursor hovers the link. Underline label is displayed in another colour. Cursor becomes a pointer.
  3. Focussed state
    State visible when users tab on the link. All elements are displayed with a frame around the label.
  1. Disabled state
    State visible if the link is not clickable. All elements are displayed but they are greyed out in order to signify the change of state. This state is only available for the action links.

Anatomy

  1. Default link label
  2. Action label (optional)
  3. Action icon (mandatory)

Label

  • Links should be three words or less.
  • Avoid using generic terms like "click here". Use meaningful labels that match the destination
  • When having a several words long, try to maintain a good balance between having a link long enough to be understood and short enough to avoid text wrapping.
Explicit label

The label alone has explicit to be sufficient to understand the link purpose and target. Make sure link contains an explicit label and a link to make people understand what's the content of the link and where they go if they click on it.


Open in new window

Target_blank

To be accessible, we have to 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.

The target blank option can only be used on a default link. As an action link has a concrete action on the page itself, its target can't be set on blank.

Link with target="_blank" image/icon

When an image opens a link in target="_blank", a tooltip is added to the link.


Download a file (pdf, doc, xls...)

For each downloading file, specify the name, type and size

When the content includes links for downloading files, the following information should be included in the link text:

  • Document title/name
  • Document type/format
    • FR/EN/DE: PDF, DOC, XLS,...
    • NL: pdf, doc, xls,...
  • Size of document
  • Document language
    The language is optional and is only indicated if the language of the uploaded file is different from the page language.
    • FR: en anglais, en néerlandais, en allemand
    • NL: in het Engels, in het Frans, in het Duits
    • EN: in French, in Dutch, in German
    • DE: auf Englisch, auf Französisch, auf Niederländisch

Information are separated by commas and always indicated in this order: format, weight, language (optional).

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

Sizes and colors

last modified: 09/08/2022 14:45:07
Accessibility

Make sure <a></a> contains an explicit text and an href to make people understand what's the content of the link and where they go if they click on it.

Don't add any title to the link unless you don't have any other choice. In most of the cases,the content of the <a> is enough.

Default link

Default negative link

rs-link-neg must be added to the <a> to display the text in negative.
Or rs-neg class could be added around.


Disabled link

Accessibility

For Screen Reader add:

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

Disabled negative link


Link with target="_blank"

Accessibility
  • An icon is added to the link to inform that a new window will be opened.
  • title="New window" attribute is added to icon <i> to display browser tooltip indicating link opens a new window.
  • <span class="show-for-sr">New window</span> is added inside the icon <i> for screen readers to read this text indicating link opens a new window.
  • The copy has to be translate by language:
    EN: New window
    FR: Nouvelle fenêtre
    NL: Nieuw venster
    DE: Neues Fenster

Negative link with target="_blank"

Disabled link with target="_blank"

Link with target="_blank" image/icon

Accessibility
  • A tooltip is added to the link with data-tooltip attribute on the <a> .
  • title attribute is added to the <a> with information about the image + (New window).
    EN: New window
    FR: Nouvelle fenêtre
    NL: Nieuw venster
    DE: Neues Fenster
  • aria-label attribute is added to the <a> with the name of the link.
  • aria-hidden="true" attribute is added to the <img> .

Link to download a file (pdf, doc, xls...)

Accessibility

The <a> should contain the title, format, weight and language (only if different from the page's) of the document.
Format, weight and (optionnal) language are added in parentheses after the file name within <span class="rs-link-download-info"> .

The <target_blank> is mandatory in the case of a file download but does’nt need to be indicated by a "new window" text or an icon (in this case only!)


Useful classes

rs-link-no-decoration removes the underline of the link.

rs-link-decoration add underline to the link.

rs-link-hover-decoration add underline to the link on hover and focus.

rs-link gives the link style without being a <a> .

rs-no-pointer-events prevents all click, state and cursor actions on the element (pointer-events: none;)

rs-clickable adds the "hand" representing a link on mouse hover on any element (cursor: pointer;).

jsrs-clickable adds cursor: pointer + javascript making all the element clickable pointing to the first link found within the element.