Differentiators Live

sa-commitments-grid v2026-06-15

Six dark-navy commitment cards in 3×2 grid. Visible Depth gradient backgrounds. Each card is one short sentence. No icons.

Source skill: sa-commitments-grid · Updated 2026-06-16 14:00:19

Edit

Live preview

Open ↗

When to use

Location pages, homepage, any page needing high-trust differentiator block. Acts as the UVP moment.

Rules & constraints

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

https://aguiarinjurylawyers.com/locations/lexington/

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&reg;</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;}