sa-trust-badges-grid v2026-06-10
3×2 grid of firm-credential badges (Forbes, Super Lawyers, ABOTA, NTL Top 100, Multi-Million, MVTLA). Header "Recognized Amongst Kentucky's Best Injury Lawyers."
Source skill: sa-trust-badges-grid · Updated 2026-06-10 16:47:46
When to use
Mid-page on location pages and homepage. Coexists with horizontal trust bar (3.2).
Rules & constraints
- 1. Header is exactly: `Recognized Amongst Kentucky's Best Injury Lawyers`. Note the **"Amongst"** spelling per Sam's instruction. Do not change to "Among," "Within," or any variant.
- 2. Six badges, fixed roster: - Forbes Best-In-State (forbes-badge.png)
- 3. ABOTA sits on the top row: where Top 10 used to be (per Sam, 2026-05-20). Do not substitute "Top 10" — that badge is retired sitewide.
- 4. 3×2 mobile grid: Never 2×3 or 1×6 on mobile.
- 5. Canonical PNG/SVG/WebP URLs only: Do not use JPG thumbnails. Do not use Wikipedia thumb URLs (they 403 in headless render). Use the firm-hosted `/wp-content/uploads/bsg-images/...` paths shown in the snippet.
- 6. Alt text: is descriptive and lowercase per the sitewide image alt-text convention.
- 7. No deprecated colors: No background fills on the badges themselves — they sit on white.
- 8. Mobile centering: applies to the H2 per the sitewide rule.
- 9. One per page: Pair with the horizontal trust bar (`sa-trust-bar`) if needed — they coexist but never use two badge grids on the same page.
Live reference
Deployment notes
Image heights normalized via max-height. Lazy-load below the fold.
HTML
<section class="sa-badges">
<div class="sa-badges-inner">
<h2>Recognized Amongst Kentucky’s Best Injury Lawyers</h2>
<div class="sa-badges-grid">
<div class="sa-badge"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/bsg-images/forbes-badge.png" alt="Forbes best-in-state top lawyer" loading="lazy" width="2048" height="819"></div>
<div class="sa-badge"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/bsg-images/super-lawyers-badge.png" alt="Super lawyers" loading="lazy" width="180" height="150"></div>
<div class="sa-badge"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/Abota-Badge.webp" alt="Abota american board of trial advocates" loading="lazy" width="616" height="428"></div>
<div class="sa-badge"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/bsg-images/ntl-top100-badge.webp" alt="National trial lawyers top 100" loading="lazy" width="1200" height="1200"></div>
<div class="sa-badge"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/bsg-images/multi-million-badge.png" alt="Multi-million dollar advocates forum" loading="lazy" width="350" height="350"></div>
<div class="sa-badge"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/bsg-images/mvtla-badge.webp" alt="Motor vehicle trial lawyers association top 25" loading="lazy" width="512" height="512"></div>
</div>
</div>
</section>CSS
/* ============== sa-trust-badges-grid - 3×2 badge grid ============== */
.sa-badges{
padding:56px 24px;
background:#fff;
}
.sa-badges-inner{
max-width:1180px;
margin:0 auto;
text-align:center;
}
.sa-badges-inner h2{
font-family:Poppins,sans-serif;
font-weight:700;
font-size:clamp(24px,3.2vw,32px);
color:#0B212D;
text-align:center;
margin:0 0 36px;
letter-spacing:.3px;
}
.sa-badges-grid{
display:grid;
grid-template-columns:repeat(6, 1fr);
gap:24px;
align-items:center;
justify-items:center;
}
.sa-badge{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:120px;
}
.sa-badge img{
max-width:100%;
max-height:120px;
width:auto;
height:auto;
object-fit:contain;
}
@media (max-width:980px){
.sa-badges-grid{ grid-template-columns:repeat(3, 1fr); gap:20px; }
.sa-badge{ min-height:100px; }
.sa-badge img{ max-height:100px; }
}
@media (max-width:480px){
.sa-badges{ padding:40px 16px; }
.sa-badge img{ max-height:80px; }
}
/* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */
.sa-badges h1,.sa-badges h2,.sa-badges h3{text-transform:uppercase !important;text-align:center !important;}
.sa-badges .cva-btn,.sa-badges .cva-btn--primary,.sa-badges .cva-btn--ghost,.sa-badges .sa-cta-banner-btn,.sa-badges .sa-sidebar-btn,.sa-badges .sa-side-btn,.sa-badges .sa-submit-btn,.sa-badges .sa-bsg-cta,.sa-badges .sa-hero-cta,.sa-badges .sa-partner-btn,.sa-badges .sa-btn,.sa-badges .sa-cta,.sa-badges .sa-cta-btn,.sa-badges .btn{text-transform:uppercase !important;text-align:center !important;}