Molecules

Table of content

What are Molecules?

Cards
Boxes
Breadcrumb
Card
content
Element-ui
Standalone Component
Titles

Molecules consist of one or more nested rules, but each of them must not be more than an atom itself. For example, using icons or buttons in molecules is valid, but using other molecules is not.

To mark an element as molecule, annotate it with the @molecule tag, followed by the name of the component.

Cards

Card

<div class="card">
  <div class="card__heading">
    <div class="card__theme-and-date">
      <span class="card__theme-badge">
        <i class="card__theme-icon-image glyphicon glyphicon-user"></i>
        Theme
      </span>
      <span class="card__date">
        18/02/2019
      </span>
    </div>
    <div class="card__title-block">
      <span class="card__title-text">
        Analytics card title text
      </span>
    </div>
  </div>
  <button class="card__expand-button-block">
    <div class="card__expand-button-img">
      <span class='glyphicon glyphicon-chevron-down'></span>
    </div>
  </button>
  <div class="card__view">
    component analytics
  </div>
</div>

Card

Theme 18/02/2019

Analytics card title text

component analytics

<div class="card">
  <div class="card__heading">
    <div class="card__theme-and-date">
      <span class="card__theme-badge">
        <i class="card__theme-icon-image glyphicon glyphicon-user"></i>
        Theme
      </span>
      <span class="card__date">
        18/02/2019
      </span>
    </div>
    <div class="card__title-block">
      <span class="card__title-text">
        Analytics card title text
      </span>
    </div>
  </div>
  <button class="card__expand-button-block">
    <div class="card__expand-button-img">
      <span class='glyphicon glyphicon-chevron-down'></span>
    </div>
  </button>
  <div class="card__view">
    component analytics
  </div>
</div>

Card expanded

<div class="card-expanded">
  <div class="card-expanded__heading">
    <div class="card-expanded__theme-and-date">
      <span class="card-expanded__theme-badge">
        <i class="card-expanded__theme-icon-image glyphicon glyphicon-user"></i>
        Theme
      </span>
      <span class="card-expanded__date">
        18/02/2019
      </span>
    </div>
    <div class="card-expanded__title-block">
      <span class="card-expanded__title-text">
        Analytics card title text
      </span>
    </div>
  </div>
  <button class="card-expanded__expand-button-block">
    <div class="card-expanded__expand-button-img">
      <span class='glyphicon glyphicon-chevron-up'></span>
    </div>
  </button>
  <div class="card-expanded__view">
    component analytics
  </div>
</div>

Card expanded

Theme 18/02/2019

Analytics card title text

component analytics

<div class="card-expanded">
  <div class="card-expanded__heading">
    <div class="card-expanded__theme-and-date">
      <span class="card-expanded__theme-badge">
        <i class="card-expanded__theme-icon-image glyphicon glyphicon-user"></i>
        Theme
      </span>
      <span class="card-expanded__date">
        18/02/2019
      </span>
    </div>
    <div class="card-expanded__title-block">
      <span class="card-expanded__title-text">
        Analytics card title text
      </span>
    </div>
  </div>
  <button class="card-expanded__expand-button-block">
    <div class="card-expanded__expand-button-img">
      <span class='glyphicon glyphicon-chevron-up'></span>
    </div>
  </button>
  <div class="card-expanded__view">
    component analytics
  </div>
</div>

Anonymity Threshold Card

<div class="anonymity-threshold-card flex-container p-top-15 p-bottom-10 p-left-30 p-right-30">
  <div class="anonymity-threshold-card__title flex-container m-right-5">
    <img src="images/shield.svg" width="35" height="35">
    <span class="anonymity-threshold-card__title__label m-top-8 m-left-10 font-size--standard">Adipisicing aliqua aliquip aliquip amet.:</span>
  </div>
  <div class="anonymity-threshold-card__tags flex-container flex-wrap">
    <el-tooltip effect="dark" content="Adipisicing aliqua aliquip aliquip amet.">
      <div class="btn anonymity-threshold-card__tags__tag cursor-default m-right-2 m-left-2 m-bottom-5 p-5">
        <span class="font-size--small">Adipisicing aliqua aliquip aliquip amet.</span>
      </div>
    </el-tooltip>
  </div>
</div>

Anonymity Threshold Card

Adipisicing aliqua aliquip aliquip amet.:

Adipisicing aliqua aliquip aliquip amet.

<div class="anonymity-threshold-card flex-container p-top-15 p-bottom-10 p-left-30 p-right-30">
  <div class="anonymity-threshold-card__title flex-container m-right-5">
    <img src="images/shield.svg" width="35" height="35">
    <span class="anonymity-threshold-card__title__label m-top-8 m-left-10 font-size--standard">Adipisicing aliqua aliquip aliquip amet.:</span>
  </div>
  <div class="anonymity-threshold-card__tags flex-container flex-wrap">
    <el-tooltip effect="dark" content="Adipisicing aliqua aliquip aliquip amet.">
      <div class="btn anonymity-threshold-card__tags__tag cursor-default m-right-2 m-left-2 m-bottom-5 p-5">
        <span class="font-size--small">Adipisicing aliqua aliquip aliquip amet.</span>
      </div>
    </el-tooltip>
  </div>
</div>

Big analytics info card

<div class="big-analytics-info-card m-top-10">
  <div class="big-analytics-info-card__header">
    <span class="big-analytics-info-card__header__action font-size--standard m-right-6">
      <img class="m-bottom-3" src="images/analytics-card/target.png" width="15">
      Action
    </span>
  </div>
  <div class="big-analytics-info-card__body">
    <div class="big-analytics-info-card__body__left">
      <div class="big-analytics-info-card__body__left-block">
        <div class="big-analytics-info-card__body__left-block__heading">
          <div class="big-analytics-info-card__body__left-block__heading__title">
            <img src="images/analytics-card/oval_circle.png" width="62" height="46">
            <span class="big-analytics-info-card__body__left-block__heading__title__label">
              PARTICIPATION
            </span>
          </div>
        </div>
        <div class="big-analytics-info-card__body__left-block__body">
          <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
          <div class="big-analytics-info-card__body__left-block__body__items m-top-10 m-left-30">
            <div class="big-analytics-info-card__body__left-block__body__items__item">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-analytics-info-card__body__left-reliability">
        <div class="big-analytics-info-card__body__left-reliability__header">
          <div class="big-analytics-info-card__body__left-reliability__header__cercle"></div>
          <span class="big-analytics-info-card__body__left-reliability__header__title">Précision</span>
        </div>
        <span class="big-analytics-info-card__body__left-reliability__label">
          FIABILITÉ DES RÉSULTATS
          <i class="glyphicon glyphicon-info-sign"></i>
        </span>
      </div>
    </div>
    <div class="big-analytics-info-card__body__center-block">
      <div class="big-analytics-info-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
    <div class="big-analytics-info-card__body__right-block">
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Suivi" src="images/analytics-card/star.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          suivi
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Ressource" src="images/analytics-card/librairie.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Ressource
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Expert" src="images/analytics-card/coach.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Expert
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Action" src="images/analytics-card/action.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Action
        </span>
      </div>
    </div>
  </div>
</div>

Big analytics info card

PARTICIPATION

15% Taux de participation

Précision

FIABILITÉ DES RÉSULTATS

suivi

Ressource

Expert

Action

Big analytics info card Modifiers

Modifier

Description

.big-analytics-info-card--high-reliability

Reliability of results high (precision <= 0,1)

.big-analytics-info-card--low-reliability

Reliability of results low (precision > 0,1)

<div class="big-analytics-info-card m-top-10">
  <div class="big-analytics-info-card__header">
    <span class="big-analytics-info-card__header__action font-size--standard m-right-6">
      <img class="m-bottom-3" src="images/analytics-card/target.png" width="15">
      Action
    </span>
  </div>
  <div class="big-analytics-info-card__body">
    <div class="big-analytics-info-card__body__left">
      <div class="big-analytics-info-card__body__left-block">
        <div class="big-analytics-info-card__body__left-block__heading">
          <div class="big-analytics-info-card__body__left-block__heading__title">
            <img src="images/analytics-card/oval_circle.png" width="62" height="46">
            <span class="big-analytics-info-card__body__left-block__heading__title__label">
              PARTICIPATION
            </span>
          </div>
        </div>
        <div class="big-analytics-info-card__body__left-block__body">
          <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
          <div class="big-analytics-info-card__body__left-block__body__items m-top-10 m-left-30">
            <div class="big-analytics-info-card__body__left-block__body__items__item">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-analytics-info-card__body__left-reliability">
        <div class="big-analytics-info-card__body__left-reliability__header">
          <div class="big-analytics-info-card__body__left-reliability__header__cercle"></div>
          <span class="big-analytics-info-card__body__left-reliability__header__title">Précision</span>
        </div>
        <span class="big-analytics-info-card__body__left-reliability__label">
          FIABILITÉ DES RÉSULTATS
          <i class="glyphicon glyphicon-info-sign"></i>
        </span>
      </div>
    </div>
    <div class="big-analytics-info-card__body__center-block">
      <div class="big-analytics-info-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
    <div class="big-analytics-info-card__body__right-block">
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Suivi" src="images/analytics-card/star.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          suivi
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Ressource" src="images/analytics-card/librairie.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Ressource
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Expert" src="images/analytics-card/coach.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Expert
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Action" src="images/analytics-card/action.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Action
        </span>
      </div>
    </div>
  </div>
</div>

Big analytics info card

<div class="big-analytics-info-card big-analytics-info-card--high-reliability m-top-10">
  <div class="big-analytics-info-card__header">
    <span class="big-analytics-info-card__header__action font-size--standard m-right-6">
      <img class="m-bottom-3" src="images/analytics-card/target.png" width="15">
      Action
    </span>
  </div>
  <div class="big-analytics-info-card__body">
    <div class="big-analytics-info-card__body__left">
      <div class="big-analytics-info-card__body__left-block">
        <div class="big-analytics-info-card__body__left-block__heading">
          <div class="big-analytics-info-card__body__left-block__heading__title">
            <img src="images/analytics-card/oval_circle.png" width="62" height="46">
            <span class="big-analytics-info-card__body__left-block__heading__title__label">
              PARTICIPATION
            </span>
          </div>
        </div>
        <div class="big-analytics-info-card__body__left-block__body">
          <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
          <div class="big-analytics-info-card__body__left-block__body__items m-top-10 m-left-30">
            <div class="big-analytics-info-card__body__left-block__body__items__item">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-analytics-info-card__body__left-reliability">
        <div class="big-analytics-info-card__body__left-reliability__header">
          <div class="big-analytics-info-card__body__left-reliability__header__cercle"></div>
          <span class="big-analytics-info-card__body__left-reliability__header__title">Élevée</span>
        </div>
        <span class="big-analytics-info-card__body__left-reliability__label">
          FIABILITÉ DES RÉSULTATS
          <i class="glyphicon glyphicon-info-sign"></i>
        </span>
      </div>
    </div>
    <div class="big-analytics-info-card__body__center-block">
      <div class="big-analytics-info-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
    <div class="big-analytics-info-card__body__right-block">
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Suivi" src="images/analytics-card/star.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          suivi
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Ressource" src="images/analytics-card/librairie.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Ressource
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Expert" src="images/analytics-card/coach.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Expert
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Action" src="images/analytics-card/action.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Action
        </span>
      </div>
    </div>
  </div>
</div>

Reliability of results high

PARTICIPATION

15% Taux de participation

Élevée

FIABILITÉ DES RÉSULTATS

suivi

Ressource

Expert

Action

<div class="big-analytics-info-card big-analytics-info-card--high-reliability m-top-10">
  <div class="big-analytics-info-card__header">
    <span class="big-analytics-info-card__header__action font-size--standard m-right-6">
      <img class="m-bottom-3" src="images/analytics-card/target.png" width="15">
      Action
    </span>
  </div>
  <div class="big-analytics-info-card__body">
    <div class="big-analytics-info-card__body__left">
      <div class="big-analytics-info-card__body__left-block">
        <div class="big-analytics-info-card__body__left-block__heading">
          <div class="big-analytics-info-card__body__left-block__heading__title">
            <img src="images/analytics-card/oval_circle.png" width="62" height="46">
            <span class="big-analytics-info-card__body__left-block__heading__title__label">
              PARTICIPATION
            </span>
          </div>
        </div>
        <div class="big-analytics-info-card__body__left-block__body">
          <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
          <div class="big-analytics-info-card__body__left-block__body__items m-top-10 m-left-30">
            <div class="big-analytics-info-card__body__left-block__body__items__item">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-analytics-info-card__body__left-reliability">
        <div class="big-analytics-info-card__body__left-reliability__header">
          <div class="big-analytics-info-card__body__left-reliability__header__cercle"></div>
          <span class="big-analytics-info-card__body__left-reliability__header__title">Élevée</span>
        </div>
        <span class="big-analytics-info-card__body__left-reliability__label">
          FIABILITÉ DES RÉSULTATS
          <i class="glyphicon glyphicon-info-sign"></i>
        </span>
      </div>
    </div>
    <div class="big-analytics-info-card__body__center-block">
      <div class="big-analytics-info-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
    <div class="big-analytics-info-card__body__right-block">
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Suivi" src="images/analytics-card/star.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          suivi
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Ressource" src="images/analytics-card/librairie.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Ressource
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Expert" src="images/analytics-card/coach.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Expert
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Action" src="images/analytics-card/action.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Action
        </span>
      </div>
    </div>
  </div>
</div>

Big analytics info card

<div class="big-analytics-info-card big-analytics-info-card--low-reliability m-top-10">
  <div class="big-analytics-info-card__header">
    <span class="big-analytics-info-card__header__action font-size--standard m-right-6">
      <img class="m-bottom-3" src="images/analytics-card/target.png" width="15">
      Action
    </span>
  </div>
  <div class="big-analytics-info-card__body">
    <div class="big-analytics-info-card__body__left">
      <div class="big-analytics-info-card__body__left-block">
        <div class="big-analytics-info-card__body__left-block__heading">
          <div class="big-analytics-info-card__body__left-block__heading__title">
            <img src="images/analytics-card/oval_circle.png" width="62" height="46">
            <span class="big-analytics-info-card__body__left-block__heading__title__label">
              PARTICIPATION
            </span>
          </div>
        </div>
        <div class="big-analytics-info-card__body__left-block__body">
          <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
          <div class="big-analytics-info-card__body__left-block__body__items m-top-10 m-left-30">
            <div class="big-analytics-info-card__body__left-block__body__items__item">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-analytics-info-card__body__left-reliability">
        <div class="big-analytics-info-card__body__left-reliability__header">
          <div class="big-analytics-info-card__body__left-reliability__header__cercle"></div>
          <span class="big-analytics-info-card__body__left-reliability__header__title">Faible</span>
        </div>
        <span class="big-analytics-info-card__body__left-reliability__label">
          FIABILITÉ DES RÉSULTATS
          <i class="glyphicon glyphicon-info-sign"></i>
        </span>
      </div>
    </div>
    <div class="big-analytics-info-card__body__center-block">
      <div class="big-analytics-info-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
    <div class="big-analytics-info-card__body__right-block">
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Suivi" src="images/analytics-card/star.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          suivi
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Ressource" src="images/analytics-card/librairie.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Ressource
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Expert" src="images/analytics-card/coach.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Expert
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Action" src="images/analytics-card/action.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Action
        </span>
      </div>
    </div>
  </div>
</div>

Reliability of results low

PARTICIPATION

15% Taux de participation

Faible

FIABILITÉ DES RÉSULTATS

suivi

Ressource

Expert

Action

<div class="big-analytics-info-card big-analytics-info-card--low-reliability m-top-10">
  <div class="big-analytics-info-card__header">
    <span class="big-analytics-info-card__header__action font-size--standard m-right-6">
      <img class="m-bottom-3" src="images/analytics-card/target.png" width="15">
      Action
    </span>
  </div>
  <div class="big-analytics-info-card__body">
    <div class="big-analytics-info-card__body__left">
      <div class="big-analytics-info-card__body__left-block">
        <div class="big-analytics-info-card__body__left-block__heading">
          <div class="big-analytics-info-card__body__left-block__heading__title">
            <img src="images/analytics-card/oval_circle.png" width="62" height="46">
            <span class="big-analytics-info-card__body__left-block__heading__title__label">
              PARTICIPATION
            </span>
          </div>
        </div>
        <div class="big-analytics-info-card__body__left-block__body">
          <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
          <div class="big-analytics-info-card__body__left-block__body__items m-top-10 m-left-30">
            <div class="big-analytics-info-card__body__left-block__body__items__item">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
            <div class="big-analytics-info-card__body__left-block__body__items__item p-top-20">
              <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-analytics-info-card__body__left-reliability">
        <div class="big-analytics-info-card__body__left-reliability__header">
          <div class="big-analytics-info-card__body__left-reliability__header__cercle"></div>
          <span class="big-analytics-info-card__body__left-reliability__header__title">Faible</span>
        </div>
        <span class="big-analytics-info-card__body__left-reliability__label">
          FIABILITÉ DES RÉSULTATS
          <i class="glyphicon glyphicon-info-sign"></i>
        </span>
      </div>
    </div>
    <div class="big-analytics-info-card__body__center-block">
      <div class="big-analytics-info-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
    <div class="big-analytics-info-card__body__right-block">
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Suivi" src="images/analytics-card/star.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          suivi
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Ressource" src="images/analytics-card/librairie.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Ressource
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Expert" src="images/analytics-card/coach.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Expert
        </span>
      </div>
      <div class="big-analytics-info-card__body__right-block__action m-bottom-15">
        <div class="big-analytics-info-card__body__right-block__action__icon">
          <img class="p-10" alt="Action" src="images/analytics-card/action.png" width="50" height="50">
        </div>
        <span class="big-analytics-info-card__body__right-block__action__label font-size--smaller">
          Action
        </span>
      </div>
    </div>
  </div>
</div>

Card info

<div class="card-info p-30">
  <div class="card-info__img m-bottom-10">
    <img src="images/frame.svg">
  </div>
  <label class="card-info__label">Adipisicing aliqua aliquip aliquip amet.</label>
  <p class="card-info__label">Adipisicing aliqua aliquip aliquip amet.<label>Adipisicing aliqua aliquip aliquip amet.</label></p>
  <a class="card-info__link font-size--small">Adipisicing aliqua aliquip aliquip amet.</a>
</div>

Card info

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet.Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet.

<div class="card-info p-30">
  <div class="card-info__img m-bottom-10">
    <img src="images/frame.svg">
  </div>
  <label class="card-info__label">Adipisicing aliqua aliquip aliquip amet.</label>
  <p class="card-info__label">Adipisicing aliqua aliquip aliquip amet.<label>Adipisicing aliqua aliquip aliquip amet.</label></p>
  <a class="card-info__link font-size--small">Adipisicing aliqua aliquip aliquip amet.</a>
</div>

Home card

<div class="home-card">
  <div class="home-card__average">
    <span class="home-card__average__number">7,8</span>
    <sup class="home-card__average__ten">/10</sup>
    <div class="text__primary--text font-size--small home-card__average__nps">
      NET PROMOTER SCORE
    </div>
  </div>
  <div class="home-card__text">
    <div class="home-card__text__theme">
      <span class="card__theme-badge">
        <i class="card__theme-icon-image glyphicon glyphicon-user"></i>
        Theme
      </span>
    </div>
    <div class="home-card__text__description">
      <p>
        Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</br>
        <span class="home-card__text__description__points">
          <span class="home-card__text__description__points__nbr">
            <strong>2</strong>
            Adipisicing aliqua aliquip aliquip amet.
          </span>
          Adipisicing aliqua aliquip aliquip amet.
        </span>
      </p>
    </div>
  </div>
  <div class="home-card__action">
    <a href="#" class="btn btn__primary home-card__button">adipisicing adipisicing</a>
  </div>
</div>

Home card

7,8 ^/10

NET PROMOTER SCORE

Theme

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.
2 Adipisicing aliqua aliquip aliquip amet. Adipisicing aliqua aliquip aliquip amet.

adipisicing adipisicing

<div class="home-card">
  <div class="home-card__average">
    <span class="home-card__average__number">7,8</span>
    <sup class="home-card__average__ten">/10</sup>
    <div class="text__primary--text font-size--small home-card__average__nps">
      NET PROMOTER SCORE
    </div>
  </div>
  <div class="home-card__text">
    <div class="home-card__text__theme">
      <span class="card__theme-badge">
        <i class="card__theme-icon-image glyphicon glyphicon-user"></i>
        Theme
      </span>
    </div>
    <div class="home-card__text__description">
      <p>
        Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</br>
        <span class="home-card__text__description__points">
          <span class="home-card__text__description__points__nbr">
            <strong>2</strong>
            Adipisicing aliqua aliquip aliquip amet.
          </span>
          Adipisicing aliqua aliquip aliquip amet.
        </span>
      </p>
    </div>
  </div>
  <div class="home-card__action">
    <a href="#" class="btn btn__primary home-card__button">adipisicing adipisicing</a>
  </div>
</div>

Analytics card

<div class="analytics-card__dependant-question flex-container">
     <div class="p-left-2 flex-container align-items__center justify-content__center font-size--smaller analytics-card__dependant-question__round">
         <i class="fa-solid fa-link"></i>
     </div>
   <div class="analytics-card__dependant-question__trait"></div>
 </div>
<div class="analytics-card">
  <div class="analytics-card__header">
    <div class="analytics-card__header__label">
      <span class="analytics-card__header__label__base-question">
        Question socle
      </span>
      <span class="analytics-card__header__label__targeted-question">
        Question ciblée
        <span class="analytics-card__header__label__targeted-question__badge">
          Produit
        </span>
      </span>
      <span class="analytics-card__header__label__respondent-base">
        Base de répondants : 10  (sur 19 invités)
      </span>
    </div>
  </div>
  <div class="analytics-card__body__heading">
    <div class="analytics-card__body__heading__theme-and-date">
      <span class="analytics-card__body__heading__theme-badge m-right-10">
        <i class="analytics-card__body__heading__theme-icon-image glyphicon glyphicon-user m-right-7"></i>
        Theme
      </span>
      <span class="analytics-card__body__heading__question-text">
        Adipisicing aliqua aliquip aliquip amet.
      </span>
    </div>
  </div>
  <div class="analytics-card__body">
    <div class="analytics-card__body__left-block">
      <div class="analytics-card__body__left-block__body p-top-10">
        <span class="analytics-card__body__left-block__body__comment font-size--small">
          <i class="analytics-card__body__left-block__body__comment-icon-image glyphicon glyphicon-link"></i>
          Adipisicing aliqua aliquip aliquip amet.
        </span>
        <div class="analytics-card__body__left-block__body__score">
          <div class="flex-container flex-column">
            <div class="flex-3 analytics-card__body__left-block__body__score__first-row">
              <img src="images/analytics-card/score_card.png">
            </div>
            <div class=" flex-1 analytics-card__body__left-block__body__score__second-row border-top-1 border__primary--100 font-size--small p-top-10 text-left">
              <p><strong>Adipisicing aliqua aliquip aliquip amet.</strong> Adipisicing aliqua aliquip aliquip amet.</p>
            </div>
          </div>
        </div>
        <div class="analytics-card__body__left-block__footer">
          <img src="/images/administration/setting/inspirational_content.svg" width="40" height="40"/>
          <div class="analytics-card__body__left-block__footer__label">
            <label>6,6/10 : Benchmark BaromEX®</label>
            <span><i class="glyphicon glyphicon-chevron-right"></i></span>
          </div>
        </div>
      </div>
    </div>
    <div class="analytics-card__body__center-block">
      <div class="analytics-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
  </div>
</div>

Analytics card

Theme Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Adipisicing aliqua aliquip aliquip amet.

6,6/10 : Benchmark BaromEX®

Analytics card Modifiers

Modifier

Description

.analytics-card--targeted-question

Targeted components

<div class="analytics-card__dependant-question flex-container">
     <div class="p-left-2 flex-container align-items__center justify-content__center font-size--smaller analytics-card__dependant-question__round">
         <i class="fa-solid fa-link"></i>
     </div>
   <div class="analytics-card__dependant-question__trait"></div>
 </div>
<div class="analytics-card">
  <div class="analytics-card__header">
    <div class="analytics-card__header__label">
      <span class="analytics-card__header__label__base-question">
        Question socle
      </span>
      <span class="analytics-card__header__label__targeted-question">
        Question ciblée
        <span class="analytics-card__header__label__targeted-question__badge">
          Produit
        </span>
      </span>
      <span class="analytics-card__header__label__respondent-base">
        Base de répondants : 10  (sur 19 invités)
      </span>
    </div>
  </div>
  <div class="analytics-card__body__heading">
    <div class="analytics-card__body__heading__theme-and-date">
      <span class="analytics-card__body__heading__theme-badge m-right-10">
        <i class="analytics-card__body__heading__theme-icon-image glyphicon glyphicon-user m-right-7"></i>
        Theme
      </span>
      <span class="analytics-card__body__heading__question-text">
        Adipisicing aliqua aliquip aliquip amet.
      </span>
    </div>
  </div>
  <div class="analytics-card__body">
    <div class="analytics-card__body__left-block">
      <div class="analytics-card__body__left-block__body p-top-10">
        <span class="analytics-card__body__left-block__body__comment font-size--small">
          <i class="analytics-card__body__left-block__body__comment-icon-image glyphicon glyphicon-link"></i>
          Adipisicing aliqua aliquip aliquip amet.
        </span>
        <div class="analytics-card__body__left-block__body__score">
          <div class="flex-container flex-column">
            <div class="flex-3 analytics-card__body__left-block__body__score__first-row">
              <img src="images/analytics-card/score_card.png">
            </div>
            <div class=" flex-1 analytics-card__body__left-block__body__score__second-row border-top-1 border__primary--100 font-size--small p-top-10 text-left">
              <p><strong>Adipisicing aliqua aliquip aliquip amet.</strong> Adipisicing aliqua aliquip aliquip amet.</p>
            </div>
          </div>
        </div>
        <div class="analytics-card__body__left-block__footer">
          <img src="/images/administration/setting/inspirational_content.svg" width="40" height="40"/>
          <div class="analytics-card__body__left-block__footer__label">
            <label>6,6/10 : Benchmark BaromEX®</label>
            <span><i class="glyphicon glyphicon-chevron-right"></i></span>
          </div>
        </div>
      </div>
    </div>
    <div class="analytics-card__body__center-block">
      <div class="analytics-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
  </div>
</div>

Analytics card

<div class="analytics-card analytics-card--targeted-question">
  <div class="analytics-card__header">
    <div class="analytics-card__header__label">
      <span class="analytics-card__header__label__base-question">
        Question socle
      </span>
      <span class="analytics-card__header__label__targeted-question">
        Question ciblée
        <span class="analytics-card__header__label__targeted-question__badge">
          Produit
        </span>
      </span>
      <span class="analytics-card__header__label__respondent-base">
        Base de répondants : 10  (sur 19 invités)
      </span>
    </div>
  </div>
  <div class="analytics-card__body__heading">
    <div class="analytics-card__body__heading__theme-and-date">
      <span class="analytics-card__body__heading__theme-badge m-right-10">
        <i class="analytics-card__body__heading__theme-icon-image glyphicon glyphicon-user m-right-7"></i>
        Theme
      </span>
      <span class="analytics-card__body__heading__question-text">
        Adipisicing aliqua aliquip aliquip amet.
      </span>
    </div>
  </div>
  <div class="analytics-card__body">
    <div class="analytics-card__body__left-block">
      <div class="analytics-card__body__left-block__body p-top-10">
        <span class="analytics-card__body__left-block__body__comment font-size--small">
          <i class="analytics-card__body__left-block__body__comment-icon-image glyphicon glyphicon-link"></i>
          Adipisicing aliqua aliquip aliquip amet.
        </span>
        <div class="analytics-card__body__left-block__body__score">
          <div class="flex-container flex-column">
            <div class="flex-3 analytics-card__body__left-block__body__score__first-row">
              <img src="images/analytics-card/score_card.png">
            </div>
            <div class=" flex-1 analytics-card__body__left-block__body__score__second-row border-top-1 border__primary--100 font-size--small p-top-10 text-left">
              <p><strong>Adipisicing aliqua aliquip aliquip amet.</strong> Adipisicing aliqua aliquip aliquip amet.</p>
            </div>
          </div>
        </div>
        <div class="analytics-card__body__left-block__footer">
          <img src="/images/administration/setting/inspirational_content.svg" width="40" height="40"/>
          <div class="analytics-card__body__left-block__footer__label">
            <label>6,6/10 : Benchmark BaromEX®</label>
            <span><i class="glyphicon glyphicon-chevron-right"></i></span>
          </div>
        </div>
      </div>
    </div>
    <div class="analytics-card__body__center-block">
      <div class="analytics-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
  </div>
</div>

Analytics card

Theme Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Adipisicing aliqua aliquip aliquip amet.

6,6/10 : Benchmark BaromEX®

<div class="analytics-card analytics-card--targeted-question">
  <div class="analytics-card__header">
    <div class="analytics-card__header__label">
      <span class="analytics-card__header__label__base-question">
        Question socle
      </span>
      <span class="analytics-card__header__label__targeted-question">
        Question ciblée
        <span class="analytics-card__header__label__targeted-question__badge">
          Produit
        </span>
      </span>
      <span class="analytics-card__header__label__respondent-base">
        Base de répondants : 10  (sur 19 invités)
      </span>
    </div>
  </div>
  <div class="analytics-card__body__heading">
    <div class="analytics-card__body__heading__theme-and-date">
      <span class="analytics-card__body__heading__theme-badge m-right-10">
        <i class="analytics-card__body__heading__theme-icon-image glyphicon glyphicon-user m-right-7"></i>
        Theme
      </span>
      <span class="analytics-card__body__heading__question-text">
        Adipisicing aliqua aliquip aliquip amet.
      </span>
    </div>
  </div>
  <div class="analytics-card__body">
    <div class="analytics-card__body__left-block">
      <div class="analytics-card__body__left-block__body p-top-10">
        <span class="analytics-card__body__left-block__body__comment font-size--small">
          <i class="analytics-card__body__left-block__body__comment-icon-image glyphicon glyphicon-link"></i>
          Adipisicing aliqua aliquip aliquip amet.
        </span>
        <div class="analytics-card__body__left-block__body__score">
          <div class="flex-container flex-column">
            <div class="flex-3 analytics-card__body__left-block__body__score__first-row">
              <img src="images/analytics-card/score_card.png">
            </div>
            <div class=" flex-1 analytics-card__body__left-block__body__score__second-row border-top-1 border__primary--100 font-size--small p-top-10 text-left">
              <p><strong>Adipisicing aliqua aliquip aliquip amet.</strong> Adipisicing aliqua aliquip aliquip amet.</p>
            </div>
          </div>
        </div>
        <div class="analytics-card__body__left-block__footer">
          <img src="/images/administration/setting/inspirational_content.svg" width="40" height="40"/>
          <div class="analytics-card__body__left-block__footer__label">
            <label>6,6/10 : Benchmark BaromEX®</label>
            <span><i class="glyphicon glyphicon-chevron-right"></i></span>
          </div>
        </div>
      </div>
    </div>
    <div class="analytics-card__body__center-block">
      <div class="analytics-card__body__center-block__chart">
        <img src="images/analytics-card/chart_card.png" width="500" height="300">
      </div>
    </div>
  </div>
</div>

Sensitive Expressions Card

<div class="sensitive-expressions-card">
  <div class="sensitive-expressions-card__header align-items__center bg__danger--200">
    <div class="sensitive-expressions-card__header__container-description">
      <span class="sensitive-expressions-card__header--description font-size--standard">Adipisicing aliqua aliquip aliquip amet. &nbsp;</span>
    </div>
    <div class="sensitive-expressions-card__header__container-badges align-items__center">
      <div class="sensitive-expressions-card__header__container-badges__badge font-size--small">Adipisicing aliqua aliquip aliquip amet.</div>
    </div>
    <div class="p-right-15">
      <el-tooltip placement="top" content="Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.">
        <img src="images/moderate.svg" width="35" height="20">
      </el-tooltip>
    </div>
  </div>
  <div class="sensitive-expressions-card__body">
    <div class="sensitive-expressions-card__body__question">
      <span class="sensitive-expressions-card__body__question__label font-size--standard">Adipisicing aliqua aliquip aliquip amet.</span>
      <a class="sensitive-expressions-card__body__question__link font-size--standard">Adipisicing aliqua aliquip aliquip amet.</a>
    </div><br>
    <div class="sensitive-expressions-card__body__comment">
      <div class="sensitive-expressions-card__body__comment__emoji">
        <img src="images/emoji.png" width="35">
      </div>
      <div class="sensitive-expressions-card__body__comment__label">
        <p class="font-size--standard">Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat. Deserunt do do dolor dolore dolore duis. Ea eiusmod eiusmod elit enim enim esse esse.</p>
      </div>
      <div class="sensitive-expressions-card__body__comment__gif font-size--small">
        <span>Adipisicing aliqua aliquip aliquip amet.</span>
        <img src="https://media2.giphy.com/media/zBhZiVNNQjfTG/200w.gif" class="width-100">
      </div>
    </div>
  </div>
</div>

Sensitive Expressions Card

Adipisicing aliqua aliquip aliquip amet. Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat. Deserunt do do dolor dolore dolore duis. Ea eiusmod eiusmod elit enim enim esse esse.

Adipisicing aliqua aliquip aliquip amet.

<div class="sensitive-expressions-card">
  <div class="sensitive-expressions-card__header align-items__center bg__danger--200">
    <div class="sensitive-expressions-card__header__container-description">
      <span class="sensitive-expressions-card__header--description font-size--standard">Adipisicing aliqua aliquip aliquip amet. &nbsp;</span>
    </div>
    <div class="sensitive-expressions-card__header__container-badges align-items__center">
      <div class="sensitive-expressions-card__header__container-badges__badge font-size--small">Adipisicing aliqua aliquip aliquip amet.</div>
    </div>
    <div class="p-right-15">
      <el-tooltip placement="top" content="Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.">
        <img src="images/moderate.svg" width="35" height="20">
      </el-tooltip>
    </div>
  </div>
  <div class="sensitive-expressions-card__body">
    <div class="sensitive-expressions-card__body__question">
      <span class="sensitive-expressions-card__body__question__label font-size--standard">Adipisicing aliqua aliquip aliquip amet.</span>
      <a class="sensitive-expressions-card__body__question__link font-size--standard">Adipisicing aliqua aliquip aliquip amet.</a>
    </div><br>
    <div class="sensitive-expressions-card__body__comment">
      <div class="sensitive-expressions-card__body__comment__emoji">
        <img src="images/emoji.png" width="35">
      </div>
      <div class="sensitive-expressions-card__body__comment__label">
        <p class="font-size--standard">Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat. Deserunt do do dolor dolore dolore duis. Ea eiusmod eiusmod elit enim enim esse esse.</p>
      </div>
      <div class="sensitive-expressions-card__body__comment__gif font-size--small">
        <span>Adipisicing aliqua aliquip aliquip amet.</span>
        <img src="https://media2.giphy.com/media/zBhZiVNNQjfTG/200w.gif" class="width-100">
      </div>
    </div>
  </div>
</div>

Sensitive Expressions Empty

<div class="sensitive-expressions-empty align-items__center">
  <div class="sensitive-expressions-empty__img">
    <el-tooltip placement="top" content="Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.">
      <img src="images/moderate.svg" width="35" height="20">
    </el-tooltip>
  </div>
  <span class="sensitive-expressions-empty__label font-size--standard">Adipisicing aliqua aliquip aliquip amet.</span>
  <a class="sensitive-expressions-empty__link font-size--standard">Adipisicing aliqua aliquip aliquip amet.</a>
</div>

Sensitive Expressions Empty

Adipisicing aliqua aliquip aliquip amet. Adipisicing aliqua aliquip aliquip amet.

<div class="sensitive-expressions-empty align-items__center">
  <div class="sensitive-expressions-empty__img">
    <el-tooltip placement="top" content="Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.">
      <img src="images/moderate.svg" width="35" height="20">
    </el-tooltip>
  </div>
  <span class="sensitive-expressions-empty__label font-size--standard">Adipisicing aliqua aliquip aliquip amet.</span>
  <a class="sensitive-expressions-empty__link font-size--standard">Adipisicing aliqua aliquip aliquip amet.</a>
</div>

Card

<div class="setting-card">
   <div class="setting-card__header">
     <img class="setting-card__header__img" src="images/picture.svg" width="38" height="29">
     <img class="setting-card__header__img-gray" src="images/picture-gray.svg" width="38" height="29">
   </div>
   <div class="setting-card__description">
     <p class="font-size--big">
       <strong>Themes</strong>
     </p>
     <p class="font-size--standard">
       Themes allow questions to be grouped together, thus simplifying the understanding of the questionnaire & the analysis of the results.
     </p>
   </div>
 </div>

Setting Card

Themes

Themes allow questions to be grouped together, thus simplifying the understanding of the questionnaire & the analysis of the results.

Card Modifiers

Modifier

Description

.setting-card--disabled

The setting card is disabled

<div class="setting-card">
   <div class="setting-card__header">
     <img class="setting-card__header__img" src="images/picture.svg" width="38" height="29">
     <img class="setting-card__header__img-gray" src="images/picture-gray.svg" width="38" height="29">
   </div>
   <div class="setting-card__description">
     <p class="font-size--big">
       <strong>Themes</strong>
     </p>
     <p class="font-size--standard">
       Themes allow questions to be grouped together, thus simplifying the understanding of the questionnaire & the analysis of the results.
     </p>
   </div>
 </div>

Card

<div class="setting-card setting-card--disabled">
   <div class="setting-card__header">
     <img class="setting-card__header__img" src="images/picture.svg" width="38" height="29">
     <img class="setting-card__header__img-gray" src="images/picture-gray.svg" width="38" height="29">
   </div>
   <div class="setting-card__description">
     <p class="font-size--big">
       <strong>Themes</strong>
     </p>
     <p class="font-size--standard">
       Themes allow questions to be grouped together, thus simplifying the understanding of the questionnaire & the analysis of the results.
     </p>
   </div>
 </div>

Setting Card

Themes

Themes allow questions to be grouped together, thus simplifying the understanding of the questionnaire & the analysis of the results.

Card Modifiers

Modifier

Description

.setting-card--disabled

The setting card is disabled

<div class="setting-card setting-card--disabled">
   <div class="setting-card__header">
     <img class="setting-card__header__img" src="images/picture.svg" width="38" height="29">
     <img class="setting-card__header__img-gray" src="images/picture-gray.svg" width="38" height="29">
   </div>
   <div class="setting-card__description">
     <p class="font-size--big">
       <strong>Themes</strong>
     </p>
     <p class="font-size--standard">
       Themes allow questions to be grouped together, thus simplifying the understanding of the questionnaire & the analysis of the results.
     </p>
   </div>
 </div>

Survey editor card

<div class="survey-editor-card">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.

Survey editor card Modifiers

Modifier

Description

.survey-editor-card--empty

There is nothing to display

.survey-editor-card--disabled

The content of the component is not modifiable but can be deleted

.survey-editor-card--add-disable

No possibility to add a question after the component

.survey-editor-card--remove-disable

The content of the component is not editable

.survey-editor-card__move--disable

Component cannot move

.survey-editor-card--dependant

Component that depends on another component

.survey-editor-card--header

Component with header

.survey-editor-card--active

Component is active

<div class="survey-editor-card">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--empty">
  <p>Adipisicing aliqua aliquip aliquip amet.</p>
  <button class="survey-editor-card__btn--add"></button>
</div>

Empty card

Adipisicing aliqua aliquip aliquip amet.

<div class="survey-editor-card survey-editor-card--empty">
  <p>Adipisicing aliqua aliquip aliquip amet.</p>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--disabled">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Disabled card

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.

<div class="survey-editor-card survey-editor-card--disabled">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--add-disable">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Disabled adding card

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.

<div class="survey-editor-card survey-editor-card--add-disable">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--remove-disable">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Disabled remove card

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.

<div class="survey-editor-card survey-editor-card--remove-disable">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--select-text">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-comment"></i>
          <span class="survey-editor-card__component__body__header__theme__label">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <el-input placeholder="Please input"></el-input>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card select text

Adipisicing aliqua aliquip aliquip amet.

<div class="survey-editor-card survey-editor-card--select-text">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-comment"></i>
          <span class="survey-editor-card__component__body__header__theme__label">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <el-input placeholder="Please input"></el-input>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--select-image">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-picture"></i>
          <span class="survey-editor-card__component__body__header__theme__label">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="function(){}"
          :on-remove="function(){}"
          :before-remove="function(){}"
          :limit="1"
          :on-exceed="function(){}"
          :file-list="[]">
          <el-button size="small" type="primary">Upload file</el-button>
        </el-upload>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card select image

Adipisicing aliqua aliquip aliquip amet.

Upload file

<div class="survey-editor-card survey-editor-card--select-image">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-picture"></i>
          <span class="survey-editor-card__component__body__header__theme__label">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="function(){}"
          :on-remove="function(){}"
          :before-remove="function(){}"
          :limit="1"
          :on-exceed="function(){}"
          :file-list="[]">
          <el-button size="small" type="primary">Upload file</el-button>
        </el-upload>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--select-mood">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <el-select placeholder="Select" value="">
            <el-option
              :key="value"
              :label="label"
              :value="value">
            </el-option>
          </el-select>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <el-input placeholder="Please input"></el-input>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card select mood

Adipisicing aliqua aliquip aliquip amet.

<div class="survey-editor-card survey-editor-card--select-mood">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <el-select placeholder="Select" value="">
            <el-option
              :key="value"
              :label="label"
              :value="value">
            </el-option>
          </el-select>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <el-input placeholder="Please input"></el-input>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--select-other">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-asterisk"></i>
          <el-select placeholder="Select" value="">
            <el-option
              :key="value"
              :label="label"
              :value="value">
            </el-option>
          </el-select>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <el-input placeholder="Please input"></el-input>
        <div class="survey-editor-card__component__body__label__input">
          <el-input class="survey-editor-card__component__body__label__input__choice" placeholder="Please input"></el-input>
          <i class="survey-editor-card__component__body__label__input__choice__plus glyphicon glyphicon-plus-sign text-success"></i>
          <i class="survey-editor-card__component__body__label__input__choice__minus glyphicon glyphicon-minus-sign text-danger"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card select other

Adipisicing aliqua aliquip aliquip amet.

<div class="survey-editor-card survey-editor-card--select-other">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-asterisk"></i>
          <el-select placeholder="Select" value="">
            <el-option
              :key="value"
              :label="label"
              :value="value">
            </el-option>
          </el-select>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <el-input placeholder="Please input"></el-input>
        <div class="survey-editor-card__component__body__label__input">
          <el-input class="survey-editor-card__component__body__label__input__choice" placeholder="Please input"></el-input>
          <i class="survey-editor-card__component__body__label__input__choice__plus glyphicon glyphicon-plus-sign text-success"></i>
          <i class="survey-editor-card__component__body__label__input__choice__minus glyphicon glyphicon-minus-sign text-danger"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--dependant">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Dependant card

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.

<div class="survey-editor-card survey-editor-card--dependant">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card__move--disable">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Move disable card

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.

<div class="survey-editor-card survey-editor-card__move--disable">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--header">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__header">
      <div class="survey-editor-card__component__header__left">
        <div class="survey-editor-card__component__header__left--icon">
          <i class="survey-editor-card__component__header__left--icon--type glyphicon glyphicon-heart"></i>
        </div>
        <hr class="survey-editor-card__component__header__left--hr">
        <div class="survey-editor-card__component__header__left--type">
          Question
        </div>
      </div>
      <div class="survey-editor-card__component__header__right">
        <div class="survey-editor-card__component__header__right--essential">
          <div class="survey-editor-card__component__header__right--essential--label">Essentielle</div>
        </div>
        <div class="survey-editor-card__component__header__right--kpi">
          <div class="survey-editor-card__component__header__right--kpi--label">KPI</div>
        </div>
      </div>
    </div>
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <span class="survey-editor-card__component__badge">
            Supprimer
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Comment as-tu connu... ?</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card with header

<div class="survey-editor-card survey-editor-card--header">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__header">
      <div class="survey-editor-card__component__header__left">
        <div class="survey-editor-card__component__header__left--icon">
          <i class="survey-editor-card__component__header__left--icon--type glyphicon glyphicon-heart"></i>
        </div>
        <hr class="survey-editor-card__component__header__left--hr">
        <div class="survey-editor-card__component__header__left--type">
          Question
        </div>
      </div>
      <div class="survey-editor-card__component__header__right">
        <div class="survey-editor-card__component__header__right--essential">
          <div class="survey-editor-card__component__header__right--essential--label">Essentielle</div>
        </div>
        <div class="survey-editor-card__component__header__right--kpi">
          <div class="survey-editor-card__component__header__right--kpi--label">KPI</div>
        </div>
      </div>
    </div>
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <span class="survey-editor-card__component__badge">
            Supprimer
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Comment as-tu connu... ?</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card

<div class="survey-editor-card survey-editor-card--active">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Survey editor card active

Adipisicing aliqua aliquip aliquip amet.

Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.

<div class="survey-editor-card survey-editor-card--active">
  <div class="survey-editor-card__component">
    <div class="survey-editor-card__component__body">
      <div class="survey-editor-card__component__body__header">
        <div class="survey-editor-card__component__body__header__theme">
          <i class="survey-editor-card__component__body__header__theme--icon glyphicon glyphicon-heart"></i>
          <span class="survey-editor-card__component__badge">
            Adipisicing aliqua aliquip aliquip amet.
          </span>
        </div>
        <div class="survey-editor-card__component__body__header__action">
          <a class="survey-editor-card__component__body__header__action--link">Adipisicing aliqua aliquip aliquip amet.</a>
          <hr class="survey-editor-card__component__body__header__action--hr">
          <i class="survey-editor-card__component__body__header__action--icon glyphicon glyphicon-lock"></i>
        </div>
      </div>
      <div class="survey-editor-card__component__body__label">
        <span>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</span>
      </div>
    </div>
  </div>
  <div class="survey-editor-card__move">
    <div class="survey-editor-card__move--up">
      <i class="glyphicon glyphicon-menu-up"></i>
    </div>
    <div class="survey-editor-card__move--down">
      <i class="glyphicon glyphicon-menu-down"></i>
    </div>
  </div>
  <button class="survey-editor-card__btn--add"></button>
</div>

Card

<div class="collection-card">
   <div class="card-survey flex-container card-front bg__primary--100">
     <div class="flex-2 align__center card-description">
       <h5 title="PULSE Hebdo" class="font-size--even_bigger">PULSE Hebdo</h5>
       <span class="font-size--big">
         <strong>52 enquêtes  - 1 an</strong>
      </span>
      <p title="Détecter..." class="font-size--standard">Détecter les irritants, comprendre les facteurs d'épanouissement, chaque semaine.</p>
     </div>
     <div class="flex-1 align__center">
         <img src="https://s3.eu-west-3.amazonaws.com/bloomin-backend-prod/web/images/surveytemplate/Template_Pulse_weekly_52.svg">
     </div>
   </div>
 </div>

Survey Model Card

PULSE Hebdo

52 enquêtes - 1 an

Détecter les irritants, comprendre les facteurs d'épanouissement, chaque semaine.

<div class="collection-card">
   <div class="card-survey flex-container card-front bg__primary--100">
     <div class="flex-2 align__center card-description">
       <h5 title="PULSE Hebdo" class="font-size--even_bigger">PULSE Hebdo</h5>
       <span class="font-size--big">
         <strong>52 enquêtes  - 1 an</strong>
      </span>
      <p title="Détecter..." class="font-size--standard">Détecter les irritants, comprendre les facteurs d'épanouissement, chaque semaine.</p>
     </div>
     <div class="flex-1 align__center">
         <img src="https://s3.eu-west-3.amazonaws.com/bloomin-backend-prod/web/images/surveytemplate/Template_Pulse_weekly_52.svg">
     </div>
   </div>
 </div>

Other

Big analytics card

<div class="big-card">
  <div class="big-card__header">
    <span class="big-card__header-title">adipisicing adipisicing aliqua</span>
    <i class="big-card__header-title-icon glyphicon glyphicon-info-sign"></i>
  </div>
  <div class="big-card__body">
  Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.

Do dolor dolore dolore duis duis ea. Eiusmod elit enim enim esse esse est et. Eu ex ex excepteur excepteur exercitation fugiat fugiat id. In incididunt incididunt ipsum irure irure labore labore laboris laborum.

Magna magna minim minim mollit nisi nisi non nostrud nostrud nulla. Occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint. Sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing. Aliquip aliquip amet amet anim. Aute cillum commodo commodo consectetur consectetur. Culpa culpa cupidatat deserunt deserunt do.
  </div>
</div>

Big card

Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt. Do dolor dolore dolore duis duis ea. Eiusmod elit enim enim esse esse est et. Eu ex ex excepteur excepteur exercitation fugiat fugiat id. In incididunt incididunt ipsum irure irure labore labore laboris laborum. Magna magna minim minim mollit nisi nisi non nostrud nostrud nulla. Occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint. Sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing. Aliquip aliquip amet amet anim. Aute cillum commodo commodo consectetur consectetur. Culpa culpa cupidatat deserunt deserunt do.

<div class="big-card">
  <div class="big-card__header">
    <span class="big-card__header-title">adipisicing adipisicing aliqua</span>
    <i class="big-card__header-title-icon glyphicon glyphicon-info-sign"></i>
  </div>
  <div class="big-card__body">
  Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.

Do dolor dolore dolore duis duis ea. Eiusmod elit enim enim esse esse est et. Eu ex ex excepteur excepteur exercitation fugiat fugiat id. In incididunt incididunt ipsum irure irure labore labore laboris laborum.

Magna magna minim minim mollit nisi nisi non nostrud nostrud nulla. Occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint. Sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing. Aliquip aliquip amet amet anim. Aute cillum commodo commodo consectetur consectetur. Culpa culpa cupidatat deserunt deserunt do.
  </div>
</div>

Blog post

<div class="blog-post-card">
  <div class="blog-post p-30 m-top-15 m-bottom-15 font-size--small">
     <transition name="fade">
     <div class="post-wrapper">
         <a class="title font-size--bigger text__primary" target="_blank" rel="noopener noreferer" href="#">Lorem ipsum</a>
         <p class="author text__secondary--text m-0 m-top-5"><strong>Auteur</strong> · Source</p>
         <p class="reading-time m-top-3 text__secondary--text"><i aria-hidden="true" class="fa-solid fa-clock"></i> Temps de lecture : 5 min</p>
         <p class="summary">Sommaire</p>
         <div class="flex-container flex-wrap">
           <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5 f p-5 border-1 border__placeholder bg__white">
            Test
          </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
          Test ae aze
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Testf azre azer az
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test2
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test rrr
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test jeaea ze
         </div>
         <div class=" text__secondary--text tag m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test c'est oui
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test  ttttt
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5 f p-5 border-1 border__placeholder bg__white">
            Test
          </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
          Test ae aze
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Testf azre azer az
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test2
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test rrr
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test jeaea ze
         </div>
         <div class=" text__secondary--text tag m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test c'est oui
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test  ttttt
         </div>
       </div>
      </div>
     </transition>
 </div>

blog-post

Lorem ipsum

Auteur · Source

Temps de lecture : 5 min

Sommaire

Test

Test ae aze

Testf azre azer az

Test2

Test rrr

Test jeaea ze

Test c'est oui

Test ttttt

Test

Test ae aze

Testf azre azer az

Test2

Test rrr

Test jeaea ze

Test c'est oui

Test ttttt

<div class="blog-post-card">
  <div class="blog-post p-30 m-top-15 m-bottom-15 font-size--small">
     <transition name="fade">
     <div class="post-wrapper">
         <a class="title font-size--bigger text__primary" target="_blank" rel="noopener noreferer" href="#">Lorem ipsum</a>
         <p class="author text__secondary--text m-0 m-top-5"><strong>Auteur</strong> · Source</p>
         <p class="reading-time m-top-3 text__secondary--text"><i aria-hidden="true" class="fa-solid fa-clock"></i> Temps de lecture : 5 min</p>
         <p class="summary">Sommaire</p>
         <div class="flex-container flex-wrap">
           <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5 f p-5 border-1 border__placeholder bg__white">
            Test
          </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
          Test ae aze
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Testf azre azer az
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test2
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test rrr
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test jeaea ze
         </div>
         <div class=" text__secondary--text tag m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test c'est oui
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test  ttttt
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5 f p-5 border-1 border__placeholder bg__white">
            Test
          </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
          Test ae aze
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Testf azre azer az
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test2
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test rrr
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test jeaea ze
         </div>
         <div class=" text__secondary--text tag m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test c'est oui
         </div>
         <div class="tag text__secondary--text m-right-2 m-left-2 m-bottom-5  p-5 border-1 border__placeholder bg__white">
           Test  ttttt
         </div>
       </div>
      </div>
     </transition>
 </div>

Modal

<button @click="creatingTemplateModalVisible = true">showModal</button>
<div class="creating-template-modal" v-if="creatingTemplateModalVisible">
  <div class="creating-template-modal__contents">
    <div class="creating-template-modal__contents__left">
      <label class="creating-template-modal__contents__left__title">Les étapes de création d’un modèle</label>
      <div class="creating-template-modal__contents__left__body">
        <ul>
          <li>
            <strong>Description</strong>
            Ajoutez une description à votre modèle.
          </li>
          <li>
            <strong>Enquête(s)</strong>
            Personnalisez la structure des enquêtes en ajoutant les questions socles dans une structure conversationnelle.
          </li>
          <li>
            <strong>Bibliothèque de questions</strong>
            Mettez à disposition des utilisateurs des questions supplémentaires.
          </li>
          <li>
            <strong>E-mails types</strong>
            Personnalisez l’e-mails types envoyés aux participants.
          </li>
          <li>
            <strong>Gestion des accès au modèle</strong>
            Paramétrez l’accès utilisateur à l’aperçu du modèle.
          </li>
        </ul>
      </div>
    </div>
    <div class="creating-template-modal__contents__right">
      <div class="creating-template-modal__contents__right__header">
        <button class="creating-template-modal__contents__right__header__btn-close" @click="creatingTemplateModalVisible = false">
          <span aria-hidden="true">×</span>
          <span class="sr-only">x</span>
        </button>
      </div>
      <div class="creating-template-modal__contents__right__body">
        <p class="creating-template-modal__contents__right__body__title">Nouveau questionnaire</p>
        <div class="input-group creating-template-modal__contents__right__body__input">
          <label class="creating-template-modal__contents__right__body__input__title">Pour commencer, donnez un nom à votre modèle</label>
          <div class="creating-template-modal__contents__right__body__input__value">
            <el-input placeholder="Saisir le nom de votre modèle"></el-input>
            <span class="text__danger--300 font-size--small">
              <i>Modèle déjà existant : Nom du modèle</i>
            </span>
          </div>
          <button class="btn btn__primary">
            Commencer
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Creating template Modal

<button @click="creatingTemplateModalVisible = true">showModal</button>
<div class="creating-template-modal" v-if="creatingTemplateModalVisible">
  <div class="creating-template-modal__contents">
    <div class="creating-template-modal__contents__left">
      <label class="creating-template-modal__contents__left__title">Les étapes de création d’un modèle</label>
      <div class="creating-template-modal__contents__left__body">
        <ul>
          <li>
            <strong>Description</strong>
            Ajoutez une description à votre modèle.
          </li>
          <li>
            <strong>Enquête(s)</strong>
            Personnalisez la structure des enquêtes en ajoutant les questions socles dans une structure conversationnelle.
          </li>
          <li>
            <strong>Bibliothèque de questions</strong>
            Mettez à disposition des utilisateurs des questions supplémentaires.
          </li>
          <li>
            <strong>E-mails types</strong>
            Personnalisez l’e-mails types envoyés aux participants.
          </li>
          <li>
            <strong>Gestion des accès au modèle</strong>
            Paramétrez l’accès utilisateur à l’aperçu du modèle.
          </li>
        </ul>
      </div>
    </div>
    <div class="creating-template-modal__contents__right">
      <div class="creating-template-modal__contents__right__header">
        <button class="creating-template-modal__contents__right__header__btn-close" @click="creatingTemplateModalVisible = false">
          <span aria-hidden="true">×</span>
          <span class="sr-only">x</span>
        </button>
      </div>
      <div class="creating-template-modal__contents__right__body">
        <p class="creating-template-modal__contents__right__body__title">Nouveau questionnaire</p>
        <div class="input-group creating-template-modal__contents__right__body__input">
          <label class="creating-template-modal__contents__right__body__input__title">Pour commencer, donnez un nom à votre modèle</label>
          <div class="creating-template-modal__contents__right__body__input__value">
            <el-input placeholder="Saisir le nom de votre modèle"></el-input>
            <span class="text__danger--300 font-size--small">
              <i>Modèle déjà existant : Nom du modèle</i>
            </span>
          </div>
          <button class="btn btn__primary">
            Commencer
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Detail info

<div class="detail-info-box flex-container border-1 border__primary">
  <div class="detail-left-box flex-1 text__bg  bg__primary flex-container align-items__center justify-content__center font-size--big text--bold">
    <i class="m-left-20 m-right-20 fa-solid fa-download"></i>
    <span class="flex-1">adipisicing</span>
  </div>
  <div class="detail-right-box flex-4 flex-container align-items__center m-left-30 font-size--big bg__white">
    <span>adipisicing adipisicing aliqua aliquip</span>
  </div>
</div>

Detail info card

adipisicing

adipisicing adipisicing aliqua aliquip

<div class="detail-info-box flex-container border-1 border__primary">
  <div class="detail-left-box flex-1 text__bg  bg__primary flex-container align-items__center justify-content__center font-size--big text--bold">
    <i class="m-left-20 m-right-20 fa-solid fa-download"></i>
    <span class="flex-1">adipisicing</span>
  </div>
  <div class="detail-right-box flex-4 flex-container align-items__center m-left-30 font-size--big bg__white">
    <span>adipisicing adipisicing aliqua aliquip</span>
  </div>
</div>

Hero title

<h2 class="hero-title">adipisicing adipisicing aliqua <strong>adipisicing adipisicing</strong></h2>

adipisicing adipisicing aliqua adipisicing adipisicing

<h2 class="hero-title">adipisicing adipisicing aliqua <strong>adipisicing adipisicing</strong></h2>

Indicators card

<div class="indicators-card">
  <div class="indicator-card__content">
  </div>
</div>

Indicators card

<div class="indicators-card">
  <div class="indicator-card__content">
  </div>
</div>

Language to translate to

<div class="survey-to-translate">
  <div class="survey-to-translate__image">
    <img src="http://www.drapeauxdespays.fr/data/flags/ultra/fr.png">
  </div>
  <div class="survey-to-translate__description">
    <span><strong>Enquête à traduire</strong></span>
    <br><span>Français (France) - 1073 mots à traduire</span>
  </div>
</div>

language to translate to

Enquête à traduire
Français (France) - 1073 mots à traduire

<div class="survey-to-translate">
  <div class="survey-to-translate__image">
    <img src="http://www.drapeauxdespays.fr/data/flags/ultra/fr.png">
  </div>
  <div class="survey-to-translate__description">
    <span><strong>Enquête à traduire</strong></span>
    <br><span>Français (France) - 1073 mots à traduire</span>
  </div>
</div>

Library information card

<div class="library-information-card flex-container">
  <div class="library-information-card__container flex-container flex-1 align-items__center">
    <div class="library-information-card__container--image m-left-25">
      <img src="https://placeimg.com/89/89/any">
    </div>
    <div class="library-information-card__container--description  m-left-50">
      <span class="font-size--standard"><strong>Adipisicing aliqua aliquip aliquip amet.</strong> Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo.</span>
    </div>
   </div>
  <div class="library-information-card__button flex-container align-items__center m-left-10 justify-content__flex-end">
    <button class="btn btn-sm btn__primary font-size--big">
      <strong>lorem</strong>
    </button>
    <button class="btn btn-sm btn__white font-size--big m-left-10">
      <strong>ipsum</strong>
  px  </button>
  </div>
</div>

Library information card

Adipisicing aliqua aliquip aliquip amet. Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo.

<div class="library-information-card flex-container">
  <div class="library-information-card__container flex-container flex-1 align-items__center">
    <div class="library-information-card__container--image m-left-25">
      <img src="https://placeimg.com/89/89/any">
    </div>
    <div class="library-information-card__container--description  m-left-50">
      <span class="font-size--standard"><strong>Adipisicing aliqua aliquip aliquip amet.</strong> Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo.</span>
    </div>
   </div>
  <div class="library-information-card__button flex-container align-items__center m-left-10 justify-content__flex-end">
    <button class="btn btn-sm btn__primary font-size--big">
      <strong>lorem</strong>
    </button>
    <button class="btn btn-sm btn__white font-size--big m-left-10">
      <strong>ipsum</strong>
  px  </button>
  </div>
</div>

Line with pointer

<div class="line-with-arrow">
</div>

Line with pointer

<div class="line-with-arrow">
</div>

loader

<div class="loader">
   <i class="fa-solid fa-spinner fa-spin spinner text__danger--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner text__warning--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner"></i>
   <i class="fa-solid fa-spinner fa-spin spinner text__primary"></i>
 </div>
 <div class="loader">
   <i class="fa-solid fa-spinner fa-spin spinner--big text__danger--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--big text__warning--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--big"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--big text__primary"></i>
 </div>
 <div class="loader">
   <i class="fa-solid fa-spinner fa-spin spinner--huge text__danger--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--huge text__warning--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--huge"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--huge text__primary"></i>
 </div>

Loader

<div class="loader">
   <i class="fa-solid fa-spinner fa-spin spinner text__danger--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner text__warning--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner"></i>
   <i class="fa-solid fa-spinner fa-spin spinner text__primary"></i>
 </div>
 <div class="loader">
   <i class="fa-solid fa-spinner fa-spin spinner--big text__danger--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--big text__warning--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--big"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--big text__primary"></i>
 </div>
 <div class="loader">
   <i class="fa-solid fa-spinner fa-spin spinner--huge text__danger--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--huge text__warning--300"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--huge"></i>
   <i class="fa-solid fa-spinner fa-spin spinner--huge text__primary"></i>
 </div>

Modal

<div class="b-modal">
  <div class="b-modal__contents">
    <div class="b-modal__contents__header">
      <button class="b-modal__contents__header__btn-close">
        <span aria-hidden="true">×</span>
        <span class="sr-only">x</span>
      </button>
      <h3 class="b-modal__contents__header__title">Title</h3>
    </div>
    <div class="b-modal__contents__body">
      <p>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</p>
      <div class="input-group b-modal__contents__body__input">
      </div>
    </div>
    <div class="b-modal__contents__footer">
      <button class="btn btn-default">
        button
      </button>
    </div>
  </div>
</div>

Modal

<div class="b-modal">
  <div class="b-modal__contents">
    <div class="b-modal__contents__header">
      <button class="b-modal__contents__header__btn-close">
        <span aria-hidden="true">×</span>
        <span class="sr-only">x</span>
      </button>
      <h3 class="b-modal__contents__header__title">Title</h3>
    </div>
    <div class="b-modal__contents__body">
      <p>Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat.</p>
      <div class="input-group b-modal__contents__body__input">
      </div>
    </div>
    <div class="b-modal__contents__footer">
      <button class="btn btn-default">
        button
      </button>
    </div>
  </div>
</div>

Navbar

<nav class="menu">
  <div class="menu-left">
      <div class="menu-items">
          <div class="item logo">
            <img class="logo" alt="Bloomin" src="../styleguide/images/bloomin-white.png" width="33" height="33">
          </div>
          <div class="item no-hover">
            <img src="https://placeimg.com/33/33/any"/>
          </div>
          <a class="item" href="">Participants</a>
          <a class="item" href="">écouter</a>
          <a class="item" href="">Analyser</a>
          <a class="item" href="">AGIR</a>
          <a class="item" href="">Diag</a>
      </div>
  </div>
  <div class="menu-right">
      <div class="menu-items">
          <a class="item" href="#">Université</a>
          <a class="item" href="#">Aide</a>
          <a href="" class="item flag">
            <span class="flag-icon flag-icon--fr" title="English"></span>
          </a>
          <a href="" class="item flag">
            <span class="flag-icon flag-icon--us" title="English"></span>
          </a>
      </div>
      <div class="separator"></div>
      <div class="menu-items">
        <div class="item dropdown-container">
            <i class="icon fa-solid fa-circle-user fa-2x" aria-hidden="true"></i>
            <div class="text">
              <p>
                  Decathlon - IT
              </p>
              <small>
                  alexis.finn@bloomin.digital
              </small>
            </div>
            <div class="dropdown">
              <a href="">Link 1</a>
              <a href="">Link 2</a>
              <a href="">Link 3</a>
            </div>
        </div>
    </div>
  </div>
</nav>
<br>
<nav class="menu menu--threesixty">
  <div class="menu-left">
      <div class="menu-items">
          <div class="item logo">
            <img class="logo" alt="Bloomin" src="../styleguide/images/bloomin-white.png" width="33" height="33">
          </div>
          <div class="item no-hover">
            <img src="https://placeimg.com/33/33/any"/>
          </div>
          <a class="item item--longword" href="">Enquete 360</a>
          <a class="item item--longword" href="">Dashboard KPIs Grand Angle</a>
      </div>
  </div>
  <div class="menu-right">
      <div class="menu-items">
          <a class="item" href="#">Université</a>
          <a class="item" href="#">Aide</a>
          <a href="" class="item flag">
            <span class="flag-icon flag-icon--fr" title="English"></span>
          </a>
          <a href="" class="item flag">
            <span class="flag-icon flag-icon--us" title="English"></span>
          </a>
      </div>
      <div class="separator"></div>
      <div class="menu-items">
        <div class="item dropdown-container">
            <i class="icon fa-solid fa-circle-user fa-2x" aria-hidden="true"></i>
            <div class="text">
              <p>
                  Decathlon - IT
              </p>
              <small>
                  alexis.finn@bloomin.digital
              </small>
            </div>
            <div class="dropdown">
              <a href="">Link 1</a>
              <a href="">Link 2</a>
              <a href="">Link 3</a>
            </div>
        </div>
    </div>
      <div class="separator"></div>
      <div class="menu-items">
        <div class="item dropdown-container">
            <div class="text">
              <p>
                  Pulse
              </p>
            </div>
            <div class="dropdown">
              <a href="">360°</a>
            </div>
        </div>
    </div>
  </div>
</nav>

<nav class="menu">
  <div class="menu-left">
      <div class="menu-items">
          <div class="item logo">
            <img class="logo" alt="Bloomin" src="../styleguide/images/bloomin-white.png" width="33" height="33">
          </div>
          <div class="item no-hover">
            <img src="https://placeimg.com/33/33/any"/>
          </div>
          <a class="item" href="">Participants</a>
          <a class="item" href="">écouter</a>
          <a class="item" href="">Analyser</a>
          <a class="item" href="">AGIR</a>
          <a class="item" href="">Diag</a>
      </div>
  </div>
  <div class="menu-right">
      <div class="menu-items">
          <a class="item" href="#">Université</a>
          <a class="item" href="#">Aide</a>
          <a href="" class="item flag">
            <span class="flag-icon flag-icon--fr" title="English"></span>
          </a>
          <a href="" class="item flag">
            <span class="flag-icon flag-icon--us" title="English"></span>
          </a>
      </div>
      <div class="separator"></div>
      <div class="menu-items">
        <div class="item dropdown-container">
            <i class="icon fa-solid fa-circle-user fa-2x" aria-hidden="true"></i>
            <div class="text">
              <p>
                  Decathlon - IT
              </p>
              <small>
                  alexis.finn@bloomin.digital
              </small>
            </div>
            <div class="dropdown">
              <a href="">Link 1</a>
              <a href="">Link 2</a>
              <a href="">Link 3</a>
            </div>
        </div>
    </div>
  </div>
</nav>
<br>
<nav class="menu menu--threesixty">
  <div class="menu-left">
      <div class="menu-items">
          <div class="item logo">
            <img class="logo" alt="Bloomin" src="../styleguide/images/bloomin-white.png" width="33" height="33">
          </div>
          <div class="item no-hover">
            <img src="https://placeimg.com/33/33/any"/>
          </div>
          <a class="item item--longword" href="">Enquete 360</a>
          <a class="item item--longword" href="">Dashboard KPIs Grand Angle</a>
      </div>
  </div>
  <div class="menu-right">
      <div class="menu-items">
          <a class="item" href="#">Université</a>
          <a class="item" href="#">Aide</a>
          <a href="" class="item flag">
            <span class="flag-icon flag-icon--fr" title="English"></span>
          </a>
          <a href="" class="item flag">
            <span class="flag-icon flag-icon--us" title="English"></span>
          </a>
      </div>
      <div class="separator"></div>
      <div class="menu-items">
        <div class="item dropdown-container">
            <i class="icon fa-solid fa-circle-user fa-2x" aria-hidden="true"></i>
            <div class="text">
              <p>
                  Decathlon - IT
              </p>
              <small>
                  alexis.finn@bloomin.digital
              </small>
            </div>
            <div class="dropdown">
              <a href="">Link 1</a>
              <a href="">Link 2</a>
              <a href="">Link 3</a>
            </div>
        </div>
    </div>
      <div class="separator"></div>
      <div class="menu-items">
        <div class="item dropdown-container">
            <div class="text">
              <p>
                  Pulse
              </p>
            </div>
            <div class="dropdown">
              <a href="">360°</a>
            </div>
        </div>
    </div>
  </div>
</nav>

Sidenav

<div class="sidenav">
  <section class="sidenav-top-section">
    <img src="images/undraw_file_searching_duff.svg" alt="Illustration" width="85" height="85">
    <h1>
     Que souhaitez-vous <strong>analyser ?</strong>
    </h1>
    <p>
      Export des Résultats
      <i aria-hidden="true" data-placement="bottom" class="fa-solid fa-download"></i>
      <i id="download" aria-hidden="true" data-placement="bottom" class="fa-solid fa-lines"></i>
   </p>
  </section>
  <section class="sidenav-mid-section">
   adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip
   <nav>
     <div class="nav-item active">Active</div>
     <div class="nav-item"> not Active</div>
   </nav>
  <section>
 </div>

Que souhaitez-vous analyser ?

Export des Résultats

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

<div class="sidenav">
  <section class="sidenav-top-section">
    <img src="images/undraw_file_searching_duff.svg" alt="Illustration" width="85" height="85">
    <h1>
     Que souhaitez-vous <strong>analyser ?</strong>
    </h1>
    <p>
      Export des Résultats
      <i aria-hidden="true" data-placement="bottom" class="fa-solid fa-download"></i>
      <i id="download" aria-hidden="true" data-placement="bottom" class="fa-solid fa-lines"></i>
   </p>
  </section>
  <section class="sidenav-mid-section">
   adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur consequat culpa culpa cupidatat deserunt deserunt do do dolor dolore dolore duis duis ea eiusmod eiusmod elit enim enim esse esse est et et eu ex ex excepteur excepteur exercitation fugiat fugiat id in in incididunt incididunt ipsum irure irure labore labore laboris laborum laborum Lorem magna magna minim minim mollit nisi nisi non nostrud nostrud nulla nulla occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint sit sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing aliqua aliquip aliquip
   <nav>
     <div class="nav-item active">Active</div>
     <div class="nav-item"> not Active</div>
   </nav>
  <section>
 </div>

Stats Bar

<div class="stats-bar">
   <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
   <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
   <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
   <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
 </div>

15% Taux de participation

<div class="stats-bar">
   <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
   <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
   <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
   <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
 </div>

Sub Navbar

<nav class="sub-navbar sub-navbar-topbottom-borders">
  <section class="sub-navbar-section sub-navbar-left">
    Left
  </section>
  <section class="sub-navbar-section sub-navbar-middle">
    Center
  </section>
  <section class="sub-navbar-section sub-navbar-right">
    Right
  </section>
</nav>

<nav class="sub-navbar sub-navbar-topbottom-borders">
  <section class="sub-navbar-section sub-navbar-left">
    Left
  </section>
  <section class="sub-navbar-section sub-navbar-middle">
    Center
  </section>
  <section class="sub-navbar-section sub-navbar-right">
    Right
  </section>
</nav>

Text bubble

<div class="bubble">
   <p>adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur</p>
 </div>
 <div class="bubble bubble--highlighted"
   <p>adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur</p>
 </div>
 <div class="bubble">
   <ol>
     <li>adipisicing adipisicing aliqua aliquip aliquip</li>
     <li>adipisicing adipisicing aliqua aliquip aliquip</li>
     <li>adipisicing adipisicing aliqua aliquip aliquip</li>
   </ol>
 </div>
 <div class="bubble bubble--empty">
   <p>adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur</p>
 </div>
 <div class="bubble bubble--empty">
   <textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea>
 </div>
 <div class="bubble bubble--empty">
   <ol>
     <li><textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea></li>
     <li><textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea></li>
     <li><textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea></li>
   </ol>
 </div>

adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur

adipisicing adipisicing aliqua aliquip aliquip
adipisicing adipisicing aliqua aliquip aliquip
adipisicing adipisicing aliqua aliquip aliquip

adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur

<div class="bubble">
   <p>adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur</p>
 </div>
 <div class="bubble bubble--highlighted"
   <p>adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur</p>
 </div>
 <div class="bubble">
   <ol>
     <li>adipisicing adipisicing aliqua aliquip aliquip</li>
     <li>adipisicing adipisicing aliqua aliquip aliquip</li>
     <li>adipisicing adipisicing aliqua aliquip aliquip</li>
   </ol>
 </div>
 <div class="bubble bubble--empty">
   <p>adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur</p>
 </div>
 <div class="bubble bubble--empty">
   <textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea>
 </div>
 <div class="bubble bubble--empty">
   <ol>
     <li><textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea></li>
     <li><textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea></li>
     <li><textarea class="bubble__textarea" placeholder="adipisicing adipisicing aliqua"></textarea></li>
   </ol>
 </div>

Survey translation topbar

<header class="topbar">
  <div class="topbar__contents">
    <div class="topbar-info topbar-info__info">
      <img class="logo-bloomin" alt="Logo Bloomin" src="https://admin.bloomin.digital/images/logo-bloomin-seul.svg">
      <h1 class="font-size--biggest">Questionnaire Cryotar</h1>
      <p class="font-size--big text__secondary--text">Traduction d'une enquête</p>
      <a class="font-size--small" href="mailto:example@bloomin.digital">Contacter le manager</a>
    </div>
    <div class="topbar-info topbar-info__progress">
      <p>Traduction en allemand (Allemagne)</p>
      <div class="topbar-info__progress__bar"></div>
    </div>
  </div>
</header>

<header class="topbar">
  <div class="topbar__contents">
    <div class="topbar-info topbar-info__info">
      <img class="logo-bloomin" alt="Logo Bloomin" src="https://admin.bloomin.digital/images/logo-bloomin-seul.svg">
      <h1 class="font-size--biggest">Questionnaire Cryotar</h1>
      <p class="font-size--big text__secondary--text">Traduction d'une enquête</p>
      <a class="font-size--small" href="mailto:example@bloomin.digital">Contacter le manager</a>
    </div>
    <div class="topbar-info topbar-info__progress">
      <p>Traduction en allemand (Allemagne)</p>
      <div class="topbar-info__progress__bar"></div>
    </div>
  </div>
</header>

Analytics info card Modifiers

Modifier

Description

.analytics-info-card--high-reliability

Reliability of results high (precision <= 0,1)

.analytics-info-card--low-reliability

Reliability of results low (precision > 0,1)

<div class="analytics-info-card">
  <div class="analytics-info-card__stats">
    <div class="analytics-info-card__stats__title">
      <img src="images/analytics-card/oval_circle.png" width="62" height="46">
      <span class="analytics-info-card__stats__title__label">
        PARTICIPATION
      </span>
    </div>
    <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
  </div>
  <div class="analytics-info-card__reliability">
    <div class="analytics-info-card__reliability__header">
      <div class="analytics-info-card__reliability__header__cercle"></div>
      <span class="analytics-info-card__reliability__header__title">Précision</span>
    </div>
    <span class="analytics-info-card__reliability__label">
      FIABILITÉ DES RÉSULTATS
      <i class="glyphicon glyphicon-info-sign"></i>
    </span>
  </div>
</div>

Analytics info card

<div class="analytics-info-card analytics-info-card--high-reliability">
  <div class="analytics-info-card__stats">
    <div class="analytics-info-card__stats__title">
      <img src="images/analytics-card/oval_circle.png" width="62" height="46">
      <span class="analytics-info-card__stats__title__label">
        PARTICIPATION
      </span>
    </div>
    <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
  </div>
  <div class="analytics-info-card__reliability">
    <div class="analytics-info-card__reliability__header">
      <div class="analytics-info-card__reliability__header__cercle"></div>
      <span class="analytics-info-card__reliability__header__title">Élevée</span>
    </div>
    <span class="analytics-info-card__reliability__label font-size--smaller">
      FIABILITÉ DES RÉSULTATS
      <i class="glyphicon glyphicon-info-sign"></i>
    </span>
  </div>
</div>

Reliability of results high

PARTICIPATION

15% Taux de participation

FIABILITÉ DES RÉSULTATS

<div class="analytics-info-card analytics-info-card--high-reliability">
  <div class="analytics-info-card__stats">
    <div class="analytics-info-card__stats__title">
      <img src="images/analytics-card/oval_circle.png" width="62" height="46">
      <span class="analytics-info-card__stats__title__label">
        PARTICIPATION
      </span>
    </div>
    <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
  </div>
  <div class="analytics-info-card__reliability">
    <div class="analytics-info-card__reliability__header">
      <div class="analytics-info-card__reliability__header__cercle"></div>
      <span class="analytics-info-card__reliability__header__title">Élevée</span>
    </div>
    <span class="analytics-info-card__reliability__label font-size--smaller">
      FIABILITÉ DES RÉSULTATS
      <i class="glyphicon glyphicon-info-sign"></i>
    </span>
  </div>
</div>

Analytics info card

<div class="analytics-info-card analytics-info-card--low-reliability">
  <div class="analytics-info-card__stats flex-1 align-items__center">
    <div class="analytics-info-card__stats__title">
      <img src="images/analytics-card/oval_circle.png" width="62" height="46">
      <span class="analytics-info-card__stats__title__label">
        PARTICIPATION
      </span>
    </div>
    <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
  </div>
  <div class="analytics-info-card__reliability">
    <div class="analytics-info-card__reliability__header">
      <div class="analytics-info-card__reliability__header__cercle"></div>
      <span class="analytics-info-card__reliability__header__title">Faible</span>
    </div>
    <span class="analytics-info-card__reliability__label font-size--smaller">
      FIABILITÉ DES RÉSULTATS
      <i class="glyphicon glyphicon-info-sign"></i>
    </span>
  </div>
</div>

Reliability of results low

PARTICIPATION

15% Taux de participation

FIABILITÉ DES RÉSULTATS

<div class="analytics-info-card analytics-info-card--low-reliability">
  <div class="analytics-info-card__stats flex-1 align-items__center">
    <div class="analytics-info-card__stats__title">
      <img src="images/analytics-card/oval_circle.png" width="62" height="46">
      <span class="analytics-info-card__stats__title__label">
        PARTICIPATION
      </span>
    </div>
    <div class="stats-item--xl">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
    <div class="stats-item">
    <span class="stats-item-value">15%</span>
    <span class="stats-item-label">Taux de participation</span>
</div>
  </div>
  <div class="analytics-info-card__reliability">
    <div class="analytics-info-card__reliability__header">
      <div class="analytics-info-card__reliability__header__cercle"></div>
      <span class="analytics-info-card__reliability__header__title">Faible</span>
    </div>
    <span class="analytics-info-card__reliability__label font-size--smaller">
      FIABILITÉ DES RÉSULTATS
      <i class="glyphicon glyphicon-info-sign"></i>
    </span>
  </div>
</div>

content

Content-block

<div class="content-block">
     <h4 class="title">
       <span class="icon">
         <img src="https://placeimg.com/30/30/any" />
       </span>
       title
     </h4>
     <p class="content">Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.

Do dolor dolore dolore duis duis ea. Eiusmod elit enim enim esse esse est et. Eu ex ex excepteur excepteur exercitation fugiat fugiat id. In incididunt incididunt ipsum irure irure labore labore laboris laborum.

Magna magna minim minim mollit nisi nisi non nostrud nostrud nulla. Occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint. Sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing. Aliquip aliquip amet amet anim. Aute cillum commodo commodo consectetur consectetur. Culpa culpa cupidatat deserunt deserunt do.</p>
   </div>

Content Block

title

<div class="content-block">
     <h4 class="title">
       <span class="icon">
         <img src="https://placeimg.com/30/30/any" />
       </span>
       title
     </h4>
     <p class="content">Aliqua aliquip aliquip amet amet. Aute aute cillum commodo commodo. Consectetur consequat culpa culpa cupidatat deserunt.

Do dolor dolore dolore duis duis ea. Eiusmod elit enim enim esse esse est et. Eu ex ex excepteur excepteur exercitation fugiat fugiat id. In incididunt incididunt ipsum irure irure labore labore laboris laborum.

Magna magna minim minim mollit nisi nisi non nostrud nostrud nulla. Occaecat officia officia pariatur pariatur proident qui qui quis reprehenderit reprehenderit sint sint. Sunt sunt tempor ullamco ullamco ut ut velit veniam veniam voluptate undefined adipisicing adipisicing. Aliquip aliquip amet amet anim. Aute cillum commodo commodo consectetur consectetur. Culpa culpa cupidatat deserunt deserunt do.</p>
   </div>

Element-ui

Element-UI example

<el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>

Element-ui button example

Button

Try Element

<el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>

Popover component

<el-popover
  popper-class="popover-component popover-component--options-general"
  placement="bottom"
  width="400"
  trigger="click"
>
  <div class="popover-component__body__content">
    <div class="popover-component__body__content__title">
      <span class="font-size--big">
        <strong>Adipisicing aliqua aliquip aliquip amet.</strong>
      </span>
    </div>
    <div class="popover-component__body__content__options">
      <div class="popover-component__body__content__options__general">
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
            <i class="glyphicon glyphicon-book"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
            Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
            <i class="glyphicon glyphicon-align-left"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
            Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-button slot="reference">Click to activate</el-button>
</el-popover>

Popover component options general

Click to activate

Popover component Modifiers

Modifier

Description

.popover-component--options-general

The component contains the list of general options

.popover-component--options-tailored

the component contains the list of tailored options

<el-popover
  popper-class="popover-component popover-component--options-general"
  placement="bottom"
  width="400"
  trigger="click"
>
  <div class="popover-component__body__content">
    <div class="popover-component__body__content__title">
      <span class="font-size--big">
        <strong>Adipisicing aliqua aliquip aliquip amet.</strong>
      </span>
    </div>
    <div class="popover-component__body__content__options">
      <div class="popover-component__body__content__options__general">
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
            <i class="glyphicon glyphicon-book"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
            Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
            <i class="glyphicon glyphicon-align-left"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
            Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-button slot="reference">Click to activate</el-button>
</el-popover>

Popover component

<el-popover
  popper-class="popover-component popover-component--options-tailored"
  placement="bottom"
  width="400"
  trigger="click"
>
  <div class="popover-component__body__content">
    <div class="popover-component__body__content__title">
      <span class="font-size--big">
        <strong>Adipisicing aliqua aliquip aliquip amet.</strong>
      </span>
    </div>
    <div class="popover-component__body__content__options">
      <div class="popover-component__body__content__options__tailored">
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon-previous">
            <i class="glyphicon glyphicon-arrow-left"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
          </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
            <i class="glyphicon glyphicon-heart"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
           Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
           <i class="glyphicon glyphicon-check"></i>
         </div>
         <div class="popover-component__body__content__options__option__label">
           <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
           Adipisicing aliqua aliquip aliquip amet.
         </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
           <i class="glyphicon glyphicon-tasks"></i>
         </div>
         <div class="popover-component__body__content__options__option__label">
           <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
           Adipisicing aliqua aliquip aliquip amet.
         </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
           <i class="glyphicon glyphicon-star"></i>
         </div>
         <div class="popover-component__body__content__options__option__label">
           <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
           Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
            <i class="glyphicon glyphicon-pencil"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
            Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-button slot="reference">Click to activate</el-button>
</el-popover>

Popover component options tailored

Click to activate

<el-popover
  popper-class="popover-component popover-component--options-tailored"
  placement="bottom"
  width="400"
  trigger="click"
>
  <div class="popover-component__body__content">
    <div class="popover-component__body__content__title">
      <span class="font-size--big">
        <strong>Adipisicing aliqua aliquip aliquip amet.</strong>
      </span>
    </div>
    <div class="popover-component__body__content__options">
      <div class="popover-component__body__content__options__tailored">
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon-previous">
            <i class="glyphicon glyphicon-arrow-left"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
          </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
            <i class="glyphicon glyphicon-heart"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
           Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
           <i class="glyphicon glyphicon-check"></i>
         </div>
         <div class="popover-component__body__content__options__option__label">
           <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
           Adipisicing aliqua aliquip aliquip amet.
         </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
           <i class="glyphicon glyphicon-tasks"></i>
         </div>
         <div class="popover-component__body__content__options__option__label">
           <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
           Adipisicing aliqua aliquip aliquip amet.
         </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
           <i class="glyphicon glyphicon-star"></i>
         </div>
         <div class="popover-component__body__content__options__option__label">
           <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
           Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
        <div class="popover-component__body__content__options__option">
          <div class="popover-component__body__content__options__option__icon">
            <i class="glyphicon glyphicon-pencil"></i>
          </div>
          <div class="popover-component__body__content__options__option__label">
            <strong>Adipisicing aliqua aliquip aliquip amet.</strong><br/>
            Adipisicing aliqua aliquip aliquip amet.
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-button slot="reference">Click to activate</el-button>
</el-popover>

Standalone Component

Empty panel

<div class="empty-panel">
 <div class="empty-panel-background">&nbsp;
  <div class="empty-panel_content">
   <div class="empty-panel_title"><strong>Lorem ipsum</strong></div>
   <div class="empty-panel_body">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br> when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
   <div class="empty-panel_footer">
    <a type="button" href="" class="btn btn__primary">lorem ipsum</a>
   </div>
  </div>
 </div>
</div>

Lorem ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.

lorem ipsum

<div class="empty-panel">
 <div class="empty-panel-background">&nbsp;
  <div class="empty-panel_content">
   <div class="empty-panel_title"><strong>Lorem ipsum</strong></div>
   <div class="empty-panel_body">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br> when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
   <div class="empty-panel_footer">
    <a type="button" href="" class="btn btn__primary">lorem ipsum</a>
   </div>
  </div>
 </div>
</div>

Saving bar

<div class="saving-bar">
  <div class="saving-bar__contents">
    <button class="saving-bar__contents__btn btn btn__primary">adipisicing adipisicing aliqua</button>
    <span class="saving-bar__contents__label">adipisicing adipisicing aliqua</span>
  </div>
</div>

Saving bar

adipisicing adipisicing aliqua

<div class="saving-bar">
  <div class="saving-bar__contents">
    <button class="saving-bar__contents__btn btn btn__primary">adipisicing adipisicing aliqua</button>
    <span class="saving-bar__contents__label">adipisicing adipisicing aliqua</span>
  </div>
</div>

Titles

Page Title

<header class="page-title">
  <h2 class="main-title">
    Analyse de 4 enquêtes
  </h2>
  <small class="sub-title">
      dans les campagnes:
      Campagne - Decathlon Exchange , Campagne - Search
      ( Du 01/10/2018 au 31/12/2019 )
  </small>
</header>

Analyse de 4 enquêtes

dans les campagnes: Campagne - Decathlon Exchange , Campagne - Search ( Du 01/10/2018 au 31/12/2019 )

<header class="page-title">
  <h2 class="main-title">
    Analyse de 4 enquêtes
  </h2>
  <small class="sub-title">
      dans les campagnes:
      Campagne - Decathlon Exchange , Campagne - Search
      ( Du 01/10/2018 au 31/12/2019 )
  </small>
</header>

Section Title

<h2 class="section-title">This is a section title</h2>

This is a section title

<h2 class="section-title">This is a section title</h2>