Dashboard

Ajouté à la version :

• 0.1.0(actuelle)

---

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.

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

• 0.1.0(actuelle)

---

Changelog:

• 0.1.0: Ajout du composant

---

Carte KPI

<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

<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

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