Esta semana
HTML + CSSCards
Card bento de métricas
Una tarjeta compacta con una cifra grande y una fila de barras que suben una tras otra al pasar el ratón.
Ajustes
16px
1x
Código
<article class="uv-cbento"><header><span>↗</span><div><small>Esta semana</small><h3>Rendimiento</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>frente a la anterior</span></footer></article>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Dónde usarlo
Pensada para paneles tipo bento, donde cada bloque cuenta una sola cosa: la conversión semanal en el panel de analítica de una tienda, el uptime de una página de estado o los alumnos que terminan un curso online. En la tarjeta de KPI caben la cifra, un mini gráfico de barras y la variación frente a la semana anterior.
Las barras son decorativas, no datos reales: conéctalas a tus números o quítalas antes de publicar. Guarda el verde para las buenas noticias; si la variación es negativa, pásala a rojo o cualquier bajada parecerá un avance.