Esta semana
HTML + CSSCards
Bento metric card
A compact stat card: one big number and a row of bars that rise one by one on hover.
Settings
16px
1x
Code
<article class="uv-cbento"><header><span>↗</span><div><small>This week</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. last week</span></footer></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
Made for bento-style dashboards where each tile tells one story: weekly conversion in a store's analytics panel, uptime on a status page, completion rate in an online course. The KPI card shows the figure, a mini bar chart and the change against last week. On hover, the bars wake up in a small wave.
The bars are decorative, not real data, so wire them to your own numbers before going live or remove them. Keep the green for good news only; if the change is negative, switch it to red, or people will read every drop as progress.