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

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.

last modified: 01/01/1601 01:00:00

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.

felis luctus quis. Mauris feugiat dictum magna vitae mattis. Lorem

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.

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

felis luctus quis. Mauris feugiat dictum magna vitae mattis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas id arcu sapien. Fusce eu lorem hendrerit nunc sodales consectetur vel eget felis. Pellentesque consectetur molestie nulla ac ultricies. Phasellus facilisis justo et nisi consectetur lobortis. Aenean nisl est pellentesque vel fermentum id scelerisque sit amet augue.Donec non diam ac nisl tincidunt eleifend. Aliquam erat volutpat. Cras et urna id nibh porta sagittis nec in mauris. Nullam imperdiet tempor tempor. Nam ipsum quam semper in vehicula ac volutpat quis orci. Donec sollicitudin adipiscing mauris ac cursus augue condimentum at. Morbi ac urna

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

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 on the left

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 overlapping my parent

I'm overlapped by one of my children Click me