Design System Grosfillex

Blocs CMS

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

Titre

Titre

Sous-titre

<section class="block-section block-title text-left">
    <h2 class="title-wrapper h2">...</h2>
    <h3 class="subtitle-wrapper h3">...</h3>
</section>

Titre

Sous-titre

<section class="block-section block-title text-center">
    <h2 class="title-wrapper h2">...</h2>
    <h3 class="subtitle-wrapper h3">...</h3>
</section>

Titre

Sous-titre

<section class="block-section block-title text-right">
    <h2 class="title-wrapper h2">...</h2>
    <h3 class="subtitle-wrapper h3">...</h3>
</section>

Texte

Titre

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. Nam elementum tincidunt nulla nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. Sed at lacus ullamcorper mauris volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.

Bouton
<section class="block-section block-text text-left">
    <div class="text-wrapper container">
        {% include '@DediSyliusTheme/Blocks/_block-title.html.twig' with { element: element.title } %}
        <p>...</p>
        {% include '@DediSyliusTheme/Blocks/_block-button.html.twig' with { element: element.link } %}
    </div>
</section>

Titre

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. Nam elementum tincidunt nulla nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. Sed at lacus ullamcorper mauris volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.

Bouton
<section class="block-section block-text text-center">
    <div class="text-wrapper container">
        {% include '@DediSyliusTheme/Blocks/_block-title.html.twig' with { element: element.title } %}
        <p>...</p>
        {% include '@DediSyliusTheme/Blocks/_block-button.html.twig' with { element: element.link } %}
    </div>
</section>

Titre

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. Nam elementum tincidunt nulla nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. Sed at lacus ullamcorper mauris volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.

Bouton
<section class="block-section block-text text-right">
    <div class="text-wrapper container">
        {% include '@DediSyliusTheme/Blocks/_block-title.html.twig' with { element: element.title } %}
        <p>...</p>
        {% include '@DediSyliusTheme/Blocks/_block-button.html.twig' with { element: element.link } %}
    </div>
</section>

Titre

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. Nam elementum tincidunt nulla nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. Sed at lacus ullamcorper mauris volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.

Bouton
<section class="block-section block-text text-justify">
    <div class="text-wrapper container">
        {% include '@DediSyliusTheme/Blocks/_block-title.html.twig' with { element: element.title } %}
        <p>...</p>
        {% include '@DediSyliusTheme/Blocks/_block-button.html.twig' with { element: element.link } %}
    </div>
</section>

Titre

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. Nam elementum tincidunt nulla nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. Sed at lacus ullamcorper mauris volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.

Bouton

Titre

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo.

Bouton

Titre

Sous-titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo.

Bouton
                <div class="row">
    <div class="col-md-6">
        <section class="block-section block-text text-left light" style="background-color: ...;">
            <div class="text-wrapper container">
                <h2 class="title-wrapper">...</h2>
                <h3 class="subtitle-wrapper">...</h3>
                <p>...</p>
                <a href="" class="btn btn-light">...</a>
            </div>
        </section>
    </div>
    <div class="col-md-6">
        <section class="block-section block-text text-left dark" style="background-color: ...;">
        </section>
    </div>
</div>
            

Texte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante.

test
                <section class="block-section block-blockquote">
    <blockquote class="blockquote container">
        ...
        <footer class="blockquote-footer">...</footer>
    </blockquote>
</section>
            

Média

                <section class="block-section">
    <embed src="" width="100%" height="500px">
</section>
            
                <section class="block-section fullwidth">
    <a href="">
        <picture class="media-object">...</picture>
    </a>
</section>

<section class="block-section fullwidth">
    <picture class="media-object">...</picture>
</section>
            
                <section class="block-section fullwidth">
    <div class="block-video-wrapper" id="block-youtube-..." data-youtube="...">
        <div class="wrapper-img-youtube" id="wrapper-img-youtube-...">
            <img class="w-100" src="" style="cursor:pointer">
            <div class="icon-content">
                <i class="fa fa-play"></i>
            </div>
        </div>
        <div style="display:none" class="wrapper-iframe-youtube"></div>
    </div>
</section>
            
alt
                <div class="row">
    <div class="col-md-6">
        <section class="block-section">
            <embed src="" width="100%" height="500px">
        </section>
    </div>
    <div class="col-md-6">
        <section class="block-section">
            <picture class="media-object">...</picture>
        </section>
    </div>
</div>
            

Bannière(s)

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur culpa dolorem doloribus eligendi error, harum incidunt ipsa laborum modi mollitia perspiciatis quas, quibusdam tenetur. Deserunt error impedit nulla placeat quo?

Lorem ipsum
                <section class="block-section block-banner style-1">
    <div class="img-wrapper">
        <picture>...</picture>
    </div>
    <div class="text-wrapper container-fluid">
        <section class="block-section block-title text-default">
            <h1 class="title-wrapper h2">...</h1>
        </section>

        <p>...</p>

        <section class="block-section block-button text-default">
            <a href="" class="btn btn-outline-light btn-icon">
                <span class="btn-icon-text">...</span>
            </a>
        </section>
    </div>
</section>
            
                <section class="block-section block-banner-collection">
    <div class="banner-collection-slider default-slider">
        <div class="item">
            <section class="block-section block-banner style-1">...</section>
        </div>
        <div class="item">
            <section class="block-section block-banner style-2">...</section>
        </div>
    </div>
    <div class="banner-collection-arrows"></div>
</section>
            

Collection - Icônes & Texte

Lorem ipsum

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolorLorem ipsum dolor

                <section class="block-section block-icon-collection style-1">
    <div class="block-section block-title text-default">
        <h2 class="title-wrapper">...</h2>
    </div>
    <div class="block-icon-wrapper">
        <a href="" class="block-icon">
            <span class="icon-wrapper">
                <i class="fa-icon"></i>
            </span>
            <div class="text-wrapper">...</div>
        </a>

        <div class="block-icon">
            <span class="icon-wrapper">
                <svg />
            </span>
            <div class="text-wrapper">...</div>
        </div>
    </div>
    <div class="block-section block-button text-default">
        <a href="#" class="btn btn-outline-dark">...</a>
    </div>
</section>
            
                <section class="block-section block-icon-collection style-2">
    <div class="block-section block-title text-default">
        <h2 class="title-wrapper">...</h2>
    </div>
    <div class="block-icon-wrapper">
        <a href="" class="block-icon">
            <span class="icon-wrapper">
                <i class="fa-icon"></i>
            </span>
            <div class="text-wrapper">...</div>
            <picture>
                <img src="" alt="" class="img">
            </picture>
        </a>

        <div class="block-icon">
            <span class="icon-wrapper">
                <svg />
            </span>
            <div class="text-wrapper">...</div>
            <picture>
                <img src="" alt="" class="img">
            </picture>
        </div>
    </div>
    <div class="block-section block-button text-default">
        <a href="#" class="btn btn-secondary">...</a>
    </div>
</section>
            

Lorem ipsum

Lorem ipsum dolor sit amet

Lex fecisse enim faciamus rem casus minime et Scaevola minime longe aliquantum longe

Lorem ipsum dolor sit amet

Lex fecisse enim faciamus rem casus minime et Scaevola minime longe aliquantum longe

Lorem ipsum dolor sit amet

Scaevola minime longe aliquantum longe

Lorem ipsum dolor sit amet

Lex fecisse enim faciamus rem casus minime et Scaevola minime longe aliquantum longe

Lorem ipsum dolor

Lex fecisse enim faciamus rem casus minime et Scaevola minime longe aliquantum longe

                <section class="block-section block-icon-collection style-3">
    <div class="block-section block-title text-default">
        <h2 class="title-wrapper">...</h2>
    </div>
    <div class="block-icon-wrapper">
        <a href="" class="block-icon">
            <span class="icon-wrapper">
                <i class="fa-icon"></i>
            </span>
            <div class="text-wrapper">
                <p>...</p>
            </div>
        </a>

        <div class="block-icon">
            <span class="icon-wrapper">
                <svg />
            </span>
            <div class="text-wrapper">
                <p>...</p>
            </div>
        </div>
    </div>
    <div class="block-section block-button text-default">
        <a href="#" class="btn btn-primary">...</a>
    </div>
</section>
            

Lorem ipsum

Lorem ipsum dolor sit amet

Lex fecisse enim faciamus rem casus minime et Scaevola minime longe aliquantum longe

Lorem ipsum dolor sit amet

Lex fecisse enim faciamus rem

Lorem ipsum dolor sit amet

Lex fecisse enim faciamus rem

Lorem ipsum dolor sit amet

Lex fecisse enim faciamus rem

                <section class="block-section block-icon-collection style-4">
    <div class="block-section block-title text-default">
        <h2 class="title-wrapper">...</h2>
    </div>
    <div class="block-icon-wrapper">
        <a href="" class="block-icon">
            <span class="icon-wrapper">
                <i class="fa-icon"></i>
            </span>
            <div class="text-wrapper">
                <p>...</p>
            </div>
        </a>

        <div class="block-icon">
            <span class="icon-wrapper">
                <svg />
            </span>
            <div class="text-wrapper">
                <p>...</p>
            </div>
        </div>
    </div>
    <div class="block-section block-button text-default">
        <a href="#" class="btn btn-outline-dark">...</a>
    </div>
    <picture class="img-wrapper">
        <source srcset="/build/grosfillex/images/bg-block-icon-4.webp"  type="image/webp" />
        <img src="/build/grosfillex/images/bg-block-icon-4.png" alt="" width="1378" height="920" class="img"/>
    </picture>
</section>
            

Collection - Icônes & Texte

<section class="block-section block-category-collection container-fluid">
    <div class="block-title">
        <h2 class="title-wrapper">Lorem ipsum</h2>
    </div>

    <div class="items-wrapper">
                    <a href="#" class="item">
            <h3 class="subtitle-wrapper">Lorem ipsum</h3>
            <picture>
                <img src="https://via.placeholder.com/612x330" alt="" class="item-img">
            </picture>
        </a>
                    <a href="#" class="item">
            <h3 class="subtitle-wrapper">Lorem ipsum</h3>
            <picture>
                <img src="https://via.placeholder.com/612x330" alt="" class="item-img">
            </picture>
        </a>
                    <a href="#" class="item">
            <h3 class="subtitle-wrapper">Lorem ipsum</h3>
            <picture>
                <img src="https://via.placeholder.com/612x330" alt="" class="item-img">
            </picture>
        </a>
                    <a href="#" class="item">
            <h3 class="subtitle-wrapper">Lorem ipsum</h3>
            <picture>
                <img src="https://via.placeholder.com/612x330" alt="" class="item-img">
            </picture>
        </a>
            </div>

    <div class="container">
        <picture class="img-wrapper">
            <source srcset="/build/grosfillex/images/bg-block-categories.webp"  type="image/webp" />
            <img src="/build/grosfillex/images/bg-block-categories.png" alt="" width="653" height="664" class="img"/>
        </picture>
    </div>
</section>

Collection articles

<section class="block-section block-news-collection style-1">
    <section class="block-section block-title">
        <h2 class="title-wrapper">...</h2>
    </section>

    <div class="news-slider">
        <a href="" class="card-news">
            <div class="card-news-img">
                <picture>...</picture>
            </div>
            <div class="card-news-text-wrapper">
                <h2 class="card-news-title">...</h2>
                <h3 class="card-news-category"><span>...</span></h3>
            </div>
        </a>
        <a href="" class="card-news">
            ...
        </a>
    </div>
    <div class="news-slider-dots"></div>

    <section class="block-section block-button">
        <a href="#"  class="btn btn-outline-dark">
            <span class="btn-icon-text">...</span>
        </a>
    </section>
</section>

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consectetur corporis dolore ducimus, eaque eligendi esse et hic iste iure officia officiis, quidem quod repudiandae ut! Hic necessitatibus quae tempore?

Lorem ipsum

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum
<section class="block-section block-news-collection style-2">
    <section class="block-section block-title">
        <h2 class="title-wrapper">...</h2>
    </section>

    <div class="row">
        <div class="col-md-6">
            <article class="card-offer">
                <div class="card-offer-img">
                    <picture>...</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>
            </article>
        </div>
        <div class="col-md-6">
            <article class="card-offer">
                ...
            </article>
        </div>
    </div>
</section>

Collection de boutons

<section class="block-section block-button-collection">
    <div class="block-title">
        <h2 class="title-wrapper">...</h2>
    </div>

    <div class="items-wrapper">
        <div class="item">
            <a href="#" class="btn btn-outline-dark">...</a>
        </div>
        <div class="item">
            <a href="#" class="btn btn-outline-dark">...</a>
        </div>
    </div>
</section>

Etapes

                <section class="block-section block-steps">
    <h2 class="title-wrapper">...</h2>
    <div class="item-wrapper">
        <a href="" class="item">
            {% include '@SyliusShop/Icons/nom_icon.html.twig' %}
            <h3 class="subtitle-wrapper">...</h3>
            <p>...</p>
        </a>
        <a href="" class="item">
            ...
        </a>
        <a href="" class="item">
            ...
        </a>
    </div>
</section>
        

Carrousel - Blocs

retour menu