Please don't forget to read Usage part of each element.
Using spacings help to give space and let your product breathe.
Default bottom spacing
All the components have a default bottom spacing, it's the space between the component itself and the next one.
By default, all components of the Proximus Design System have a bottom spacing of 2rem, i.e. 20px in all breakpoints (except special cases).
Spacings on section
A combination of class is defined to have enough spacings whithin sections of yours pages.
It's the first element of a section, corresponding to
It's the last element of a section, corresponding to
Increase spacings inside the content
You can space your content by using the content spacers. Use them to visually group related set of content together by adding spacing between those groups.
There are 3 possible content spacers:
Spacings on section
Paddings & margins
It is possible to add different paddings and margins to your elements by adding for example
class. The number (from 1 to 4) corresponds to the number of rem knowing in our library, 1 rem is equal to 10 pixels.
A mini padding of 0.2rem (2px) is also available with
Paddings & margins per side
You can also add paddings and margins per side (top, right, bottom, left) with same logic of numbers. Ex:
Remove paddings & margins
You can remove all paddings with
and all margins with
Or you can remove them per side (top, right, bottom, left) or opposite sides (top & bottom, left & right) with following classes :
rs-no-padding-v("v" for vertical: top & bottom),
rs-no-padding-h("h" for horizontal: left & right)
rs-no-margin-v(top & bottom),
rs-no-margin-h(left & right),
You can also add or remove paddings and margins per breakpoint just by adding at the end of all above classes "
" for medium up and "
" for large up.
You can add negative margins just by adding "
" at the end of the margin classes for example :
knowing the number can be from 1 to 4 (1rem to 4rem).
Spacings on sections
You will need to space your content to align with the (validated) design. To do this, use the divs with their specific classes specially designed for this purpose.
Be careful that these elements must be placed in the right place:
- rs-fe: first element of a section
- rs-me: middle elements in a section
- rs-le: last element of a section
Their height sizes can be increased with a 2 or 3 added at the end. Ex: rs-fe2, rs-me3, rs-le2,...
as first element and
as last element of a section.