---
tags: DS DONE
---

https://designsystem.proximus.com/pagesDS/20__Components/Read_more/

# Read more
Read more is a link that comes after a small preview of text. Once clicked it reveals the rest of the text.

The read more allows to shorten the page and to display the rest of the content only if the user decides to.

# Usage

## Types
Read more element exists in light and dark theme.


## States


1. **Basic**
Basic state displays only a small part of the content. The arrow is pointing downwards.

2. **Hover**
State visible when the cursor hovers the label and chevron. They are displayed in another color and the text is underlined. Cursor becomes a pointer.

3. **Open**
When the read more link is clicked, the entire content is revealed. 'Read more' becomes 'Read less' and the arrow is pointing upwards.

4. **Focus**
The link is in a blue border box.

## 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**
This allows the user to display the full content of the element.
4. **Chevron**
It indicates the user the state of the read more link. If it is pointing downwards, the content is hidden. If it is pointing upwards, the content is revealed.
4. **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.

## Title
> [name=Laureen Delhaye]@Arnaud, ça c'est vraiment la partie usage de cet élément... Je ne sais pas trop quel titre mettre ... Pour l'instant, j'ai relevé 4 infos important à indiquer:

### Content
The read more element can be displayed on all type of content

> [name=Laureen Delhaye] @Arnaud, dans les faits c'est comme ça mais je pense qu'il est bon de bloquer... On bloque sur uniquement du contenu paragraphe ?

### Height of the preview
You can define the height of the preview by using the maximum height classes defined by range of 100px

### Background colors
To give a preview to the customer, a part of the content is hidden by a gradient. 4 gradients have be defined: 2 by themes following the 2 default background of each [themes](https://designsystem.proximus.com/pagesDS/10__Basics/Themes/)

### Read more on small only
Depending of the needs, the read more element can be only used on mobile

---

## Style

### Sizes

| | Attribute | Value |
| -------------- | -------------------------------- | ---------------------------- |
| **1. Content** | Depends on which type of content the read more element is displayed | |
| **2. Preview padding** | Bottom | 2rem |
| **3. Content padding** | Bottom | 2rem |
| **4. Chevron** | Size | Size 3 |
| **5. Label** | Weight <br> Font size <br> | Regular <br> Size 3 |
| **6. Chevron margin** | Left | 1rem

### Colors

#### Light theme

| | Attribute | Value |
| -------------- | -------------------------------- | ---------------------------- |
| **1. Content text** | Depends on which type of content the read more element is displayed | |
| **2. Link & chevron** | Text color <br> Hover | Black <br> Purple7 |

#### Dark theme

| | Attribute | Value |
| -------------- | -------------------------------- | ---------------------------- |
| **1. Content text** | Depends on which type of content the read more element is displayed | |
| **2. Link & chevron** | Text color <br> Hover text color | White <br> Purple 3 |