> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/timeline.md).

# Timeline

{% hint style="info" icon="figma" %}
Nom du composant : **timeline**
{% endhint %}

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6031-3683&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6031:3683&t=mBjjor5vNNgxWFE0-1&viewport=260,272,0.91>" %}

***

### Principes

#### Hiérarchie

L'ordre des événements doit être intuitif (généralement du plus récent au plus ancien) pour permettre une lecture immédiate de l'état actuel du colis.

#### Statut

Chaque point de la Timeline doit clairement distinguer les étapes validées et les prochaines étapes via des contrastes et des icônes spécifiques.

***

### Usage

{% tabs %}
{% tab title="Default" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6238-9479&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6238:9479&t=E8vABgeq5kHa4Ai0-1&viewport=-2889,129,0.32>" %}

Utilisée uniquement dans l'overview d'une commande dans le compte client sur desktop. Sur mobile, la timeline est verticale.
{% endtab %}

{% tab title="Detailled" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6238-9537&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6238:9537&t=nn5Mrr5xXAjvldII-1&viewport=-2889,129,0.32>" %}

Utilisée uniquement dans le compte client au moment d'une volonté de plus de détails concernant une commande par l'utilisateur.
{% endtab %}

{% tab title="Small" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6238-9594&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6238:9594&t=3TuM2Lma0uCk87Hr-1&viewport=-2889,129,0.32>" %}

Utilisée uniquement dans la page principale du compte client sur mobile lorsqu'une commande est en cours.
{% endtab %}
{% endtabs %}

***

### Types

{% tabs %}
{% tab title="Validated" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9270&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9270&t=TMIGiIKgsPK6XYTT-1&viewport=-168,143,0.61>" %}
{% endtab %}

{% tab title="Manufacturing" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9327&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9327&t=99CFU0gYfqw6L0gm-1&viewport=-864,183,0.61>" %}
{% endtab %}

{% tab title="Shipping" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9344&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9344&t=TNExCTfYDbprdfDv-1&viewport=-1230,215,0.61>" %}
{% endtab %}

{% tab title="Shipped" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9364&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9364&t=thVeE6ybkWvHOlMF-1&viewport=-1906,195,0.61>" %}
{% endtab %}

{% tab title="Transfer to agency" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9379&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9379&t=MOLZkfi5RT3Ewvbu-1&viewport=-2374,235,0.61>" %}
{% endtab %}

{% tab title="Transfer to relay point" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9396&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9396&t=iYGjNQ2TjIuMMMMb-1&viewport=-3096,273,0.61>" %}
{% endtab %}

{% tab title="Rdv" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9413&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9413&t=fZQR9aBmcs3Q6Qbi-1&viewport=-3096,273,0.61>" %}
{% endtab %}

{% tab title="To collect" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9428&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9428&t=sgahVU8TRNAcTHPr-1&viewport=-3834,273,0.61>" %}
{% endtab %}

{% tab title="Delivery in progress" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9445&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9445&t=U6Gi4W9Hm6VXN5al-1&viewport=-4630,261,0.61>" %}
{% endtab %}

{% tab title="Delivered" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6132-9462&page-id=6031:3682&scaling=min-zoom&starting-point-node-id=6132:9462&t=IhLppjhV1KJH51Vb-1&viewport=-5020,243,0.61>" %}
{% endtab %}
{% endtabs %}