Source Code HTML / SASS

Vous trouverez ici les démos et le code source statiques du composant.

On expose les différentes déclinaisons du composant au format HTML et SASS.

Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.

Sample Table

Slash Design SystemSous titre

lien titlebar

1

Previous step
2

Previous step
3

Current step
4

Next step
Confirmation

							Action
25487696	1594458644	7359	BellBoeuf	01/03/2017	Acceptation totale	En cours	Consulter
25487296	1594458044	7059	Toulouse	01/06/2007	Acceptation partielle	Transmis	Consulter
22487296	1594428044	7052	NA	11/06/2000	Refus	Clos	Consulter
25487696	1594458644	7359	BellBoeuf	01/03/2017	Acceptation totale	En cours	Consulter
25487296	1594458044	7059	Toulouse	01/06/2007	Acceptation partielle	Transmis	Consulter
22487296	1594428044	7052	NA	11/06/2000	Refus	Clos	Consulter
25487696	1594458644	7359	BellBoeuf	01/03/2017	Acceptation totale	En cours	Consulter
25487296	1594458044	7059	Toulouse	01/06/2007	Acceptation partielle	Transmis	Consulter
22487296	1594428044	7052	NA	11/06/2000	Refus	Clos	Consulter
25487296	1594458044	7059	Toulouse	01/06/2007	Acceptation partielle	Transmis	Consulter

Copied

<div class="af-header">
    <div class="af-container af-header__wrapper">
        <header class="af-header__content" role="banner">
            <div class="af-header__name"><a class="af-logo" href="/"><img class="af-logo__brand" src="../../assets/images/slash-logo.svg" alt="Logo Slash Design System" /></a>
                <h2 class="af-header__title">Nom de l&apos;application<small class="af-header__subtitle">Baseline</small></h2>
            </div>
            <div class="af-contrat">
                <svg class="glyphicon glyphicon-info-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M50.382 0.736c-27.365 0-49.549 22.184-49.549 49.55 0 27.364 22.184 49.547 49.549 49.547 27.365 0 49.548-22.183 49.548-49.547 0-27.366-22.183-49.55-49.548-49.55zM58.151 68.517c-3.74 5.613-7.544 9.941-13.944 9.941-4.369-0.712-6.163-3.843-5.214-7.031l8.233-27.269c0.198-0.668-0.135-1.381-0.744-1.594-0.609-0.214-1.799 0.576-2.829 1.702l-4.975 5.988c-0.136-1.003-0.014-2.667-0.014-3.337 3.74-5.612 9.88-10.044 14.046-10.044 3.962 0.407 5.833 3.571 5.144 7.050l-8.29 27.402c-0.111 0.62 0.216 1.246 0.779 1.444 0.609 0.213 1.89-0.576 2.92-1.703l4.975-5.988c0.136 1.002-0.087 2.769-0.087 3.439zM57.043 32.901c-3.149 0-5.701-2.291-5.701-5.671 0-3.378 2.552-5.669 5.701-5.669 3.148 0 5.701 2.291 5.701 5.669-0.001 3.381-2.553 5.671-5.701 5.671z"></path>
                </svg>
                <dl class="af-contrat__list">
                    <dt class="af-contrat__word">Client :</dt>
                    <dd class="af-contrat__def">0123456789 - NOM</dd>
                    <dt class="af-contrat__word">Portefeuille :</dt>
                    <dd class="af-contrat__def">000123456789</dd>
                    <dt class="af-contrat__word">Status :</dt>
                    <dd class="af-contrat__def">Affaire nouvelle</dd>
                </dl>
            </div>
            <div class="af-info-user"><a class="af-info-user__link" href="/profile" title="Voir mon profil"><span class="af-info-user__name">Pierre Martin</span><span class="af-info-user__profile">[Profile]</span></a></div>
        </header>
    </div>
</div>
<div class="af-nav-container">
    <button class="mask fade show" type="button"></button>
    <nav class="af-nav af-drawer left show" role="navigation" aria-label="Menu principal">
        <div class="af-container af-nav__wrapper">
            <div class="af-nav__aside-header">
                <h4 class="af-nav__aside-title">Menu</h4><a class="af-nav__aside-close" href="#" role="button" aria-haspopup="true" aria-controls="idmenu" id="menubutton">×</a>
            </div>
            <ul class="af-nav__list" role="menubar" aria-labelledby="menubutton" id="idmenu">
                <li class="af-nav__item af-nav__item--active" role="none"><a class="af-nav__link" role="menuitem" href="/home" tabindex="0">Home</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/form" tabindex="-1">Forms</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/fileupload" tabindex="-1">Fileupload</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/table" tabindex="-1">Table</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/collapse" tabindex="-1">Accordions</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/table" tabindex="-1"> Drag n drop</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/alert" tabindex="-1">Alerts</a>
                </li>
                <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/contributing" tabindex="-1">Validation</a>
                </li>
                <li class="af-nav__item af-nav__item--haschild" role="none"><a class="af-nav__link" role="menuitem" href="/doc" tabindex="-1" aria-haspopup="aria-haspopup" aria-expanded="aria-expanded">Doc</a>
                    <svg class="glyphicon glyphicon-arrow-xs-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M86.799 36.75h-73.299l36.654 35.636 36.645-35.636z"></path>
                    </svg>
                    <ul class="af-nav__list af-nav__list--children" role="menu" aria-label="Doc">
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien" tabindex="-1">Sous lien</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien2" tabindex="-1">Sous lien 2</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien3" tabindex="-1">Sous lien 3</a></li>
                        <li class="af-nav__item" role="none"><a class="af-nav__link" role="menuitem" href="/doc/sous-lien4" tabindex="-1">Sous lien 4</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>
<div class="af-title-bar">
    <div class="af-title-bar__wrapper af-container">
        <button class="af-btn-circle af-title-bar__mobile-menu">
            <div class="af-btn__wrapper">
                <svg class="glyphicon glyphicon-menu-hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M3.649,1.21h92.701c0.65,0,1.222,0.243,1.708,0.73c0.487,0.49,0.732,1.057,0.732,1.71v14.638
	c0,0.65-0.245,1.221-0.732,1.707c-0.486,0.488-1.058,0.732-1.708,0.732H3.649c-0.653,0-1.219-0.244-1.708-0.732
	c-0.489-0.486-0.732-1.057-0.732-1.707V3.65c0-0.653,0.243-1.22,0.732-1.71C2.431,1.453,2.996,1.21,3.649,1.21L3.649,1.21z
	 M3.649,40.241h92.701c0.65,0,1.222,0.244,1.708,0.729c0.487,0.486,0.732,1.059,0.732,1.709v14.638c0,0.65-0.245,1.222-0.732,1.708
	c-0.486,0.488-1.058,0.736-1.708,0.736H3.649c-0.653,0-1.219-0.248-1.708-0.736c-0.489-0.486-0.732-1.058-0.732-1.708V42.679
	c0-0.65,0.243-1.223,0.732-1.709C2.431,40.485,2.996,40.241,3.649,40.241L3.649,40.241z M3.649,79.272h92.701
	c0.65,0,1.222,0.241,1.708,0.731c0.487,0.49,0.732,1.058,0.732,1.712v14.638c0,0.65-0.245,1.219-0.732,1.708
	c-0.486,0.485-1.058,0.729-1.708,0.729H3.649c-0.653,0-1.219-0.243-1.708-0.729c-0.489-0.489-0.732-1.058-0.732-1.708V81.716
	c0-0.654,0.243-1.222,0.732-1.712S2.996,79.272,3.649,79.272L3.649,79.272z"></path>
                </svg>
            </div>
        </button>
        <h1 class="af-title-bar__title">Slash Design System<small class="af-title-bar__subtitle">Sous titre</small></h1>
        <div class="af-title-bar__actions"><a class="af-title-bar__link" href="#lien" title="lien titlebar">lien titlebar</a><a class="af-btn--circle" href="#enregistrer" title="Enregistrer" role="button" tabindex="0">
                <svg class="glyphicon glyphicon-floppy-disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M3.125 92.5v-83.333q0-1.667 1.208-2.917t2.958-1.25h20.833v25h41.667v-25h8.333l16.667 16.667v70.833q0 1.75-1.25 2.958t-2.917 1.208h-12.5v-33.333h-58.333v33.333h-12.5q-1.75 0-2.958-1.208t-1.208-2.958zM53.125 21.667h8.333v-16.667h-8.333v16.667z"></path>
                </svg></a><a class="af-btn--circle" href="#imprimer" title="Imprimer" role="button" tabindex="0">
                <svg class="glyphicon glyphicon-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M1.563 90.667v-56.51h16.146l8.073 16.146h48.438l8.073-16.146h16.146v56.51h-16.146v-16.146h-64.583v16.146h-16.146zM21.987 31.816l3.229 10.010h47.792l5.005-10.010-7.588-27.932q-0.162-0.888-0.807-1.453t-1.453-0.565h-36.328q-0.807 0-1.453 0.565t-0.807 1.453zM24.247 96.803l3.068-12.271q0.162-0.807 0.928-1.372t1.574-0.565h40.365q0.807 0 1.574 0.565t0.928 1.372l3.068 12.271q0.162 0.807-0.283 1.372t-1.251 0.565h-48.438q-0.807 0-1.251-0.565t-0.283-1.372z"></path>
                </svg></a></div>
    </div>
</div>
<div class="af-container">
    <div class="row">
        <div class="col col-md-12">
            <div class="af-steps">
                <ol class="af-steps-list">
                    <li class="af-steps-list-step past" title="Etape 1">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">1</div>
                            <div class="af-steps-list-stepTitle">Previous step</div>
                        </div>
                    </li>
                    <li class="af-steps-list-step past" title="Etape 2">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">2</div>
                            <div class="af-steps-list-stepTitle">Previous step</div>
                        </div>
                    </li>
                    <li class="af-steps-list-step on" title="Etape 3">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">3</div>
                            <div class="af-steps-list-stepTitle">Current step</div>
                        </div>
                    </li>
                    <li class="af-steps-list-step" title="Etape 3">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">4</div>
                            <div class="af-steps-list-stepTitle">Next step</div>
                        </div>
                    </li>
                    <li class="af-steps-list-step" title="Etape finale">
                        <div class="af-steps-list-stepLabel">
                            <div class="af-steps-list-stepNumber">
                                <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                    <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                </svg>
                            </div>
                            <div class="af-steps-list-stepTitle">Confirmation</div>
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <table class="af-table">
                <thead class="af-table__thead">
                    <tr class="af-table__tr">
                        <th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
                                <button class="af-btn af-btn--table-sorting af-btn--table-sorting--active" role="button">N° de contrat
                                    <svg class="glyphicon glyphicon-arrow-xs-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M86.799 36.75h-73.299l36.654 35.636 36.645-35.636z"></path>
                                    </svg>
                                </button></span></th>
                        <th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
                                <button class="af-btn af-btn--table-sorting" role="button">N° de dossier
                                    <svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
                                    </svg>
                                </button></span></th>
                        <th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
                                <button class="af-btn af-btn--table-sorting" role="button">N° de demande
                                    <svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
                                    </svg>
                                </button></span></th>
                        <th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
                                <button class="af-btn af-btn--table-sorting" role="button">Site
                                    <svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
                                    </svg>
                                </button></span></th>
                        <th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
                                <button class="af-btn af-btn--table-sorting" role="button">Date de mise à jour
                                    <svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
                                    </svg>
                                </button></span></th>
                        <th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
                                <button class="af-btn af-btn--table-sorting" role="button">Décision
                                    <svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
                                    </svg>
                                </button></span></th>
                        <th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
                                <button class="af-btn af-btn--table-sorting" role="button">Statut du dossier
                                    <svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
                                    </svg>
                                </button></span></th>
                        <th class="af-table__th"><span class="af-table__th-content">Action</span></th>
                    </tr>
                </thead>
                <tbody class="af-table__body">
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">25487696</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594458644</a></td>
                        <td class="af-table__cell">7359</td>
                        <td class="af-table__cell">BellBoeuf</td>
                        <td class="af-table__cell">01/03/2017</td>
                        <td class="af-table__cell">Acceptation totale</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--banque">
                                    <svg class="glyphicon glyphicon-option-horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M14.152,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505
	c-0.002,3.702-1.315,6.873-3.941,9.499c-2.625,2.628-5.792,3.944-9.501,3.944c-3.708,0-6.876-1.316-9.502-3.944
	c-2.626-2.626-3.938-5.797-3.941-9.499c-0.003-3.709,1.31-6.872,3.941-9.505C7.282,37.871,10.446,36.557,14.152,36.557z
	 M49.999,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505c-0.002,3.702-1.316,6.873-3.941,9.499
	c-2.625,2.628-5.793,3.944-9.501,3.944c-3.709,0-6.876-1.316-9.502-3.944c-2.625-2.626-3.938-5.797-3.941-9.499
	c-0.004-3.709,1.31-6.872,3.941-9.505C43.129,37.871,46.293,36.557,49.999,36.557z M85.85,36.557c3.701,0,6.871,1.314,9.5,3.939
	c2.629,2.633,3.941,5.796,3.941,9.505c0,3.702-1.316,6.873-3.941,9.499c-2.625,2.628-5.793,3.944-9.5,3.944
	c-3.709,0-6.877-1.316-9.502-3.944c-2.627-2.626-3.943-5.797-3.943-9.499c0-3.709,1.314-6.872,3.943-9.505
	C78.975,37.871,82.146,36.557,85.85,36.557z"></path>
                                    </svg></span>En cours
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">25487296</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594458044</a></td>
                        <td class="af-table__cell">7059</td>
                        <td class="af-table__cell">Toulouse</td>
                        <td class="af-table__cell">01/06/2007</td>
                        <td class="af-table__cell">Acceptation partielle</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--warning">
                                    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
                                    </svg></span>Transmis
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">22487296</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594428044</a></td>
                        <td class="af-table__cell">7052</td>
                        <td class="af-table__cell">NA</td>
                        <td class="af-table__cell">11/06/2000</td>
                        <td class="af-table__cell">Refus</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--success">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span>Clos
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">25487696</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594458644</a></td>
                        <td class="af-table__cell">7359</td>
                        <td class="af-table__cell">BellBoeuf</td>
                        <td class="af-table__cell">01/03/2017</td>
                        <td class="af-table__cell">Acceptation totale</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--banque">
                                    <svg class="glyphicon glyphicon-option-horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M14.152,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505
	c-0.002,3.702-1.315,6.873-3.941,9.499c-2.625,2.628-5.792,3.944-9.501,3.944c-3.708,0-6.876-1.316-9.502-3.944
	c-2.626-2.626-3.938-5.797-3.941-9.499c-0.003-3.709,1.31-6.872,3.941-9.505C7.282,37.871,10.446,36.557,14.152,36.557z
	 M49.999,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505c-0.002,3.702-1.316,6.873-3.941,9.499
	c-2.625,2.628-5.793,3.944-9.501,3.944c-3.709,0-6.876-1.316-9.502-3.944c-2.625-2.626-3.938-5.797-3.941-9.499
	c-0.004-3.709,1.31-6.872,3.941-9.505C43.129,37.871,46.293,36.557,49.999,36.557z M85.85,36.557c3.701,0,6.871,1.314,9.5,3.939
	c2.629,2.633,3.941,5.796,3.941,9.505c0,3.702-1.316,6.873-3.941,9.499c-2.625,2.628-5.793,3.944-9.5,3.944
	c-3.709,0-6.877-1.316-9.502-3.944c-2.627-2.626-3.943-5.797-3.943-9.499c0-3.709,1.314-6.872,3.943-9.505
	C78.975,37.871,82.146,36.557,85.85,36.557z"></path>
                                    </svg></span>En cours
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">25487296</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594458044</a></td>
                        <td class="af-table__cell">7059</td>
                        <td class="af-table__cell">Toulouse</td>
                        <td class="af-table__cell">01/06/2007</td>
                        <td class="af-table__cell">Acceptation partielle</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--warning">
                                    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
                                    </svg></span>Transmis
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">22487296</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594428044</a></td>
                        <td class="af-table__cell">7052</td>
                        <td class="af-table__cell">NA</td>
                        <td class="af-table__cell">11/06/2000</td>
                        <td class="af-table__cell">Refus</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--success">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span>Clos
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">25487696</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594458644</a></td>
                        <td class="af-table__cell">7359</td>
                        <td class="af-table__cell">BellBoeuf</td>
                        <td class="af-table__cell">01/03/2017</td>
                        <td class="af-table__cell">Acceptation totale</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--banque">
                                    <svg class="glyphicon glyphicon-option-horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M14.152,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505
	c-0.002,3.702-1.315,6.873-3.941,9.499c-2.625,2.628-5.792,3.944-9.501,3.944c-3.708,0-6.876-1.316-9.502-3.944
	c-2.626-2.626-3.938-5.797-3.941-9.499c-0.003-3.709,1.31-6.872,3.941-9.505C7.282,37.871,10.446,36.557,14.152,36.557z
	 M49.999,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505c-0.002,3.702-1.316,6.873-3.941,9.499
	c-2.625,2.628-5.793,3.944-9.501,3.944c-3.709,0-6.876-1.316-9.502-3.944c-2.625-2.626-3.938-5.797-3.941-9.499
	c-0.004-3.709,1.31-6.872,3.941-9.505C43.129,37.871,46.293,36.557,49.999,36.557z M85.85,36.557c3.701,0,6.871,1.314,9.5,3.939
	c2.629,2.633,3.941,5.796,3.941,9.505c0,3.702-1.316,6.873-3.941,9.499c-2.625,2.628-5.793,3.944-9.5,3.944
	c-3.709,0-6.877-1.316-9.502-3.944c-2.627-2.626-3.943-5.797-3.943-9.499c0-3.709,1.314-6.872,3.943-9.505
	C78.975,37.871,82.146,36.557,85.85,36.557z"></path>
                                    </svg></span>En cours
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">25487296</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594458044</a></td>
                        <td class="af-table__cell">7059</td>
                        <td class="af-table__cell">Toulouse</td>
                        <td class="af-table__cell">01/06/2007</td>
                        <td class="af-table__cell">Acceptation partielle</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--warning">
                                    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
                                    </svg></span>Transmis
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">22487296</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594428044</a></td>
                        <td class="af-table__cell">7052</td>
                        <td class="af-table__cell">NA</td>
                        <td class="af-table__cell">11/06/2000</td>
                        <td class="af-table__cell">Refus</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--success">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span>Clos
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                    <tr class="af-table__tr">
                        <td class="af-table__cell"><a class="af-link" href="">25487296</a></td>
                        <td class="af-table__cell"><a class="af-link" href="">1594458044</a></td>
                        <td class="af-table__cell">7059</td>
                        <td class="af-table__cell">Toulouse</td>
                        <td class="af-table__cell">01/06/2007</td>
                        <td class="af-table__cell">Acceptation partielle</td>
                        <td class="af-table__cell">
                            <div class="af-status"><span class="glyphicon-ring glyphicon-ring--warning">
                                    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
                                    </svg></span>Transmis
                            </div>
                        </td>
                        <td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
                                <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
                                    <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
                                </svg><span class="af-link__text">Consulter</span></a></td>
                    </tr>
                </tbody>
            </table>
            <div class="af-paging">
                <div class="af-paging__limit">
                    <form class="af-paging__form">
                        <div class="af-form__group">
                            <div class="col col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                <label class="af-form__group-label" for="pagination">Afficher</label>
                            </div>
                            <div class="col col-sm-10 col-md-10 col-lg-10 col-xl-10">
                                <div class="af-form__select">
                                    <div class="af-form__select-container">
                                        <select class="af-form__input-select">
                                            <option value="5">5</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                        </select>
                                        <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                            <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                                        </svg>
                                    </div><span class="af-form__input-cmplt">éléments</span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="af-paging__pager">
                    <nav class="af-pager">
                        <ul class="af-pager__pagination">
                            <li class="af-pager__item"><a class="af-pager__item-link" href="#"><span class="af-pager__item-icon">&laquo;</span><span class="af-pager__item-text">Pr&eacute;c&eacute;dent</span></a></li>
                            <li class="af-pager__item"><a class="af-pager__item-link" href="#">1</a></li>
                            <li class="af-pager__item af-pager__item--disabled"><span class="af-pager__item-link">...</span></li>
                            <li class="af-pager__item"><a class="af-pager__item-link" href="#">4</a></li>
                            <li class="af-pager__item af-pager__item--active"><a class="af-pager__item-link" href="#">5</a></li>
                            <li class="af-pager__item"><a class="af-pager__item-link" href="#">6</a></li>
                            <li class="af-pager__item af-pager__item--disabled">...</li>
                            <li class="af-pager__item"><a class="af-pager__item-link" href="#">23</a></li>
                            <li class="af-pager__item"><a class="af-pager__item-link" href="#"><span class="af-pager__item-text">Suivant</span><span class="af-pager__item-icon">&raquo;</span></a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="af-footer">
    <div class="af-container"><a class="af-logo" href="https://www.axa.fr/" title="Site Axa France" target="blank"><img class="af-logo__brand" src="../../assets/images/slash-logo.svg" alt="Logo Slash Design System" /></a>
        <div class="af-footer-content">@ 2020 AXA Tous droits réservés</div>
    </div>
</footer>

Copied

No style

React interactions

Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.

Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.

Generales Guidelines

Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.

Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.

No guideline yet, coming soon ...

Style

Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.

On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System

Imports SASS

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '~@axa-fr/react-toolkit-all/dist/style/bootstrap/grid.css';
@import 'pages/components/header/index.scss';
@import 'pages/components/footer/index.scss';
@import 'pages/components/form-select/index.scss';
@import 'pages/components/steps/index.scss';
@import 'pages/components/table/index.scss';

Typography

Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

Class	Font-size (px/rem)	Font-weight	Font-family
.af-form	16 / 1	400	Source Sans Pro Regular

Colors

BLEU AXA#00008f$color-axa

BLEU Action#3032c1$color-azur

BLEU Action focus#aaabf9$color-azur-focused

Mercury#e5e5e5$color-mercury

Silver#cccccc $color-silver

Slash

Design System

Page Table

Organisms