Social Proof Beta

sa-clients-family-marquee-v1 v2026-06-15

Clients All Across Kentucky Become Part of the Family photo-social-proof section. Version 1 is a single-row scrolling marquee with portrait client cards on a white band, normalized from the v7 local mockup into production-safe sa-* classes.

Source skill: Local mockup source: C:\Users\SAguiar\Documents\Web Elements\collected-local-html-2026-05-27_134940\Downloads\Clients Family Section — 5 Variants (v7) (1).html · Updated 2026-06-15 23:25:49

Edit

Live preview

Open ↗

When to use

Selective sitewide use for blog posts and long-form resource posts where a lighter mid-page or lower-page social-proof beat is needed without adding a second full row of motion. Prefer after the first substantive content section or before the final CTA, especially on posts that are text-heavy and do not already show client-family imagery.

Rules & constraints

1. Use only one Clients Family photo section per post/page.
2. Keep this as supporting social proof, not the primary CTA, hero, or footer CTA replacement.
3. Do not pair directly adjacent to another heavy social-proof module such as review grids, badge grids, or video testimonials.
4. Use live firm-hosted WebP client photos only; preserve lazy loading and neutral alt text.
5. Desktop and mobile QA required before moving from Beta to Live because the marquees are image-heavy and animated.
6. Respect prefers-reduced-motion in a production hardening pass before broad rollout.
7. Version 1 is the preferred post/article variant because it is visually lighter than the two-row page treatment.

Deployment notes

Registry entry added from Clients Family Section - 5 Variants v7 on 2026-06-15. Not yet mass-deployed. Recommended next step: create a reversible WordPress insertion map that assigns V1 to selected posts and V2 to selected pages, backs up every edited post/page, then tests desktop/mobile samples before cache purge.

HTML

<section class="sa-clients-family-v1">
  <div class="sa-clients-family-container">
      <div class="sa-clients-family-header">
        <h2>Clients All Across Kentucky<br><span class="accent">Become Part of the Family</span></h2>
      </div>
    <div class="sa-clients-family-v1-marquee">
      <div class="sa-clients-family-v1-track"><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-9.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-4.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-11.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-14.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-17.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-07.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-06.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-2.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-12.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-5.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-10.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-16.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-20.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-12.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-6.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-18.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-02.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-3.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-8.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-03.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-7.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-11.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-19.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-05.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-15.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-08.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-09.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-13.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-01.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-04.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-10.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-9.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-4.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-11.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-9.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-4.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-11.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-14.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-17.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-07.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-06.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-2.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-12.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-5.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-10.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-16.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-20.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-12.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-6.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-18.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-02.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-3.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-8.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-03.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-7.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-11.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-19.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-05.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-15.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-08.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-09.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-13.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-01.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-04.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-10.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-9.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Happy-Clients-4.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div><div class="sa-clients-family-v1-card"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/05/client-photo-2026-may-11.webp" alt="Sam Aguiar Injury Lawyers client" width="260" height="320" loading="lazy" /></div></div>
    </div>
  </div>
</section>

CSS

.sa-clients-family-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.sa-clients-family-header{text-align:center;max-width:820px;margin:0 auto 18px;}
.sa-clients-family-header h2{font-family:'Poppins',sans-serif;font-size:36px;font-weight:700;color:#0B212D!important;margin:0;line-height:1.2;}
.sa-clients-family-header .accent{color:#F89C22!important;}
@media(max-width:768px){.sa-clients-family-header h2{font-size:28px;}}.sa-clients-family-v1{background:#FFFFFF;padding:36px 0;}
.sa-clients-family-v1-marquee{position:relative;max-width:100%;overflow:hidden;margin:0 -24px;}
.sa-clients-family-v1-track{display:flex;gap:20px;width:max-content;animation:saClientsFamilyV1Scroll 120s linear infinite;padding:12px 0;}
.sa-clients-family-v1-marquee:hover .sa-clients-family-v1-track{animation-play-state:paused;}
.sa-clients-family-v1-card{flex:0 0 auto;width:260px;height:320px;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(11,33,45,.12);position:relative;transition:transform .3s ease;}
.sa-clients-family-v1-card:hover{transform:translateY(-4px);}
.sa-clients-family-v1-card img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;}
@keyframes saClientsFamilyV1Scroll{0%{transform:translateX(0);}100%{transform:translateX(calc(-1 * (100% / 2)));}}
@media(max-width:768px){.sa-clients-family-v1-card{width:200px;height:260px;}.sa-clients-family-v1-track{animation-duration:90s;}}