Molecules
Table of content
What are Molecules?
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
</> Show Example
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
</> Show Example
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
</> Show Example
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
</> Show Example
Big analytics info card
Action
PARTICIPATION
15% Taux de participation
15% Taux de participation
15% Taux de participation
15% Taux de participation
15% Taux de participation
Précision
FIABILITÉ DES RÉSULTATS
Suivi
suivi
Ressource
Ressource
Expert
Expert
Action
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
</> Show Example
Reliability of results high
Action
PARTICIPATION
15% Taux de participation
15% Taux de participation
15% Taux de participation
15% Taux de participation
15% Taux de participation
Élevée
FIABILITÉ DES RÉSULTATS
Suivi
suivi
Ressource
Ressource
Expert
Expert
Action
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
</> Show Example
Reliability of results low
Action
PARTICIPATION
15% Taux de participation
15% Taux de participation
15% Taux de participation
15% Taux de participation
15% Taux de participation
Faible
FIABILITÉ DES RÉSULTATS
Suivi
suivi
Ressource
Ressource
Expert
Expert
Action
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
</> Show Example
Card info

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
</> Show Example
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
</> Show Example
Analytics card
Question socle Question ciblée Produit Base de répondants : 10 (sur 19 invités)
Theme Adipisicing aliqua aliquip aliquip amet.
Adipisicing aliqua aliquip aliquip amet.

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

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
</> Show Example
Analytics card
Question socle Question ciblée Produit Base de répondants : 10 (sur 19 invités)
Theme Adipisicing aliqua aliquip aliquip amet.
Adipisicing aliqua aliquip aliquip amet.

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

<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
</> Show Example
Sensitive Expressions Card
Adipisicing aliqua aliquip aliquip amet.  
Adipisicing aliqua aliquip aliquip amet.
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
</> Show Example
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
</> Show Example
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
</> Show Example
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
</> Show Example
Survey editor 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.

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
</> Show Example
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
</> Show Example
Disabled 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.
<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
</> Show Example
Disabled adding 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.
<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
</> Show Example
Disabled remove 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.
<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
</> Show Example
Survey editor card select text
Adipisicing aliqua aliquip aliquip amet.
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
</> Show Example
Survey editor card select image
Adipisicing aliqua aliquip aliquip amet.
Adipisicing aliqua aliquip aliquip amet.
    <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
    </> Show Example
    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
    </> Show Example
    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
    </> Show Example
    Dependant 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.
    <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
    </> Show Example
    Move disable 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.
    <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
    </> Show Example
    Survey editor card with header
    Question
    Essentielle
    KPI
    Supprimer
    Adipisicing aliqua aliquip aliquip amet.
    Comment as-tu connu... ?
    <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
    </> Show Example
    Survey editor card active
    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.
    <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
    </> Show Example
    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
    </> Show Example
    Big card
    adipisicing adipisicing aliqua
    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
    </> Show Example
    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
    </> Show Example
    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
    </> Show Example
    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
    </> Show Example

    adipisicing adipisicing aliqua adipisicing adipisicing

    <h2 class="hero-title">adipisicing adipisicing aliqua <strong>adipisicing adipisicing</strong></h2>
    Indicators card
    </> Show Example
    Indicators card
    <div class="indicators-card"> <div class="indicator-card__content"> </div> </div>
    Language to translate to
    </> Show Example
    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
    </> Show Example
    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
    </> Show Example
    Line with pointer
    <div class="line-with-arrow"> </div>
    loader
    </> Show Example
    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
    </> Show Example
    Modal

    Title

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

    <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
    </> Show Example

    <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
    </> Show Example
    Illustration

    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
    </> Show Example
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    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
    </> Show Example
    <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
    </> Show Example

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

    ="">adipisicing adipisicing aliqua aliquip aliquip amet amet anim aute aute cillum commodo commodo consectetur consectetur

    1. adipisicing adipisicing aliqua aliquip aliquip
    2. adipisicing adipisicing aliqua aliquip aliquip
    3. 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
    </> Show Example
    Logo Bloomin

    Questionnaire Cryotar

    Traduction d'une enquête

    Contacter le manager

    Traduction en allemand (Allemagne)

    <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>
    Tags
    </> Show Example
    Tags
    Test
    Test ae aze
    Testf azre azer az
    Test2
    Test rrr
    Test jeaea ze
    Test c'est oui
    Test ttttt
    Test
    Test ae aze
    Test2
    Test rrr
    Test jeaea ze
    Test c'est oui
    Test ttttt
    <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> <div class="flex-container flex-wrap"> <div class="rounded-tag"> Test </div> <div class="rounded-tag"> Test ae aze </div> <div class="rounded-tag"> Test2 </div> <div class="rounded-tag"> Test rrr </div> <div class="rounded-tag"> Test jeaea ze </div> <div class="rounded-tag"> Test c'est oui </div> <div class="rounded-tag"> Test ttttt </div> </div>
    header 360
    </> Show Example

    adipisicing

    adipisicing adipisicing adipisicing adipisicing adipisicing aliqua aliquip
    <div class="threesixty-header"> <div class="header"> <div class="header-label"> <div class="flex-container flex-1 justify-content__flex-start"> <div class="header-img"> <img class="hand-big" src="https://placeimg.com/33/33/any" width="33" height="33"> </div> <h2 class="header-text-hello">adipisicing</h2> </div> <div class="flex-container flex-2 justify-content__flex-end"> <a class="btn btn-lg btn__white border__primary border-1 font-size--big text__primary hover__primary--100 text__hover-primary text--bold"> adipisicing </a> <a class="header-link btn btn-lg btn__primary font-size--big">adipisicing adipisicing</a> <a class="header-link btn btn-lg btn__primary font-size--big">adipisicing adipisicing aliqua aliquip</a> </div> </div> </div> </div>
    summary 360
    </> Show Example
    content summary here
    <div class="threesixty-summary"> content summary here </div>
    upload card
    </> Show Example
    Importer une liste d'email
    Fichiers jpg/png avec une taille inférieure à 500kb
    <div class="upload-card"> <div class="upload-card__content"> <a class="btn btn__primary"> Importer une liste d'email </a> <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div> </div> </div>
    Boxes
    Box card
    </> Show Example
    Box card
    box card title
    box card text
    <div class="box-card"> <div class="box-card__title"> box card title </div> <div class="box-card__text"> box card text </div> </div>
    Cta box
    </> Show Example
    Cta box
    illustration

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

    adipisicing adipisicing aliqua
    <div class="cta-box bg__bg"> <div class="cta-box__img-box"> <img src="https://placeimg.com/100/100/any" alt="illustration"> </div> <div class="cta-box__text"> <div class="cta-box__description"> <p> <strong class="text__primary">Bloomin KPI Builder</strong> Adipisicing aliqua aliquip aliquip amet. Anim aute aute cillum commodo. Consectetur consectetur consequat culpa culpa cupidatat. </p> <a href="#" class="btn btn__primary cta-box__button">adipisicing adipisicing aliqua</a> </div> </div> </div>
    Item Administration box card
    </> Show Example
    Item Administration card
    adipisicing
    Modifier
    Associé à 43 questions
    <div class="item-administration-card"> <div class="flex-container justify-content__space-between align-items__center"> <div class="item-administration-card-container-left flex-container align-items__center"> <div class="item-administration text__bg p-5 bg__danger--300"> <i class="glyphicon glyphicon-user"></i> <span class="m-left-5"><strong>adipisicing</strong></span> </div> <span class="m-left-15 item-administration-update">Modifier</span> </div> <div class="item-administration-card-container-right"> <span class="font-size--small text__secondary--text">Associé à 43 questions</span> </div> </div> </div>
    Thematic box card with input
    </> Show Example
    Item Administration card with input
    Supprimer Annuler Confirmer
    item Administration déjè existante : Feedback Collaborateur
    <div class="item-administration-card item-administration-card-creation shadow__primary"> <div class="flex-container justify-content__space-between align-items__center"> <div class="item-administration-card-creation__container-left flex-container"> <div class="item-administration-icon-dropdown"> <el-dropdown> <el-button> <i class="glyphicon glyphicon-user"></i> <i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>adipisicing</el-dropdown-item> <el-dropdown-item>adipisicing</el-dropdown-item> <el-dropdown-item>adipisicing</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> <div class="item-administration-name-input m-left-5"> <el-input placeholder="adipisicing adipisicing aliqua aliquip" v-model="input"></el-input> </div> <div class="item-administration-colorpicker m-left-5"> <el-color-picker v-model="color1"></el-color-picker> </div> </div> <div class="item-administration-card-creation__container-right"> <a class="btn btn__white border__danger--300 border-1 text__danger--300 hover__danger--200 text__hover-danger--300 text--bold"> Supprimer </a> <a class="btn btn__white m-left-5"> Annuler </a> <a class="btn btn__primary m-left-5"> Confirmer </a> </div </div> </div> <div> <span class="m-left-90 text__danger--300 font-size--small"><i>item Administration déjè existante : Feedback Collaborateur</i></span> </div> </div>
    Breadcrumb
    Breadcrumb
    </> Show Example
    Breadcrumb
    <div class="breadcrumb"> <div class="breadcrumb-body"> <el-menu :default-active="1" mode="horizontal"> <el-menu-item index="1" :key="1" class="breadcrumb-custom-menu__item"> Et un </el-menu-item> <el-menu-item index="2" :key="2" class="breadcrumb-custom-menu__item"> Et deux </el-menu-item> <el-menu-item index="3" :key="3" class="breadcrumb-custom-menu__item"> Et trois zéro </el-menu-item> </el-menu> </div> </div>
    Card
    Analytics info card
    </> Show Example
    Analytics info card
    PARTICIPATION
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    Précision
    FIABILITÉ DES RÉSULTATS

    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
    </> Show Example
    Reliability of results high
    PARTICIPATION
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    Élevée
    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
    </> Show Example
    Reliability of results low
    PARTICIPATION
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    15% Taux de participation
    Faible
    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
    </> Show Example
    Content Block

    title

    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="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
    </> Show Example
    Element-ui button example
    <el-button @click="visible = true">Button</el-button> <el-dialog :visible.sync="visible" title="Hello world"> <p>Try Element</p> </el-dialog>
    Popover component
    </> Show Example
    Popover component options general

    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
    </> Show Example
    Popover component options tailored
    <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
    </> Show Example
     
    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
    </> Show Example
    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
    </> Show Example

    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
    </> Show Example

    This is a section title

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