Lo que dicen
Nos ahorró dos semanas de maquetación en el primer sprint.
Copiar, pegar y ajustar el color. Así de sencillo.
Los clientes notan el cuidado en cada animación.
HTML + CSSCards
Testimonios en carrusel
Tres opiniones que se turnan solas con barras de progreso y se pausan al pasar el ratón o enfocar.
Ajustes
16px
1x
Código
<section class="uv-ktc" aria-roledescription="carrusel" aria-label="Lo que dicen"><p class="ti">Lo que dicen</p><svg class="qm" viewBox="0 0 40 32" aria-hidden="true"><path d="M0 32V19C0 8 6 1.5 16 0l1.6 4C12 6 9.4 10 9.2 14H17v18zm23 0V19C23 8 29 1.5 39 0l1 4c-5.6 2-8.2 6-8.4 10H40v18z"/></svg><div class="sl"><figure class="on"><blockquote>Nos ahorró dos semanas de maquetación en el primer sprint.</blockquote><figcaption><span class="av" aria-hidden="true">MR</span><span><b>Marta Ruiz</b><span>Diseñadora de producto</span></span></figcaption></figure><figure><blockquote>Copiar, pegar y ajustar el color. Así de sencillo.</blockquote><figcaption><span class="av" aria-hidden="true">JL</span><span><b>Javier López</b><span>Desarrollador frontend</span></span></figcaption></figure><figure><blockquote>Los clientes notan el cuidado en cada animación.</blockquote><figcaption><span class="av" aria-hidden="true">SG</span><span><b>Sara Gil</b><span>Directora creativa</span></span></figcaption></figure></div><div class="pg"><button type="button" aria-label="Opinión 1" class="on"><i></i></button><button type="button" aria-label="Opinión 2"><i></i></button><button type="button" aria-label="Opinión 3"><i></i></button></div></section>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: CardsDónde usarlo
La prueba social funciona mejor en dosis pequeñas, una voz cada vez. Esta tarjeta muestra una cita con las iniciales, el nombre y el cargo de quien la firma, y pasa a la siguiente con un fundido cuando se llena su barra de progreso. Al pasar el ratón o enfocar la tarjeta se pausa el tiempo, y cada barra es además un botón para ir a esa opinión.
El tiempo es una animación CSS y el script solo escucha cuándo termina, así que es ligero. Con movimiento reducido las barras quedan llenas y las citas solo cambian al elegirlas.