> 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-1.md).

# Product Box Horizontale

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

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=8352-28644&page-id=8352:28643&scaling=min-zoom&starting-point-node-id=8352:28644&t=K8lw6ttIz9BaKgA3-1&viewport=705,364,0.94>" %}

***

### 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 verticalement, à l'inverse de la Product Box classique.

***

### Composant lié

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

{% content-ref url="/pages/itrGkYSAANfduB0c5XMc" %}
[Shop the look](/documentation/components/shop-the-look.md)
{% endcontent-ref %}

{% content-ref url="/pages/locNbMvnvPCUdK2q4MHz" %}
[Panels](/documentation/components/panels.md)
{% endcontent-ref %}