Design System Grosfillex

Créé par Dedi.

Composants

Voici une liste regroupant un certains nombre de composants des interfaces : badges, collasses ou toogles, pagination… Cette liste peut-être amenée à évoluer en fonction des différents types d’usages qui seront nécessaires à la manipulation et à la compréhension des interfaces.

Etiquettes

PRIMARY
SECONDARY
SUCCESS
DANGER
WARNING
INFO
LIGHT
DARK 
            <span class="badge badge-primary"></span>
    <span class="badge badge-secondary"></span>
    <span class="badge badge-success"></span>
    <span class="badge badge-danger"></span>
    <span class="badge badge-warning"></span>
    <span class="badge badge-info"></span>
    <span class="badge badge-light"></span>
    <span class="badge badge-dark"></span>
Issu de PVC recyclable 
            <span class="badge badge-primary"></span>

Accordéons

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam. 
        <div class="collapse-group custom-collapse">
    <div class="collapse-wrapper">
        <button class="collapse-header title-label" type="button" data-collapse="ID_COLLAPSE">
            ...
        </button>

        <div id="ID_COLLAPSE" class="collapse-panel">
            <div class="collapse-body">
                ...
            </div>
        </div>
    </div>
</div>
#1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
#2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
#3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
#4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
#5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam. 
        <div class="collapse-group custom-collapse">
    <div class="collapse-wrapper">
        <button class="collapse-header title-label active" type="button" data-collapse="ID_COLLAPSE">
            ...
        </button>

        <div id="ID_COLLAPSE" class="collapse-panel">
            <div class="collapse-body">
                ...
            </div>
        </div>
    </div>
    <div class="collapse-wrapper">
        <button class="collapse-header title-label" type="button" data-collapse="ID_COLLAPSE_2">
            ...
        </button>

        <div id="ID_COLLAPSE_2" class="collapse-panel">
            <div class="collapse-body">
                ...
            </div>
        </div>
    </div>
    <div class="collapse-wrapper">
        ...
    </div>
</div>
#1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
#2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
#3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
#4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
#5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam. 
        <div class="collapse-group custom-accordion">
    <div class="collapse-wrapper">
        <button class="collapse-header title-label active" type="button" data-collapse="ID_COLLAPSE">
            ...
        </button>

        <div id="ID_COLLAPSE" class="collapse-panel">
            <div class="collapse-body">
                ...
            </div>
        </div>
    </div>
    <div class="collapse-wrapper">
        <button class="collapse-header title-label" type="button" data-collapse="ID_COLLAPSE_2">
            ...
        </button>

        <div id="ID_COLLAPSE_2" class="collapse-panel">
            <div class="collapse-body">
                ...
            </div>
        </div>
    </div>
    <div class="collapse-wrapper">
        ...
    </div>
</div>

Fil d'ariane 

        <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <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>

Pagination 

        <nav class="pagination-wrapper pagination-link">
    <ul class="pagination">
        <li class="page-item prev">
            <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"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item next">
            <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>

Retour en haut de page

retour menu 
        <a href="#" class="btn-back-top">
    {{ 'app.ui.backtotop'|trans }}
</a>

Infobulles 

        <div class="tooltip fade bs-tooltip-top show" role="tooltip" style="position: relative; display: inline-block;" x-placement="top">
    <div class="arrow" style="left: 50%; transform: translateX(-50%);"></div>
    <div class="tooltip-inner">
        <p class="title-label">...</p>
        ...
    </div>
</div>
    
        <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>
    


        <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="...">
    ...
</button>

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="...">
    ...
</button>

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="...">
    ...
</button>

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="...">
    ...
</button>

Barre de progression et défilement

30 %
        <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30 %</div>
</div>

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!

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.

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!

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?

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? 

        <div data-simplebar data-simplebar-auto-hide="false">
    ...
</div>

Chargement 

        <span class="loader"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda doloremque ducimus ipsa, nostrum odio repellat sed! A aspernatur dolor doloribus ex facilis fugit incidunt maiores nostrum possimus quia? Laboriosam? 
        <div class="loader-wrapper">
    <span class="loader"></span>
    ...
</div>

Navigation pour carousels 

            <button type="button" class="slick-prev slick-arrow"></button>
<button type="button" class="slick-next slick-arrow"></button>
        
            <ul class="slick-dots">
    <li class="slick-active"><button type="button"></button></li>
    <li><button type="button"></button></li>
    <li><button type="button"></button></li>
</ul>
        
            <ul class="slick-dots numbers">
    <li class="slick-active"><button type="button"></button></li>
    <li><button type="button"></button></li>
    <li><button type="button"></button></li>
</ul>
        
            <ul class="slick-dots numbers light">
    <li class="slick-active"><button type="button"></button></li>
    <li><button type="button"></button></li>
    <li><button type="button"></button></li>
</ul>
retour menu