---
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" ?]
>


| 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


| 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


| 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


| 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


| 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


| 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


| 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


| 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


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