Proximus design systemDev
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: 01/01/1601 01:00:00

Scroll X & Y

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

Title

condimentum nisi id iaculis purus lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id massa 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 condimentum nisi id iaculis purus lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id massa 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 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


Vertical scrolling

Use rs-scroll-v class.

Title

condimentum nisi id iaculis purus lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id massa 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 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


Horizontal scrolling

Use rs-scroll-h class.

Title

condimentum nisi id iaculis purus lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse id massa 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


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