Styleguide

Module

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Ces composant définissent la structure et une partie du contenu des différents modules de l'app (module d'Audience, module de Campagne...).

Structure du module

<section class="module">
  <div class="module-top">
    <div class="module-top-nav">
      <!-- Module top nav -->
    </div>
    <div class="module-top-header">
      <!-- Module top header -->
    </div>
    <div class="module-top-tools">
      <!-- Module top tools -->
    </div>
  </div>
  <div class="module-body">
    <div class="module-body-content">
      <!-- Votre contenu principal-->
    </div>
    <div class="module-body-sidebar">
      <!-- Module body sidebar -->
    </div>
    <div class="module-body-panel">
      <!-- Module body panel -->
    </div>
  </div>
</section>

Module body panel

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Au click sur le bouton exclure lui ajouter la classe d'état .is-active puis ajouter la classe .have-panelOpen au composant .module.

Supprimer les classes ajoutées précédemment lors du click sur le bouton exclure ayant la classe .is-active.

Exclure des éléments
26 613 / 18 613
  • 10 200
  • 2 200
  • 7 000
  • 1 000
<div class="module-body-panel">
  <div class="module-body-panel-body">
    <div class="module-body-panel-body-header">
      <div class="title title--level2">Exclure des éléments</div>
      <div>
        <div class="title title--level2 u-txtClr0Lighter">
          <span class="u-txtClr1">26 613</span> / 18 613
        </div>
        <div class="gaugeLinear">
          <div class="gaugeLinear-inner" style="width: 75%"></div>
        </div>
      </div>
    </div>
    <div class="module-body-panel-body-content">
      <div class="module-body-panel-body-content-left">
        <nav class="menu menu--vertical u-w50">
          <ul class="menu-inner">
            <li class="menu-item">
              <a class="menu-link is-active" href="#">
                <span>Inactifs</span>
                <div class="icon icon--next"></div>
              </a>
            </li>
            <li class="menu-item">
              <a class="menu-link" href="#">
                <span>Blacklists</span>
                <div class="icon icon--next"></div>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="module-body-panel-body-content-right">
        <div>
          <div class="recap">
            <ul class="recap-list">
              <li class="recap-list-item recap-list-item--divider">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="exclude-item-1" type="checkbox" value="exclude-item-1" checked="checked">
                    <label for="exclude-item-1">Tous les inactifs (depuis 3 mois)</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">10 200</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="exclude-item-2" type="checkbox" value="exclude-item-2" checked="checked">
                    <label for="exclude-item-2">SMS (depuis 3 mois)</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">2 200</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="exclude-item-3" type="checkbox" value="exclude-item-3" checked="checked">
                    <label for="exclude-item-3">Email (depuis 3 mois)</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">7 000</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="recap-list-item-inner">
                    <div class="inputCheckbox">
                      <input id="exclude-item-4" type="checkbox" value="exclude-item-4" checked="checked">
                      <label for="exclude-item-4">Push(depuis 3 mois)</label>
                    </div>
                  </div>
                </div>
                <div class="recap-list-item-inner">1 000</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="module-body-panel-footer">
    <a class="button button--ghost" href="#">Re-calculer</a>
  </div>
</div>
Exclure des éléments
26 613 / 18 613
  • Blacklist Email
  • 2 200
  • 7 000
  • 8 000
  • 17 000
  • 8 000
  • 8 000
  • Blacklist SMS
  • 2 200
  • 7 000
  • 8 000
  • 17 000
  • Blacklist Push
  • 2 200
  • 7 000
<div class="module-body-panel">
  <div class="module-body-panel-body">
    <div class="module-body-panel-body-header">
      <div class="title title--level2">Exclure des éléments</div>
      <div>
        <div class="title title--level2 u-txtClr0Lighter">
          <span class="u-txtClr1">26 613</span> / 18 613
        </div>
        <div class="gaugeLinear">
          <div class="gaugeLinear-inner" style="width: 75%"></div>
        </div>
      </div>
    </div>
    <div class="module-body-panel-body-content">
      <div class="module-body-panel-body-content-left">
        <nav class="menu menu--vertical u-w50">
          <ul class="menu-inner">
            <li class="menu-item">
              <a class="menu-link" href="#">
                <span>Inactifs</span>
                <div class="icon icon--next"></div>
              </a>
            </li>
            <li class="menu-item">
              <a class="menu-link is-active" href="#">
                <span>Blacklists</span>
                <div class="icon icon--next"></div>
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="module-body-panel-body-content-right">
        <div class="gridColumns gridColumns--2 gridColumns--gutterL">
          <div class="recap">
            <ul class="recap-list">
              <li class="recap-list-item recap-list-item--divider">
                <div class="recap-list-item-inner">Blacklist Email</div>
              </li>
              <li class="recap-list-item recap-list-item--disabled">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="blacklist-item-1" type="checkbox" value="blacklist-item-1" checked="checked">
                    <label for="blacklist-item-1">Lorem_20160723</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">2 200</div>
              </li>
              <li class="recap-list-item recap-list-item--disabled">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="blacklist-item-2" type="checkbox" value="blacklist-item-2" checked="checked">
                    <label for="blacklist-item-2">Ipsum_20160820</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">7 000</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="recap-list-item-inner">
                    <div class="inputCheckbox">
                      <input id="blacklist-item-3" type="checkbox" value="blacklist-item-3">
                      <label for="blacklist-item-3">Desabo_20160723</label>
                    </div>
                  </div>
                </div>
                <div class="recap-list-item-inner">8 000</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="recap-list-item-inner">
                    <div class="inputCheckbox">
                      <input id="blacklist-item-4" type="checkbox" value="blacklist-item-4">
                      <label for="blacklist-item-4">Desabo_20160619</label>
                    </div>
                  </div>
                </div>
                <div class="recap-list-item-inner">17 000</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="recap-list-item-inner">
                    <div class="inputCheckbox">
                      <input id="blacklist-item-5" type="checkbox" value="blacklist-item-4" checked="checked">
                      <label for="blacklist-item-5">Desabo_20160723</label>
                    </div>
                  </div>
                </div>
                <div class="recap-list-item-inner">8 000</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="recap-list-item-inner">
                    <div class="inputCheckbox">
                      <input id="blacklist-item-6" type="checkbox" value="blacklist-item-6" checked="checked">
                      <label for="blacklist-item-6">Desabo_20160717</label>
                    </div>
                  </div>
                </div>
                <div class="recap-list-item-inner">8 000</div>
              </li>
            </ul>
          </div>
          <div class="recap">
            <ul class="recap-list">
              <li class="recap-list-item recap-list-item--divider">
                <div class="recap-list-item-inner">Blacklist SMS</div>
              </li>
              <li class="recap-list-item recap-list-item--disabled">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="blacklist-item-7" type="checkbox" value="blacklist-item-7" checked="checked">
                    <label for="blacklist-item-7">Lorem_20160723</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">2 200</div>
              </li>
              <li class="recap-list-item recap-list-item--disabled">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="blacklist-item-8" type="checkbox" value="blacklist-item-8" checked="checked">
                    <label for="blacklist-item-8">Ipsum_20160820</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">7 000</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="recap-list-item-inner">
                    <div class="inputCheckbox">
                      <input id="blacklist-item-9" type="checkbox" value="blacklist-item-9">
                      <label for="blacklist-item-9">Desabo_20160723</label>
                    </div>
                  </div>
                </div>
                <div class="recap-list-item-inner">8 000</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="recap-list-item-inner">
                    <div class="inputCheckbox">
                      <input id="blacklist-item-10" type="checkbox" value="blacklist-item-10">
                      <label for="blacklist-item-10">Desabo_20160619</label>
                    </div>
                  </div>
                </div>
                <div class="recap-list-item-inner">17 000</div>
              </li>
            </ul>
          </div>
          <div class="recap">
            <ul class="recap-list">
              <li class="recap-list-item recap-list-item--divider">
                <div class="recap-list-item-inner">Blacklist Push</div>
              </li>
              <li class="recap-list-item recap-list-item--disabled">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="blacklist-item-11" type="checkbox" value="blacklist-item-11" checked="checked">
                    <label for="blacklist-item-7">Lorem_20160723</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">2 200</div>
              </li>
              <li class="recap-list-item">
                <div class="recap-list-item-inner">
                  <div class="inputCheckbox">
                    <input id="blacklist-item-12" type="checkbox" value="blacklist-item-12">
                    <label for="blacklist-item-12">Ipsum_20160820</label>
                  </div>
                </div>
                <div class="recap-list-item-inner">7 000</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="module-body-panel-footer">
    <a class="button button--ghost" href="#">Re-calculer</a>
  </div>
</div>
Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Au click sur le bouton ☰ menu lui ajouter la classe d'état .is-active puis ajouter la classe .have-sidebarOpen au composant .module.

Supprimer les classes ajoutées précédemment lors du click sur le bouton ☰ menu ayant la classe .is-active.

      • Réservation (tous critères)
      • Destination de la réservation
      • Date de la réservation
      • Montant de la réservation
      • Réservation (tous critères)
      • Destination de la réservation
      • Date de la réservation
      • Montant de la réservation
      • lorem ipsum dolor
      • lorem ipsum dolor
      • lorem ipsum dolor
      • lorem ipsum dolor
<div class="module-body-sidebar">
  <form class="form">
    <div class="form-group form-group--noLabel">
      <label class="form-group-label" for="sidebar-search">Rechercher des critères</label>
      <div class="form-group-input form-group-input--icon">
        <span class="icon icon--search"></span>
        <input id="sidebar-search" type="search" name="search" placeholder="Rechercher des critères">
      </div>
    </div>
  </form>
  <ul class="listToggle" data-depth="1">
    <li class="listToggle-item">
      <div class="listToggle-link is-active" role="button">
        <span class="icon icon--next"></span> Critères CRM
      </div>
      <div class="listToggle-content">
        <ul class="listToggle" data-depth="2">
          <li class="listToggle-item">
            <div class="listToggle-link is-active" role="button">
              <span class="icon icon--next"></span> Lorem ipsum dolor sit
            </div>
            <div class="listToggle-content">
              <ul class="listDraggable">
                <li class="listDraggable-item" role="button">Réservation (tous critères)</li>
                <li class="listDraggable-item" role="button">Destination de la réservation</li>
                <li class="listDraggable-item" role="button">Date de la réservation</li>
                <li class="listDraggable-item" role="button">Montant de la réservation</li>
              </ul>
            </div>
          </li>
          <li class="listToggle-item">
            <div class="listToggle-link" role="button">
              <span class="icon icon--next"></span> Réservations
            </div>
            <div class="listToggle-content">
              <ul class="listDraggable">
                <li class="listDraggable-item" role="button">Réservation (tous critères)</li>
                <li class="listDraggable-item" role="button">Destination de la réservation</li>
                <li class="listDraggable-item" role="button">Date de la réservation</li>
                <li class="listDraggable-item" role="button">Montant de la réservation</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li class="listToggle-item listToggle-item--alternate">
      <div class="listToggle-link is-active" role="button">
        <span class="icon icon--next"></span>
        <span class="icon icon--world"></span> Critères DMP
      </div>
      <div class="listToggle-content">
        <ul class="listToggle" data-depth="2">
          <li class="listToggle-item">
            <div class="listToggle-link is-active" role="button">
              <span class="icon icon--next"></span> Lorem ipsum dolor
            </div>
            <div class="listToggle-content">
              <ul class="listDraggable">
                <li class="listDraggable-item" role="button">lorem ipsum dolor</li>
                <li class="listDraggable-item" role="button">lorem ipsum dolor</li>
              </ul>
            </div>
          </li>
          <li class="listToggle-item">
            <div class="listToggle-link" role="button">
              <span class="icon icon--next"></span> Réservations
            </div>
            <div class="listToggle-content">
              <ul class="listDraggable">
                <li class="listDraggable-item" role="button">lorem ipsum dolor</li>
                <li class="listDraggable-item" role="button">lorem ipsum dolor</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
Destination de la réservation
Toutes les zones
Tous les pays
<div class="module-body-sidebar">
  <div class="module-body-sidebar-header">
    <div class="title title--level2">Destination de la réservation</div>
    <div>
      <div class="icon icon--close" role="button"></div>
    </div>
  </div>
  <div class="buttonGroupped buttonGroupped--block">
    <a class="button button--neutral is-active" href="#" role="button">Paramètres</a>
    <a class="button button--neutral" href="#" role="button">Calcul</a>
  </div>
  <div class="accordion">
    <div class="accordion-item">
      <div class="accordion-header is-active" role="button">
        <div class="accordion-header-title">Toutes les zones</div>
        <div class="accordion-header-icon">
          <div class="icon icon--down"></div>
        </div>
      </div>
      <div class="accordion-body">
        <ul class="listCheckbox">
          <li class="listCheckbox-item">
            <div class="inputCheckbox">
              <input id="listCheckbox-item-1" type="checkbox" value="listCheckbox-item-1" checked="checked">
              <label for="listCheckbox-item-1">Amérique du Nord</label>
            </div>
          </li>
          <li class="listCheckbox-item">
            <div class="inputCheckbox">
              <input id="listCheckbox-item-2" type="checkbox" value="listCheckbox-item-1">
              <label for="listCheckbox-item-2">Amérique du Sud</label>
            </div>
          </li>
          <li class="listCheckbox-item">
            <div class="inputCheckbox">
              <input id="listCheckbox-item-3" type="checkbox" value="listCheckbox-item-1">
              <label for="listCheckbox-item-3">Anatolie</label>
            </div>
          </li>
          <li class="listCheckbox-item">
            <div class="inputCheckbox">
              <input id="listCheckbox-item-4" type="checkbox" value="listCheckbox-item-1">
              <label for="listCheckbox-item-4">Other Country</label>
            </div>
          </li>
          <li class="listCheckbox-item">
            <div class="inputCheckbox">
              <input id="listCheckbox-item-5" type="checkbox" value="listCheckbox-item-1">
              <label for="listCheckbox-item-5">Other Country</label>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-header" role="button">
        <div class="accordion-header-title">Tous les pays</div>
        <div class="accordion-header-icon">
          <div class="icon icon--down"></div>
        </div>
      </div>
      <div class="accordion-body">
        <ul class="listCheckbox">
          <li class="listCheckbox-item">
            <div class="inputCheckbox">
              <input id="listCheckbox-item-4" type="checkbox" value="listCheckbox-item-4" checked="checked">
              <label for="listCheckbox-item-4">Lorem ipsum</label>
            </div>
          </li>
          <li class="listCheckbox-item">
            <div class="inputCheckbox">
              <input id="listCheckbox-item-5" type="checkbox" value="listCheckbox-item-5">
              <label for="listCheckbox-item-5">Lorem ipsum</label>
            </div>
          </li>
          <li class="listCheckbox-item">
            <div class="inputCheckbox">
              <input id="listCheckbox-item-6" type="checkbox" value="listCheckbox-item-6">
              <label for="listCheckbox-item-6">Lorem ipsum</label>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
Destination de la réservation
  • Total contacts
    83 999
  • Emails
    60 000
  • SMS
    10 000
  • Push
    13 000
  • Cookies
    0
  • Facebook
    666
  • Twitter
    333
<div class="module-body-sidebar">
  <div class="module-body-sidebar-header">
    <div class="title title--level2">Destination de la réservation</div>
    <div>
      <div class="icon icon--close" role="button"></div>
    </div>
  </div>
  <div class="buttonGroupped buttonGroupped--block">
    <a class="button button--neutral" href="#" role="button">Paramètres</a>
    <a class="button button--neutral is-active" href="#" role="button">Calcul</a>
  </div>
  <div class="recap">
    <ul class="recap-list">
      <li class="recap-list-item recap-list-item--divider">
        <div class="recap-list-item-inner">Total contacts</div>
        <div class="recap-list-item-inner">83 999</div>
      </li>
      <li class="recap-list-item">
        <div class="recap-list-item-inner">Emails</div>
        <div class="recap-list-item-inner">60 000</div>
      </li>
      <li class="recap-list-item">
        <div class="recap-list-item-inner">SMS</div>
        <div class="recap-list-item-inner">10 000</div>
      </li>
      <li class="recap-list-item">
        <div class="recap-list-item-inner">Push</div>
        <div class="recap-list-item-inner">13 000</div>
      </li>
      <li class="recap-list-item">
        <div class="recap-list-item-inner">Cookies</div>
        <div class="recap-list-item-inner">0</div>
      </li>
      <li class="recap-list-item">
        <div class="recap-list-item-inner">Facebook</div>
        <div class="recap-list-item-inner">666</div>
      </li>
      <li class="recap-list-item">
        <div class="recap-list-item-inner">Twitter</div>
        <div class="recap-list-item-inner">333</div>
      </li>
    </ul>
    <div class="recap-footer">
      <a class="button button--ghost" href="#">Re-calculer</a>
      <p class="recap-footer-legend">calcul au Ven. 10 Sept. à 18.01</p>
    </div>
  </div>
</div>

Module top header

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Audience sans titre
  • en cours
<div class="module-top-header">
  <div class="module-top-header-inner">
    <div class="title title--level1">Audience sans titre</div>
  </div>
  <div class="module-top-header-inner">
    <ul class="listInline">
      <li class="u-mrM">
        <div class="status status--alternate">
          <span class="icon icon--circleInProgress icon--mRight"></span>
          <span>en cours</span>
        </div>
      </li>
      <li>
        <div class="dropdown">
          <div class="dropdown-button dropdown-button--dark" role="button">
            Version 1 <span class="icon icon--down"></span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

<div class="module-top-nav">
  <div class="module-top-nav-inner">
    <div class="buttonGroupped buttonGroupped--alternate">
      <a class="button is-active" href="#" role="button">
        <span class="icon icon--clock icon--mRight"></span> Conception
      </a>
      <a class="button" href="#" role="button">
        <span class="icon icon--code icon--mRight"></span>Code
      </a>
      <a class="button" href="#" role="button">
        <span class="icon icon--comment icon--mRight"></span> Commentaires
      </a>
    </div>
  </div>
  <div class="module-top-nav-inner">
    <ul class="listInline">
      <li>
        <div class="dropdown">
          <div class="dropdown-button dropdown-button--light" role="button">
            Autres options <span class="icon icon--down"></span>
          </div>
        </div>
      </li>
      <li>
        <a class="button button--ghostAlphaDark" href="#" role="button">
          <span class="icon icon--import icon--mRight"></span> Importer
        </a>
      </li>
      <li>
        <a class="button button--ghostAlphaDark" href="#" role="button">Enregistrer</a>
      </li>
      <li>
        <a class="button button--tertiary" href="#" role="button">Quitter</a>
      </li>
    </ul>
  </div>
</div>

Module top tools

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

  • 20 000
    emails
  • 10 000
    sms
  • 5 000
    push
  • 6 000
    cookie
  • 5 0000
    facebook
  • 40
    twitter
  • Blacklists obligatoires
  • Lorem ipsum
  • Desabo_20160720
<div class="module-top-tools">
  <div class="module-top-tools-inner">
    <div>
      <div class="module-top-tools-inner-grid">
        <div>
          <button class="button button--ghost">Calculer</button>
        </div>
        <ul class="module-results">
          <li class="module-results-item">
            <div class="module-results-item-data">20 000</div>
            <div class="module-results-item-legend">emails</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">10 000</div>
            <div class="module-results-item-legend">sms</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">5 000</div>
            <div class="module-results-item-legend">push</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">6 000
              <div class="status">
                <div class="icon icon--circleAlert u-txtClr2"></div>
              </div>
            </div>
            <div class="module-results-item-legend">cookie</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">5 0000</div>
            <div class="module-results-item-legend">facebook</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">40</div>
            <div class="module-results-item-legend">twitter</div>
          </li>
        </ul>
      </div>
      <ul class="tagList">
        <li>
          <div class="tag tag--disabled">
            Blacklists obligatoires
            <button class="tag-button">
              <span class="icon icon--close"></span>
              Fermer
            </button>
          </div>
        </li>
        <li>
          <div class="tag">
            Lorem ipsum
            <button class="tag-button">
              <span class="icon icon--close"></span>
              Fermer
            </button>
          </div>
        </li>
        <li>
          <div class="tag">
            Desabo_20160720
            <button class="tag-button">
              <span class="icon icon--close"></span>
              Fermer
            </button>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="module-top-tools-inner">
    <ul class="listInline">
      <li>
        <button class="button button--neutral">
          <span class="icon icon--extend icon--mRight"></span> Enrichir
        </button>
      </li>
      <li>
        <button class="button">
          <span class="icon icon--settings icon--mRight"></span> Exclure
        </button>
      </li>
      <li>
        <button class="button button--ghostAlternate button--circular icon icon--menu">
          <span>Menu</span>
        </button>
      </li>
    </ul>
  </div>
</div>
36 813
contacts au Ven. 10 Sept. à 18.01
  • 20 000
    emails
  • 10 000
    sms
  • 5 000
    push
  • 6 000
    cookie
  • 5 0000
    facebook
  • 40
    twitter
  • Blacklists obligatoires
  • Lorem ipsum
  • Desabo_20160720
<div class="module-top-tools">
  <div class="module-top-tools-inner">
    <div>
      <div class="module-top-tools-inner-grid">
        <div>
          <div class="module-resultsBig">
            <div class="module-resultsBig-data">36 813</div>
            <div class="module-resultsBig-legend">contacts au Ven. 10 Sept. à 18.01</div>
          </div>
        </div>
        <ul class="module-results">
          <li class="module-results-item">
            <div class="module-results-item-data">20 000</div>
            <div class="module-results-item-legend">emails</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">10 000</div>
            <div class="module-results-item-legend">sms</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">5 000</div>
            <div class="module-results-item-legend">push</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">6 000
              <div class="status">
                <div class="icon icon--circleAlert u-txtClr2"></div>
              </div>
            </div>
            <div class="module-results-item-legend">cookie</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">5 0000</div>
            <div class="module-results-item-legend">facebook</div>
          </li>
          <li class="module-results-item">
            <div class="module-results-item-data">40</div>
            <div class="module-results-item-legend">twitter</div>
          </li>
        </ul>
      </div>
      <ul class="tagList">
        <li>
          <div class="tag tag--disabled">
            Blacklists obligatoires
            <button class="tag-button">
              <span class="icon icon--close"></span>
              Fermer
            </button>
          </div>
        </li>
        <li>
          <div class="tag">
            Lorem ipsum
            <button class="tag-button">
              <span class="icon icon--close"></span>
              Fermer
            </button>
          </div>
        </li>
        <li>
          <div class="tag">
            Desabo_20160720
            <button class="tag-button">
              <span class="icon icon--close"></span>
              Fermer
            </button>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="module-top-tools-inner">
    <ul class="listInline">
      <li>
        <button class="button button--neutral">
          <span class="icon icon--extend icon--mRight"></span> Enrichir
        </button>
      </li>
      <li>
        <button class="button">
          <span class="icon icon--settings icon--mRight"></span> Exclure
        </button>
      </li>
      <li>
        <button class="button button--ghostAlternate button--circular icon icon--menu">
          <span>Menu</span>
        </button>
      </li>
    </ul>
  </div>
</div>