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.

Scroll

Scroll utility is used to provide scrolling within an element.

last modified: 26/06/2024 15:15:04

Scroll X & Y

To obtain an overflow scroll, create a div including a maximum size in addition to rs-scroll class.

Title

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 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 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 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 at lectus euismod porta vitae quis dui. In sagittis enim sit amet lacus dapibus sit amet tempus est cursus. Cras auctor semper nisl at varius erat commodo in. Pellentesque pharetra nunc non risus


Vertical scrolling

Use rs-scroll-v class.

Title

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 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 at lectus euismod porta vitae quis dui. In sagittis enim sit amet lacus dapibus sit amet tempus est cursus. Cras auctor semper nisl at varius erat commodo in. Pellentesque pharetra nunc non risus laoreet sit amet hendrerit massa imperdiet. Ut cursus luctus enim et ultricies. Ut sed dui orci. Curabitur a nunc erat at pulvinar sapien. Vestibulum sed nisl nisl. Suspendisse potenti. Mauris vitae aliquam velit. Ut id ligula sapien vestibulum aliquet metus. Phasellus vulputate felis a felis porta at pretium lectus mattis. Maecenas erat augue consectetur quis lacinia quis euismod in dolor.Lorem ipsum dolor sit amet consectetur adipiscing elit. Donec sit amet auctor massa. Nunc dapibus pellentesque faucibus. Vestibulum vitae mauris lorem. Nunc vitae dolor vel justo tempor lobortis. Nullam diam arcu placerat et pulvinar sed pulvinar commodo nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In nec nunc id quam ornare egestas. Maecenas sodales quam eget orci dignissim placerat. Nulla vel velit mi. Vestibulum id porta augue.Morbi ullamcorper aliquet quam id tristique. Aenean ultrices mi sed tincidunt cursus mi neque feugiat neque sit amet consequat nibh ante et neque. Integer nisi nibh interdum ullamcorper rutrum sit amet faucibus ac ligula. Nullam non leo elit in euismod nulla. Mauris diam leo cursus at eleifend sed rhoncus vel massa. In pretium erat purus a imperdiet elit. Morbi dictum quam vitae tellus aliquam quis euismod mauris ultricies. Mauris


Horizontal scrolling

Use rs-scroll-h class.

Title

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 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


No scroll

There are also classes to hide the scroll on some elements. Those are utility classes that should not be used without checking and validating your use case with an integrator, so please be very careful.

  • rs-noscroll - Remove both horizontal and vertical scrolls
  • rs-noscroll-h - Remove only horizontal scroll
  • rs-noscroll-v - Remove only vertical scroll