Proximus design systemPlease don't forget to read Usage part of each element.
Overlap
Allows you to create an overlap from one section to a second one or the opposite. This direction of your overlap will change who's overlaped by the other element.
If 2 sections need an overlap, each section needs first to have the standard inside spacing (Read Spacings on sections documentation), meaning that each section should have a <div class="rs-fe3"> as first element and a <div class="rs-le2"> as last element.
Overlapping section
The first section that will be overlapped by the second should have rs-overlapped
class to add the according spacings to your section.
The second section (overlapping the first one) will have rs-overlapping
class that will set the correct negative margin to make it go over the first section.
You could use rs-pos-rel
class as a hack to force it. This class has z-index set to 10.
This section is overlapped by the next section
This section overlaps the previous section.
vel nunc vestibulum posuere et at dolor. Vestibulum ante ipsum
Reverse overlapping element
Add <div class="rs-reverse-overlapping"> around the element which will have an overlapping behaviour, it is important to create a specific div for this to avoid any margin or padding conflict.
On the section following the one with your overlapping element add this class <div class="rs-reverse-overlapped"> .
This section is totally normal.
This element will be the rs-reverse-overlapping.
This means that he will overlap the next section with 60 pixels.
vel nunc vestibulum posuere et at dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan vulputate arcu et auctor nulla vestibulum id. Sed urna dolor euismod non aliquam sit amet sodales sed ante. Aliquam et nibh at felis tempus tempus. Nam ac risus
And here will come the rest of your content in another section.
vel nunc vestibulum posuere et at dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin accumsan vulputate arcu et auctor nulla vestibulum id. Sed urna dolor euismod non aliquam sit amet sodales sed ante. Aliquam et nibh at felis tempus tempus. Nam ac risus id velit hendrerit venenatis. Nullam ut erat nisi at porta ligula. Vestibulum a urna vitae risus ultrices iaculis varius ut erat. Donec et sapien mi. Maecenas sit amet lorem orci.Quisque nisl dolor aliquam non ultricies vel ornare eget odio. Quisque vulputate rutrum neque. Nunc ac metus a nisi ornare dapibus
Element with overlapping child
Your first have to add <div class="rs-has-overlap"> around the element which will have an overlapping child to set the overflow to visible and the position to relative.
Then add rs-is-overlapping
class to your overlapping child element to set its position to absolute and to the top right corner with the default spacing.
You can easily adapt the spacing of your child element with the spacing classes.
If your content is flex, add rs-maxh
on rs-has-overlap
.
I'm overlapped by one of my children
Force direction
You can force placement to left or right with dedicated class: add rs-is-overlapping-left or rs-is-overlapping-right to rs-is-overlapping class. By default, it's right, but some components use this other side.
I'm overlapped by one of my children
Clickable element with overlapping child
In order to be able to click the whole box with an overlapping child, you have to add jsrs-clickable
to the element with rs-has-overlap
I'm overlapped by one of my children Click me