SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-commitments-grid
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Six dark-navy commitment cards in 3×2 grid. Visible Depth gradient backgrounds. Each card is one short sentence. No icons.
When to use
Location pages, homepage, any page needing high-trust differentiator block. Acts as the UVP moment.
Source skill
Rules (one per line, leading dash optional)
1. Six cards. No more, no fewer: 2. **One short sentence per card body.** Not 1-2 sentences. One sentence. 2. Visible Depth gradient background: on the outer section: `linear-gradient(0deg, #000000 0%, #0B212D 100%)`. Cards sit on top with a subtle border or slightly lighter fill — see `references/snippet.html` for the canonical card treatment. 3. No icons: No emoji. No SVGs inside the cards. 4. Header above the grid: `Our Commitments To You` (default), or location-specific variant like `Our Lexington Commitments`. No subtext below the H2. 5. Mobile centering: the H2 is centered on mobile per the sitewide rule. Cards stack vertically on mobile. 6. Commitments must be true and current: — pull from `firm-briefing` §3 differentiators. 7. Approved roster (Lexington reference page): - Bigger Share Guarantee® → "You always walk away with more than us. If your share is ever less, we cut our fee." 8. No deprecated colors: (`#003D54`, `#142130`, `rgba(11,33,45,0.85)`). 9. No "Free Consultation" promises: , no banned words from `firm-briefing` §6. UVP casing standard: use exactly "$0 Out-Of-Pocket Forever" for this benefit label, including title case and hyphens.
Live reference URL
Deployment notes
Mobile collapses to 1-up. Maintain identical card heights via flex/grid. 2026-06-15: Normalized the Out-Of-Pocket Forever UVP casing standard in the registry.
HTML
<section class="sa-section sa-section-dark"> <div class="sa-section-inner"> <h2>Our Commitments To You</h2> <div class="sa-commitments-grid"> <div class="sa-commit-card"> <h3>Bigger Share<br>Guarantee®</h3> <p>You always walk away with more than us. If your share is ever less, we cut our fee.</p> </div> <div class="sa-commit-card"> <h3>$0 Out Of Pocket<br>Forever</h3> <p>No upfront costs. No retainers. No fees unless we win your case.</p> </div> <div class="sa-commit-card"> <h3>Dedicated Team<br>of Three</h3> <p>Top-rated attorney, case manager, and legal assistant on every case.</p> </div> <div class="sa-commit-card"> <h3>No Increase<br>For Litigation</h3> <p>Our flat contingency fee never goes up, even if your case is litigated.</p> </div> <div class="sa-commit-card"> <h3>World-Class<br>Service</h3> <p>Biweekly updates. 24/7 response to calls and texts. Never wonder where your case stands.</p> </div> <div class="sa-commit-card"> <h3>Award-Winning<br>Representation</h3> <p>Forbes Best-In-State, Super Lawyers, NTL Top 100, Multi-Million Dollar Advocates.</p> </div> </div> </div> </section>
CSS
/* ============== sa-commitments-grid - dark-card UVP variant ============== */ .sa-section.sa-section-dark{ background:linear-gradient(0deg, #000000 0%, #0B212D 100%); color:#fff; padding:64px 24px; } .sa-section.sa-section-dark .sa-section-inner{ max-width:1180px; margin:0 auto; } .sa-section.sa-section-dark h2{ font-family:Poppins,sans-serif; font-weight:700; font-size:clamp(26px,3.5vw,36px); color:#fff; text-align:center; margin:0 0 40px; letter-spacing:.3px; } .sa-commitments-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } .sa-commit-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(217,119,6,0.25); border-radius:10px; padding:24px 34px; text-align:left; } .sa-commit-card h3{ font-family:Poppins,sans-serif; font-weight:700; font-size:18px; line-height:1.3; min-height:2.6em; color:#D97706; margin:0 0 10px; letter-spacing:.3px; } .sa-commit-card p{ font-family:Poppins,sans-serif; font-weight:400; font-size:15px; line-height:1.55; color:#E6ECF1; margin:0; } @media (max-width:980px){ .sa-commitments-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:640px){ .sa-commitments-grid{ grid-template-columns:1fr; } .sa-section.sa-section-dark{ padding:48px 16px; } .sa-section.sa-section-dark h2{ text-align:center; } } /* === ALL-CAPS + CENTERED (sa-copywriting §2) === */ h1,h2,h3{text-transform:uppercase !important;text-align:center !important;} .cva-btn,.cva-btn--primary,.cva-btn--ghost,.sa-cta-banner-btn,.sa-sidebar-btn,.sa-side-btn,.sa-submit-btn,.sa-bsg-cta,.sa-hero-cta,.sa-partner-btn,.sa-btn,.sa-cta,.sa-cta-btn,.btn{text-transform:uppercase !important;text-align:center !important;}
Save changes
Cancel