Styleguide

Accordion

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

La classe .is-active sur les éléments .accordion-header permet d'en afficher le contenu.

Toutes les zones

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tous les pays

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<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">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </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">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

Avatar

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Le composant d'avatar se déclare avec la classe .avatar.

Un border radius est appliqué directement sur l'image. L'image doit avoir ces caractéristiques :

  • Ratio : carré
  • Taille : 40*40 px
  • Format : jpg, png, gif
Laurent Sutterlity 
<div class="avatar">
  <div class="avatar-thumb">
    <img src="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg" width="40" height="40" alt="Laurent Sutterlity" />
  </div>
</div>

Il est possible d'avoir une image rétina en utilisant l'attribut srcset (voir support navigateur).

Laurent Sutterlity 
<div class="avatar">
  <div class="avatar-thumb">
    <img src="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg"
         srcset="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg 1x,
                 http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@2x.jpg 2x"
         width="40" height="40" alt="Laurent Sutterlity" />
  </div>
</div>

Cartes Audience

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Les éléments listés sur cette page concernent les éléments uniques à la section "Audience" Les éléments composant le layout de la page ne sont pas uniques (on les retrouve sur d'autres sections), ils sont donc catalogués sur la page "Module"

Test_Sensibles_Caraibes_V1

Ven 10 sept. 14.07

1939 contacts
erreur 
<div class="u-bkgClr0Lightest u-paM">
  <!-- Début du markup du composant -->
  <div class="audienceCard">
    <div class="audienceCard-main">
      <div class="audienceCard-icon"><span class="icon icon--audience"></span>
      </div>
      <div class="audienceCard-content"><a href="#" class="audienceCard-titleLink"><h3 class="audienceCard-title">Test_Sensibles_Caraibes_V1</h3></a>
        <p class="audienceCard-detail">Ven 10 sept. 14.07</p>
      </div>
    </div>
    <footer class="audienceCard-footer">
      <div class="audienceCard-footer-count">
        1939 <small>contacts</small>
      </div>
      <div class="status status--alternate">
        erreur
        <span class="icon icon--mLeft u-txtClr2 icon--circleAlert"></span>
      </div>
    </footer>
  </div>
  <!-- Fin du markup du composant -->
</div>

Cartes Graph Audience

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Carte Graph Audience (défaut)

Destination de la réservation

  • Antilles
  • Asie du Sud-Est

83 907 contacts 

<div class="audienceGraph-card">
  <div class="audienceGraph-card-content">
    <div class="audienceGraph-card-content-inner">
      <h4 class="audienceGraph-card-title">Destination de la réservation</h4>
      <ul class="audienceGraph-card-options">
        <li class="audienceGraph-card-option">
          Antilles
        </li>
        <li class="audienceGraph-card-option">
          Asie du Sud-Est
        </li>
      </ul>
    </div>
  </div>
  <footer class="audienceGraph-card-footer">
    <p class="audienceGraph-card-info">
      83 907 contacts
    </p>
  </footer>
</div>

Carte Graph Audience (sombre)

Destination de la réservation

CRM tous les contacts

CRM Mes sites web 

<div class="audienceGraph-card audienceGraph-card--dark">
  <div class="audienceGraph-card-content">
    <div class="audienceGraph-card-content-inner">
      <h4 class="audienceGraph-card-title">Destination de la réservation</h4>
    </div>
  </div>
  <footer class="audienceGraph-card-footer">
    <p>
      CRM tous les contacts
    </p>
    <p>
      CRM Mes sites web
    </p>
  </footer>
</div>

Carte Graph Audience (DMP)

Date de navigation

  • Il y a 1 mois

83 907 contacts 

<div class="audienceGraph-card audienceGraph-card--dmp">
  <div class="audienceGraph-card-content">
    <div class="audienceGraph-card-content-icon">
      <span class="icon icon--dmp"></span>
    </div>
    <div class="audienceGraph-card-content-inner">
      <h4 class="audienceGraph-card-title">Date de navigation</h4>
      <ul class="audienceGraph-card-options">
        <li class="audienceGraph-card-option">
          Il y a 1 mois
        </li>
      </ul>
    </div>
  </div>
  <footer class="audienceGraph-card-footer">
    <p class="audienceGraph-card-info">
      83 907 contacts
    </p>
  </footer>
</div>

Carte Graph Audience (état actif)

  • Le modifier is-active permet d'ajouter l'état actif à n'importe quel style de Carte du Graph d'Audience
  • Le bouton audienceGraph-card-closeButton peut être également ajouté au markup de la carte

Destination de la réservation

  • Antilles

83 907 contacts

Destination de la réservation

CRM tous les contacts

CRM Mes sites web

Date de navigation

  • Il y a 1 mois

83 907 contacts 

<div class="audienceGraph-card is-active u-mrM">
  <div class="audienceGraph-card-content">
    <div class="audienceGraph-card-content-inner">
      <button type="button" class="audienceGraph-card-closeButton">
        <span class="icon icon--close"></span>
      </button>
      <h4 class="audienceGraph-card-title">Destination de la réservation</h4>
      <ul class="audienceGraph-card-options">
        <li class="audienceGraph-card-option">
          Antilles
        </li>
      </ul>
    </div>
  </div>
  <footer class="audienceGraph-card-footer">
    <p class="audienceGraph-card-info">
      83 907 contacts
    </p>
  </footer>
</div>

<div class="audienceGraph-card audienceGraph-card--dark u-mrM is-active">
  <div class="audienceGraph-card-content">
    <div class="audienceGraph-card-content-inner">
      <button type="button" class="audienceGraph-card-closeButton">
        <span class="icon icon--close"></span>
      </button>
      <h4 class="audienceGraph-card-title">Destination de la réservation</h4>
    </div>
  </div>
  <footer class="audienceGraph-card-footer">
    <p>
      CRM tous les contacts
    </p>
    <p>
      CRM Mes sites web
    </p>
  </footer>
</div>

<div class="audienceGraph-card audienceGraph-card--dmp is-active">
  <div class="audienceGraph-card-content">
    <div class="audienceGraph-card-content-icon">
      <span class="icon icon--dmp"></span>
    </div>
    <div class="audienceGraph-card-content-inner">
      <button type="button" class="audienceGraph-card-closeButton">
        <span class="icon icon--close"></span>
      </button>
      <h4 class="audienceGraph-card-title">Date de navigation</h4>
      <ul class="audienceGraph-card-options">
        <li class="audienceGraph-card-option">
          Il y a 1 mois
        </li>
      </ul>
    </div>
  </div>
  <footer class="audienceGraph-card-footer">
    <p class="audienceGraph-card-info">
      83 907 contacts
    </p>
  </footer>
</div>

Carte Graph Audience (calcul d'audience)

Le footer des cartes de Graph d'audience est prévu pour pouvoir contenir un bouton ou un loader

Destination de la réservation

  • Antilles
  • Asie du Sud-Est

Destination de la réservation

  • Antilles
  • Asie du Sud-Est
En cours de calcul…
<div class="audienceGraph-card">
  <div class="audienceGraph-card-content">
    <div class="audienceGraph-card-content-inner">
      <h4 class="audienceGraph-card-title">Destination de la réservation</h4>
      <ul class="audienceGraph-card-options">
        <li class="audienceGraph-card-option">
          Antilles
        </li>
        <li class="audienceGraph-card-option">
          Asie du Sud-Est
        </li>
      </ul>
    </div>
  </div>
  <footer class="audienceGraph-card-footer">
    <button type="button" class="audienceGraph-card-footer-button">
      calculer
    </button>
  </footer>
</div>

<div class="audienceGraph-card u-mlM">
  <div class="audienceGraph-card-content">
    <div class="audienceGraph-card-content-inner">
      <h4 class="audienceGraph-card-title">Destination de la réservation</h4>
      <ul class="audienceGraph-card-options">
        <li class="audienceGraph-card-option">
          Antilles
        </li>
        <li class="audienceGraph-card-option">
          Asie du Sud-Est
        </li>
      </ul>
    </div>
  </div>
  <footer class="audienceGraph-card-footer">
    <div class="loader">
      <div class="loader-img">
        <img src="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/loader.png">
      </div>
      <div class="loader-txt">En cours de calcul…</div>
    </div>
  </footer>
</div>

Carte Graph Audience (avec ancres)

Lors du drag and drop, dans "ancres" sont affichées autour de la carte du graph d'audience

Destination de la réservation

  • Antilles
  • Asie du Sud-Est

83 907 contacts

ou
et
ou
et 
<div class="u-maL">
  <div class="audienceGraph-card is-active">
    <div class="audienceGraph-card-content">
      <div class="audienceGraph-card-content-inner">
        <h4 class="audienceGraph-card-title">Destination de la réservation</h4>
        <ul class="audienceGraph-card-options">
          <li class="audienceGraph-card-option">
            Antilles
          </li>
          <li class="audienceGraph-card-option">
            Asie du Sud-Est
          </li>
        </ul>
      </div>
    </div>
    <footer class="audienceGraph-card-footer">
      <p class="audienceGraph-card-info">
        83 907 contacts
      </p>
    </footer>
    <div class="audienceGraph-card-anchor audienceGraph-card-anchor--top">
      ou
    </div>
    <div class="audienceGraph-card-anchor audienceGraph-card-anchor--right">
      et
    </div>
    <div class="audienceGraph-card-anchor audienceGraph-card-anchor--bottom">
      ou
    </div>
    <div class="audienceGraph-card-anchor audienceGraph-card-anchor--left">
      et
    </div>
  </div>
</div>

Groupes de Cartes Graph Audience

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Groupe de Cartes Graph Audience (et états)

  • La classe is-hovered sert à activer / désactiver le style au hover.

(L'état de hover doit être géré en javascript, pour pouvoir fonctionner correctement quand les groupes sont nestés)

  • La classe is-active sert à afficher l'état actif d'un groupe

A noter : Ici, les styles inline ajoutés ne sont pas obligatoires, ils sont là pour les besoins du styleguide

Thème de la page

  • Soleil

43 233 Contacts

Date de la réservation

  • Il y a 1 mois

32 045 contacts

Total groupe: 75 278 contacts estimés

Thème de la page

  • Soleil

43 233 Contacts

Date de la réservation

  • Il y a 1 mois

32 045 contacts

Total groupe: 75 278 contacts estimés

Thème de la page

  • Soleil

43 233 Contacts

Date de la réservation

  • Il y a 1 mois

32 045 contacts

Total groupe: 75 278 contacts estimés 
<div class="audienceGraph-cardGroup" style="display:inline-block">
  <div class="audienceGraph-card audienceGraph-card--dmp" style="margin-right: 8rem;">
    <div class="audienceGraph-card-content">
      <div class="audienceGraph-card-content-icon"><span class="icon icon--dmp"></span>
      </div>
      <div class="audienceGraph-card-content-inner">
        <h4 class="audienceGraph-card-title">Thème de la page</h4>
        <ul class="audienceGraph-card-options">
          <li class="audienceGraph-card-option">
            Soleil
          </li>
        </ul>
      </div>
    </div>
    <footer class="audienceGraph-card-footer">
      <p class="audienceGraph-card-info">
        43 233 Contacts
      </p>
    </footer>
  </div>
  <div class="audienceGraph-card audienceGraph-card--dmp">
    <div class="audienceGraph-card-content">
      <div class="audienceGraph-card-content-icon"><span class="icon icon--dmp"></span>
      </div>
      <div class="audienceGraph-card-content-inner">
        <h4 class="audienceGraph-card-title">Date de la réservation</h4>
        <ul class="audienceGraph-card-options">
          <li class="audienceGraph-card-option">
            Il y a 1 mois
          </li>
        </ul>
      </div>
    </div>
    <footer class="audienceGraph-card-footer">
      <p class="audienceGraph-card-info">
        32 045 contacts
      </p>
    </footer>
  </div>
  <div class="audienceGraph-cardGroup-count">
    Total groupe: <em>75 278 contacts estimés</em>
  </div>
</div>

<div class="audienceGraph-cardGroup is-hovered" style="display:inline-block">
  <div class="audienceGraph-card audienceGraph-card--dmp" style="margin-right: 8rem;">
    <div class="audienceGraph-card-content">
      <div class="audienceGraph-card-content-icon"><span class="icon icon--dmp"></span>
      </div>
      <div class="audienceGraph-card-content-inner">
        <h4 class="audienceGraph-card-title">Thème de la page</h4>
        <ul class="audienceGraph-card-options">
          <li class="audienceGraph-card-option">
            Soleil
          </li>
        </ul>
      </div>
    </div>
    <footer class="audienceGraph-card-footer">
      <p class="audienceGraph-card-info">
        43 233 Contacts
      </p>
    </footer>
  </div>
  <div class="audienceGraph-card audienceGraph-card--dmp">
    <div class="audienceGraph-card-content">
      <div class="audienceGraph-card-content-icon"><span class="icon icon--dmp"></span>
      </div>
      <div class="audienceGraph-card-content-inner">
        <h4 class="audienceGraph-card-title">Date de la réservation</h4>
        <ul class="audienceGraph-card-options">
          <li class="audienceGraph-card-option">
            Il y a 1 mois
          </li>
        </ul>
      </div>
    </div>
    <footer class="audienceGraph-card-footer">
      <p class="audienceGraph-card-info">
        32 045 contacts
      </p>
    </footer>
  </div>
  <div class="audienceGraph-cardGroup-count">
    Total groupe: <em>75 278 contacts estimés</em>
  </div>
</div>

<div class="audienceGraph-cardGroup u-mtL is-hovered is-active" style="display:inline-block">
  <div class="audienceGraph-card audienceGraph-card--dmp" style="margin-right: 8rem;">
    <div class="audienceGraph-card-content">
      <div class="audienceGraph-card-content-icon"><span class="icon icon--dmp"></span>
      </div>
      <div class="audienceGraph-card-content-inner">
        <h4 class="audienceGraph-card-title">Thème de la page</h4>
        <ul class="audienceGraph-card-options">
          <li class="audienceGraph-card-option">
            Soleil
          </li>
        </ul>
      </div>
    </div>
    <footer class="audienceGraph-card-footer">
      <p class="audienceGraph-card-info">
        43 233 Contacts
      </p>
    </footer>
  </div>
  <div class="audienceGraph-card audienceGraph-card--dmp">
    <div class="audienceGraph-card-content">
      <div class="audienceGraph-card-content-icon"><span class="icon icon--dmp"></span>
      </div>
      <div class="audienceGraph-card-content-inner">
        <h4 class="audienceGraph-card-title">Date de la réservation</h4>
        <ul class="audienceGraph-card-options">
          <li class="audienceGraph-card-option">
            Il y a 1 mois
          </li>
        </ul>
      </div>
    </div>
    <footer class="audienceGraph-card-footer">
      <p class="audienceGraph-card-info">
        32 045 contacts
      </p>
    </footer>
  </div>
  <div class="audienceGraph-cardGroup-count">
    Total groupe: <em>75 278 contacts estimés</em>
  </div>
</div>

Groupe de Cartes Graph Audience (ancres)

Lors du drag and drop, des "ancres" sont affichées autour des groupes de cartes du graph d'audience

Thème de la page

  • Soleil

43 233 Contacts

Date de la réservation

  • Il y a 1 mois

32 045 contacts

Total groupe: 75 278 contacts estimés
ou
et
ou
et 
<div class="u-maL">
  <div class="audienceGraph-cardGroup is-hovered is-active" style="display:inline-block">
    <div class="audienceGraph-card audienceGraph-card--dmp" style="margin-right: 8rem;">
      <div class="audienceGraph-card-content">
        <div class="audienceGraph-card-content-icon"><span class="icon icon--dmp"></span>
        </div>
        <div class="audienceGraph-card-content-inner">
          <h4 class="audienceGraph-card-title">Thème de la page</h4>
          <ul class="audienceGraph-card-options">
            <li class="audienceGraph-card-option">
              Soleil
            </li>
          </ul>
        </div>
      </div>
      <footer class="audienceGraph-card-footer">
        <p class="audienceGraph-card-info">
          43 233 Contacts
        </p>
      </footer>
    </div>
    <div class="audienceGraph-card audienceGraph-card--dmp">
      <div class="audienceGraph-card-content">
        <div class="audienceGraph-card-content-icon"><span class="icon icon--dmp"></span>
        </div>
        <div class="audienceGraph-card-content-inner">
          <h4 class="audienceGraph-card-title">Date de la réservation</h4>
          <ul class="audienceGraph-card-options">
            <li class="audienceGraph-card-option">
              Il y a 1 mois
            </li>
          </ul>
        </div>
      </div>
      <footer class="audienceGraph-card-footer">
        <p class="audienceGraph-card-info">
          32 045 contacts
        </p>
      </footer>
    </div>
    <div class="audienceGraph-cardGroup-count">
      Total groupe: <em>75 278 contacts estimés</em>
    </div>
    <div class="audienceGraph-cardGroup-anchor audienceGraph-cardGroup-anchor--top">
      ou
    </div>
    <div class="audienceGraph-cardGroup-anchor audienceGraph-cardGroup-anchor--right">
      et
    </div>
    <div class="audienceGraph-cardGroup-anchor audienceGraph-cardGroup-anchor--bottom">
      ou
    </div>
    <div class="audienceGraph-cardGroup-anchor audienceGraph-cardGroup-anchor--left">
      et
    </div>
  </div>
</div>
Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

La classe is-open permet d'afficher l'état ouvert du dropdown

ou
  • et
  • ou
ou
  • et
  • ou 
<div class="audienceGraph-dropdown">
  <div class="audienceGraph-dropdown-button" role="button">
    ou <span class="icon icon--downAlt"></span>
  </div>
  <ul class="audienceGraph-dropdown-content">
    <li class="audienceGraph-dropdown-item">
      et
    </li>
    <li class="audienceGraph-dropdown-item">
      ou
    </li>
  </ul>
</div>

<div class="audienceGraph-dropdown is-open" >
  <div class="audienceGraph-dropdown-button" role="button">
    ou <span class="icon icon--downAlt"></span>
  </div>
  <ul class="audienceGraph-dropdown-content">
    <li class="audienceGraph-dropdown-item">
      et
    </li>
    <li class="audienceGraph-dropdown-item">
      ou
    </li>
  </ul>
</div>

Bouton

Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Ajout du Style tertiaire, du style neutre et de l'état actif
  • 0.0.1: Ajout du composant

Style de base

Le style de base convient pour les boutons d'action primaire.

Ajouter la classe .button aux éléments <a>, <button>, ou <input />.

Enregistrer 
<a class="button" href="#" role="button">Enregistrer</a>
<button class="button">Enregistrer</button>
<input class="button" type="submit" value="Enregistrer">

Style secondaire

Le style secondaire convient pour les boutons d'action secondaire.

Ajouter la classe de modification .button--secondary à l'élément ayant la classe .button afin de modifier son style.

Quitter 
<a class="button button--secondary" href="#" role="button">Quitter</a>
<button class="button button--secondary">Quitter</button>
<input class="button button--secondary" type="submit" value="Quitter">

Style tertiaire

Le style tertiaire convient pour les boutons d'action secondaire sur fond noir, rouge et bleu.

Ajouter la classe de modification .button--tertiary à l'élément ayant la classe .button afin de modifier son style.

Ajouter aussi une classe utilitaire de couleurs à l'élément parent afin de faire hériter la couleur de texte de l'utilitaire au composant.

Quitter 
<div class="u-bkgClr0Dark u-txtClr0Dark u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>
Quitter 
<div class="u-bkgClr1 u-txtClr1 u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>
Quitter 
<div class="u-bkgClr3 u-txtClr3 u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>

Style neutre

Le style neutre convient pour les boutons d'action neutre.

Ajouter la classe de modification .button--neutral à l'élément ayant la classe .button afin de modifier son style.

Quitter 
<a class="button button--neutral" href="#" role="button">Quitter</a>
<button class="button button--neutral">Quitter</button>
<input class="button button--neutral" type="submit" value="Quitter">

Style ghost

Le style ghost convient pour les boutons sur fond blanc.

Ajouter la classe de modification .button--ghost à l'élément ayant la classe .button afin de modifier son style.

Connexion 
<a class="button button--ghost" href="#" role="button">Connexion</a>
<button class="button button--ghost">Connexion</button>
<input class="button button--ghost" type="submit" value="Connexion">

Style ghostAlphaDark

Le style ghostAlphaDark convient pour les boutons sur fond rouge et bleu.

Ajouter la classe de modification .button--ghostAlphaDark à l'élément ayant la classe .button afin de modifier son style.

Connexion 
<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaDark">Connexion</button>
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion">
</div>
Connexion 
<div class="u-bkgClr3 u-paM">
  <a class="button button--ghostAlphaDark" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaDark">Connexion</button>
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion">
</div>

Style ghostAlphaLight

Le style ghostAlphaLight convient pour les boutons sur fond rouge et bleu.

Ajouter la classe de modification .button--ghostAlphaLight à l'élément ayant la classe .button afin de modifier son style.

Connexion 
<div class="u-bkgClr0Dark u-paM">
  <a class="button button--ghostAlphaLight" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaLight">Connexion</button>
  <input class="button button--ghostAlphaLight" type="submit" value="Connexion">
</div>

Style ghostAlternate

Le style ghostAlternate convient pour les boutons alternattifs

Ajouter la classe de modification .button--ghostAlternate à l'élément ayant la classe .button afin de modifier son style.

Connexion 
<a class="button button--ghostAlternate" href="#" role="button">Connexion</a>
<button class="button button--ghostAlternate">Connexion</button>
<input class="button button--ghostAlternate" type="submit" value="Connexion">

État actif

Ajouter la classe d'état .is-active sur le composant .button afin de modifier son apparence.

Sauvegarder
Connexion
Connexion 
<a class="button is-active" href="#" role="button">Sauvegarder</a>
<button class="button button--secondary is-active">Quitter</button>
<button class="button button--neutral is-active">Quitter</button>
<input class="button button--ghost is-active" type="submit" value="Connexion">
<input class="button button--ghostAlternate is-active" type="submit" value="Connexion">

<div class="u-bkgClr0Dark u-txtClr0Dark u-paM u-mtM">
  <button class="button button--tertiary is-active">Quitter</button>
   <a class="button button--ghostAlphaLight is-active" href="#" role="button">Connexion</a>
</div>

<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark is-active" href="#" role="button">Connexion</a>
</div>

État désactivé

  • <a> : Ajouter la classe d'état .is-disabled
  • <input /> ou <button /> : Ajouter l'attribut disabled
Sauvegarder
Connexion
Connexion 
<a class="button is-disabled" href="#" role="button">Sauvegarder</a>
<button class="button button--secondary" disabled>Quitter</button>
<button class="button button--neutral" disabled>Quitter</button>
<input class="button button--ghost" type="submit" value="Connexion" disabled>
<input class="button button--ghostAlternate" type="submit" value="Connexion" disabled>

<div class="u-bkgClr0Dark u-txtClr0Dark u-paM u-mtM">
  <button class="button button--tertiary" disabled>Quitter</button>
  <a class="button button--ghostAlphaLight is-disabled" href="#" role="button">Connexion</a>
</div>

<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark is-disabled" href="#" role="button">Connexion</a>
</div>

<div class="u-bkgClr3 u-paM">
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion" disabled>
</div>

<div class="u-bkgClr0Dark u-paM">
  <input class="button button--ghostAlphaLight" type="submit" value="Connexion" disabled>
</div>

Bouton pleine largeur

Ajouter la classe de modification .button--block à l'élément ayant la classe .button afin qu'il prenne toute la largeur de son parent.

Sauvegarder
<a class="button button--block" href="#" role="button">Sauvegarder</a>

Boutons circulaires

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Ajouter la classe de modification .button--circular à l'élément ayant la classe .button afin de modifier son style.

<button class="button button--circular icon icon--add">
  <span>Ajouter</span>
</button>
<button class="button button--circular button--secondary icon icon--folder">
  <span>Mes fichiers/span>
</button>
<button class="button button--circular button--ghostAlternate icon icon--notif">
  <div class="notifNumber">88</div>
  <span>Menu</span>
</button>

Boutons grouppés

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Boutons groupés de base

Grouper les composants .button dans un élément ayant la classe .buttonGroupped.

Conception Code Commentaires 
<div class="buttonGroupped">
  <a class="button is-active" href="#" role="button">Conception</a>
  <a class="button" href="#" role="button">Code</a>
  <a class="button" href="#" role="button">Commentaires</a>
</div>

Boutons groupés avec icônes

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .button .

Il est possible d'ajouter des marges en fonction de la position de l'icône :

  • .icon.icon-xxx.icon--mRight : marge à droite
  • .icon.icon-xxx.icon--mleft : marge à gauche
Conception Code Commentaires 
<div class="buttonGroupped">
  <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>

Boutons groupés de type alternate

Le style alternate convient pour les boutons sur fond noir, rouge et bleu.

Ajouter la classe de modification .buttonGroupped--alternate à l'élément ayant la classe .buttonGroupped afin de modifier son style.

Ajouter aussi une classe utilitaire de couleurs à l'élément ayant la classe .buttonGroupped--alternate afin de faire hériter la couleur de texte de l'utilitaire au composant.

Conception Code Commentaires 
<div class="u-bkgClr0Dark u-paS">
  <div class="buttonGroupped buttonGroupped--alternate u-txtClr0Dark">
    <a class="button is-active" href="#" role="button">Conception</a>
    <a class="button" href="#" role="button">Code</a>
    <a class="button" href="#" role="button">Commentaires</a>
  </div>
</div>
Conception Code Commentaires 
<div class="u-bkgClr1 u-paS">
  <div class="buttonGroupped buttonGroupped--alternate u-txtClr1">
    <a class="button is-active" href="#" role="button">Conception</a>
    <a class="button" href="#" role="button">Code</a>
    <a class="button" href="#" role="button">Commentaires</a>
  </div>
</div>
Conception Code Commentaires 
<div class="u-bkgClr3 u-paS">
  <div class="buttonGroupped buttonGroupped--alternate u-txtClr3">
    <a class="button is-active" href="#" role="button">Conception</a>
    <a class="button" href="#" role="button">Code</a>
    <a class="button" href="#" role="button">Commentaires</a>
  </div>
</div>

Boutons groupés pleine largeur

Ajouter la classe de modification .buttonGroupped--block à l'élément ayant la classe .buttonGroupped afin qu'il prenne toute la largeur de son parent.

Conception Code Commentaires 
<div class="buttonGroupped buttonGroupped--block">
  <a class="button is-active" href="#" role="button">Conception</a>
  <a class="button" href="#" role="button">Code</a>
  <a class="button" href="#" role="button">Commentaires</a>
</div>

Bouton avec icône

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Bouton avec icône uniquement

Ajouter les classes .icon .icon-xxx à l'élément .button.

Le texte doit être contenu dans une balise <span> (accessible uniquement aux lecteurs d'écran)

Dupliquer Quitter Supprimer 
<a class="button icon icon--duplicate" href="#" role="button">
  <span>Dupliquer</span>
</a>

<a class="button button--secondary icon icon--close" href="#" role="button">
  <span>Quitter</span>
</a>

<a class="button button--ghost icon icon--trash" href="#" role="button">
  <span>Supprimer</span>
</a>

Bouton avec icône et texte

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .button.

Il est possible d'ajouter des marges en fonction de la position de l'icône :

  • .icon.icon-xxx.icon--mRight : marge à droite
  • .icon.icon-xxx.icon--mleft : marge à gauche
Dupliquer Quitter Supprimer 
<a class="button" href="#" role="button">
  <span class="icon icon--duplicate icon--mRight"></span> Dupliquer
</a>

<a class="button button--secondary" href="#" role="button">
  Quitter <span class="icon icon--close icon--mLeft"></span>
</a>

<a class="button button--ghost" href="#" role="button">
  <span class="icon icon--trash icon--mRight"></span> Supprimer
</a>

Dashboard

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Wrapper

La classe .dashboard permet d'encapsuler les éléments du dashboard, et de limiter leur largeur.

Bloc de Titre

L'élément dashboard-titleBlock permet de positionner le Titre et les éléments d'action d'une section du dashBoard.

Indicateurs

Partager Nouvelle audience 
<div class="dashboard-titleBlock">
  <div class="dashboard-titleBlock-inner">
    <h1 class="title title--level1">Indicateurs</h1>
  </div>
  <div class="dashboard-titleBlock-inner--push">
    <a href="#" class="link link--light u-mrM">
      <span class="icon icon--share icon--mRight"></span> Partager
    </a>
    <a class="button" role="button" href="#">
      Nouvelle audience
    </a>
  </div>
</div>

Cartes Dashboard

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Carte KPI

Total de contacts en base

10,4 mill.
ce mois dernier +1,2 
<div class="u-bkgClr0Lightest u-paM">
  <!-- Début du markup du composant -->
    <div class="dashboardCard dashboardCard--stat">
      <h3 class="dashboardCard-title">
        Total de contacts en base
      </h3>
      <div class="dashboardCard-main">
        <div class="dashboardCard-hugeStat">
          10,4<small> mill.</small>
        </div>
        <div class="dashboardCard-detail">
          ce mois dernier <em>+1,2 <span class="icon icon--fatArrowTop"></span></em>
        </div>
      </div>
    </div>
    <!-- Fin du markup du composant -->
</div>

Carte tableau de statistiques

Terminaux de consultation

Mobiles 69 %
Tablettes 5 %
Postes Fixes 26 % 
<div class="u-bkgClr0Lightest u-paM">
  <!-- Début du markup du composant -->
    <div class="dashboardCard dashboardCard--statTable">
      <h3 class="dashboardCard-title">
        Terminaux de consultation
      </h3>
      <div class="dashboardCard-main">
        <table class="dashboardCard-table">
          <tr class="dashboardCard-table-row">
            <td class="dashboardCard-table-cell">
              <span class="icon icon--mobile"></span> Mobiles
            </td>
            <td class="dashboardCard-table-cell dashboardCard-table-cell--stat">
              69<small> %</small>
            </td>
          </tr>
          <tr class="dashboardCard-table-row">
            <td class="dashboardCard-table-cell">
              <span class="icon icon--tablet"></span> Tablettes
            </td>
            <td class="dashboardCard-table-cell dashboardCard-table-cell--stat">
              5<small> %</small>
            </td>
          </tr>
          <tr class="dashboardCard-table-row">
            <td class="dashboardCard-table-cell">
              <span class="icon icon--desktop"></span> Postes Fixes
            </td>
            <td class="dashboardCard-table-cell dashboardCard-table-cell--stat">
              26<small> %</small>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <!-- Fin du markup du composant -->
</div>

Carte liste

Top 5 des centres d'intérêt

  1. Antilles
  2. San Francisco
  3. Cuba
  4. Tokyo
  5. Lisbonne
<div class="u-bkgClr0Lightest u-paM">
  <!-- Début du markup du composant -->
    <div class="dashboardCard dashboardCard--list">
      <h3 class="dashboardCard-title">
        Top 5 des centres d'intérêt
      </h3>
      <div class="dashboardCard-main">
        <ol class="dashboardCard-list">
          <li class="dashboardCard-list-element">Antilles</li>
          <li class="dashboardCard-list-element">San Francisco</li>
          <li class="dashboardCard-list-element">Cuba</li>
          <li class="dashboardCard-list-element">Tokyo</li>
          <li class="dashboardCard-list-element">Lisbonne</li>
        </ol>
      </div>
    </div>
    <!-- Fin du markup du composant -->
</div>
Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Mise à jour de la documentation, plus de data-attributes et de comportement js
  • 0.0.1: Ajout du composant

Les éléments dropdown et dropdown-content prennent la classe is-open lors de l'ouverture du dropdown. Les styles inline sont là pour les besoins du styleguide, et ne sont pas obligatoires.

L'élément dropdown-content peut également tout à fait être positionné dans le et non dans son parent.

Toute l'équipe 
<div class="dropdown is-open">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content is-open" style="position: relative; margin-top: 10px;">
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Moi</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Rémi Fericelli</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Muriel Kaplan</a>
    </li>
  </ul>
</div>
Laurent sutterlity 
<div class="dropdown is-open">
  <div class="dropdown-button" role="button">
    <div class="avatar">
      <div class="avatar-thumb">
        <img src="https://avatars0.githubusercontent.com/u/709456?v=3&amp;s=460" width="40" height="40" alt="Laurent sutterlity" />
      </div>
    </div>
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content is-open" style="position: relative; margin-top: 10px;">
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Mon compte</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Adminstration</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">
      <span class="icon icon--disconnect icon--mRight"></span> Déconnexion</a>
    </li>
  </ul>
</div>
Toute l'équipe 
<div class="u-bkgClr1 u-paM">
  <div class="dropdown is-open">
    <div class="dropdown-button dropdown-button--light" role="button">
      Toute l'équipe
      <span class="icon icon--down"></span>
    </div>
    <ul class="dropdown-content is-open" style="position: relative; margin-top: 10px;">
      <li class="dropdown-item">
        <a href="#" class="dropdown-link">Moi</a>
      </li>
      <li class="dropdown-item">
        <a href="#" class="dropdown-link">Rémi Fericelli</a>
      </li>
      <li class="dropdown-item">
        <a href="#" class="dropdown-link">Muriel Kaplan</a>
      </li>
    </ul>
  </div>
</div>

Liste de Filtres

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

L'élément de liste de filtre est un groupe de bouton radio avec icones, permettant par exemple de passer d'un layout à l'autre

<ul class="filtersList">
  <li class="filtersList-element">
    <input type="radio" name="filterList-audience" id="filterList-audience-list" checked="true">
    <label class="filtersList-element-button" for="filterList-audience-list">
      <span class="filtersList-element-button-text">Affichage en liste</span>
      <span class="icon icon--layoutList"></span>
    </label>
  </li>
  <li class="filtersList-element">
    <input type="radio" name="filterList-audience" id="filterList-audience-blocks">
    <label class="filtersList-element-button" for="filterList-audience-blocks">
      <span class="filtersList-element-button-text">Affichage en blocs</span>
      <span class="icon icon--layoutBlocks"></span>
    </label>
  </li>
</ul>

Formulaire

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Formulaire type

  • Les éléments de type <form> prennent la classe .form
  • Chaque ligne d'inputs est contenu dans un wrapper .form-group, gérant les marges entre chaque lignes
  • Les inputs et les labels possèdent également leur propres classes

mot de passe oublié ?

<form class="form" action="">

  <div class="form-group">
    <label for="login" class="form-group-label">Identifiant</label>
    <div class="form-group-input">
      <input id="login" type="text" name="login" placeholder="Identifiant">
    </div>
  </div>

  <div class="form-group">
    <label for="password" class="form-group-label">Mot de passe</label>
    <div class="form-group-input">
      <input id="password" type="password" name="password" placeholder="Mot de passe">
    </div>
  </div>

  <div class="form-footer u-txtCenter">
    <input class="button" type="submit" value="connexion">
    <p><a href="">mot de passe oublié ?</a></p>
  </div>

</form>

Élément sans label

Ajouter la classe de modification .form-group--noLabel à l'élément ayant la classe .form-group pour cacher les labels sauf aux lecteur d'écrans.

<div class="form-group form-group--noLabel">
  <label for="input-base" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-base" type="text" name="input-base" placeholder="Your placeholder">
  </div>
</div>

Inputs

Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Bugfixes (background-color sur inputRadio / inputCheckbox)
  • 0.0.1: Ajout du composant

Input text

<div class="form-group">
  <label for="input-base" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-base" type="text" name="input-base" placeholder="Your placeholder">
  </div>
</div>

Input radio

Fake label

<div class="form-group">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input">
    <div class="inputRadio">
      <input id="inputRadio-base-1" type="radio" name="inputRadio-base">
      <label for="inputRadio-base-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-base-2" type="radio" name="inputRadio-base">
      <label for="inputRadio-base-2">Radio B</label>
    </div>
  </div>
</div>

Input radio inline

Fake label

<div class="form-group">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input form-group-input--inline">
    <div class="inputRadio">
      <input id="inputRadio-inline-1" type="radio" name="inputRadio-inline">
      <label for="inputRadio-inline-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-inline-2" type="radio" name="inputRadio-inline">
      <label for="inputRadio-inline-2">Radio B</label>
    </div>
  </div>
</div>

Input checkbox

<div class="form-group">
  <div class="form-group-input">
    <div class="inputCheckbox">
      <input id="inputCheckbox" type="checkbox" value="inputCheckbox">
      <label for="inputCheckbox">Checkbox</label>
    </div>
  </div>
</div>

Input radio toggle

<div class="form-group">
  <div class="radioToggle">
    <input id="inputRadioToggle-1" type="radio" name="inputRadioToggle" checked="checked">
    <label for="inputRadioToggle-1">Paramètres</label>
    <input id="inputRadioToggle-2" type="radio" name="inputRadioToggle">
    <label for="inputRadioToggle-2">Calcul</label>
  </div>
</div>

Input avec icône

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant
  1. Ajouter la classe .form-group-input--icon à l'élément .form-group-input.
  2. Ajouter un composant d'icône dans .form-group-input
<div class="form-group">
  <label for="right-icon" class="form-group-label">Right icon</label>
  <div class="form-group-input form-group-input--icon">
    <span class="icon icon--search"></span>
    <input id="right-icon" type="text" name="right-icon" placeholder="Your placeholder">
  </div>
</div>

État d'input

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

État : disabled

  1. Ajouter la classe .form-group--disabled à l'élément .form-group.
  2. Ajouter un attribut disabled sur les éléments <input />.

Fake label

<div class="form-group form-group--disabled">
  <label for="input-disabled" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-disabled" type="text" name="input-disabled" placeholder="Placeholder" disabled>
  </div>
</div>

<div class="form-group form-group--disabled">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input form-group-input--inline">
    <div class="inputRadio">
      <input id="inputRadio-disabled-1" type="radio" name="inputRadio-disabled" disabled>
      <label for="inputRadio-disabled-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-disabled-2" type="radio" name="inputRadio-disabled" disabled>
      <label for="inputRadio-disabled-2">Radio B</label>
    </div>
  </div>
</div>

<div class="form-group form-group--disabled">
  <div class="form-group-input">
    <div class="inputCheckbox">
      <input id="inputCheckbox-disabled" type="checkbox" value="inputCheckbox-disabled" disabled>
      <label for="inputCheckbox-disabled">Checkbox</label>
    </div>
  </div>
</div>
<div class="form-group form-group--disabled">
  <div class="radioToggle">
    <input id="inputRadioToggle-1-disabled" type="radio" name="inputRadioToggle-disabled" checked="checked" disabled>
    <label for="inputRadioToggle-1-disabled">Paramètres</label>
    <input id="inputRadioToggle-2-disabled" type="radio" name="inputRadioToggle-disabled" disabled=>
    <label for="inputRadioToggle-2-disabled">Calcul</label>
  </div>
</div>
<div class="form-footer">
  <input class="button is-disabled" type="submit" value="Submit" disabled>
</div>

État : succés

Ajouter la classe .form-group--success à l'élément .form-group.

Shit, that label's taken. Try another.

Fake label

<div class="form-group form-group--success">
  <label for="input-success" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-success" type="text" name="input-success" placeholder="Placeholder">
  </div>
  <div class="form-group-feedback">Shit, that label's taken. Try another.</div>
</div>
<div class="form-group form-group--success">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input form-group-input--inline">
    <div class="inputRadio">
      <input id="inputRadio-success-1" type="radio" name="inputRadio-success" checked="checked">
      <label for="inputRadio-success-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-success-2" type="radio" name="inputRadio-success">
      <label for="inputRadio-success-2">Radio B</label>
    </div>
  </div>
</div>
<div class="form-group form-group--success">
  <div class="form-group-input">
    <div class="inputCheckbox">
      <input id="inputCheckbox-success" type="checkbox" value="inputCheckbox-success" checked="checked">
      <label for="inputCheckbox-success">Checkbox</label>
    </div>
  </div>
</div>

État : erreur

Ajouter la classe .form-group--error à l'élément .form-group.

Shit, that label's taken. Try another.

Fake label

<div class="form-group form-group--error">
  <label for="input-error" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-error" type="text" name="input-error" placeholder="Placeholder">
  </div>
  <div class="form-group-feedback">Shit, that label's taken. Try another.</div>
</div>
<div class="form-group form-group--error">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input form-group-input--inline">
    <div class="inputRadio">
      <input id="inputRadio-error-1" type="radio" name="inputRadio-error">
      <label for="inputRadio-error-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-error-2" type="radio" name="inputRadio-error">
      <label for="inputRadio-error-2">Radio B</label>
    </div>
  </div>
</div>
<div class="form-group form-group--error">
  <div class="form-group-input">
    <div class="inputCheckbox">
      <input id="inputCheckbox-error" type="checkbox" value="inputCheckbox-error">
      <label for="inputCheckbox-error">Checkbox</label>
    </div>
  </div>
</div>

Formulaire en grille

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Comme tous les autres éléments, les formulaires peuvent être inclus dans une grille. Voir la documentation sur les grilles

<form class="form" action="">

  <div class="grid">

    <div class="form-group grid-w50">
      <label for="login" class="form-group-label">Login</label>
      <div class="form-group-input">
        <input id="login" type="text" name="login">
      </div>
    </div>

    <div class="form-group grid-w50">
      <label for="password" class="form-group-label">Password</label>
      <div class="form-group-input">
        <input id="password" type="password" name="password">
      </div>
    </div>

  </div>

  <div class="grid">

    <div class="form-group grid-w33">
      <label for="label-3" class="form-group-label">label</label>
      <div class="form-group-input">
        <input id="label-3" type="text" name="label-3">
      </div>
    </div>

    <div class="form-group grid-w33">
      <label for="label-4" class="form-group-label">label</label>
      <div class="form-group-input">
        <input id="label-4" type="text" name="label-4">
      </div>
    </div>

     <div class="form-group grid-w33">
      <label for="label-5" class="form-group-label">label</label>
      <div class="form-group-input">
        <input id="label-4" type="text" name="label-5">
      </div>
    </div>

  </div>
</form>

Jauge linéaire

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

La valeur (pourcentage) de la jauge doit être définie dans l'attribut style="width: XX%" de l'élément .gaugeLinear-inner.

<div class="gaugeLinear">
  <div class="gaugeLinear-inner" style="width: 75%"></div>
</div>

Composant de type alternatif

Ajouter la classe de modification .gaugeLinear--alternate à l'élément ayant la classe .gaugeLinear afin de modifier son style.

<div class="gaugeLinear gaugeLinear--alternate">
  <div class="gaugeLinear-inner" style="width: 19%"></div>
</div>

Composant de type block

Ajouter la classe de modification .gaugeLinear--block à l'élément ayant la classe .gaugeLinear afin qu'il prenne toute la largeur de son parent.

<div class="gaugeLinear gaugeLinear--block">
  <div class="gaugeLinear-inner" style="width: 75%"></div>
</div>

Grille

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Une définition de grille est composée d'un élément .grid, puis d'enfants avec une classe .grid-wX.

Tailles de grille disponibles :

  • 25% : .grid-w25
  • 33% : .grid-w33
  • 50% : .grid-w50
  • 66% : .grid-w66
  • 75% : .grid-w75
  • 100% : .grid-w100
<div class="grid">
  <div class="grid-w50"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w50"></div>
  <div class="grid-w50"></div>
  <div class="grid-w33"></div>
  <div class="grid-w33"></div>
  <div class="grid-w33"></div>
  <div class="grid-w66"></div>
  <div class="grid-w33"></div>
  <div class="grid-w100"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w75"></div>
  <div class="grid-w25"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w80"></div>
  <div class="grid-w40"></div>
  <div class="grid-w60"></div>
</div>

Grille Columns

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

Le composant de grille columns se déclare avec la classe .gridColumns.

<div class="gridColumns">
  <div></div>
  <div></div>
</div>

Définition du nombre de colones

Ajouter la classe de modification .gridColumns--X à l'élément ayant la classe .gridColumns afin de modifier son nombre de colonnes.

Nombres de colonnes disponibles :

  • 2 : .gridColumns--2
  • 3 : .gridColumns--3
  • 4 : .gridColumns--4
<div class="gridColumns gridColumns--2">
  <div></div>
  <div></div>
</div>

<div class="gridColumns gridColumns--3">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="gridColumns gridColumns--4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Modification de la largeur de gouttière

Ajouter la classe de modification .gridColumns--gutterL à l'élément ayant la classe .gridColumns afin de modifier son style.

<div class="gridColumns gridColumns--2 gridColumns--gutterL">
  <div></div>
  <div></div>
</div>
Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Passage en position absolute, fix min-width
  • 0.0.1: Ajout du composant

Header (structure)

<header class="header" role="banner">
  <div class="header-wrapper">
    <div class="header-inner">
      Aligné à gauche
    </div>
    <div class="header-inner header-inner--push">
      Aligné à droite
    </div>
  </div>
</header>

Header (exemple complexe)

Se référer à la documentation sur le Menu pour les variations de menu.

<header class="header" role="banner">
  <div class="header-wrapper">
    <div class="header-inner">
      <nav class="menu">
        <ul class="menu-inner menu-inner--push">
          <li class="menu-item"><a class="menu-link is-active" href="#">Accueil</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Indicateurs</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Calendrier</a></li>
        </ul>
      </nav>
    </div>
    <div class="header-inner header-inner--push">
      <div class="header-status">Dernière modification il y a 10 heures…</div>
      <div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button">
        <div class="dropdown-button" role="button">
          <div class="avatar">
            <div class="avatar-thumb">
              <img src="assets/img/placeholder/avatar@1x.jpg" srcset="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg 1x, http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@2x.jpg 2x" width="40" height="40" alt="Laurent Sutterlity" />
            </div>
          </div>
          <span class="icon icon--down"></span>
        </div>
        <ul class="dropdown-content">
          <li class="dropdown-item">
            <a class="dropdown-link" href="#">Mon compte</a>
          </li>
          <li class="dropdown-item">
            <a class="dropdown-link" href="#">Adminstration</a>
          </li>
          <li class="dropdown-item">
            <a class="dropdown-link" href="#">
              <span class="icon icon--disconnect icon--mRight"></span>
              Déconnexion
            </a>
          </li>
        </ul>
      </div>
      <button class="button button--circular button--ghostAlternate icon icon--notif">
        <div class="notifNumber">88</div><span>Menu</span>
      </button>
    </div>
  </div>
</header>

Lien

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Lien par défaut

Ajouter la classe .link aux éléments <a>.

Partager
<a href="#" class="link">Partager</a>

Lien avec icône

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .link.

Il est possible d'ajouter des marges en fonction de la position de l'icône :

  • .icon.icon-xxx.icon--mRight : marge à droite
  • .icon.icon-xxx.icon--mleft : marge à gauche
Partager
<a href="#" class="link"><span class="icon icon--share icon--mRight"></span>Partager</a>

Lien désactivé

Ajouter la classe d'état .is-disabled à l'élément ayant la classe .link pour désactiver le composant.

Partager
<a href="#" class="link is-disabled">Partager</a>

Lien sur fond gris

Ajouter la classe de modification .link--light à l'élément ayant la classe .link afin de modifier son style.

Partager 
<div class="u-bkgClr0lightestAlternate u-paM">
  <a href="#" class="link link--light">Partager</a>
</div>

Listes

Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Bugfix list-inline
  • 0.0.1: Ajout du composant

Reset de liste

Désactive les puces, le padding, les marges…

  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul class="listReset">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Liste inline

Aligne horizontalement les élements <li> de listes.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul class="listInline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Liste Checkbox

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

Le composant .listCheckbox utilise le composant inputCheckbox.

<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-2">
      <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-3">
      <label for="listCheckbox-item-3">Anatolie</label>
    </div>
  </li>
</ul>

Liste draggable

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

Ce composant est initialement prévu pour avoir comme parent l'élément .listToggle-content du composant liste toggle.

  • Réservation (tous critères)
  • Destination de la réservation
  • Date de la réservation
  • Montant de la réservation
<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>

Composant avec élément de style alternatif

Ajouter la classe de modification .listDraggable-item--alternate à l'élément ayant la classe .listDraggable-item afin de modifier son style.

  • Réservation (tous critères)
  • Destination de la réservation
  • Date de la réservation
  • Montant de la réservation
<ul class="listDraggable">
  <li class="listDraggable-item listDraggable-item--alternate" 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>

Action de drag

1 - Le composant draggé reste en place et reçoit la classe d'état .is-dragging pendant la durée de l'action.

  • Réservation (tous critères)
  • Destination de la réservation
  • Date de la réservation
  • Montant de la réservation
<ul class="listDraggable">
  <li class="listDraggable-item listDraggable-item--alternate" role="button">Réservation (tous critères)</li>
  <li class="listDraggable-item is-dragging" 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>

2 - Au dragg de l'élément un clone est généré et reçoit la classe .is-clone pendant la durée de l'action.

  • Réservation (tous critères)
  • Destination de la réservation
  • Date de la réservation
  • Montant de la réservation
<ul class="listDraggable">
  <li class="listDraggable-item listDraggable-item--alternate" role="button">Réservation (tous critères)</li>
  <li class="listDraggable-item is-clone" 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>

Liste Toggle

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

Ce composant est initialement prévu pour avoir comme parent l'élément .module-body-sidebar du composant module.

La classe .is-active sur les éléments .listToggle-link permet d'en afficher le contenu.

  • Critères CRM
    • Lorem ipsum dolor sit
      • Réservation (tous critères)
      • Destination de la réservation
      • Date de la réservation
      • Montant de la réservation
    • Réservations
      • Réservation (tous critères)
      • Destination de la réservation
      • Date de la réservation
      • Montant de la réservation
<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>
</ul>

Composant de style alternate

Ajouter la classe de modification .listToggle-item--alternate à l'élément ayant la classe .listToggle-item afin de modifier son style.

Il est également possible d'ajouter un icône en utilisant le composant d'icône.

  • Critères DMP
    • Lorem ipsum dolor
      • lorem ipsum dolor
      • lorem ipsum dolor
    • Réservations
      • lorem ipsum dolor
      • lorem ipsum dolor
<ul class="listToggle" data-depth="1">
  <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>

Loader

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

composant de base

En cours de calcul…
<div class="loader">
  <div class="loader-img">
    <img src="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/loader.png">
  </div>
  <div class="loader-txt">En cours de calcul…</div>
</div>
Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Ajout du menu vertical
  • 0.0.1: Ajout du composant

Composant de base

Le menu affiche des liens de navigation.

La classe d'état .is-active permet d'highlighter l'élément .menu-link actif.

<nav class="menu">
  <ul class="menu-inner">
    <li class="menu-item"><a class="menu-link is-active" href="#">Accueil</a></li>
    <li class="menu-item"><a class="menu-link" href="#">Indicateurs</a></li>
    <li class="menu-item"><a class="menu-link" href="#">Calendrier</a></li>
  </ul>
</nav>

Composant de menu vertical

Ajouter la classe de modification .menu--vertical à l'élément ayant la classe .menu afin de modifier son style.

<nav class="menu menu--vertical">
  <ul class="menu-inner">
    <li class="menu-item"><a class="menu-link is-active" href="#">Accueil</a></li>
    <li class="menu-item"><a class="menu-link" href="#">Indicateurs</a></li>
    <li class="menu-item"><a class="menu-link" href="#">Calendrier</a></li>
  </ul>
</nav>

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
Re-calculer 
<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
Re-calculer 
<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>

Module body sidebar

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.

  • Critères CRM
    • Lorem ipsum dolor sit
      • Réservation (tous critères)
      • Destination de la réservation
      • Date de la réservation
      • Montant de la réservation
    • Réservations
      • Réservation (tous critères)
      • Destination de la réservation
      • Date de la réservation
      • Montant de la réservation
  • Critères DMP
    • Lorem ipsum dolor
      • lorem ipsum dolor
      • lorem ipsum dolor
    • Réservations
      • 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
Paramètres Calcul
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
Paramètres Calcul
  • Total contacts
    83 999
  • Emails
    60 000
  • SMS
    10 000
  • Push
    13 000
  • Cookies
    0
  • Facebook
    666
  • Twitter
    333
Re-calculer

calcul au Ven. 10 Sept. à 18.01

<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
  • Version 1 
<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
Conception Code Commentaires 
<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>

Pastille de notification

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Pastille de notification seule

88
<div class="notifNumber">88</div>

Pastille de notification dans un bouton

<button class="button button--circular button--ghostAlternate icon icon--notif">
  <div class="notifNumber">88</div>
  <span>Menu</span>
</button>

Recapitulatif

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

Le composant .recap sert à lister des des éléments.

L'élément .recap-list-item n'est prévu que pour recevoir que 2 enfants directs.

  • Total contacts
    83 999
  • Emails
    60 000
  • SMS
    10 000
  • Push
    13 000
  • Cookies
    0
  • Facebook
    666
  • Twitter
    333
Re-calculer

calcul au Ven. 10 Sept. à 18.01

<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>

Contenu alternatif

Il est possible d'inclure le composant inputCheckbox.

  • 10 200
  • 2 200
  • 7 000
  • 1 000
<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>

Contenu alternatif état désactivé

Ajouter la classe de modification .recap-list-item--disabled à l'élément ayant la classe .recap-list-item afin de modifier son style.

  • Blacklist Email
  • 2 200
  • 17 000
<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">
      <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>
  </ul>
</div>
Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Fix z-index
  • 0.0.1: Ajout du composant
Cabestan
Aide 
<div class="sidebar">
  <div class="sidebar-header"><img src="/assets/img/logo-cabestan-min-light.svg" alt="Cabestan" width="27" height="34"></div>
  <nav class="sidebar-nav">
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--home"></div>
      <div class="sidebar-link-legend">Accueil</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--journey"></div>
      <div class="sidebar-link-legend">Journey</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--audience"></div>
      <div class="sidebar-link-legend">Audience</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--camp"></div>
      <div class="sidebar-link-legend">Campagnes</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--content"></div>
      <div class="sidebar-link-legend">Contenus</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--report"></div>
      <div class="sidebar-link-legend">Performances</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--data"></div>
      <div class="sidebar-link-legend">Data</div>
    </a>
  </nav>
  <div class="sidebar-footer">
    <a class="sidebar-footer-link" href="#">
      <div class="icon icon--circleInfos"></div><span class="u-visuallyHidden">Aide</span></a>
  </div>
</div>

Status

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Statut basique

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .status.

Il est possible d'ajouter des marges en fonction de la position de l'icône :

  • .icon.icon-xxx.icon--mRight : marge à droite
  • .icon.icon-xxx.icon--mleft : marge à gauche
en cours
en cours 
<div class="status">
  <span class="icon icon--circleInProgress icon--mRight"></span> en cours
</div>

<div class="status">
  en cours <span class="icon icon--circleInProgress icon--mLeft"></span>
</div>

Statut style alternate

Ajouter la classe de modification .status--alternate à l'élément ayant la classe .status afin de modifier son style.

en cours 
<div class="status status--alternate">
  <span class="icon icon--circleInProgress icon--mRight"></span> en cours
</div>

Liste des icônes disponible

infos
alerte / erreur
en cours / attente
validé / lancé / terminé / retry
stoppé
en pause 
<div class="status">
  <span class="icon icon--circleInfos icon--mRight"></span> infos
</div>

<div class="status">
  <span class="icon icon--circleAlert icon--mRight"></span> alerte / erreur
</div>

<div class="status">
  <span class="icon icon--circleInProgress icon--mRight"></span> en cours / attente
</div>

<div class="status">
  <span class="icon icon--circleCheck icon--mRight"></span> validé / lancé / terminé / retry
</div>

<div class="status">
  <span class="icon icon--circleClose icon--mRight"></span> stoppé
</div>

<div class="status">
  <span class="icon icon--circlePause icon--mRight"></span> en pause
</div>

Gestion de la couleur d'icône

Ajouter un utlis de couleur à l'élément .icon afin de modifier sa couleur.

infos
alerte / erreur
validé / lancé / terminé / retry
validé / lancé / terminé / retry 
<div class="status">
  <span class="icon icon--circleInfos icon--mRight u-txtClr1"></span> infos
</div>
<div class="status">
  <span class="icon icon--circleAlert icon--mRight u-txtClr2"></span> alerte / erreur
</div>
<div class="status">
  <span class="icon icon--circleCheck icon--mRight u-txtClr3"></span> validé / lancé / terminé / retry
</div>
<div class="status">
  <span class="icon icon--circleCheck icon--mRight u-txtClr4"></span> validé / lancé / terminé / retry
</div>

Titre

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Titre niveau 1

Style pour les grands titres et les chiffres.

Indicateurs 25%

Indicateurs 25%

<p class="title title--level1">Indicateurs 25<sub>%</sub></p>
<h2 class="title title--level1">Indicateurs 25<sub>%</sub></h2>

Titre niveau 2

Style pour les sous-titres.

Caraibes_FR75_Fidélité_Offre_Juin_2016

Caraibes_FR75_Fidélité_Offre_Juin_2016

<p class="title title--level2">Caraibes_FR75_Fidélité_Offre_Juin_2016</p>
<h2 class="title title--level2">Caraibes_FR75_Fidélité_Offre_Juin_2016</h2>

Tag

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

Blacklists obligatoires 
<div class="tag">
  Blacklists obligatoires
  <button class="tag-button">
    <span class="icon icon--close"></span>
    Fermer
  </button>
</div>

Composant désactivé

Ajouter la classe d'état.tag--disabled à l'élément ayant la classe .tag afin de modifier son style.

Desabo_20160723 
<div class="tag tag--disabled">
  Desabo_20160723
  <button class="tag-button">
    <span class="icon icon--close"></span>
    Fermer
  </button>
</div>

Liste de tag

  • Blacklists obligatoires
  • Lorem ipsum
  • Desabo_20160720
  • Desabo_20160721
  • Desabo_20160722
  • Desabo_20160723
  • Desabo_20160724
    • Desabo_20160725
  • Desabo_20160726 
<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>
  <li>
    <div class="tag">
      Desabo_20160721
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160722
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160723
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160724
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
    <div class="tag">
      Desabo_20160725
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160726
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
</ul>

Icones

Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Ajout des icones circleAlert, circleCheck, circleClose, circleInProgress, circleInfos, circlePause, clock, code, comment, desktop, dmp, downAlt, extend, fatArrowTop, import, layoutBlocks, layoutList, menu, mobile, settings, tablet, world
  • 0.0.1: Ajout du composant

Icones disponibles :

<span class="icon icon--add"></span>

<span class="icon icon--audience"></span>

<span class="icon icon--camp"></span>

<span class="icon icon--circleAlert"></span>

<span class="icon icon--circleCheck"></span>

<span class="icon icon--circleClose"></span>

<span class="icon icon--circleInProgress"></span>

<span class="icon icon--circleInfos"></span>

<span class="icon icon--circlePause"></span>

<span class="icon icon--clock"></span>

<span class="icon icon--close"></span>

<span class="icon icon--code"></span>

<span class="icon icon--comment"></span>

<span class="icon icon--content"></span>

<span class="icon icon--data"></span>

<span class="icon icon--desktop"></span>

<span class="icon icon--disconnect"></span>

<span class="icon icon--dmp"></span>

<span class="icon icon--down"></span>

<span class="icon icon--downAlt"></span>

<span class="icon icon--duplicate"></span>

<span class="icon icon--extend"></span>

<span class="icon icon--fatArrowTop"></span>

<span class="icon icon--folder"></span>

<span class="icon icon--home"></span>

<span class="icon icon--import"></span>

<span class="icon icon--journey"></span>

<span class="icon icon--layoutBlocks"></span>

<span class="icon icon--layoutList"></span>

<span class="icon icon--menu"></span>

<span class="icon icon--mobile"></span>

<span class="icon icon--next"></span>

<span class="icon icon--notif"></span>

<span class="icon icon--prev"></span>

<span class="icon icon--report"></span>

<span class="icon icon--search"></span>

<span class="icon icon--settings"></span>

<span class="icon icon--share"></span>

<span class="icon icon--tablet"></span>

<span class="icon icon--trash"></span>

<span class="icon icon--up"></span>

<span class="icon icon--world"></span>

Modifiers :

La classe .icon--mLeft permet d'ajouter une marge à gauche d'une icône.

<span class="icon icon--add icon--mLeft"></span>
<span class="icon icon--trash icon--mLeft"></span>

La classe .icon--mRight permet d'ajouter une marge à droite d'une icône.

<span class="icon icon--add icon--mRight"></span>
<span class="icon icon--trash icon--mRight"></span>