Proximus design system
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.

Overlap

Element could overlap the precedent one.

last modified: 06/09/2022 13:55:05

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.

Your content doesn't want to go up?

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.

nibh at felis tempus tempus. Nam ac risus id velit


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.

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

And here will come the rest of your content in another section.

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 at ut urna. Nulla facilisi. Morbi arcu lorem consectetur at accumsan nec ultrices vel nunc. Nulla facilisi. Etiam quis eros tellus non faucibus nibh. Sed id nulla dui. Proin vitae tortor lacus. Phasellus placerat sodales metus at pellentesque felis luctus quis. Mauris


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.

Flex content

If your content is flex, add rs-maxh on rs-has-overlap .

I'm overlapping my parent

I'm overlapped by one of my children