Styleguide

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>