SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-trust-badges-grid
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
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."
When to use
Mid-page on location pages and homepage. Coexists with horizontal trust bar (3.2).
Source skill
Rules (one per line, leading dash optional)
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 URL
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;}
Save changes
Cancel