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.

Alignment

Alignment utilities will assist with general alignment problems.

last modified: 10/10/2023 10:15:04

Alignment

By default, texts are left aligned, but you can align them in other ways.

Vertical align

In order to have vertical alignment, you need at least 2 elements to align the text the way you want. Vertical alignment classes are composed with rs-valign-* . * is the position (top, bottom, middle, baseline).

rs-valign-top
rs-valign-middle
rs-valign-bottom
rs-valign-baseline

Horizontal align

Horizontal alignment classes come from Zurb Foundation and are composed with text-* . * is the position. The class can be put on the parent or on the element itself.

Breakpoint Align Left Align Right Align center Justify
Small only small-only-text-left small-only-text-right small-only-text-center small-only-text-justify
Small up text-left text-right text-center text-justify
Medium only medium-only-text-left medium-only-text-right medium-only-text-center medium-only-text-justify
Medium up medium-text-left medium-text-right medium-text-center medium-text-justify
Large only large-only-text-left large-only-text-right large-only-text-center large-only-text-justify
Large up large-text-left large-text-right large-text-center large-text-justify

Clear

rs-clear class allows to clear element position.


Float

You can change the float behaviour of an element by adding left or right to an HTML element. To clear floats, add the class clearfix to the parent element.

Float Right

Float Left

Breakpoint Float Left Float Right
Small only rs-left-small-only rs-right-small-only
Medium up rs-left-medium rs-right-medium
Large up rs-left-large rs-right-large