Edit element

sa-review-slider

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional) Live reference URL Deployment notes HTML

<section class="sa-rev-slider" aria-label="Client reviews">
  <div class="sa-rev-track">
    
    <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>
    
    <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}}

Cancel