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.
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 |