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.

Display

Display utilities give you the ability to change position and display characteristics of an element.

last modified: 05/04/2022 10:15:10

Block

2 options are available for the block element: inline-block and block. The difference between both is that the inline-block does not add a line-break after the element, so the element can sit next to other elements. Like all our blocks elements, rs-block has a bottom padding of 2rem..
By default some elements are already block displayed. There is some documentation about block elementsNew window

rs-block : display block;
rs-inline-block : display inline-block.

Table

Tables display classes allow to change the behaviour of elements into table elements.

rs-tbl : display table, like <table> tag;
rs-tbl-row : display: table-row, like <tr> tag;
rs-tbl-cell : display: table-cell, like <td> tag.

Overflow

2 overflow types are available: visible and hidden. Hidden will disable the possibility to see an element outside its parent. Visible is the default value of overflow for html elements.

rs-overflow-hidden = overflow: hidden;
rs-overflow-visible = overflow: visible.