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`