Esta semana
HTML + CSSKarten
Bento-Karte für Kennzahlen
Eine kompakte Kennzahl-Karte mit großer Zahl und einer Reihe Balken, die beim Hovern nacheinander wachsen.
Einstellungen
16px
1x
Code
<article class="uv-cbento"><header><span>↗</span><div><small>Diese Woche</small><h3>Leistung</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>ggü. Vorwoche</span></footer></article>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Wofür du ihn nutzen kannst
Gemacht für Dashboards im Bento-Stil, in denen jede Kachel genau eine Geschichte erzählt: die Wochen-Conversion im Analytics-Panel eines Shops, die Verfügbarkeit auf einer Statusseite oder die Abschlussquote eines Onlinekurses. Die KPI-Karte zeigt den Wert, ein kleines Balkendiagramm und die Veränderung zur Vorwoche. Beim Hovern wachen die Balken wellenartig auf.
Die Balken sind Deko und keine echten Daten. Verbinde sie vor dem Livegang mit deinen Zahlen oder lass sie weg. Grün nur für gute Nachrichten: Ist die Veränderung negativ, stell auf Rot um, sonst liest jeder einen Rückgang als Fortschritt.