Stats Panel
Quatre statistiques à icône colorée qui se rangent selon la place réelle du panneau : une colonne, puis deux colonnes où les tendances (+12 %, −3 %) se montrent.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le panneau est son propre point de mesure : .fx-0750-root porte container: stp / inline-size et occupe la largeur que son parent lui laisse. Rien ne dépend de la taille de l'écran, seulement de celle de la case où vous posez le code.
Trois états. Sous 260 px : une ligne par statistique (icône, valeur, libellé), tendance masquée pour garder la valeur lisible. De 260 à 339 px : deux colonnes, l'icône se réduit à 30 px et la tendance s'affiche sous le libellé. Dès 340 px : l'icône revient à 36 px et la tendance se cale à droite de la ligne.
Pas de script : display et grid-template-columns changent d'un palier à l'autre. Couleur de tendance par classe : .stp-trend--up en vert #10b981, .stp-trend--down en rouge #ef4444.
Accessibilité
- Ordre de lecture : valeur, libellé puis tendance, dans l'ordre du HTML ; les icônes SVG sont masquées (
aria-hidden="true") car elles doublent le libellé. - Tendance en texte : le signe « + » ou « − » est écrit, la couleur n'est qu'un renfort. Sous 260 px la tendance est en
display:none: elle n'est alors lue par personne, prévoyez la donnée ailleurs si elle compte. - Contraste : libellés en blanc à 55 % sur
#0a0a0f; le rouge#ef4444en petite taille est le point le plus faible, foncez-le si votre fond est plus clair. - Interaction : aucune ; rien à atteindre au clavier, rien qui réagisse au survol. Au doigt comme à la souris, seule la largeur décide.
Compatibilité navigateur
@container et grille CSS uniquement (requêtes de conteneur : Chrome 105, Firefox 110, Safari 16 selon @mdn/browser-compat-data 8.1.8). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : une colonne à 200 px, deux colonnes avec tendance sous le libellé à 260 et 300 px, tendance à droite à 340 et 600 px ; libellés entiers à chaque palier, page de 390 px sans défilement horizontal.
Sans prise en charge des requêtes de conteneur, le panneau reste sur une colonne et les tendances restent cachées : valeurs et libellés s'affichent normalement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0750-root">
<div class="stp-grid">
<div class="stp-item">
<div class="stp-icon stp-icon--purple"><svg viewBox="0 0 24 24" aria-hidden="true">…</svg></div>
<div class="stp-text"><span class="stp-val">…</span><span class="stp-label">…</span></div>
<span class="stp-trend stp-trend--up">…</span>
</div>
<!-- ×4 : --purple, --pink, --cyan, --green ; tendance --up ou --down -->
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Paliers (CSS — @container stp (min-width: 260px) et (min-width: 340px)) |
260 px : deux colonnes + tendances ; 340 px : tendance à droite | Avec des libellés longs (« Durée moyenne de session »), montez le second palier à 400 px pour garder la tendance sous le libellé plus longtemps. |
Couleur des icônes (CSS — .stp-icon--purple, --pink, --cyan, --green) |
Fonds teintés à 20 % d'opacité | Ajoutez une classe .stp-icon--orange sur le même modèle, ou changez la teinte des quatre existantes. |
Icônes (HTML — le <svg> de chaque .stp-icon) |
Personne, cœur, horloge, dollar (traits de 1,5) | Collez n'importe quelle icône en traits sur une grille 24×24 : la couleur du trait vient du CSS (stroke: #fff). |
Sens de la tendance (HTML — .stp-trend--up / .stp-trend--down) |
Vert pour la hausse, rouge pour la baisse | Choisissez la classe selon ce qui est bon pour vous : une baisse du délai de livraison peut prendre --up pour s'afficher en vert. |
Nombre de statistiques (HTML — blocs .stp-item) |
4 | Ajoutez ou retirez des blocs : la grille de deux colonnes crée les rangées nécessaires toute seule. |
Fond et espacement (CSS — .fx-0750-root, .stp-grid { padding }) |
#0a0a0f, marge intérieure 12 px, coins de 16 px |
Passez le fond à transparent pour poser les cartes directement sur votre page sombre. |
FAQ
display: none sur .stp-trend et laissez la règle du palier les placer.inline-size), son contenu n'impose aucune largeur minimale : la case rétrécit même sans min-width: 0..stp-val et .stp-trend depuis votre serveur ou votre script ; la mise en page suit sans rien recalculer.
