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

# Product Box

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

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1097-9346&page-id=1097:9345&scaling=scale-down-width&starting-point-node-id=1097:9346&t=Gvm7GcW4F8Ioe4Gy-1&viewport=218,94,0.85>" %}

***

### Principes

#### Clarté

Agencement logique de l'information suivant son importance

#### Compacité

Agencement optimisé de l'information de façon a pouvoir respecter nos standards minimum de nombre d'affichage minimum de Box par écrans.

***

### Usage

Est utilisé pour empiler des produits horizontalement, à l'inverse de la Product Box Horizontale

***

### Dos & Don'ts

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><mark style="color:green;">À faire</mark></td><td>Sliders et stacks horizontaux</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Empilement verticaux la ou il est possible d'utiliser des box horizontales à la place</td></tr></tbody></table>

***

### Composant lié

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

{% content-ref url="/pages/pPMSedGxukqAh2U3tWTF" %}
[Label note](/documentation/components/star-rating.md)
{% endcontent-ref %}