---
# System prepended metadata

title: Lists style
tags: [DS DONE]

---

---
tags: DS DONE
---


# Lists style
https://designsystem.proximus.com/pagesDS/20__Components/Lists/

## Sizes

### Standard / Bullet list
> [Dans uasage on l'appelle "standard list" peut-être plus explicite "bullet list" ?]
> 

![](https://i.imgur.com/56NKZbq.jpg)




| Attribute              | Mobile | Tablet | Dektop |
| -------------------    | ------ | ------ | ------ |
| 1. Bullet font size    | Size 4 | Size 4 | Size 4 |
| 2. Label font size     | Size 4 | Size 4 | Size 4 |
| 3. Indent space        | 1 rem  | 1 rem  | 1 rem  |
| 4. Item spacing        | 1 rem  | 1 rem  | 1 rem  |
| 5. List spacing bottom | 2 rem  | 2 rem  | 2 rem  |


### Icon list

![](https://i.imgur.com/BY33Xff.jpg)




| Attribute              | Mobile  | Tablet  | Dektop  |
| ------------------     | ------- | ------- | ------- |
| 1. Icon size           | 1.6 rem | 2.8 rem | 3.2 rem |
| 2. Label font size     | Size 4  | Size 4  | Size 4  |
| 3. Indent space        | 1 rem   | 2 rem   | 2 rem   |
| 4. Item spacing        | 2 rem   | 2 rem   | 2 rem   |
| 5. List spacing bottom | 2 rem   | 2 rem   | 2 rem   |


### Advantage list

![](https://i.imgur.com/oh7Igi5.jpg)



| Attribute              | Mobile  | Tablet  | Dektop |
| ------------------     | ------- | ------- | ------ |
| 1. Icon size           | 1.5 rem | 1.8 rem | 2 rem  |
| 2. Label font size     | Size 4  | Size 4  | Size 4 |
| 3. Indent space        | 1 rem   | 1 rem   | 1 rem  |
| 4. Item spacing        | 1 rem   | 1 rem   | 1 rem  |
| 5. List spacing bottom | 2 rem   | 2 rem   | 2 rem  |


### Status list

![](https://i.imgur.com/NSK8Y8F.jpg)




| Attribute              | Mobile  | Tablet  | Dektop |
| ------------------     | ------- | ------- | ------ |
| 1. Icon size           | 1.5 rem | 1.8 rem | 2 rem  |
| 2. Label font size     | Size 4  | Size 4  | Size 4 |
| 3. Indent space        | 1 rem   | 1 rem   | 1 rem  |
| 4. Item spacing        | 1 rem   | 1 rem   | 1 rem  |
| 5. List spacing bottom | 2 rem   | 2 rem   | 2 rem  |


### Ordered list

#### Classic

![](https://i.imgur.com/kIbvdjg.jpg)




| Attribute              | Mobile | Tablet | Dektop |
| -------------------    | ------ | ------ | ------ |
| 1. Number font size    | Size 4 | Size 4 | Size 4 |
| 2. Label font size     | Size 4 | Size 4 | Size 4 |
| 3. Indent space        | 1 rem  | 1 rem  | 1 rem  |
| 4. Item spacing        | 1 rem  | 1 rem  | 1 rem  |
| 5. List spacing bottom | 2 rem  | 2 rem  | 2 rem  |


#### Footnote

![](https://i.imgur.com/0W9RVq6.jpg)




| Attribute              | Mobile | Tablet | Dektop |
| -------------------    | ------ | ------ | ------ |
| 1. Number font size    | Size 3 | Size 3 | Size 3 |
| 2. Label font size     | Size 3 | Size 3 | Size 3 |
| 3. Indent space        | 1 rem  | 1 rem  | 1 rem  |
| 4. Item spacing        | 1 rem  | 1 rem  | 1 rem  |
| 5. List spacing bottom | 2 rem  | 2 rem  | 2 rem  |



### Links list

![](https://i.imgur.com/NCQxc0h.jpg)



| Attribute | Mobile | Tablet | Dektop |
| --------- | ------ | ------ | ------ |
| 1. Arrow font size | Size 3 | Size 3 | Size 3 |
| 2. Label font size | Size 4 | Size 4 | Size 4 |
| 3. Indent space    | 1 rem  | 1 rem  | 1 rem  |
| 4. Item spacing | Left/right: 2 rem <br> Top/bottom: 1 rem | Left/right: 2 rem <br> Top/bottom: 1 rem | Left/right: 2 rem <br> Top/bottom: 1 rem |
| 5. Separator size    | 0.1 rem                                  | 0.1 rem                                  | 0.1 rem                                  |
| 6. List spacing bottom | 2 rem  | 2 rem  | 2 rem  |


## Colors

### Light theme

![](https://i.imgur.com/9ipWkGv.jpg)



| Type of list        | Label color value | Indent color value                                                                     |
| ------------------- | ----------------- | -------------------------------------------------------------------------------------- |
| 1. Bullet           | Body text color   | Body text color                                                                        |
| 2. Icon             | Body text color   | Purple                                                                                 |
| 3. Advantage        | Body text color   | Success                                                                                |
| 4. Status           | Body text color   | Success status: success <br> On going status: warning <br> Warning/error status: error |
| 5. Ordered classic  | Body text color   | Body text color                                                                        |
| 6. Ordered footnote | Text details      | Text details  |
| 7. Classic links    | Body text color   | Body text color                                                                        |
| 8. Separator links  | Body text color  | Arrow: body text color <br> Separator : grey 4 |


### Dark theme

![](https://i.imgur.com/BlRCRKz.jpg)

| Type of list        | Label color value | Indent color value                                                                     |
| ------------------- | ----------------- | -------------------------------------------------------------------------------------- |
| 1. Bullet           | White   | White                                                                        |
| 2. Icon             | White   | White                                                                                 |
| 3. Advantage        | White   | Success neg                                                                                |
| 4. Status           | White   | Success status: success neg <br> On going status: warning neg <br> Warning/error status: error neg |
| 5. Ordered classic  | White   | White                                                                        |
| 6. Ordered footnote | Text details neg | Text details neg |
| 7. Classic links    | White   | White                                                                        |
| 8. Separator links  | White  | Arrow: White <br> Separator : White opacity 20% |
