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.

Actions

List of different actions for the user.

last modified: 25/11/2022 15:10:04

Types

  1. Action links
    Action link allows the user to do a concrete action in the interface such as a composition of products, a profile settings, etc.
  2. Action menu
    Action menu is used when additional options are available to the user and there is a space constraint. The action menu keeps key actions close by in a clean and unobtrusive menu.
  3. Floating action button (not available in negative mode)
    Floating action button allows the user to go back to the top of the page.

Action links

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
  8. Back / Previous
  9. Next
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.

Action menu

Size matters

Action menu button comes out of the box in two sizes. Depending on your needs, you can use the small or the big version.

  1. Small action menu
  2. Big action menu

Positioning

Action menu can be aligned on the right or on the left. Choose the version that fits your design.

This is not a dropdown

Action cannot be used as dropdown, selection pattern or any other form element. If you are looking for a selection pattern, use either the dropdown or the select component.


Floating action button

Back to top

The floating action button appears when the user scrolls down on a page. It disappears if the user goes back to the top. This button only serves one purpose which is to go back to the top of the page.

It can't be used for any other action.


States

  1. Default state
    State visible before click.
  2. Hover/Focused state
    State visible when the cursor hovers the action link/button and triggered by keyboard navigation or click.. Cursor becomes a pointer.
  3. Disabled state (only for action links)
    State visible if the action link is not clickable. All elements (container & label) are displayed but they are greyed out in order to signify the change of state.
  4. Active state (only for action menu)
    State visible when the action menu button is clicked, the action menu container is revealed with its content. Action menu button is in active state.

Anatomy

  1. Action label (optional)
  2. Action icon (mandatory)
  3. Action menu button
    Triggers the action menu.
  4. Action menu container
    It contains list of menu items.
  5. Menu item label
    Use concise labels so users can quickly decide on an action.
  6. Menu item label icon (optional)
    You can use an icon to illustrate the action.
  7. Separator (optional)
    When action can be grouped, use the separator to facilitate scanning
  8. Menu item label details
    Use this dedicated zone to give additional information about the action such as: keyboard shortcut, file size, etc.
last modified: 09/08/2022 14:45:07

Sizes and colors

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

Action Links

An action link always comes with an icon on its right and have a specific purpose, the icon illustrate the action. The icon is mandatory but the label is optional.

On mobile, the label is hidden by default with show-for-medium-up Zurb Foundation class.

Action links are used by default with <button> but can be used with <a> as well.

Accessibility

As the icon is mandatory but not the label, the label is hidden for screenreaders and title="Label" attribute is added to icon to display browser tooltip describing the purpose of the action link as well as a <span class="show-for-sr">Label</span> for screenreaders.

Razor

All @rsActionLink objects can receive all following optionnal parameters in this exact order:

Parameter Default value if nothing is set
"Label" "Edit" - "Add" - "Remove" - "Close" - "Send by e-mail" - "Reset"
"extra class" ""
boolean label is hidden on mobile true
boolean no label false
boolean is link false
"url" "javascript:void(0)"
"extra parameters" "data-reveal-id=ac-reveal-modal" - "id=ac-mano-is-the-best", ...
boolean is disabled false
boolean is icon left false









With <a> instead of <button>

Negative










Disabled

Accessibility

For Screen Reader add:

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

Edit

Label not hidden on mobile


Without label


Icon on left


Action menu

Accessibility

Action menu trigger button requires some attributes:

  • It must have an ID which is usefull for action menu content.
  • data-dropdown and aria-controls must contain ID of the action menu content.
  • aria-haspopup must be set to true .
  • aria-expanded must be set to false .

Action menu content also requires some attributes:

  • It must have an ID which is usefull for action menu trigger button.
  • aria-labelledby must contain ID of the action menu trigger button.
  • aria-hidden must be set to false .

Separators must have aria-hidden attribute set to false .

How does it work

Action menu is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.actionmenu" attribute to work.

Drag and Drop

"Drag and Drop" component can be used in"Action menu".
Don't forget to add a title with rs-action-menu-title class like in the example below.

This type of Drag and Drop is not necessary for screen readers. So please add aria-hidden attribute set to false to parent rs-action-menu-item .

Negative

Add rs-action-menu-neg class to rs-action-menu container.

Use negative version of the"Drag and Drop" component if you need it.

Disabled

Accessibility

Add disabled attributes to button .


Big action menu

Just add rs-action-menu-trigger-big class to action menu trigger button for a bigger button.

Negative

Add rs-action-menu-neg class to rs-action-menu container.

Use negative version of the"Drag and Drop" component if you need it.


Position the Action menu

You can position action menu on the bottom right or bottom left of the target element. Default position is bottom right.
Add rs-action-menu-left class to rs-action-menu container to get your action menu positioned on bottom left.


Back to top

Accessibility

Add tabindex="-1" attribute to hide the button from keyword users.

How does it work

Back to top is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.backtotop" attribute to work.

Back to top button is part of floating action so you need to use rs-floatingaction to make it work. To have this specific button just add rsjs-backtotop class.

Inside the anchor you will have 2 span : one for the label with rs-floatingaction-label class and one for the icon with rs-floatingaction-icon class.

hide class need to be added, to avoid jump while JavaScript is loading.

Anchor

It is mandatory to have #maincontent as href attribute. Nothing else can be accepted.


JavaScript

Action menu

How to trigger the js

As Action menu is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

Next time you add Action menu to the page, you have to call this JS: inception.actionMenu(CONTEXT);

CONTEXT refers to document or html element parent to data-action-menu.

If you have a Drag & Drop inside your Action menu, don't forget to launch Drag and drop JavaScript.

Back to top

How to trigger the js

As Back to top is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT) first to be able to load the scripts.

If you need to refresh the component, you can use BackToTop.refresh() function.

CONTEXT refers to document or html element parent to the component.