---
# System prepended metadata

title: Metroline
tags: [DS DONE]

---

---
tags: DS DONE
---

# Metroline
vertical or horizontal list of chronological elements, numbered or not, that represents steps. 

# Usage

use the timline when representing a logical flow of informations wich need to be represented as steps for the user.



## States

> [name=Laureen Delhaye]J'ai un doute ... Est-ce que past/done, ongoing/current & coming sont des states ou des status ?
> @Arnaud, tu en penses quoi ?


IMAGES


1. **Basic**
TBD
2. **Hover**
TBD
3. **Focused** 
TBD
3. **Active**  = current??
TBD
4. **Disabled**
TBD



The metroline is divided into severals stations. Each station can have a different state depending on the the ongoing flow.

![](https://i.imgur.com/LL2TR1C.png)


1. **Past/Done**
TBD
2. **Ongoing/Current**
TBD
3. **Coming** 
TBD



## Anatomy

![](https://i.imgur.com/KIawSxm.png)

1. **Title** 
Clear and concise indication of what the metroline is representing
3. **Station** 
Station is marking the step with a key sign. Color is changing depending on the status. The station can contain several type of sign such as icons or numbers depending on the meaning of the whole timeline and the needs.
4. **Container** 
Container is added behind current state box.
6. **The timeline**
Timeline is making the liaison between stations. The timeline above the current station is purple and below is grey
8. **Label** 
Label of each station that is clearly indicating the station name

---

## Style

### Sizes


![](https://i.imgur.com/lHPQdBe.png)

| Column 1 | Mobile   | Tablet/Desktop |
| -------- | -------- | --------       |
| **1. Container paddings**    | /        | 1 rem        |
| **2. Station margin**    | /        | 0,4 rem          |
| **3. Station height & width**  | /      | 2,7 rem  |
| **3'. Station font-size**  | /      | Size5 Extrabold |
| **4. label margin-left**  | /      | 2 rem  |
| **5. Step margin-bottom**  | /      | 0,6 rem  |
| **6. Timeline width**  | /      | 0,2 rem  |
| **7. Coming station border-width**  | /      | 0,2 rem  |


### Hover

![](https://i.imgur.com/jqIusO8.png)

Only past steps are clickable. A grey2 background is applyed on theses hovered steps.

#### Content in type 2 (extended)

![](https://i.imgur.com/8d5Tcao.png)



1. When there's content below the title, add an extra 1rem spacing at the bottom of the box.
2. A 1px solid grey6 is added between all the steps except when one of the two surrouding boxes is a current state and therefore has a background.

#### Light theme

Only light theme for now

> [name=Laureen Delhaye]Couleurs à documenter ... 