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.


Positioning utilities give you the ability to change the position property of an element.

last modified: 05/05/2023 15:50:04

Position relative

rs-pos-rel add position relative to element with z-index="10" .

rs-pos-rel-so is for small-only.

Position absolute

Parent container must be relative (like the columns of gridding by default). If it's not yet the case, you could use rs-pos-rel class.
Then you can use any rs-pos-... on the element you wish to apply an absolute position.

Force static position

To force static positioning for small only: rs-pos-stat-so
To force static positioning for medium only: rs-pos-stat-mo


Position fixed

To position on top of screen: rs-pos-fixed rs-pos-t
To position on bottom of screen: rs-pos-fixed rs-pos-b

Position fixed on scroll

Add id="jsrs-stickyContainer" on the container where sticky sticks...

Add data-sticky-container="#jsrs-stickyContainer" to content that needs to stick on scroll. Pay attention to use the same value as for the ID.

Use data-sticky-container-breakpoint="medium" if you need sticky things only on medium-up.

I'm sticky !

Transform Y-50%

Add rs-transform-translateY-50 to make an element go up 50% of itself.

See also overlap utilities page.

I go up 50% of myself