{% extends '@SyliusShop/layout.html.twig' %}

{% form_theme form '@SyliusShop/Form/theme.html.twig' %}

{% block bodyClass %}styleguide{% endblock %}

{% set tab='&nbsp;&nbsp;&nbsp;&nbsp;' %}

{% block content %}
    <div class="container">
        <h1 class="title-styleguide">Styleguide</h1>

        {# //MENU #}
        <nav class="nav-side menu-Styleguide d-xs-none d-sm-none d-xl-block">
            <ul class="list-unstyled">
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockColorsStyleguide">Couleurs</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockIconsStyleguide">Icones</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockTitlesStyleguide">Typo</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockButtonsStyleguide">Boutons</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockFormsStyleguide">Form</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockTableStyleguide">Tableaux</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockComponentStyleguide">Composants</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockModalStyleguide">Modals</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockSelectionStyleguide">Sélection</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockSliderStyleguide">Sliders</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockBlocksStyleguide">Blocks</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockHelpersStyleguide">Helpers</a></li>
            </ul>
        </nav>
        {# MENU// #}

        {# //COLOR #}
        <section id="blockColorsStyleguide" class="color-wrapper">
            <h2 class="h2 title-styleguide">Couleurs</h2>
            <div class="row">
                <div class="col-md"><div class="styleguide-color bg-primary"></div></div>
                <div class="col-md"><div class="styleguide-color bg-primary-hover"></div></div>
                <div class="col-md"><div class="styleguide-color bg-secondary"></div></div>
                <div class="col-md"><div class="styleguide-color bg-secondary-hover"></div></div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md"><div class="styleguide-color bg-black"></div></div>
                <div class="col-md"><div class="styleguide-color bg-dark"></div></div>
                <div class="col-md"><div class="styleguide-color bg-white"></div></div>
                <div class="col-md"><div class="styleguide-color bg-light"></div></div>
            </div>
            <hr>
            <div class="row">
                {% for i in 1..9 %}
                    <div class="col-md-4 col-xl">
                        <div class="styleguide-color bg-gray-{{ i }}00"></div>
                    </div>
                {% endfor %}
            </div>
            <hr>
            <div class="row">
                <div class="col-md"><div class="styleguide-color bg-danger"></div></div>
                <div class="col-md"><div class="styleguide-color bg-warning"></div></div>
                <div class="col-md"><div class="styleguide-color bg-info"></div></div>
                <div class="col-md"><div class="styleguide-color bg-success"></div></div>
            </div>
        </section>
        {# COLOR// #}

        {# //ICONS #}
        <section id="blockIconsStyleguide" class="icon-wrapper">
            <h2 class="h2 title-styleguide">Icones</h2>

            <pre>
                <code>{&#37; include '@SyliusShop/Icons/<b>nom_icone</b>.html.twig' &#37;}</code>
            </pre>
            <div class="row">
                {% for icon in list_files('vendor/dedi/sylius-theme/src/Resources/views/theme/SyliusShopBundle/views/Icons') %}
                    {% if icon!='fontawesome.html.twig' %}
                        <div class="col-icon col-6 col-sm-4 col-md-3 col-lg-2">
                            <div class="styleguide-icon">
                                {% include '@SyliusShop/Icons/'~icon %}<br>
                                <span>{{ icon|replace({'.html.twig':''}) }}</span>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>

            <hr>

            <div class="row">
                <div class="col-md-6">
                    <span class="icon-pattern-wrapper">
                        {% include '@SyliusShop/Icons/cart.html.twig' %}
                    </span><br>

                    <span class="icon-pattern-wrapper mt-3">
                        <i class="fa fa-user"></i>
                    </span>
                </div>
                <pre class="col-md-6">
                    <code>&lt;!-- SVG -->
                        &lt;span class="icon-pattern-wrapper">
                            {{ tab|raw }}{&#37; include '@SyliusShop/Icons/<b>nom_icone</b>.html.twig' &#37;}
                        &lt;/span>

                        &lt;!-- Font-awesome -->
                        &lt;span class="icon-pattern-wrapper">
                            {{ tab|raw }}&lt;i class="fa fa-<b>nom_icone</b>">&lt;/i>
                        &lt;/span></code>
                </pre>
            </div>

        </section>
        {# ICONS// #}

        {# //TYPO #}
        <section id="blockTitlesStyleguide" class="typo-wrapper">
            <h2 class="h2 title-styleguide">Typo</h2>

            {# Titles #}
            <div class="row">
                <div class="col-md">
                    <h1 class="h1">h1. Exemple de titre</h1>
                    <h1 class="h1 decorate">h1. Exemple de titre</h1>
                    <h2 class="h2">h2. Exemple de titre</h2>
                    <h3 class="h3">h3. Exemple de titre</h3>
                    <h4 class="h4">h4. Exemple de titre</h4>
                    <h5 class="h5">h5. Exemple de titre</h5>
                    <h6 class="h6">h6. Exemple de titre</h6>
                </div>
                <pre class="col-md">
                    <code>&lt;h1 class="h1">&lt;/h1>

                    &lt;h1 class="h1 decorate">&lt;/h1>

                    &lt;h2 class="h2">&lt;/h2>

                    &lt;h3 class="h3">&lt;/h3>

                    &lt;h4 class="h4">&lt;/h4>

                    &lt;h5 class="h5">&lt;/h5>

                    &lt;h6 class="h6">&lt;/h6></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <h1 class="display-1">Display 1</h1>
                    <h2 class="display-2">Display 2</h2>
                    <h3 class="display-3">Display 3</h3>
                    <h4 class="display-4">Display 4</h4>
                </div>
                <pre class="col-md">
                    <code>&lt;h1 class="display-1">&lt;/h1>

                        &lt;h2 class="display-2">&lt;/h2>

                        &lt;h3 class="display-3">&lt;/h3>

                        &lt;h4 class="display-4">&lt;/h4></code>
                </pre>
            </div>

            <hr />

            {# Text #}
            <div class="row">
                <div class="col-md">
                    <p class="lead">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum. Sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium doloremque eopsloi laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunot explicabo. Nemo ernim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedopk quia consequuntur magni dolores eos qui rationesopl voluptatem sequi nesciunt. Neque porro quisquameo est, qui dolorem ipsum quia dolor sit amet, eopsmiep consectetur, adipisci velit, seisud quia non numquam eius modi tempora incidunt ut labore et dolore wopeir magnam aliquam quaerat voluptatem eoplmuriquisqu</p>
                </div>
                <pre class="col-md">
                    <code>&lt;p class="lead"&gt;&lt;/p&gt;</code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum. Sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium doloremque eopsloi laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunot explicabo. Nemo ernim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedopk quia consequuntur magni dolores eos qui rationesopl voluptatem sequi nesciunt. Neque porro quisquameo est, qui dolorem ipsum quia dolor sit amet, eopsmiep consectetur, adipisci velit, seisud quia non numquam eius modi tempora incidunt ut labore et dolore wopeir magnam aliquam quaerat voluptatem eoplmuriquisqu</p>
                </div>
                <pre class="col-md">
                    <code>&lt;p&gt;&lt;/p&gt;</code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <p class="small">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum. Sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium doloremque eopsloi laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunot explicabo. Nemo ernim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedopk quia consequuntur magni dolores eos qui rationesopl voluptatem sequi nesciunt. Neque porro quisquameo est, qui dolorem ipsum quia dolor sit amet, eopsmiep consectetur, adipisci velit, seisud quia non numquam eius modi tempora incidunt ut labore et dolore wopeir magnam aliquam quaerat voluptatem eoplmuriquisqu</p>
                </div>
                <pre class="col-md">
                    <code>&lt;p class="small"&gt;&lt;/p&gt;</code>
                </pre>
            </div>

            <hr />

            {# Lists #}
            <div class="row">
                <div class="col-md">
                    <ul>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Nulla volutpat aliquam velit
                            <ul>
                                <li>Phasellus iaculis neque</li>
                                <li>Purus sodales ultricies</li>
                                <li>Vestibulum laoreet porttitor sem</li>
                            </ul>
                        </li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Aenean sit amet erat nunc</li>
                        <li>Eget porttitor lorem</li>
                    </ul>
                </div>
                <pre class="col-md">
                    <code>&lt;ul&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;/li&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;/li&gt;
                        {{ tab|raw }}&lt;li&gt;
                            {{ (tab ~ tab)|raw }}&lt;ul&gt;
                                {{ (tab ~ tab ~ tab)|raw }}&lt;li&gt;&lt;/li&gt;
                                {{ (tab ~ tab ~ tab)|raw }}&lt;li&gt;&lt;/li&gt;
                            {{ (tab ~ tab)|raw }}&lt;/ul&gt;
                        {{ tab|raw }}&lt;/li&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;/li&gt;
                    &lt;/ul&gt;</code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <ol>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Nulla volutpat aliquam velit
                            <ol>
                                <li>Phasellus iaculis neque</li>
                                <li>Purus sodales ultricies</li>
                                <li>Vestibulum laoreet porttitor sem</li>
                            </ol>
                        </li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Aenean sit amet erat nunc</li>
                        <li>Eget porttitor lorem</li>
                    </ol>
                </div>
                <pre class="col-md">
                        <code>&lt;ol&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;/li&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;/li&gt;
                        {{ tab|raw }}&lt;li&gt;
                            {{ (tab ~ tab)|raw }}&lt;ol&gt;
                                {{ (tab ~ tab ~ tab)|raw }}&lt;li&gt;&lt;/li&gt;
                                {{ (tab ~ tab ~ tab)|raw }}&lt;li&gt;&lt;/li&gt;
                            {{ (tab ~ tab)|raw }}&lt;/ol&gt;
                        {{ tab|raw }}&lt;/li&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;/li&gt;
                    &lt;/ol&gt;</code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <ul class="list-links">
                        {% for i in 1..3 %}
                            <li class="list-item">
                                <a href="">
                                    Lien {{ i }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <pre class="col-md">
                        <code>&lt;ul class="list-links"&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
                        {{ tab|raw }}&lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;</code>
                </pre>
            </div>

            <hr />

            {# Links and others #}
            <div class="row">
                <div class="col-md">
                    <a href="">Exemple de lien dans un bloc de texte</a><br>
                    <a href="" class="link-secondary">Exemple de lien seul</a><br>
                </div>
                <pre class="col-md">
                    <code>&lt;a href=""&gt;&lt;/a&gt;
                    &lt;a href="" class="link-secondary"&gt;&lt;/a&gt;</code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md mb-4 mb-md-0">
                    <p class="title-label">Exemple de petit titre / label</p>
                </div>
                <pre class="col-md">
                    <code>&lt;p class="title-label"&gt;&lt;/p&gt;</code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md mb-4 mb-md-0">
                    <label>Label pour champ de formulaire</label><br>
                    <small class="form-text">Exemple de texte d'aide ou d'information formulaire</small>
                </div>
                <pre class="col-md">
                    <code>&lt;label&gt;&lt;/label&gt;
                    &lt;small class="form-text"&gt;&lt;/small&gt;</code>
                </pre>
            </div>

            <hr />

            {# Price #}
            <div class="row">
                <div class="col-md mb-4 mb-md-0">
                    <div class="row align-items-center mb-4">
                        <div class="col-12 col-lg-5">
                            Prix par défaut
                            <small class="form-text mt-0">Bloc produit</small>
                        </div>
                        <div class="col"><span class="price"><span>15</span>,70 €</span></div>
                        <div class="col"><span class="price promo"><span>15</span>,70 €</span></div>
                        <div class="col"><span class="price-old"><span>19</span>,99 €</span></div>
                    </div>
                    <div class="row align-items-center mb-4">
                        <div class="col-12 col-lg-5">
                            Prix lg
                            <small class="form-text mt-0">Fiche produit</small>
                        </div>
                        <div class="col-auto col-md"><span class="price-lg"><span>15</span>,70 €</span></div>
                        <div class="col-auto col-md"><span class="price-lg promo"><span>15</span>,70 €</span></div>
                        <div class="col"><span class="price-lg-old"><span>19</span>,99 €</span></div>
                    </div>
                    <div class="row align-items-center mb-4">
                        <div class="col-12 col-lg-5">
                            Prix md
                            <small class="form-text mt-0">Total panier</small>
                        </div>
                        <div class="col"><span class="price-md"><span>15</span>,70 €</span></div>
                        <div class="col"><span class="price-md promo"><span>15</span>,70 €</span></div>
                        <div class="col"><span class="price-md-old"><span>19</span>,99 €</span></div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col-12 col-lg-5">
                            Prix sm
                            <small class="form-text mt-0">Résumé panier, tooltip...</small>
                        </div>
                        <div class="col"><span class="price-sm"><span>15</span>,70 €</span></div>
                        <div class="col"><span class="price-sm promo"><span>15</span>,70 €</span></div>
                        <div class="col"><span class="price-sm-old"><span>19</span>,99 €</span></div>
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;span class="price">&lt;span>15&lt;/span>,70 €&lt;/span>
                        &lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
                        &lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;

                        &lt;span class="price-sm">&lt;span>15&lt;/span>,70 €&lt;/span>
                        &lt;span class="price-sm promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
                        &lt;span class="price-sm-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;

                        &lt;span class="price-md">&lt;span>15&lt;/span>,70 €&lt;/span>
                        &lt;span class="price-md promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
                        &lt;span class="price-md-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;

                        &lt;span class="price-lg">&lt;span>15&lt;/span>,70 €&lt;/span>
                        &lt;span class="price-lg promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
                        &lt;span class="price-lg-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
                    </code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md mb-4 mb-md-0">
                    <div class="row margin-bottom-3">
                        <div class="col">
                            <div class="price-wrapper">
                                <span class="price-old"><span>19</span>,99 €</span>
                                <span class="price promo"><span>15</span>,70 €</span>
                            </div>
                        </div>
                        <div class="col">
                            <div class="price-wrapper right">
                                <span class="price-old"><span>19</span>,99 €</span>
                                <span class="price promo"><span>15</span>,70 €</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="price-wrapper-vertical">
                                <span class="price-old"><span>19</span>,99 €</span>
                                <span class="price promo"><span>15</span>,70 €</span>
                            </div>
                        </div>
                        <div class="col">
                            <div class="price-wrapper-vertical down">
                                <span class="price-old"><span>19</span>,99 €</span>
                                <span class="price promo"><span>15</span>,70 €</span>
                            </div>
                        </div>
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;div class="price-wrapper">
                            {{ tab|raw }}&lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
                            {{ tab|raw }}&lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
                        &lt;/div>
                        &lt;div class="price-wrapper right">
                            {{ tab|raw }}&lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
                            {{ tab|raw }}&lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
                        &lt;/div>

                        &lt;div class="price-wrapper-vertical">
                            {{ tab|raw }}&lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
                            {{ tab|raw }}&lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
                        &lt;/div>
                        &lt;div class="price-wrapper-vertical down">
                            {{ tab|raw }}&lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
                            {{ tab|raw }}&lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
                        &lt;/div></code>
                </pre>
            </div>

            <hr />

            {# Notification #}
            <div class="row">
                <div class="col-md">
                    <p class="alert alert-success">Success - exemple de message</p>
                    <p class="alert alert-danger">Error - exemple de message</p>
                    <p class="alert alert-warning">Warning - exemple de message</p>
                    <p class="alert alert-info">Information - exemple de message</p>
                </div>
                <pre class="col-md">
                    <code>&lt;p class="alert alert-success">&lt;/p>

                        &lt;p class="alert alert-danger">&lt;/p>

                        &lt;p class="alert alert-warning">&lt;/p>

                        &lt;p class="alert alert-info">&lt;/p></code>
                </pre>
            </div>
        </section>
        {# TYPO// #}

        {# //BUTTON #}
        <section id="blockButtonsStyleguide" class="btn-wrapper">
            <h2 class="h2 title-styleguide">Boutons</h2>

            {# Primary #}
            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-primary">bouton primary</button><br>
                    <button class="btn btn-primary btn-reverse">bouton primary</button><br>
                    <button class="btn btn-primary" disabled>bouton primary</button><br>
                    <button class="btn btn-primary btn-sm">bouton primary small</button><br>
                    <button class="btn btn-primary btn-lg">bouton primary large</button><br>
                    <button class="btn btn-primary btn-block">bouton primary block</button>
                </div>
                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-primary">&lt;/button>

                    &lt;button class="btn btn-primary btn-reverse" disabled>&lt;/button>

                    &lt;button class="btn btn-primary" disabled>&lt;/button>

                    &lt;button class="btn btn-primary btn-sm">&lt;/button>

                    &lt;button class="btn btn-primary btn-lg">&lt;/button>

                    &lt;button class="btn btn-primary btn-block">&lt;/button></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-outline-primary">bouton primary outline</button><br>
                    <button class="btn btn-outline-primary btn-reverse">bouton primary outline</button><br>
                    <button class="btn btn-outline-primary" disabled>bouton primary outline</button><br>
                    <button class="btn btn-outline-primary btn-sm">bouton primary outline small</button><br>
                    <button class="btn btn-outline-primary btn-lg">bouton primary outline large</button><br>
                    <button class="btn btn-outline-primary btn-block">bouton primary outline block</button>
                </div>

                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-outline-primary">&lt;/button>

                    &lt;button class="btn btn-outline-primary btn-reverse">&lt;/button>

                    &lt;button class="btn btn-outline-primary" disabled>&lt;/button>

                    &lt;button class="btn btn-outline-primary btn-sm">&lt;/button>

                    &lt;button class="btn btn-outline-primary btn-lg">&lt;/button>

                    &lt;button class="btn btn-outline-primary btn-block">&lt;/button></code>
                </pre>
            </div>

            <hr>

            {# Secondary #}
            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-secondary">bouton secondary</button><br>
                    <button class="btn btn-secondary btn-reverse">bouton secondary</button><br>
                    <button class="btn btn-secondary" disabled>bouton secondary</button><br>
                    <button class="btn btn-secondary btn-sm">bouton secondary small</button><br>
                    <button class="btn btn-secondary btn-lg">bouton secondary large</button><br>
                    <button class="btn btn-secondary btn-block">bouton secondary block</button>
                </div>
                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-secondary">&lt;/button>

                    &lt;button class="btn btn-secondary btn-reverse">&lt;/button>

                    &lt;button class="btn btn-secondary" disabled>&lt;/button>

                    &lt;button class="btn btn-secondary btn-sm">&lt;/button>

                    &lt;button class="btn btn-secondary btn-lg">&lt;/button>

                    &lt;button class="btn btn-secondary btn-block">&lt;/button></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-outline-secondary">bouton secondary outline</button><br>
                    <button class="btn btn-outline-secondary btn-reverse">bouton secondary outline</button><br>
                    <button class="btn btn-outline-secondary" disabled>bouton secondary outline</button><br>
                    <button class="btn btn-outline-secondary btn-sm">bouton secondary outline small</button><br>
                    <button class="btn btn-outline-secondary btn-lg">bouton secondary outline large</button><br>
                    <button class="btn btn-outline-secondary btn-block">bouton secondary outline block</button>
                </div>
                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-outline-secondary">&lt;/button>

                    &lt;button class="btn btn-outline-secondary btn-reverse" disabled>&lt;/button>

                    &lt;button class="btn btn-outline-secondary" disabled>&lt;/button>

                    &lt;button class="btn btn-outline-secondary btn-sm">&lt;/button>

                    &lt;button class="btn btn-outline-secondary btn-lg">&lt;/button>

                    &lt;button class="btn btn-outline-secondary btn-block">&lt;/button></code>
                </pre>
            </div>

            <hr>

            {# Dark #}
            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-dark">bouton dark</button><br>
                    <button class="btn btn-dark btn-reverse">bouton dark</button><br>
                    <button class="btn btn-dark" disabled>bouton dark</button><br>
                    <button class="btn btn-dark btn-sm">bouton dark small</button><br>
                    <button class="btn btn-dark btn-lg">bouton dark large</button><br>
                    <button class="btn btn-dark btn-block">bouton dark block</button>
                </div>
                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-dark">&lt;/button>

                    &lt;button class="btn btn-dark btn-reverse">&lt;/button>

                    &lt;button class="btn btn-dark" disabled>&lt;/button>

                    &lt;button class="btn btn-dark btn-sm">&lt;/button>

                    &lt;button class="btn btn-dark btn-lg">&lt;/button>

                    &lt;button class="btn btn-dark btn-block">&lt;/button></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-outline-dark">bouton dark outline</button><br>
                    <button class="btn btn-outline-dark btn-reverse">bouton dark outline</button><br>
                    <button class="btn btn-outline-dark" disabled>bouton dark outline</button><br>
                    <button class="btn btn-outline-dark btn-sm">bouton dark outline small</button><br>
                    <button class="btn btn-outline-dark btn-lg">bouton dark outline large</button><br>
                    <button class="btn btn-outline-dark btn-block">bouton dark outline block</button>
                </div>

                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-outline-dark">&lt;/button>

                    &lt;button class="btn btn-outline-dark btn-reverse">&lt;/button>

                    &lt;button class="btn btn-outline-dark" disabled>&lt;/button>

                    &lt;button class="btn btn-outline-dark btn-sm">&lt;/button>

                    &lt;button class="btn btn-outline-dark btn-lg">&lt;/button>

                    &lt;button class="btn btn-outline-dark btn-block">&lt;/button></code>
                </pre>
            </div>

            {# Light #}
            <div class="row bg-gray-400 mb-0">
                <div class="col-md-6">
                    <button class="btn btn-light">bouton light</button><br>
                    <button class="btn btn-light btn-reverse">bouton light</button><br>
                    <button class="btn btn-light" disabled>bouton light</button><br>
                    <button class="btn btn-light btn-sm">bouton light small</button><br>
                    <button class="btn btn-light btn-lg">bouton light large</button><br>
                    <button class="btn btn-light btn-block">bouton light block</button>
                </div>
                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-light">&lt;/button>

                    &lt;button class="btn btn-light btn-reverse">&lt;/button>

                    &lt;button class="btn btn-light" disabled>&lt;/button>

                    &lt;button class="btn btn-light btn-sm">&lt;/button>

                    &lt;button class="btn btn-light btn-lg">&lt;/button>

                    &lt;button class="btn btn-light btn-block">&lt;/button></code>
                </pre>
            </div>
            <div class="row bg-gray-400 mt-0">
                <div class="col-md-6">
                    <button class="btn btn-outline-light">bouton light outline</button><br>
                    <button class="btn btn-outline-light btn-reverse">bouton light outline</button><br>
                    <button class="btn btn-outline-light" disabled>bouton light outline</button><br>
                    <button class="btn btn-outline-light btn-sm">bouton light outline small</button><br>
                    <button class="btn btn-outline-light btn-lg">bouton light outline large</button><br>
                    <button class="btn btn-outline-light btn-block">bouton light outline block</button>
                </div>

                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-outline-light">&lt;/button>

                    &lt;button class="btn btn-outline-light btn-reverse">&lt;/button>

                    &lt;button class="btn btn-outline-light" disabled>&lt;/button>

                    &lt;button class="btn btn-outline-light btn-sm">&lt;/button>

                    &lt;button class="btn btn-outline-light btn-lg">&lt;/button>

                    &lt;button class="btn btn-outline-light btn-block">&lt;/button></code>
                </pre>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-square btn-primary">Ok</button><br>
                    <button class="btn btn-square btn-primary">{% include '@SyliusShop/Icons/search.html.twig' %}</button>
                </div>
                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-square btn-primary">&lt;/button>

                    &lt;button class="btn btn-square btn-primary">
                        {{ tab|raw }}{&#37; include '@SyliusShop/Icons/search.html.twig' &#37;}
                    &lt;/button></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-round btn-primary">Ok</button><br>
                    <button class="btn btn-round btn-primary">{% include '@SyliusShop/Icons/search.html.twig' %}</button>
                </div>
                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-round btn-primary">&lt;/button>

                    &lt;button class="btn btn-round btn-primary">
                        {{ tab|raw }}{&#37; include '@SyliusShop/Icons/search.html.twig' &#37;}
                    &lt;/button></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col">
                            <button class="btn btn-primary btn-no-chevron">bouton no-icon</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-auto">
                            <button class="btn btn-primary btn-icon">
                                <span class="btn-icon-text">Ajouter au panier</span>
                                <span class="btn-icon-svg">{% include '@SyliusShop/Icons/cart-add.html.twig' %}</span>
                            </button><br>
                            <button class="btn btn-primary btn-icon">
                                <span class="btn-icon-text">Ajouter au panier</span>
                                <span class="btn-icon-svg">{% include '@SyliusShop/Icons/redo.html.twig' %}</span>
                            </button><br>
                            <button class="btn btn-primary btn-icon">
                                <span class="btn-icon-text">Ajouter au panier</span>
                                <span class="btn-icon-svg">{% include '@SyliusShop/Icons/cart-added.html.twig' %}</span>
                            </button>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-round btn-primary">{% include '@SyliusShop/Icons/cart-add.html.twig' %}</button><br>
                            <button class="btn btn-round btn-primary">{% include '@SyliusShop/Icons/redo.html.twig' %}</button><br>
                            <button class="btn btn-round btn-primary">{% include '@SyliusShop/Icons/cart-added.html.twig' %}</button>
                        </div>
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;button class="btn btn-primary btn-no-chevron">&lt;/button>

                    &lt;button class="btn btn-primary btn-icon">
                        {{ tab|raw }}&lt;span class="btn-icon-text">
                            {{ (tab ~ tab)|raw }}Texte
                        {{ tab|raw }}&lt;/span>
                        {{ tab|raw }}&lt;span class="btn-icon-svg">
                            {{ (tab ~ tab)|raw }}{&#37; include '@SyliusShop/Icons/cart-add.html.twig' &#37;}
                        {{ tab|raw }}&lt;/span>
                    &lt;/button>

                    &lt;button class="btn btn-round btn-primary">
                        {{ tab|raw }}{&#37; include '@SyliusShop/Icons/cart-add.html.twig' &#37;}
                    &lt;/button></code>
                </pre>
            </div>
        </section>
        {# BUTTON// #}

        {# //FORM #}
        <section id="blockFormsStyleguide" class="form-wrapper">
            <h2 class="h2 title-styleguide">Form</h2>

            {# Input #}
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(form.txtName01) }}
                    {{ form_row(form.txtName02) }}
                    {{ form_row(form.txtName03) }}
                    {{ form_row(form.txtName04) }}
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="form-group is-required">
                        {{ tab|raw }}&lt;label for="">&lt;/label>
                        {{ tab|raw }}&lt;input type="text" class="form-control" value="" placeholder="">
                        {{ tab|raw }}&lt;small class="form-text">&lt;/small>
                    &lt;/div></code>
                </pre>
            </div>

            <hr>

            {# Select #}
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(form.selectName01) }}
                    {{ form_row(form.selectName02) }}
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="form-group">
                        {{ tab|raw }}&lt;label for="">&lt;/label>
                        {{ tab|raw }}&lt;select name="" id="" class="selectpicker form-control">
                            {{ (tab ~ tab)|raw }}&lt;option value="">&lt;/option>
                        {{ tab|raw }}&lt;/select>
                    &lt;/div></code>
                </pre>
            </div>

            <hr>

            {# File #}
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="inputFile01">Exemple de champ file</label>
                        <div class="custom-file">
                            <input type="file" id="inputFile01" name="inputFile01" class="custom-file-input">
                            <label for="inputFile01" class="custom-file-label form-control custom-file-placeholder">{{ 'app.ui.form.file_none'|trans }}</label>
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button">{{ 'app.ui.form.file_browse'|trans }}</button>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="inputFile02">Exemple de champ file</label>
                        <div class="custom-file">
                            <input type="file" id="inputFile02" name="inputFile02" class="custom-file-input" disabled>
                            <label for="inputFile02" class="custom-file-label form-control custom-file-placeholder">{{ 'app.ui.form.file_none'|trans }}</label>
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button">{{ 'app.ui.form.file_browse'|trans }}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="form-group">
                        {{ tab|raw }}&lt;label for="">&lt;/label>
                        {{ tab|raw }}&lt;div class="custom-file">
                            {{ (tab ~ tab)|raw }}&lt;input type="file" id="" name="" class="custom-file-input">
                            {{ (tab ~ tab)|raw }}&lt;label for="" class="custom-file-label form-control custom-file-placeholder">&lt;/label>
                            {{ (tab ~ tab)|raw }}&lt;div class="input-group-append">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;button class="btn btn-primary" type="button">&lt;/button>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>

            <hr>

            {# Input group #}
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="">Exemple de champ avec bouton</label>
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <div class="input-group-append">
                                <button class="btn btn-square btn-primary" type="button">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="form-group">
                        {{ tab|raw }}&lt;label for="">&lt;/label>
                        {{ tab|raw }}&lt;div class="input-group">
                            {{ (tab ~ tab)|raw }}&lt;input type="text" class="form-control">
                            {{ (tab ~ tab)|raw }}&lt;div class="input-group-append">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;button class="btn btn-square btn-primary" type="button">&lt;/button>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="">Exemple de champ avec element groupé</label>
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <div class="input-group-append">
                                <span class="input-group-text"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="form-group">
                        {{ tab|raw }}&lt;label for="">&lt;/label>
                        {{ tab|raw }}&lt;div class="input-group">
                            {{ (tab ~ tab)|raw }}&lt;input type="text" class="form-control">
                            {{ (tab ~ tab)|raw }}&lt;div class="input-group-append">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="input-group-text">&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="input-group input-search">
                            <input type="text" class="form-control" placeholder="Je recherche...">
                            <div class="input-group-append">
                                <button class="btn btn-square" type="button">{% include '@SyliusShop/Icons/search.html.twig' %}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="input-group input-search">
                        {{ tab|raw }}&lt;input type="text" class="form-control" placeholder="">
                        {{ tab|raw }}&lt;div class="input-group-append">
                            {{ (tab ~ tab)|raw }}&lt;button class="btn btn-square" type="button">
                                {{ (tab ~ tab ~ tab)|raw }}{&#37; include '@SyliusShop/Icons/search.html.twig' &#37;}
                            {{ (tab ~ tab)|raw }}&lt;/button>
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>

            <hr>

            {# Textarea #}
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(form.txtareaName01) }}
                    {{ form_row(form.txtareaName02) }}
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="form-group">
                        {{ tab|raw }}&lt;label for="">&lt;/label>
                        {{ tab|raw }}&lt;textarea name="" id="" class="form-control">&lt;/textarea>
                    &lt;/div></code>
                </pre>
            </div>

            <hr>

            {# checkbox/radio/switch #}
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(form.customCheckbox01) }}
                    {{ form_row(form.customCheckbox02) }}
                </div>
                <pre class="col-md-6">
                    <code>&lt;fieldset class="form-group">
                        {{ tab|raw }}&lt;legend class="col-form-label">&lt;/legend>
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-checkbox">
                            {{ (tab ~ tab)|raw }}&lt;input type="checkbox" class="custom-control-input" name="" id="" value="">
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-field">&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-text">&lt;/span>
                        {{ tab|raw }}&lt;/label>
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-checkbox">
                            {{ (tab ~ tab)|raw }}...
                        {{ tab|raw }}&lt;/label>
                    &lt;/fieldset></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(form.customRadio01) }}
                    {{ form_row(form.customRadio02) }}
                </div>
                <pre class="col-md-6">
                    <code>&lt;fieldset class="form-group">
                        {{ tab|raw }}&lt;legend class="col-form-label">&lt;/legend>
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-radio">
                            {{ (tab ~ tab)|raw }}&lt;input type="radio" class="custom-control-input" name="" id="" value="">
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-field">&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-text">&lt;/span>
                        {{ tab|raw }}&lt;/label>
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-radio">
                            {{ (tab ~ tab)|raw }}...
                        {{ tab|raw }}&lt;/label>
                    &lt;/fieldset></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(form.customSwitch01) }}
                    {{ form_row(form.customSwitch02) }}
                </div>
                <pre class="col-md-6">
                    <code>&lt;fieldset class="form-group">
                        {{ tab|raw }}&lt;legend class="col-form-label">&lt;/legend>
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-switch">
                            {{ (tab ~ tab)|raw }}&lt;input type="checkbox" class="custom-control-input" name="" id="" value="">
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-field">&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-text">&lt;/span>
                        {{ tab|raw }}&lt;/label>
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-switch">
                            {{ (tab ~ tab)|raw }}...
                        {{ tab|raw }}&lt;/label>
                    &lt;/fieldset></code>
                </pre>
            </div>

            <hr>

            {# Quantité #}
            <div class="row">
                <div class="col-6">
                    <div class="form-group">
                        <label for="">Quantité</label>
                        <input type="number" value="500" min="0" max="1000" step="10" class="input-number"/>
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="form-group">
                        {{ tab|raw }}&lt;label for="">&lt;/label>
                        {{ tab|raw }}&lt;input type="number" value="" min="" max="" step="" class="input-number"/>
                    &lt;/div></code>
                </pre>
            </div>

            <hr>

            <div class="alert alert-info">Validation des champs</div>
            <div class="row">
                <div class="col-md">
                    <div class="form-group">
                        <label for="">Exemple de champ text</label>
                        <input type="text" class="form-control active is-valid" value="Exemple de champ rempli avec succes">
                    </div>

                    <div class="form-group">
                        <label for="">Exemple de champ text</label>
                        <input type="text" class="form-control active is-invalid" value="Exemple de champ rempli avec error">
                        <div class="invalid-feedback">Message d'erreur</div>
                    </div>


                    <div class="form-group">
                        <label for="">Exemple de champ select</label>
                        <select name="" id="" class="selectpicker form-control is-invalid">
                            <option value="">Exemple de texte</option>
                            <option value="">Item 1</option>
                            <option value="">Item 2</option>
                        </select>
                        <div class="invalid-feedback">Message d'erreur</div>
                    </div>

                </div>
                <div class="col-md">
                    <div class="form-group">
                        <label for="">Exemple de champ textarea</label>
                        <textarea name="" id="" rows="6" class="form-control is-invalid"></textarea>
                        <div class="invalid-feedback">Message d'erreur</div>
                    </div>

                    <div class="form-group">
                        <label for="checkbox_3" class="custom-control custom-checkbox mb-2">
                            <input type="checkbox" name="checkbox" id="checkbox_3" value="Item 1" class="custom-control-input is-invalid">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">Exemple de checkbox</span>
                        </label>
                        <label for="radio_3" class="custom-control custom-radio mb-2">
                            <input type="radio" name="checkbox" id="radio_3" value="Item 1" class="custom-control-input is-invalid">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">Exemple de radio</span>
                        </label>
                        <label for="switch_3" class="custom-control custom-switch mb-2">
                            <input type="checkbox" name="checkbox" id="switch_3" value="Item 1" class="custom-control-input is-invalid">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">Exemple de checkbox</span>
                        </label>
                    </div>
                </div>
            </div>
        </section>
        {# FORM// #}

        {# //TABLES #}
        <section id="blockTableStyleguide" class="table-wrapper">
            <h2 class="h2 title-styleguide">Tableaux</h2>

            <div class="row">
                <div class="col-md">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First</th>
                                <th>Last</th>
                                <th>Handle</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@markotto</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@jacobthronton</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@larrythebidouhyeah</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <pre class="col-md">
                    <code>&lt;table class="table">
                        {{ tab|raw }}&lt;thead>
                            {{ (tab ~ tab)|raw }}&lt;tr>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                            {{ (tab ~ tab)|raw }}&lt;/tr>
                        {{ tab|raw }}&lt;/thead>
                        {{ tab|raw }}&lt;tbody>
                            {{ (tab ~ tab)|raw }}&lt;tr>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                            {{ (tab ~ tab)|raw }}&lt;/tr>
                        {{ tab|raw }}&lt;/tbody>
                    &lt;/table></code>
                </pre>
            </div>

            <div class="row">
                <div class="col-md">
                    <table class="table">
                        <tbody>
                            <tr>
                                <th>Caractéristique&nbsp;1</th>
                                <td>Nulla et orci erat</td>
                            </tr>
                            <tr>
                                <th>Caractéristique&nbsp;2</th>
                                <td>Nulla et orci erat</td>
                            </tr>
                            <tr>
                                <th>Caractéristique&nbsp;3</th>
                                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies feugiat purus nec lobortis. Donec vitae venenatis enim. Aliquam porta libero risus, eget euismod sem eleifend vel.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <pre class="col-md">
                    <code>&lt;table class="table">
                        {{ tab|raw }}&lt;tbody>
                            {{ (tab ~ tab)|raw }}&lt;tr>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                            {{ (tab ~ tab)|raw }}&lt;/tr>
                            {{ (tab ~ tab)|raw }}&lt;tr>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                            {{ (tab ~ tab)|raw }}&lt;/tr>
                        {{ tab|raw }}&lt;/tbody>
                    &lt;/table></code>
                </pre>
            </div>

            <div class="row bg-dark mb-0 pt-4">
                <div class="col-md">
                    <table class="table table-dark">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First</th>
                                <th>Last</th>
                                <th>Handle</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@markotto</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@jacobthronton</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@larrythebidouhyeah</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <pre class="col-md">
                    <code>&lt;table class="table table-dark">
                        {{ tab|raw }}&lt;thead>
                            {{ (tab ~ tab)|raw }}&lt;tr>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                            {{ (tab ~ tab)|raw }}&lt;/tr>
                        {{ tab|raw }}&lt;/thead>
                        {{ tab|raw }}&lt;tbody>
                            {{ (tab ~ tab)|raw }}&lt;tr>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                            {{ (tab ~ tab)|raw }}&lt;/tr>
                        {{ tab|raw }}&lt;/tbody>
                    &lt;/table></code>
                </pre>
            </div>

            <div class="row bg-dark mt-0">
                <div class="col-md">
                    <table class="table table-dark">
                        <tbody>
                            <tr>
                                <th>Caractéristique&nbsp;1</th>
                                <td>Nulla et orci erat</td>
                            </tr>
                            <tr>
                                <th>Caractéristique&nbsp;2</th>
                                <td>Nulla et orci erat</td>
                            </tr>
                            <tr>
                                <th>Caractéristique&nbsp;3</th>
                                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies feugiat purus nec lobortis. Donec vitae venenatis enim. Aliquam porta libero risus, eget euismod sem eleifend vel.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <pre class="col-md">
                    <code>&lt;table class="table table-dark">
                        {{ tab|raw }}&lt;tbody>
                            {{ (tab ~ tab)|raw }}&lt;tr>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                            {{ (tab ~ tab)|raw }}&lt;/tr>
                            {{ (tab ~ tab)|raw }}&lt;tr>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;th>&lt;/th>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;td>&lt;/td>
                            {{ (tab ~ tab)|raw }}&lt;/tr>
                        {{ tab|raw }}&lt;/tbody>
                    &lt;/table></code>
                </pre>
            </div>
        </section>
        {# TABLES// #}

        {# //COMPONENTS #}
        <section id="blockComponentStyleguide" class="component-wrapper">
            <h2 class="h2 title-styleguide">Composants</h2>

            {# Badge #}
            <div class="row">
                <div class="col-md">
                    <span class="badge badge-primary mb-1">Primary</span><br>
                    <span class="badge badge-secondary mb-1">Secondary</span><br>
                    <span class="badge badge-success mb-1">Success</span><br>
                    <span class="badge badge-danger mb-1">Danger</span><br>
                    <span class="badge badge-warning mb-1">Warning</span><br>
                    <span class="badge badge-info mb-1">Info</span><br>
                    <span class="badge badge-light mb-1">Light</span><br>
                    <span class="badge badge-dark mb-1">Dark</span>
                </div>
                <pre class="col-md">
                    <code>&lt;span class="badge badge-primary">&lt;/span>
                        &lt;span class="badge badge-secondary">&lt;/span>
                        &lt;span class="badge badge-success">&lt;/span>
                        &lt;span class="badge badge-danger">&lt;/span>
                        &lt;span class="badge badge-warning">&lt;/span>
                        &lt;span class="badge badge-info">&lt;/span>
                        &lt;span class="badge badge-light">&lt;/span>
                        &lt;span class="badge badge-dark">&lt;/span></code>
                </pre>
            </div>

            <hr>

            {# Collapse/Accordions #}
            <div class="row">
                <div class="col-md">
                    <div class="collapse-group custom-collapse">
                        <div class="collapse-wrapper">
                            <button class="collapse-header title-label" type="button" data-collapse="collapse_0">
                                Nom catégorie de filtre
                            </button>

                            <div id="collapse_0" class="collapse-panel">
                                <div class="collapse-body">
                                    Exemple de contenu
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;div class="collapse-group custom-collapse">
                        {{ (tab)|raw }}&lt;div class="collapse-wrapper">
                            {{ (tab ~ tab)|raw }}&lt;button class="collapse-header title-label" type="button" data-collapse="<b>ID_COLLAPSE</b>">
                                {{ (tab ~ tab ~ tab)|raw }}<b>TITRE</b>
                            {{ (tab ~ tab)|raw }}&lt;/button>

                            {{ (tab ~ tab)|raw }}&lt;div id="<b>ID_COLLAPSE</b>" class="collapse-panel">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="collapse-body">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}<b>CONTENU</b>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ (tab)|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <div class="collapse-group custom-collapse">
                        {% for i in 1..5 %}
                            <div class="collapse-wrapper">
                                <button class="collapse-header title-label {% if i==1 %}active{% endif %}" type="button" data-collapse="collapse_{{ i }}">
                                    Exemple de titre Accordéon #{{ i }}
                                </button>

                                <div id="collapse_{{ i }}" class="collapse-panel">
                                    <div class="collapse-body">
                                        Exemple de contenu #{{ i }}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;div class="collapse-group custom-collapse">
                        {{ tab|raw }}&lt;div class="collapse-wrapper">
                            {{ (tab ~ tab)|raw }}&lt;button class="collapse-header title-label active" type="button" data-collapse="<b>ID_COLLAPSE</b>">
                                {{ (tab ~ tab ~ tab)|raw }}<b>TITRE</b>
                            {{ (tab ~ tab)|raw }}&lt;/button>

                            {{ (tab ~ tab)|raw }}&lt;div id="<b>ID_COLLAPSE</b>" class="collapse-panel">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="collapse-body">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}<b>CONTENU</b>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ tab|raw }}&lt;/div>
                        {{ tab|raw }}&lt;div class="collapse-wrapper">
                            {{ (tab ~ tab)|raw }}&lt;button class="collapse-header title-label" type="button" data-collapse="<b>ID_COLLAPSE_2</b>">
                                {{ (tab ~ tab ~ tab)|raw }}<b>TITRE</b>
                            {{ (tab ~ tab)|raw }}&lt;/button>

                            {{ (tab ~ tab)|raw }}&lt;div id="<b>ID_COLLAPSE_2</b>" class="collapse-panel">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="collapse-body">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}<b>CONTENU</b>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ tab|raw }}&lt;/div>
                        {{ tab|raw }}&lt;div class="collapse-wrapper">
                            {{ (tab ~ tab)|raw }}...
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <div class="collapse-group custom-accordion">
                        {% for i in 1..5 %}
                            <div class="collapse-wrapper">
                                <button class="collapse-header title-label {% if i==1 %}active{% endif %}" type="button" data-collapse="accordion_{{ i }}">
                                    Exemple de titre Accordéon #{{ i }}
                                </button>

                                <div id="accordion_{{ i }}" class="collapse-panel">
                                    <div class="collapse-body">
                                        Exemple de contenu #{{ i }}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;div class="collapse-group custom-accordion">
                        {{ tab|raw }}&lt;div class="collapse-wrapper">
                            {{ (tab ~ tab)|raw }}&lt;button class="collapse-header title-label active" type="button" data-collapse="<b>ID_COLLAPSE</b>">
                                {{ (tab ~ tab ~ tab)|raw }}<b>TITRE</b>
                            {{ (tab ~ tab)|raw }}&lt;/button>

                            {{ (tab ~ tab)|raw }}&lt;div id="<b>ID_COLLAPSE</b>" class="collapse-panel">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="collapse-body">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}<b>CONTENU</b>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ tab|raw }}&lt;/div>
                        {{ tab|raw }}&lt;div class="collapse-wrapper">
                            {{ (tab ~ tab)|raw }}&lt;button class="collapse-header title-label" type="button" data-collapse="<b>ID_COLLAPSE_2</b>">
                                {{ (tab ~ tab ~ tab)|raw }}<b>TITRE</b>
                            {{ (tab ~ tab)|raw }}&lt;/button>

                            {{ (tab ~ tab)|raw }}&lt;div id="<b>ID_COLLAPSE_2</b>" class="collapse-panel">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="collapse-body">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}<b>CONTENU</b>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ tab|raw }}&lt;/div>
                        {{ tab|raw }}&lt;div class="collapse-wrapper">
                            {{ (tab ~ tab)|raw }}...
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>

            <hr>

            {# Fil ariane #}
            <div class="row">
                <div class="col-md">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mt-0">
                            <li class="breadcrumb-item">
                                <a href="/">Accueil</a>
                            </li>
                            <li class="breadcrumb-item">Niveau 1</li>
                            <li class="breadcrumb-item">
                                <a href="#">Niveau 2</a>
                            </li>
                            <li class="breadcrumb-item active">Niveau 3</li>
                        </ol>
                    </nav>
                </div>
                <pre class="col-md">
                    <code>&lt;nav aria-label="breadcrumb">
                        {{ tab|raw }}&lt;ol class="breadcrumb">
                            {{ (tab ~ tab)|raw }}&lt;li class="breadcrumb-item">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;a href="/">Accueil&lt;/a>
                            {{ (tab ~ tab)|raw }}&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="breadcrumb-item">Niveau 1&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="breadcrumb-item">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;a href="#">Niveau 2&lt;/a>
                            {{ (tab ~ tab)|raw }}&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="breadcrumb-item active">Niveau 3&lt;/li>
                        {{ tab|raw }}&lt;/ol>
                    &lt;/nav></code>
                </pre>
            </div>

            {# Pagination #}
            <div class="row">
                <div class="col-md">
                    <nav class="pagination-wrapper pagination-box mb-5">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">‹</span>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">›</span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>

                    <nav class="pagination-wrapper pagination-box">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">‹</span>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">›</span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <pre class="col-md">
                    <code>&lt;nav class="pagination-wrapper pagination-box">
                        {{ tab|raw }}&lt;ul class="pagination">
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;a class="page-link" href="#" aria-label="Previous">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span aria-hidden="true">‹&lt;/span>
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="sr-only">Previous&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/a>
                            {{ (tab ~ tab)|raw }}&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">&lt;a class="page-link" href="#">1&lt;/a>&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">&lt;a class="page-link" href="#">2&lt;/a>&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">&lt;a class="page-link" href="#">3&lt;/a>&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;a class="page-link" href="#" aria-label="Next">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span aria-hidden="true">›&lt;/span>
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="sr-only">Next&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/a>
                            {{ (tab ~ tab)|raw }}&lt;/li>
                        {{ tab|raw }}&lt;/ul>
                    &lt;/nav></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <nav class="pagination-wrapper pagination-link mb-5">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">{% include '@SyliusShop/Icons/arrow.html.twig' %}</span>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">{% include '@SyliusShop/Icons/arrow.html.twig' %}</span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav class="pagination-wrapper pagination-link">
                        <ul class="pagination">
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">{% include '@SyliusShop/Icons/arrow.html.twig' %}</span>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item active"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">{% include '@SyliusShop/Icons/arrow.html.twig' %}</span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <pre class="col-md">
                    <code>&lt;nav class="pagination-wrapper pagination-link">
                        {{ tab|raw }}&lt;ul class="pagination">
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;a class="page-link" href="#" aria-label="Previous">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span aria-hidden="true">
                                        {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}{&#37; include '@SyliusShop/Icons/arrow.html.twig' &#37;}
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;/span>
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="sr-only">Previous&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/a>
                            {{ (tab ~ tab)|raw }}&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">&lt;a class="page-link" href="#">1&lt;/a>&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">&lt;a class="page-link" href="#">2&lt;/a>&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">&lt;a class="page-link" href="#">3&lt;/a>&lt;/li>
                            {{ (tab ~ tab)|raw }}&lt;li class="page-item">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;a class="page-link" href="#" aria-label="Next">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span aria-hidden="true">
                                        {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}{&#37; include '@SyliusShop/Icons/arrow.html.twig' &#37;}
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;/span>
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="sr-only">Next&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/a>
                            {{ (tab ~ tab)|raw }}&lt;/li>
                        {{ tab|raw }}&lt;/ul>
                    &lt;/nav></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <nav class="pagination-wrapper pagination-btn">
                        <p>Vous avez vu XX produits sur XXXX</p>
                        <button class="btn btn-outline-primary">voir plus de produits</button>
                    </nav>
                </div>
                <pre class="col-md">
                    <code>&lt;nav class="pagination-wrapper pagination-btn">
                        {{ tab|raw }}&lt;p>Vous avez vu XX produits sur XXXX&lt;/p>
                        {{ tab|raw }}&lt;button class="btn btn-outline-primary">voir plus de produits&lt;/button>
                    &lt;/nav></code>
                </pre>
            </div>

            {# Back to top #}
            <div class="row">
                <div class="col-md">
                    <a href="#" class="btn-back-top">
                        retour menu
                    </a>
                </div>
                <pre class="col-md">
                    <code>&lt;a href="#" class="btn-back-top">
                        {{ tab|raw }}retour menu
                    &lt;/a></code>
                </pre>
            </div>

            <hr>

            {# Tooltip #}
            <div class="row">
                <div class="col-md">
                    <button type="button" class="btn btn-primary btn-help" data-toggle="tooltip" title="<p class='title-label'>Titre popover</p>Sit lorem ipsum dolor Consec tetur adipisi Eiusmod tempor">?</button>
                </div>
                <pre class="col-md">
                    <code>&lt;button type="button" class="btn btn-primary btn-help" data-toggle="tooltip" title="&lt;p class='title-label'>Titre popover&lt;/p>Sit lorem ipsum dolor Consec tetur adipisi Eiusmod tempor">?&lt;/button></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                        Tooltip on top
                    </button><br>
                    <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                        Tooltip on right
                    </button><br>
                    <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                        Tooltip on bottom
                    </button><br>
                    <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                        Tooltip on left
                    </button>
                </div>
                <pre class="col-md">
                    <code>&ltbutton type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="...">
                        {{ tab|raw }}...
                    &lt/button>

                    &ltbutton type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="...">
                        {{ tab|raw }}...
                    &lt/button>

                    &ltbutton type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="...">
                        {{ tab|raw }}...
                    &lt/button>

                    &ltbutton type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="...">
                        {{ tab|raw }}...
                    &lt/button></code>
                </pre>
            </div>

            <hr>

            {# Bar #}
            <div class="row">
                <div class="col-md">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30 %</div>
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;div class="progress">
                        {{ tab|raw }}&lt;div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30 %&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div data-simplebar data-simplebar-auto-hide="false">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda blanditiis hic
                            inventore libero magnam, modi quisquam quod sint tenetur veniam! Ab eos eum fuga inventore
                            itaque iure nemo quae quasi!
                        </p>
                        <p>Consequatur ea excepturi nemo praesentium provident quos rem. Ab architecto, atque dolore
                            dolores, earum est explicabo hic id itaque laborum mollitia nobis odio, odit officia
                            possimus quia quos rem voluptatum.
                        </p>
                        <p>Alias culpa, deleniti dolor eaque iusto laborum, molestias nihil obcaecati officiis
                            pariatur porro quas quia quos repellendus reprehenderit repudiandae totam. Corporis
                            distinctio doloremque dolorum excepturi iste maiores officia quis voluptates!
                        </p>
                        <p>Aut beatae, cupiditate dicta dolore eaque error est exercitationem fugit harum impedit
                            inventore ipsam itaque laborum, libero maxime mollitia, nam optio provident quam quidem
                            quisquam ratione reprehenderit suscipit ut velit?
                        </p>
                        <p>Accusamus consequatur corporis delectus dolorem dolores ea eaque eius error esse est eum
                            eveniet expedita fuga, fugiat impedit ipsam laborum maxime officiis quasi sint ullam veniam
                            vitae voluptate? Cum, molestiae?
                        </p>
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div data-simplebar data-simplebar-auto-hide="false">
                            {{ tab|raw }}...
                        &lt;/div></code>
                </pre>
            </div>

            <hr>

            {# Show/Hide #}
            <div class="row">
                <div class="col-md-6">
                    <p class="h3">Afficher/masquer</p>
                    <div class="show-hide" data-height="105" data-height-md="125" data-height-lg="135">
                        <div class="show-hide-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda blanditiis hic
                                inventore libero magnam, modi quisquam quod sint tenetur veniam! Ab eos eum fuga inventore
                                itaque iure nemo quae quasi!
                            </p>
                            <p>Consequatur ea excepturi nemo praesentium provident quos rem. Ab architecto, atque dolore
                                dolores, earum est explicabo hic id itaque laborum mollitia nobis odio, odit officia
                                possimus quia quos rem voluptatum.
                            </p>
                            <p>Alias culpa, deleniti dolor eaque iusto laborum, molestias nihil obcaecati officiis
                                pariatur porro quas quia quos repellendus reprehenderit repudiandae totam. Corporis
                                distinctio doloremque dolorum excepturi iste maiores officia quis voluptates!
                            </p>
                        </div>
                        <div class="show-hide-footer">
                            <div class="show-hide-footer-container">
                                <a href="#" class="show-hide-footer-link">
                                    <span class="text-read-more">{{ 'app.ui.read_more' | trans }}</span>
                                    <span class="text-read-less hidden">{{ 'app.ui.read_less' | trans }}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="show-hide" data-height="105" data-height-md="125" data-height-lg="90">
                            {{ tab|raw }}&lt;div class="show-hide-body">
                                {{ (tab ~ tab)|raw }}...
                            {{ tab|raw }}&lt;/div>
                            {{ tab|raw }}&lt;div class="show-hide-footer">
                                {{ (tab ~ tab)|raw }}&lt;div class="show-hide-footer-container">
                                    {{ (tab ~ tab ~ tab)|raw }}&lt;a href="#" class="show-hide-footer-link">
                                        {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="text-read-more">
                                            {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}{&#123; 'app.ui.read_more' | trans &#125;}
                                        {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;/span>
                                        {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="text-read-less hidden">
                                            {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}{&#123; 'app.ui.read_less' | trans &#125;}
                                        {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;/span>
                                    {{ (tab ~ tab ~ tab)|raw }}&lt;/a>
                                {{ (tab ~ tab)|raw }}&lt;/div>
                            {{ tab|raw }}&lt;/div>
                        &lt;/div></code>
                </pre>
            </div>

            <hr>

            {# Reviews #}
            <div class="row">
                <div class="col-md">
                    {% for i in 1..2 %}
                    <div class="product-review">
                        <header class="product-review-header">
                            <div>
                                <span class="review-author">Martin</span>
                                <span class="review-date">le 15/04/2019</span>
                            </div>

                            <div class="review-rating-wrapper">
                                <div class="review-rating">
                                    <div data-rating="4" data-max-rating="5">
                                        <div>
                                            <span data-rating-value="1"><i class="fas fa-star"></i></span>
                                            <span data-rating-value="2"><i class="fas fa-star"></i></span>
                                            <span data-rating-value="3"><i class="fas fa-star"></i></span>
                                            <span data-rating-value="4"><i class="fas fa-star"></i></span>
                                            <span data-rating-value="5"><i class="fas fa-star"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="review-date-order">Commande du 21/03/2019</div>
                            </div>
                        </header>

                        <strong class="review-title">Parfait pour débuter !</strong>
                        <div class="review-content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus, nulla ut commodo sagittis, sapien dui mattis dui, non pulvinar lorem felis nec erat</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <pre class="col-md">
                    <code>&lt;div class="product-review">
                        {{ tab|raw }}&lt;header class="product-review-header">
                            {{ (tab ~ tab)|raw }}&lt;div>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="review-author">...&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="review-date">...&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;/div>

                            {{ (tab ~ tab)|raw }}&lt;div class="review-rating-wrapper">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="review-rating">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;div data-rating="4" data-max-rating="5" style="pointer-events: none;">&lt;/div>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="review-date-order">...&lt;/div>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ tab|raw }}&lt;/header>

                        {{ tab|raw }}&lt;strong class="review-title">...&lt;/strong>
                        {{ tab|raw }}&lt;div class="review-content">
                            {{ (tab ~ tab)|raw }}&lt;p>...&lt;/p>
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>
        </section>
        {# COMPONENTS// #}

        {# //MODAL #}
        <section id="blockModalStyleguide" class="modal-wrapper">
            <h2 class="h2 title-styleguide">Modals</h2>

            <div class="row">
                <div class="col-md">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">Modal default</button>
                </div>
                <pre class="col-md">
                    <code>&lt;button type="button" class="btn btn-primary"data-toggle="modal" data-target="#confirmation-default">&lt;/button></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirmation-modal">Modal confirm</button>
                </div>
                <pre class="col-md">
                    <code>&lt;button type="button" class="btn btn-primary"data-toggle="modal" data-target="#confirmation-modal">&lt;/button></code>
                </pre>
            </div>
        </section>
        {# MODAL// #}

        {# //SELECTION #}
        <section id="blockSelectionStyleguide" class="selection-wrapper">
            <h2 class="h2 title-styleguide">Sélection</h2>

            {# Selected filter #}
            <div class="row">
                <div class="col-md">
                    <a href="#" class="filter-selected">
                        {% include '@SyliusShop/Icons/cross.html.twig' %}
                        filtre sélectionné
                    </a>
                </div>
                <pre class="col-md">
                    <code>&lt;a href="#" class="filter-selected">
                            {{ tab|raw }}{&#37; include '@SyliusShop/Icons/cross.html.twig' &#37;}
                            {{ tab|raw }}...
                        &lt;/a></code>
                </pre>
            </div>

            <hr>

            {# Color #}
            <div class="row">
                <div class="col-md">
                    <div class="filter-color-wrapper">
                        <label for="color-1" class="custom-checkbox-color">
                            <input type="checkbox" class="custom-control-input" name="color[]" id="color-1" value="white">
                            <span class="custom-control-field"></span>
                        </label>
                        <label for="color-2" class="custom-checkbox-color">
                            <input type="checkbox" class="custom-control-input" name="color[]" id="color-2" value="white">
                            <span class="custom-control-field bg-black"></span>
                        </label>
                        <label for="color-3" class="custom-checkbox-color">
                            <input type="checkbox" class="custom-control-input" name="color[]" id="color-3" value="white">
                            <span class="custom-control-field bg-dark"></span>
                        </label>
                        <label for="color-4" class="custom-checkbox-color">
                            <input type="checkbox" class="custom-control-input" name="color[]" id="color-4" value="white">
                            <span class="custom-control-field bg-primary"></span>
                        </label>
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;label for="" class="custom-checkbox-color">
                            {{ tab|raw }}&lt;input type="checkbox" class="custom-control-input" name="" id="" value="">
                            {{ tab|raw }}&lt;span class="custom-control-field" style="<b>background:#000</b>">&lt;/span>
                        &lt;/label></code>
                </pre>
            </div>

            <hr>

            {# Process #}
            <div class="row">
                <div class="col-md">
                    <div class="selection-blocks">
                        <label for="selection1" class="custom-control custom-radio selection-block active">
                            <input name="selection" type="radio" class="custom-control-input" id="selection1" checked="checked">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">
                                <span class="selection-block-price price"><span>XX</span>,XX €</span>
                                <span class="selection-block-title h6">
                                    Exemple mode de livraison

                                    <span class="img-wrapper">
                                        <img src="http://via.placeholder.com/100x50" class="img-fluid" alt=""/>
                                    </span>
                                </span>
                                <span class="selection-block-description">Undique olim et omnia undique ac amor qui vosmet incredibili reconciliat undique in periculis cum C in impendentibus restituit de Hic olim olim me qui esse maximis periculis Patres meus.</span>
                            </span>
                        </label>
                        <label for="selection2" class="custom-control custom-radio selection-block">
                            <input name="selection" type="radio" class="custom-control-input" id="selection2">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">
                                <span class="selection-block-price price"><span>XX</span>,XX €</span>
                                <span class="selection-block-title h6">Exemple mode de livraison</span>
                                <span class="selection-block-description">Undique olim et omnia undique ac amor qui</span>
                            </span>
                        </label>
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;div class="selection-blocks">
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-radio selection-block active">
                            {{ (tab ~ tab)|raw }}&lt;input name="" type="radio" class="custom-control-input" id="" checked="checked">
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-field">&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-text">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-price price">...&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-title h6">...&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-description">...&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;/span>
                        {{ tab|raw }}&lt;/label>
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-radio selection-block">
                            {{ (tab ~ tab)|raw }}&lt;input name="" type="radio" class="custom-control-input" id="">
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-field">&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-text">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-price price">...&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-title h6">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}...
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="img-wrapper">
                                        {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}&lt;img src="" class="img-fluid" alt=""/>
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-description">...&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;/span>
                        {{ tab|raw }}&lt;/label>
                    &lt;/div></code>
                </pre>
            </div>
            <div class="row">
                <div class="col-md">
                    <div class="selection-blocks">
                        <label for="selection2_1" class="custom-control custom-radio selection-block active">
                            <input name="selection2" type="radio" class="custom-control-input" id="selection2_1" checked="checked">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">
                                <span class="selection-block-title h6">
                                    Exemple mode de livraison
                                    <span class="img-wrapper">
                                        <img src="http://via.placeholder.com/100x50" class="img-fluid" alt=""/>
                                    </span>
                                </span>
                                <span class="selection-block-description">Undique olim et omnia undique ac amor qui vosmet incredibili reconciliat undique in periculis cum C in impendentibus restituit de Hic olim olim me qui esse maximis periculis Patres meus.</span>
                            </span>
                        </label>
                        <label for="selection1_2" class="custom-control custom-radio selection-block">
                            <input name="selection2" type="radio" class="custom-control-input" id="selection1_2">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">
                                <span class="selection-block-title h6">Exemple mode de livraison</span>
                                <span class="selection-block-description">Undique olim et omnia undique ac amor qui</span>
                            </span>
                        </label>
                    </div>
                </div>
                <pre class="col-md">
                    <code>&lt;div class="selection-blocks">
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-radio selection-block active">
                            {{ (tab ~ tab)|raw }}&lt;input name="" type="radio" class="custom-control-input" id="" checked="checked">
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-field">&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-text">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-title h6">
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}...
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="img-wrapper">
                                        {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}&lt;img src="" class="img-fluid" alt=""/>
                                    {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-description">...&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;/span>
                        {{ tab|raw }}&lt;/label>
                        {{ tab|raw }}&lt;label for="" class="custom-control custom-radio selection-block">
                            {{ (tab ~ tab)|raw }}&lt;input name="" type="radio" class="custom-control-input" id="">
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-field">&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;span class="custom-control-text">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-title h6">...&lt;/span>
                                {{ (tab ~ tab ~ tab)|raw }}&lt;span class="selection-block-description">...&lt;/span>
                            {{ (tab ~ tab)|raw }}&lt;/span>
                        {{ tab|raw }}&lt;/span>
                    &lt;/div></code>
                </pre>
            </div>

        </section>
        {# SELECTION// #}

        {# //SLIDER #}
        <section id="blockSliderStyleguide" class="slider-wrapper">
            <h2 class="h2 title-styleguide">Sliders</h2>

            <div class="row">
                <div class="col-md-6">
                    <div class="default-slider">
                        {% for i in 1..5 %}
                            <div>
                                <img data-lazy="http://via.placeholder.com/550?text=Image {{ i }}" class="w-100" alt="Image {{ i }}" />
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="default-slider">
                        {{ tab|raw }}&lt;div>
                            {{ (tab ~ tab)|raw }}...
                        {{ tab|raw }}&lt;/div>
                        {{ tab|raw }}&lt;div>
                            {{ (tab ~ tab)|raw }}...
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="product-show-images-slider slick-thumbnails">
                        {% for i in 1..8 %}
                            <div>
                                <a href="http://via.placeholder.com/900?text=Image {{ i }}" data-lightbox="sylius-product-image">
                                    <img data-lazy="http://via.placeholder.com/550?text=Image {{ i }}" class="w-100" alt="Image {{ i }}" />
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="product-show-images-thumbnail slick-thumbnails-dots">
                        {% for i in 1..8 %}
                            <div class="slick-dot">
                                <img data-lazy="http://via.placeholder.com/75?text=Image {{ i }}" class="img-fluid" alt="" />
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <pre class="col-md-6">
                    <code>&lt;div class="product-show-images-slider slick-thumbnails">
                        {{ tab|raw }}&lt;div>
                            {{ (tab ~ tab)|raw }}&lt;a href="<b>IMG_ORIGINALE</b>" data-lightbox="sylius-product-image">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;img data-lazy="<b>IMG_LARGE_THUMBNAIL</b>">
                            {{ (tab ~ tab)|raw }}&lt;/a>
                        {{ tab|raw }}&lt;/div>
                        {{ tab|raw }}&lt;div>
                            {{ (tab ~ tab)|raw }}&lt;a href="<b>IMG_ORIGINALE</b>" data-lightbox="sylius-product-image">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;img data-lazy="<b>IMG_LARGE_THUMBNAIL</b>">
                            {{ (tab ~ tab)|raw }}&lt;/a>
                        {{ tab|raw }}&lt;/div>
                    &lt;/div>
                    &lt;div class="product-show-images-thumbnail slick-thumbnails-dots">
                        {{ tab|raw }}&lt;div class="slick-dot">
                            {{ (tab ~ tab)|raw }}&lt;img data-lazy="<b>IMG_SMALL_THUMBNAIL</b>">
                        {{ tab|raw }}&lt;/div>
                        {{ tab|raw }}&lt;div class="slick-dot">
                            {{ (tab ~ tab)|raw }}&lt;img data-lazy="<b>IMG_SMALL_THUMBNAIL</b>">
                        {{ tab|raw }}&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="cross-slider slick-arrow-btn">
                        {% for i in 1..8 %}
                            <div class="item">
                                <div class="col">
                                    <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>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="cross-slider-dots"></div>
                </div>
                <pre class="col-md-12 margin-top-2">
                    <code>&lt;div class="cross-slider">
                        {{ (tab)|raw }}&lt;div class="item">
                            {{ (tab ~ tab)|raw }}&lt;div class="col">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="product-box-container">...&lt;/div>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ (tab)|raw }}&lt;/div>
                        {{ (tab)|raw }}&lt;div class="item">
                            {{ (tab ~ tab)|raw }}&lt;div class="col">
                                {{ (tab ~ tab ~ tab)|raw }}&lt;div class="product-box-container">...&lt;/div>
                            {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ (tab)|raw }}&lt;/div>
                        {{ (tab)|raw }}&lt;div class="cross-slider-dots">&lt;/div>
                    &lt;/div></code>
                </pre>
            </div>
        </section>
        {# SLIDER// #}

        {# //BLOCKS #}
        <section id="blockBlocksStyleguide" class="block-wrapper">
            <h2 class="h2 title-styleguide">Blocs</h2>

            {# PRODUCT #}
            <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 %}
                <pre class="col-12 mt-0"><code>{&#37; include '@SyliusShop/Product/Box/_content.html.twig' &#37;}

                &lt;div class="row list-product">
                    {{ (tab)|raw }}&lt;div class="col-6 col-md-3 d-flex">
                        {{ (tab ~ tab)|raw }}&lt;div class="product-box-container">
                            {{ (tab ~ tab ~ tab)|raw }}&lt;div class="product-box-tag">
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="badge badge-secondary">Promo&lt;/span>
                            {{ (tab ~ tab ~ tab)|raw }}&lt;/div>

                            {{ (tab ~ tab ~ tab)|raw }}&lt;a href="" class="product-box-image-wrapper">
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;img src="" alt="" class="w-100">
                            {{ (tab ~ tab ~ tab)|raw }}&lt;/a>

                            {{ (tab ~ tab ~ tab)|raw }}&lt;div class="product-box-text-wrapper">
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;a href="" class="product-box-name">
                                    {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}&lt;h2 class="product-box-title">&lt;/h2>
                                    {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}&lt;p class="product-box-complementary-name">&lt/p>
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;/a>

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

                                    {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}&lt;div class="product-box-price-wrapper price-wrapper right">
                                        {{ (tab ~ tab ~ tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="price promo">&lt;span>X&lt;/span>,XX&nbsp;€&lt;/span>
                                        {{ (tab ~ tab ~ tab ~ tab ~ tab ~ tab)|raw }}&lt;span class="price-old">&lt;span>X&lt;/span>,XX&nbsp;€&lt;/span>
                                    {{ (tab ~ tab ~ tab ~ tab ~ tab)|raw }}&lt;/div>
                                {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;/div>
                            {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                        {{ (tab ~ tab)|raw }}&lt;/div>
                    {{ (tab)|raw }}&lt;/div>
                &lt;/div></code></pre>
            </div>
        </section>
        {# BLOCKS// #}

        {# //HELPERS #}
        <section id="blockHelpersStyleguide" class="block-wrapper">
            <h2 class="h2 title-styleguide">Helpers</h2>

            <h3>Espacement</h3>

            <p class="alert alert-info">Les helpers suivants peuvent vous aider à mettre en page des éléments qui n'ont pas encore été définis dans les css.<br>
            <u>Ne pas utiliser les helpers d'espacement de bootstrap</u></p>

            <div class="row">
                <div class="col-lg"><strong>auto</strong></div>
                <div class="col-md">.margin-auto</div>
                <div class="col-md">.margin-top-auto</div>
                <div class="col-md">.margin-right-auto</div>
                <div class="col-md">.margin-bottom-auto</div>
                <div class="col-md">.margin-left-auto</div>
            </div>

            {% for i in 1..5 %}
                <div class="row">
                    <div class="col-lg"><strong>{{ i*10 }} px</strong></div>
                    <div class="col-md">.margin-{{ i }}</div>
                    <div class="col-md">.margin-top-{{ i }}</div>
                    <div class="col-md">.margin-right-{{ i }}</div>
                    <div class="col-md">.margin-bottom-{{ i }}</div>
                    <div class="col-md">.margin-left-{{ i }}</div>
                </div>
            {% endfor %}

            <hr class="mt-0 mb-5">

            {% for i in 1..5 %}
                <div class="row">
                    <div class="col-lg"><strong>{{ i*10 }} px</strong></div>
                    <div class="col-md">.padding-{{ i }}</div>
                    <div class="col-md">.padding-top-{{ i }}</div>
                    <div class="col-md">.padding-right-{{ i }}</div>
                    <div class="col-md">.padding-bottom-{{ i }}</div>
                    <div class="col-md">.padding-left-{{ i }}</div>
                </div>
            {% endfor %}
        </section>
        {# HELPERS// #}
    </div>
{% endblock %}

{% block modal %}
    {% include '@DediSyliusTheme/Modal/_default.html.twig' %}
    {% include '@DediSyliusTheme/Modal/_confirmation.html.twig' %}
{% endblock %}
