Social Proof Live

sa-review-slider v2026-06-12

Pure-CSS infinite marquee Google-review slider. 3-up desktop / 2-up tablet / 1-up mobile. Uses real approved reviews verbatim, centered Google icon, stars, quote, and ALL CAPS attribution. Pauses on hover/focus and respects prefers-reduced-motion.

Source skill: sa-review-slider · Updated 2026-06-12 22:05:36

Edit

Live preview

Open ↗

When to use

When the page needs continuous-scroll review proof instead of a static testimonial block.

Rules & constraints

1. Pure-CSS infinite marquee, 3-up desktop / 2-up tablet / 1-up mobile.
2. Pauses on hover/focus, respects prefers-reduced-motion.
3. Uses only verbatim approved reviews from approved-reviews.md; no placeholders, paraphrases, or generated testimonials.
4. Quote ends with a period inside the closing curly quote; attribution is prefixed with a hyphen and rendered larger than the quote.
5. Distinct from sa-review-break - use slider when the page needs continuous-scroll proof.

Live reference

https://aguiarinjurylawyers.com/

Deployment notes

Copy verbatim. Use only approved reviews from approved-reviews.md. Run pre-publish-qa, playwright-visual-qa (desktop 1280 / mobile 390), sa-content-rot-detector, and sa-css-leak-guard after deploy. Log via content-publish-logger and notify search engines via batch-indexnow. See the source skill for full rules.

HTML

<section class="sa-rev-slider" aria-label="Client reviews">
  <div class="sa-rev-track">
    <!-- Duplicate the inner block twice for seamless loop -->
    <div class="sa-rev-card">
      <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/google-social-icon.webp" alt="Google" width="24" height="24" loading="lazy">
      <span class="sa-rev-stars">★★★★★</span>
      <p>“I was hesitant to use a lawyer’s office as the process seemed overwhelming. However, their office handled literally everything.”</p>
      <span class="sa-rev-name">- K. FREEMAN</span>
    </div>
    <div class="sa-rev-card">
      <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/google-social-icon.webp" alt="Google" width="24" height="24" loading="lazy">
      <span class="sa-rev-stars">★★★★★</span>
      <p>“The process was as easy and straightforward as anyone can make it.”</p>
      <span class="sa-rev-name">- ROBYN W.</span>
    </div>
    <div class="sa-rev-card">
      <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/google-social-icon.webp" alt="Google" width="24" height="24" loading="lazy">
      <span class="sa-rev-stars">★★★★★</span>
      <p>“I received a settlement far beyond what I expected.”</p>
      <span class="sa-rev-name">- S. AYLA</span>
    </div>
    <!-- Duplicate set for seamless loop -->
    <div class="sa-rev-card" aria-hidden="true">
      <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/google-social-icon.webp" alt="" width="24" height="24" loading="lazy">
      <span class="sa-rev-stars">★★★★★</span>
      <p>“I was hesitant to use a lawyer’s office as the process seemed overwhelming. However, their office handled literally everything.”</p>
      <span class="sa-rev-name">- K. FREEMAN</span>
    </div>
    <div class="sa-rev-card" aria-hidden="true">
      <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/google-social-icon.webp" alt="" width="24" height="24" loading="lazy">
      <span class="sa-rev-stars">★★★★★</span>
      <p>“The process was as easy and straightforward as anyone can make it.”</p>
      <span class="sa-rev-name">- ROBYN W.</span>
    </div>
    <div class="sa-rev-card" aria-hidden="true">
      <img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/google-social-icon.webp" alt="" width="24" height="24" loading="lazy">
      <span class="sa-rev-stars">★★★★★</span>
      <p>“I received a settlement far beyond what I expected.”</p>
      <span class="sa-rev-name">- S. AYLA</span>
    </div>
  </div>
</section>

CSS

.sa-rev-slider{background:#f7f9fa;padding:40px 0;overflow:hidden}
.sa-rev-track{display:flex;gap:20px;width:max-content;animation:sa-rev-scroll 50s linear infinite;padding:0 20px}
.sa-rev-slider:hover .sa-rev-track,.sa-rev-slider:focus-within .sa-rev-track{animation-play-state:paused}
@keyframes sa-rev-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sa-rev-card{flex:0 0 320px;background:#fff;border-radius:8px;border-left:4px solid #D97706;padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;box-shadow:0 4px 12px rgba(11,33,45,.06)}
.sa-rev-card img{display:block;margin:0 auto}
.sa-rev-stars{color:#D97706;letter-spacing:2px}
.sa-rev-card p{font-family:Poppins,sans-serif;font-weight:500;font-style:italic;font-size:15px;line-height:1.5;color:#0B212D;margin:0;flex:1}
.sa-rev-name{font-family:Poppins,sans-serif;font-weight:600;font-size:17px;color:#0B212D;text-transform:uppercase;letter-spacing:.05em}
@media(prefers-reduced-motion:reduce){.sa-rev-track{animation:none;overflow-x:auto}}
@media(max-width:480px){.sa-rev-card{flex-basis:280px}}