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.

Separators

See deprecated code
expiry date: TBD

Separators helps create a visual division within the content.

last modified: 30/09/2021 11:10:06

Overview

Before using a separator, always try to create a visual division in another way and follow those principles:

Separators should be noticeable in a layout, but not jarring.
Separators should only be used if elements cannot be separated using white space.
Use separators sparingly, to create groupings rather than separate items.

The default separators are horizontal and mostly placed in the middle of a layout. They are best for group related content, such price and button on a rates tables:

Content can also be grouped vertically by using separator(s).
This possibility should be sparingly used, really if the content cannot be separated using white space.

Best practices

Never use separators between boxes/panels:

Don't

last modified: 23/11/2022 15:50:28

Basic separator

To use a separator you are able to use a <hr> or the razor helper.

Negative separator

To use a negative separator you are able to use a <hr> with class rs-hr-white or the razor helper.

Vertical separator

Info

Vertical separator have to be use in a gridding (float or flex).

Default vertical separator

To use a default vertical separator you have to add a specific class on your column.
Here is all the classes available to show your separator according breakpoints :

Breakpoint	Class
Small only	`rs-col-separator-SO`
Medium only	`rs-col-separator-MO`
Medium up	`rs-col-separator-M`
Large only	`rs-col-separator-LO`
Large up	`rs-col-separator-L`

My content here

Negative vertical separator

To use a negative vertical separator you have to add a specific class on your column.
Here is all the classes available to show your separator according breakpoints :

Breakpoint	Class
Small only	`rs-col-separator-neg-SO`
Medium only	`rs-col-separator-neg-MO`
Medium up	`rs-col-separator-neg-M`
Large only	`rs-col-separator-neg-LO`
Large up	`rs-col-separator-neg-L`

My content here

Deprecated

EXPIRY DATE : TBD

The element below are not usefull anymore and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

<hr> with class rs-hr-light or @rsHr.rsHrLight()