Ces composant définissent la structure et une partie du contenu des différents modules de l'app (module d'Audience, module de Campagne...).
<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>
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.
<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>
<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>
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.
<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>
<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>
<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>
<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>
<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>
<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>
<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>