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
Testimonial carousel card
Three quotes that rotate on their own with progress bars, pausing when you hover or focus.
Settings
16px
1x
Code
<section class="uv-ktc" aria-roledescription="carrusel" aria-label="What people say"><p class="ti">What people say</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>It saved us two weeks of layout work in the first sprint.</blockquote><figcaption><span class="av" aria-hidden="true">MR</span><span><b>Marta Ruiz</b><span>Product designer</span></span></figcaption></figure><figure><blockquote>Copy, paste and tweak the color. That simple.</blockquote><figcaption><span class="av" aria-hidden="true">JL</span><span><b>Javier López</b><span>Frontend developer</span></span></figcaption></figure><figure><blockquote>Clients notice the care in every animation.</blockquote><figcaption><span class="av" aria-hidden="true">SG</span><span><b>Sara Gil</b><span>Creative director</span></span></figcaption></figure></div><div class="pg"><button type="button" aria-label="Review 1" class="on"><i></i></button><button type="button" aria-label="Review 2"><i></i></button><button type="button" aria-label="Review 3"><i></i></button></div></section>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
See all CardsWhere to use it
Social proof works best in small doses, one voice at a time. This card shows a quote with the author's initials, name and role, then fades to the next one when its progress bar fills. Hovering or focusing the card pauses the timer, and each bar is also a button to jump straight to a quote.
The timing is a CSS animation, and the script only listens for its end, so it is light and easy to tweak. With reduced motion, the bars stay full and quotes change only when people choose them.