Proximus design systemDevPlease don't forget to read Usage part of each element.
Separators
Separators visually divide content, providing structure and improving readability, guiding users through information with clear visual distinctions. Visually, they look like horizontal or vertical lines.
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
Don't
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
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
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
My content here