Nova Energía
NOVA en la Bolsa de Madrid48,32 €+2,41 %
48,32 €+2,41 %
Una tarjeta de cotización con línea que se dibuja, pestañas de periodo y una cruceta que sigue al puntero.
<article class="uv-kst"><header><span class="lg">NV</span><div><h3>Nova Energía</h3><span class="tk">NOVA en la Bolsa de Madrid</span></div></header><p class="pr"><b>48,32 €</b><span class="ch">+2,41 %</span></p><div class="gr"><svg viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true"><defs><linearGradient id="uv-kst-g" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="currentColor" stop-opacity=".28"/><stop offset="1" stop-color="currentColor" stop-opacity="0"/></linearGradient></defs><polygon class="ar" points="0,40 0.0,36.0 3.7,31.9 7.4,33.2 11.1,35.2 14.8,32.7 18.5,31.9 22.2,32.9 25.9,30.2 29.6,27.5 33.3,26.6 37.0,24.5 40.7,22.8 44.4,19.6 48.1,21.3 51.9,21.9 55.6,19.6 59.3,17.4 63.0,20.7 66.7,18.6 70.4,18.4 74.1,14.2 77.8,11.1 81.5,13.8 85.2,13.2 88.9,9.1 92.6,6.9 96.3,5.2 100.0,4.0 100,40"/><polyline class="ln" pathLength="1" points="0.0,36.0 3.7,31.9 7.4,33.2 11.1,35.2 14.8,32.7 18.5,31.9 22.2,32.9 25.9,30.2 29.6,27.5 33.3,26.6 37.0,24.5 40.7,22.8 44.4,19.6 48.1,21.3 51.9,21.9 55.6,19.6 59.3,17.4 63.0,20.7 66.7,18.6 70.4,18.4 74.1,14.2 77.8,11.1 81.5,13.8 85.2,13.2 88.9,9.1 92.6,6.9 96.3,5.2 100.0,4.0"/><line class="cx" x1="0" x2="0" y1="0" y2="40"/></svg><span class="tp">48,32 €</span></div><div class="pe" role="radiogroup" aria-label="Periodo"><label><input type="radio" name="uv-kst" value="0" checked><span>1D</span></label><label><input type="radio" name="uv-kst" value="1"><span>1S</span></label><label><input type="radio" name="uv-kst" value="2"><span>1M</span></label></div></article>Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Los paneles financieros y las apps de inversión necesitan tarjetas compactas que muestren precio, variación y tendencia de un vistazo. Esta tarjeta dibuja su gráfico al cargar con un degradado suave debajo, cambia entre datos de día, semana y mes con pequeñas pestañas y muestra una cruceta discontinua con el precio en ese punto al mover el puntero.
El gráfico es un SVG adaptable con trazos que no se deforman, así que se ve nítido a cualquier ancho. Cambia las series de ejemplo por tus puntos y usa verde o rojo según la variación.