Esta semana
HTML + CSSCartes
Carte bento de statistiques
Une carte compacte avec un grand chiffre et une rangée de barres qui montent l'une après l'autre au survol.
Réglages
16px
1x
Code
<article class="uv-cbento"><header><span>↗</span><div><small>Cette semaine</small><h3>Performance</h3></div></header><strong>84<sup>%</sup></strong><div class="bars"><i style="--h:30%;--i:0"></i><i style="--h:47%;--i:1"></i><i style="--h:64%;--i:2"></i><i style="--h:81%;--i:3"></i><i style="--h:33%;--i:4"></i><i style="--h:50%;--i:5"></i><i style="--h:67%;--i:6"></i><i style="--h:84%;--i:7"></i><i style="--h:36%;--i:8"></i><i style="--h:53%;--i:9"></i><i style="--h:70%;--i:10"></i><i style="--h:87%;--i:11"></i></div><footer><b>+12.4%</b><span>vs semaine dernière</span></footer></article>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cartes
Où l’utiliser
Conçue pour les tableaux de bord façon bento, où chaque tuile raconte une seule chose : la conversion hebdomadaire dans le panneau d'analyse d'une boutique, la disponibilité sur une page de statut ou le taux de réussite d'une formation en ligne. Cette carte KPI affiche le chiffre, un mini graphique en barres et l'évolution par rapport à la semaine précédente.
Les barres sont décoratives, pas de vraies données : branchez-les sur vos chiffres ou retirez-les avant la mise en ligne. Réservez le vert aux bonnes nouvelles ; si l'évolution est négative, passez au rouge, sinon chaque baisse ressemblera à un progrès.