Styleguide

Avatar

• v.0.0.1

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

<div class="avatar">
  <div class="avatar-thumb">
    <img src="/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).

<div class="avatar">
  <div class="avatar-thumb">
    <img src="assets/img/placeholder/avatar@1x.jpg"
         srcset="/assets/img/placeholder/avatar@1x.jpg 1x,
                 /assets/img/placeholder/avatar@2x.jpg 2x"
         width="40" height="40" alt="Laurent Sutterlity" />
  </div>
</div>

Bouton

• v.0.0.1

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

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

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

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

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

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

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

<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 désactivé

• <a> : Ajouter la classe d'état .is-disabled
• <input /> ou <button /> : Ajouter l'attribut disabled

<a class="button is-disabled" href="#" role="button">Sauvegarder</a>
<button class="button button--secondary" 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-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.

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

Bouton avec icône

• v.0.0.1

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)

<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

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

Boutons circulaires

• v.0.0.1

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>

Dropdown

• v.0.0.1

Pour ajouter le bon comportement au dropdown, le container prends des data-attributes :

• data-cb-dropdown contient le selecteur du dropdown (doit être un enfant)
• data-cb-dropdown-trigger contient le selecteur du déclencheur du dropdown (doit être un enfant)
• data-cb-dropdown-align peut prendre les valeurs right (défaut) ou left. Gère l'alignement du dropdown

Dropdown avec texte

<div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content">
    <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>

Dropdown avec avatar

• Mon compte
• Adminstration
• Déconnexion

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

Dropdown avec contenu aligné à gauche

Ajouter le data-attribute data-cb-dropdown-align="left"

<div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button" data-cb-dropdown-align="left">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content">
    <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>

Formulaire

• v.0.0.1

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

<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

• v.0.0.1

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

<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

<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

• v.0.0.1

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

• v.0.0.1

État : disabled

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

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

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

<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

• v.0.0.1

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>

Grille

• v.0.0.1

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>

Header

• v.0.0.1

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.

Dernière modification il y a 10 heures…

• Mon compte
• Adminstration
• Déconnexion

88

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://localhost:3000/assets/img/placeholder/avatar@1x.jpg 1x, http://localhost:3000/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

• v.0.0.1

Lien par défaut

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

<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

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

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

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

Listes

• v.0.0.1

Reset de liste

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

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

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

Menu

• v.0.0.1

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>

Pastille de notification

• v.0.0.1

Pastille de notifaction seule

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

Pastille de notifaction dans un bouton

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

Sidebar

• v.0.0.1

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">Lorem ipsum</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">Lorem ipsum</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--content"></div>
      <div class="sidebar-link-legend">Lorem ipsum</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--report"></div>
      <div class="sidebar-link-legend">Lorem ipsum</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--data"></div>
      <div class="sidebar-link-legend">Lorem ipsum</div>
    </a>
  </nav>
  <div class="sidebar-footer">
    <a class="sidebar-footer-link" href="#">
      <div class="icon icon--infos"></div><span class="u-visuallyHidden">Aide</span></a>
  </div>
</div>

Titre

• v.0.0.1

Titre niveau 1

Style pour les grands titres et les chiffres.

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

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

Icônes

Icones disponibles :

<span class="icon icon--add"></span>
<span class="icon icon--audience"></span>
<span class="icon icon--camp"></span>
<span class="icon icon--close"></span>
<span class="icon icon--content"></span>
<span class="icon icon--data"></span>
<span class="icon icon--disconnect"></span>
<span class="icon icon--down"></span>
<span class="icon icon--duplicate"></span>
<span class="icon icon--folder"></span>
<span class="icon icon--home"></span>
<span class="icon icon--infos"></span>
<span class="icon icon--journey"></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--share"></span>
<span class="icon icon--trash"></span>
<span class="icon icon--up"></span>

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>