Preview
Les cards sont des rectangles blancs à bords ronds dans lesquels on peut afficher des images et qu'il est possible de désactiver, les rendant grisés.
Plusieures tailles prédéfinies et exemples sont à votre disposition.
Ces cartes peuvent être disposées dans une grille possédant l'attribut o-cardgrid.
Taille de la grille sur :
Les entêtes des cards sont maintenant collorées de la couleur du theme (DataSprint, Minesprint) par défaut, pour appliquer un theme différent il faut ajouter les class ci-dessous au composant entier ou simplement sur le titre de celle-ci (ex : c-card__header) :
Des cartes --double sont disponibles, elles prennent deux cartes de largeur dans les o-cardgrid.
Pour les cartes contenant un tableau il faudra utliser en plus la class o-card--table.
Pour les cartes projet, pour rendre les icons cliquable, il faudra ajouter le lien du projet et de l'onglet choisi dans la balise a entourant la balise i
Attention à ne pas les placer au milieu sur ordinateur, sinon sous tablette certaines cartes simples n'auront pas de voisine ce qui créerai des trous.
.js requis :
<div class="o-card">Cette carte s'adaptera à son contenu</div>
<div class="o-card--tool"><i class="c-fonticon__logo-datasprint u-huge"></i>
<div class="u-title--small">DataSprint</div>
</div>
<div class="o-card--launcher"></div>
<div class="o-card--launcher u-bubble datasprint">
<div class="o-card--tool--light u-rowOnMobile"><i class="c-fonticon__logo-datasprint u-huge"></i>
<div class="u-title--adapt u-text-center">DataSprint</div>
</div>
<div class="u-text u-paragraph--over-mobile u-text-center--over-mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</div>
</div>
<div class="o-card--very-small"></div>
<div class="o-card--small"></div>
<div class="o-card--medium"></div>
<div class="o-card--large"></div>
<div class="o-card--big"></div>
<div class="o-card--help"></div>
<div class="o-card--help">
<div class="u-darkBlue"></div>
<div class="u-column">
<div class="u-title--small">Comment réaliser un controle de compactage</div>
<div class="u-text u-paragraph--over-mobile u-vBubble">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</div><a class="u-link">Lire la suite</a>
</div>
</div>
<div class="o-card--very-small disabled"></div>
<div class="o-card--small">
<div class="c-card__header">
<div class="u-title">Titre</div><i class="c-fonticon__icon-trash"></i>
</div>
<div class="c-card__content">Début content
<div class="c-card__article">
<div class="u-title--small">Titre de l'article</div>
<div class="u-text">Lorem Ipsum doloris matae colunico pafisol difuan doloris matae colunico pafisol difuandoloris matae colunico pafisol difuandoloris matae colunico pafisol difuandoloris matae colunico pafisol difuan</div>
</div>Fin content
</div>
</div>
<div class="o-card">
<div class="c-card__row">
<div>Première</div>
<div>ligne</div>
</div>
<div class="c-card__row">
<div>Deuxième</div>
<div>ligne</div>
</div>
<div class="c-card__row">
<div>Troisième</div>
<div>ligne</div>
</div>
</div>
<div class="c-card__row__description">
<div class="u-title--small">Lorem ipsum titre du projet</div>
<div class="u-subtitle u-flex">04/07/2019 |<i class="c-fonticon__icon-user"></i>b.leroy | 1.2To</div>
</div>
<div class="o-iconlist"><a href="#"><i class="c-fonticon__project-sondage"></i></a><a href="#"><i class="c-fonticon__project-infos"></i></a><a href="#"><i class="c-fonticon__project-data"></i></a><a href="#"><i class="c-fonticon__project-annexe"></i></a><a href="#"><i class="c-fonticon__project-picture disabled"></i></a><a href="#"><i class="c-fonticon__project-plan disabled"></i></a><a href="#"><i class="c-fonticon__project-rapports disabled"></i></a><a href="#"><i class="c-fonticon__project-divers"></i></a>
</div>
Pour que les cartes soient clickable sur l'ensemble de celle-ci, il y a une modification à faire, il faut que le lien soit maintenant renseignée sur la méthode onclick="location.href='lien'" au niveau de la div class="c-card__row__description"
<div class="o-card u-vBubble">
<div class="c-card__row">
<div class="c-card__row__description" onClick="location.href='#'">
<div class="u-title--small">Lorem ipsum titre du projet</div>
<div class="u-subtitle u-flex">04/07/2019 |<i class="c-fonticon__icon-user"></i>b.leroy | 1.2To</div>
<div class="o-iconlist"><a href="#"><i class="c-fonticon__project-sondage"></i></a><a href="#"><i class="c-fonticon__project-infos"></i></a><a href="#"><i class="c-fonticon__project-data"></i></a><a href="#"><i class="c-fonticon__project-annexe disabled"></i></a><a href="#"><i class="c-fonticon__project-picture"></i></a><a href="#"><i class="c-fonticon__project-plan"></i></a><a href="#"><i class="c-fonticon__project-rapports disabled"></i></a><a href="#"><i class="c-fonticon__project-divers"></i></a>
</div>
</div>
<div class="c-card__row__more u-showOnTablet"><i class="c-fonticon__icon-mobmore"></i></div>
<div class="c-card__row__more u-hideOnTablet">
<div class="o-dataviewer">
<div class="c-data">19</div>
<div class="c-desc">sondages</div>
</div>
<div class="o-dataviewer">
<div class="c-data">13</div>
<div class="c-desc">sites</div>
</div>
<div class="u-center u-framed">
<button class="o-btn o-btn--icon"><i class="c-fonticon__icon-trash"></i></button>
</div>
</div>
</div>
</div>
<div class="o-card project u-vBubble">
<div class="c-card__row">
<div class="c-card__row__description" onClick="location.href='#'">
<div class="u-title--small">Lorem ipsum titre du projet</div>
<div class="u-subtitle u-flex">04/07/2019 |<i class="c-fonticon__icon-user"></i>b.leroy | 1.2To</div>
<div class="o-iconlist"><a href="#"><i class="c-fonticon__project-sondage"></i></a><a href="#"><i class="c-fonticon__project-infos"></i></a><a href="#"><i class="c-fonticon__project-data disabled"></i></a><a href="#"><i class="c-fonticon__project-annexe"></i></a><a href="#"><i class="c-fonticon__project-picture"></i></a><a href="#"><i class="c-fonticon__project-plan"></i></a><a href="#"><i class="c-fonticon__project-rapports"></i></a><a href="#"><i class="c-fonticon__project-divers"></i></a>
</div>
</div>
<div class="c-card__row__more u-showOnTablet"><i class="c-fonticon__icon-mobmore"></i></div>
<div class="c-card__row__more u-hideOnTablet">
<div class="o-dataviewer">
<div class="c-data">19</div>
<div class="c-desc">sondages</div>
</div>
<div class="o-dataviewer">
<div class="c-data">13</div>
<div class="c-desc">sites</div>
</div>
<div class="u-center u-framed">
<button class="o-btn o-btn--icon"><i class="c-fonticon__icon-trash"></i></button>
</div>
</div>
</div>
</div>
<div class="o-card project u-vBubble">
<div class="c-card__header js-dropdown-trigger">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-title--small js-tooltip">Projet : MICHELIN LADOUX - Contrôle réseau assainissement <span class="tooltipButton">i</span>
<div class="tooltipContent">Tooltip dans un titre</div>
</div>
</div>
<div class="o-btn"><i class="c-fonticon__icon-plus"></i><span>Créer une nouvelle étude</span></div>
</div>
<div class="u-column js-dropdown-content">
<div class="c-card__row">
<div class="c-card__row__description"><a class="u-title--small" href="/app/minesprint--remblai.html">Lorem ipsum titre du projet</a>
<div class="u-subtitle">Contrôle de compactage (NF P 94-105)</div>
</div>
<div class="c-card__row__more u-showOnTablet"><i class="c-fonticon__icon-mobmore"></i></div>
<div class="c-card__row__more u-hideOnTablet">
<div class="o-dataviewer">
<div class="c-data">99</div>
<div class="c-desc">Sondages liés</div>
</div>
<div class="o-dataviewer">
<div class="c-data">10</div>
<div class="c-desc">Rapports générés</div>
</div>
<div class="u-center u-framed">
<div class="o-iconlist u-title"><a><i class="c-fonticon__icon-eye"></i></a></div>
</div>
</div>
</div>
<div class="c-card__row">
<div class="c-card__row__description"><a class="u-title--small" href="/app/minesprint--remblai.html">Lorem ipsum titre du projet</a>
<div class="u-subtitle">Contrôle de compactage (NF P 94-105)</div>
</div>
<div class="c-card__row__more u-showOnTablet"><i class="c-fonticon__icon-mobmore"></i></div>
<div class="c-card__row__more u-hideOnTablet">
<div class="o-dataviewer">
<div class="c-data">99</div>
<div class="c-desc">Sondages liés</div>
</div>
<div class="o-dataviewer">
<div class="c-data">10</div>
<div class="c-desc">Rapports générés</div>
</div>
<div class="u-center u-framed">
<div class="o-iconlist u-title"><a><i class="c-fonticon__icon-eye"></i></a></div>
</div>
</div>
</div>
<div class="c-card__row">
<div class="c-card__row__description"><a class="u-title--small" href="/app/minesprint--remblai.html">Lorem ipsum titre du projet</a>
<div class="u-subtitle">Contrôle de compactage (NF P 94-105)</div>
</div>
<div class="c-card__row__more u-showOnTablet"><i class="c-fonticon__icon-mobmore"></i></div>
<div class="c-card__row__more u-hideOnTablet">
<div class="o-dataviewer">
<div class="c-data">1</div>
<div class="c-desc">Sondage lié</div>
</div>
<div class="o-dataviewer">
<div class="c-data">1</div>
<div class="c-desc">Rapport généré</div>
</div>
<div class="u-center u-framed">
<div class="o-iconlist u-title"><a><i class="c-fonticon__icon-info"></i></a><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="o-cardgrid">
<div class="o-card--small">a</div>
<div class="o-card--small">b</div>
<div class="o-card--small o-card--double">c</div>
<div class="o-card--small o-card--double">d</div>
<div class="o-card--small">e</div>
<div class="o-card--small">f</div>
</div>
<div class="o-card--big u-split">
<div>
<div class="c-card__header">
<div class="u-title--small">Sondages</div><a class="o-btn o-btn--icon js-popin fileUploader" href="popins/addProbing.html"><i class="c-fonticon__icon-plus"></i></a>
</div>
<div class="c-card__content">
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">2466 ST FLOUR 29-03-2017</div>
<div class="u-subtitle">2 sondages</div>
</div>
</div>
<div class="o-iconlist"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
</div>
<div class="c-dropdown-toggle__content">
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin disabled"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
</div>
</div>
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">2466 ST FLOUR 29-03-2017</div>
<div class="u-subtitle">2 sondages</div>
</div>
</div>
<div class="o-iconlist"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
</div>
<div class="c-dropdown-toggle__content">
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin disabled"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="u-center u-darkBlue u-white-text u-hideOnTablet">MAP</div>
</div>
<div class="o-card"><img src="https://i.ytimg.com/vi/dPYhqhk16YE/maxresdefault.jpg"/></div>