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.

Read more

Read more allows to shorten a certain portion of content and to display the rest it only if the user decides to.

last modified: 30/09/2021 11:10:06

Overview

There is one type of read more, available for our different modes:

The read more component is only available on:
  • Positive mode: white and grey2 background colors.
  • Negative mode: black background color.

States

  1. Default state
    State visible before click. Only a small portion of the content is displayed and the chevron is pointing downwards.
  2. Hover/Focused state
    State visible when the cursor hovers the label and chevron and triggered by keyboard navigation or click. Cursor becomes a pointer.
  3. Opened state
    State visible when clicked. The branch opens, allowing the full content inside to be revealed. "Read more" becomes "Read less" and the chevron is pointing upwards.

Anatomy

  1. Branch
    Branch is the full element with label, chevron and a faded preview of the content.

  2. Content
    The entire content is revealed once the read more link is clicked.

  3. Label
    Allows the user to display the full content of the element.

    Content of the label

    We strive to keep the consistency of our labels. Please keep "Read more" & "Read less" as is.

  4. Chevron
    Informs the user about the state of the read more. Pointing down, the content is collapsed. Pointing up, the content is expanded.

  5. Preview
    The user gets to see the beginning of the content before clicking on the read more link. A fading effect let the user know that there is more content than what is shown. The height of the preview can be adapted to your needs.


Responsiveness

Depending on your needs, you can choose to have the read more function only on mobile devices.

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 17/03/2022 12:00:04

A Read more element can be added on long texts with container class rs-read-more-container and a minimum height of 100px with rs-maxh-s10 added on rs-read-more-content .

It can be used only on elements with following backgrounds:

  • White : default
  • Grey2 : with rs-read-more-container2 added to rs-read-more-container
  • Black : with ( rs-read-more-container-neg )added to rs-read-more-container
How does it work

Read more is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.readmore" attribute to work.

Default (on white background)

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.


Grey2 version

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.


Negative version

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.


Read more on small only

To enable it on small devices only, just add rs-read-more-label-for-small-only to label rs-read-more-label .

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.


JavaScript

How to trigger the js

As Readmore is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

CONTEXT refers to document or html element parent to data-read-more.