Proximus design systemPlease don't forget to read Usage part of each element.
Alignment
Alignment utilities will assist with general alignment problems.
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).
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 |
Nowrap
rs-nowrap
class is used to avoid text from going to a new line. You can find examples in Prices and Tables articles.
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 |