NV

Nova Energía

NOVA en la Bolsa de Madrid

48,32 €+2,41 %

48,32 €
HTML + CSSCards

Acción con gráfico vivo

Una tarjeta de cotización con línea que se dibuja, pestañas de periodo y una cruceta que sigue al puntero.

Ajustes

16px
1x

Código

<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>

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

Ver todos: Cards

Dónde usarlo

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.