Design System Grosfillex

Créé par Dedi.

Blocs

Chaque type de bloc est une combinaison d’informations spécifiques : image, prix, descriptif, call to action… Leur hiérarchie et disposition varient selon le bloc. Ils sont souvent disposés en grille ou en collection.

Produits

T-shirt bull

Nom qui peut prendre plusieurs ligne

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda dignissimos expedita nam.

Issu de PVC recyclable
T-shirt bull

Nom qui peut prendre plusieurs ligne

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda dignissimos expedita nam.

T-shirt bull

Nom court

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda dignissimos expedita nam.

Issu de PVC recyclable
T-shirt bull

Nom de produit un peu plus long qui passe sur plusieurs lignes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda dignissimos expedita nam. 

{% include '@SyliusShop/Product/Box/_content.html.twig' %}

<div class="row list-product">
    <div class="col-6 col-md-3 d-flex">
        <a href="" class="product-box-container">
            <div class="product-box-tag">
                <span class="badge badge-primary"></span>
            </div>

            <div class="product-box-image-wrapper">
                <picture>
                    <img src="" alt="" class="w-100">
                </picture>
            </div>

            <div class="product-box-name">
                <h2 class="product-box-title"></h2>
                <p class="product-box-desc"></p>
            </div>
        </a>
    </div>
</div>

Actus

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

 
        <a href="#" class="card-news">
    <div class="card-news-img">
        <picture>
            <img src="" alt="" class="w-100">
        </picture>
    </div>
    <div class="card-news-text-wrapper">
        <h3 class="card-news-category"><span>...</span></h3>
        <h4 class="card-news-title">...</h4>
    </div>
</a>

Offres

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet aspernatur at consequuntur corporis dignissimos, dolor eaque eveniet fugiat id impedit minus nulla quasi quo sapiente suscipit vero. Dolorum, totam!

Lorem ipsum 
        <div class="card-offer card-offer-group">
    <div class="card-offer-img">
        <picture>
            <img src="" alt="" class="w-100">
        </picture>
    </div>
    <div class="card-offer-text-wrapper">
        <h2 class="card-offer-title"><span>...</span></h2>
        <p class="card-offer-desc">...</p>
        <a href="#" class="btn btn-outline-light">...</a>
    </div>
</div>

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet aspernatur at consequuntur corporis dignissimos, dolor eaque eveniet fugiat id impedit minus nulla quasi quo sapiente suscipit vero. Dolorum, totam!

Lorem ipsum 
        <div class="card-offer card-offer-store">
    <div class="card-offer-img">
        <picture>
            <img src="" alt="" class="w-100">
        </picture>
    </div>
    <div class="card-offer-text-wrapper">
        <h2 class="card-offer-title"><span>...</span></h2>
        <p class="card-offer-desc">...</p>
        <a href="#" class="btn btn-outline-dark">...</a>
    </div>
</div>
retour menu