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.

Heights

Heights classes allow fixing height to an element.

last modified: 15/09/2023 15:55:10

Height

Unit used is rem, see Units & breakpoints documentation to learn more.

You could set height of an element with rs-h-Device+Size .
Device is s, m, l depending on needed breakpoint (small-up, medium-up, large-up).
Size is an number between 1 and 50 included, in rem. That means from 10px to 500px height maximum.

Could be used as spacing

It could be used to put custom spacing between element.
Discover another way on Spacing documentation.

rs-h-s8 rs-h-m7 rs-h-l6

Min height

You could set min-height of elements with rs-mh-Device+Size .

rs-mh-s8 rs-mh-m7 rs-mh-l6

Max height

You could set max-height of an element with rs-maxh-Device+Size .

rs-maxh-s5 rs-maxh-m4 rs-maxh-l3