<section class="ds-example example-products">
    <div class="html">
        <div class="row list-product">
            {% for i in 1..4 %}
                <div class="col-6 col-md-3 d-flex">
                    <div class="product-box-container">
                        {% if i%2==0 %}
                            <div class="product-box-tag">
                                <span class="badge badge-secondary">{{ 'app.ui.product.tag.promo'|trans }}</span>
                            </div>
                        {% endif %}

                        <a href="/fr_FR/bonnet-vert" class="product-box-image-wrapper">
                            <picture class="media-object">
                                <img src="//via.placeholder.com/280" alt="T-shirt bull" class="w-100">
                            </picture>
                        </a>

                        <div class="product-box-text-wrapper">
                            <a href="/fr_FR/bonnet-vert" class="product-box-name">
                                <h2 class="product-box-title">
                                    {% if i==3 %}
                                        Nom court
                                    {% elseif i==4 %}
                                        Nom de produit un peu plus long qui passe sur plusieurs lignes
                                    {% else %}
                                        Nom qui peut prendre plusieurs ligne
                                    {% endif %}
                                </h2>

                                <p class="product-box-complementary-name">
                                    {% if i==1 %}
                                        Marque
                                    {% else %}
                                        Nom complémentaire
                                    {% endif %}
                                </p>
                            </a>

                            {% if i>2 %}
                                <a href="/fr_FR/bonnet-vert#product-reviews" class="product-box-review review-rating">
                                    {% include '@SyliusShop/Product/_starRating.html.twig' with {product: {averageRating:4}} %}
                                    <span class="product-box-review-nb">(2)</span>
                                </a>
                            {% endif %}

                            <div class="product-box-price-wrapper price-wrapper right">
                                {% if i%2==0 %}
                                    <span class="price promo"><span>3</span>,54 €</span>
                                    <span class="price-old"><span>5</span>,00 €</span>
                                {% else %}
                                    <span class="price"><span>3</span>,54 €</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <pre><code>{&#37; include '@SyliusShop/Product/Box/_content.html.twig' &#37;}

&lt;div class="row list-product">
    &lt;div class="col-6 col-md-3 d-flex">
        &lt;div class="product-box-container">
            &lt;div class="product-box-tag">
                &lt;span class="badge badge-secondary">Promo&lt;/span>
            &lt;/div>

            &lt;a href="" class="product-box-image-wrapper">
                &lt;img src="" alt="" class="w-100">
            &lt;/a>

            &lt;div class="product-box-text-wrapper">
                &lt;a href="" class="product-box-name">
                    &lt;h2 class="product-box-title">&lt;/h2>
                    &lt;p class="product-box-complementary-name">&lt/p>
                &lt;/a>

                &lt;div class="box-footer">
                    &lt;a href="#product-reviews" class="product-box-review review-rating">
                        {&#37; include '@SyliusShop/Product/_starRating.html.twig' &#37;}
                        &lt;span class="product-box-review-nb">(X)&lt;/span>
                    &lt;/a>

                    &lt;div class="product-box-price-wrapper price-wrapper right">
                        &lt;span class="price promo">&lt;span>X&lt;/span>,XX&nbsp;€&lt;/span>
                        &lt;span class="price-old">&lt;span>X&lt;/span>,XX&nbsp;€&lt;/span>
                    &lt;/div>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/div></code></pre>
</section>
