> 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/panels.md).

# Panels

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

***

{% tabs %}
{% tab title="Général" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=8352-29564&page-id=2309:1735&scaling=scale-down-width&starting-point-node-id=2309:11323&t=B4ZhpXv4n8EgY1ku-1&viewport=462,673,0.56>" %}
{% endtab %}

{% tab title="Filtre" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=8352-30894&page-id=2309:1735&scaling=scale-down-width&starting-point-node-id=2309:11323&t=B4ZhpXv4n8EgY1ku-1&viewport=462,673,0.56>" %}
{% endtab %}

{% tab title="Ajout au panier" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=2309-11323&page-id=2309:1735&scaling=scale-down-width&starting-point-node-id=2309:11323&t=B4ZhpXv4n8EgY1ku-1&viewport=462,673,0.56>" %}
{% endtab %}
{% endtabs %}

***

### Principes

#### Modulaire

Composé d'un header et d'un footer fixe, avec le content au milieu : peut importe sa nature, le panel ne perd jamais l'utilisateur grâce à la répétition des paterns UX qu'ils s'y trouvent.

#### Montrer sans casser le flow

Un panel permet de révéler de l'information sans déplacer le contenu en dessous du CTA (comme des accordéons), sans déplacer l'utilisateur dans la page de force (ancres), sans emmener l'utilisateur dans une nouvelle page (liens). À privilégier lors des flows critiques.

***

### Composant lié

{% content-ref url="/pages/X5jVI1da8wv0fY4tcExg" %}
[Bouton](/documentation/components/button.md)
{% endcontent-ref %}

{% content-ref url="/pages/Qsb1no0uBJxQKMzdt0P0" %}
[Product Box Horizontale](/documentation/components/product-box-1.md)
{% endcontent-ref %}

{% content-ref url="/pages/of8uu2xQNO6TxXhL5ShS" %}
[Accordions](/documentation/components/accordions.md)
{% endcontent-ref %}

{% content-ref url="/pages/YSC4rPiBAuuYKmDTYDfP" %}
[Chip](/documentation/components/chip.md)
{% endcontent-ref %}