---
# System prepended metadata

title: Lists
tags: [DS DONE]

---

---
tags: DS DONE
---

# Lists
*Lists consist of related content grouped together and organized vertically.*

---

## Usage

### Lists types

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


1. **Ordered list**
Imply sequence and order, and are commonly used when giving a set of instructions.

2. **Footnotes list**

3. **Link list**
Refer to the [links](https://) documentation

4. **Bullet list**
To present content of equal status or value. There are 2 levels possible.

5. **Icon list**
To present content with icon directly related to the text




### Negative version
All that types of lists can be used on darker interface such as epic or Pickx or on dark background as gradient of full purple. 

---

## Style

### Positive
On darker interface, all the elements (text, bullet, number, icon) are white.

> Size are given for desktop, refer to [typography](https://) to know the body font size on each breakpoints
> 

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

|  | Font size | Text color | Icon color |
| -------- | -------- | -------- | -------- |
| **1. Ordered list**     | Body size     | Body color     | No icon
| **2. Footnotes list**     | 12rem     | <div style="background-color: #7d7d7d">&nbsp;</div> #7d7d7d     | No icon
| **3. Link lists**     |   Body size   | Body color     | No icon
| **4. Bullet list**     |   Body size   | Body color     | No icon
| **5. Icon list**     |   Body size   | Body color     | <div style="background-color: #5C2D91">&nbsp;</div> #5C2D91




### Negative version
![](https://i.imgur.com/sbLHxgv.jpg)


|  | Font size | Text color | Icon color |
| -------- | -------- | -------- | -------- |
| **1. Ordered list**     | Body size     | Body color     | No icon
| **2. Footnotes list**     | 12rem     | <div style="background-color: #FFFFFF">&nbsp;</div> 70% opacity of #FFFFFF     | No icon
| **3. Link lists**     |   Body size   | Body color     | No icon
| **4. Bullet list**     |   Body size   | Body color     | No icon
| **5. Icon list**     |   Body size   | Body color     | <div style="background-color: #FFFFFF ">&nbsp;</div> 70% opacity of #FFFFFF 