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.

Navigation arrows

Allow to navigate easily trough content. Whether it's through pages, slides or carousels.

last modified: 15/09/2023 15:40:11

Overview

It comes handy when you need to split content and offer a easy way to navigate through content. Use navigation arrows in your carousels or as pagination.

You can choose the type of navigation arrows according to the visual importance you wish to give them.

  1. Primary navigation arrows
    Use this one as the main call to action on of the components.
  2. Secondary
    For secondary actions.

States

  1. Default state
    State visible before click.
  2. Hover/focused states
    State visible when the cursor hovers the navigation arrow and triggered by keyboard navigation or click. Cursor becomes a pointer.
  3. Disabled state
    State visible if the navigation arrow is not clickable.

Placement

Navigation arrows can be used together or separated.

Together
Separated

Best practise

Safe area

Always keep a safe area around each navigation arrow to avoid the overlapping with content.

Do

Don't

Distance

Navigation arrows placed together must be spaced far enough apart for the user to distinguish them .

Do

Don't

last modified: 15/09/2023 15:40:11

Sizes and colors

last modified: 15/09/2023 15:40:11

Navigation arrows don't have alignment or positioning styles as they depend on each case. You must add them according to your need.

Accessibility

Label of each arrow is available for screen readers and must be translated in the aria-label of the <i> tag.

Razor

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

Parameter Default value if nothing is set
Is previous arrow disabled? false
Is next arrow disabled? false
"Extra class for navigation arrows container" ""
"Extra class for previous arrow" ""
"Extra class for next arrow" ""
"Lang" ("en" or "fr" or "nl") "en"

Default navigation arrows

Primary

Add rs-navigation-purple class to navigation container.

@rsNavigationArrows.rsPurple()

Secondary

@rsNavigationArrows.rsStd()

Negative navigation arrows

Primary

Add rs-navigation-white class to navigation container.

@rsNavigationArrows.rsWhite()

Secondary

Add rs-navigation-neg class to navigation container.

@rsNavigationArrows.rsNeg()

Disabled arrow

Follow these rules if an arrow has to be disabled:

  • Add rs-disabled class on disabled arrow container.
  • Replace anchor link of the disabled arrow by javascript:void(0) and add tabindex='-1' attribute.
@rsNavigationArrows.rsStd(true)