Differentiators Beta

sa-us-vs-them-side-by-side-cards v2026-06-15

Approved Us vs. Them Concept 1 from the local mockup board. White-section two-card comparison with Sam Aguiar Injury Lawyers on the left in dark Visible Depth styling and Other PI Firms on the right in red-tinted competition styling.

Source skill: registry-screenshot-intake; source mockup: C:\Users\SAguiar\Documents\Web Elements\collected-local-html-2026-05-27_134940\Downloads\Us vs Them Mockups.html; approved by Sam 2026-06-15 · Updated 2026-06-15 23:37:38

Edit

Live preview

Open ↗

When to use

Use as a mid-page differentiation anchor on practice-area, location, and landing pages that have room for a clear two-column comparison block on a white section.

Rules & constraints

1. Keep Sam Aguiar Injury Lawyers on the left and Other PI Firms on the right on desktop.
2. On mobile, stack Sam Aguiar first, then Other PI Firms.
3. Preserve the five comparison rows unless Sam approves copy changes: smaller caseloads, flat fee, Bigger Share Guarantee, in-house support, and direct line.
4. Keep this as a differentiation block, not a CTA. Do not add phone buttons or forms inside this element.
5. Status remains Beta until it is deployed on a live page and desktop/mobile visual QA is completed in the target page context.

Deployment notes

Standalone scoped snippet generated from Concept 1 of the 2026-05-27 Us vs. Them mockup board. Add to WordPress as a custom HTML block with the paired CSS, then run desktop/mobile visual QA and duplicate-UVP checks before promoting to Live.

HTML

<section class="sa-uvt-cards" aria-labelledby="sa-uvt-cards-title">
  <div class="sa-uvt-cards__inner">
    <h2 id="sa-uvt-cards-title" class="sa-uvt-cards__title">See The Difference</h2>
    <div class="sa-uvt-cards__grid">
      <div class="sa-uvt-cards__panel sa-uvt-cards__panel--us">
        <h3>Sam Aguiar Injury Lawyers</h3>
        <ul role="list">
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>Smaller Caseloads, Teams Of Three</span></li>
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>Flat Fee That Never Increases</span></li>
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>Bigger Share Guarantee&reg;</span></li>
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>In-House Support</span></li>
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L20 7"/></svg></span><span>Direct Line To Your Team</span></li>
        </ul>
      </div>
      <div class="sa-uvt-cards__panel sa-uvt-cards__panel--them">
        <h3>Other PI Firms</h3>
        <ul role="list">
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Lawyer And Assistant With 200+ Cases</span></li>
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Higher Fee Percent For Litigation</span></li>
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Lawyer Walks With More Money Than You</span></li>
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Outsourced Work</span></li>
          <li><span class="sa-uvt-cards__icon sa-uvt-cards__icon--x" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span><span>Unreturned Calls</span></li>
        </ul>
      </div>
    </div>
  </div>
</section>

CSS

.sa-uvt-cards,.sa-uvt-cards *{box-sizing:border-box;}
.sa-uvt-cards{font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff;color:#0B212D;padding:48px 24px;}
.sa-uvt-cards__inner{max-width:1040px;margin:0 auto;border:1px solid rgba(11,33,45,.08);border-radius:14px;padding:32px 24px 28px;background:#fff;}
.sa-uvt-cards__title{margin:0 0 24px;text-align:center;font-size:clamp(26px,3vw,32px);line-height:1.16;font-weight:700;color:#0B212D;letter-spacing:0;}
.sa-uvt-cards__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
.sa-uvt-cards__panel{border-radius:12px;padding:24px 22px 22px;}
.sa-uvt-cards__panel h3{margin:0 0 16px;padding-bottom:14px;border-bottom:2px solid rgba(11,33,45,.10);text-align:center;font-size:19px;line-height:1.2;font-weight:700;letter-spacing:0;}
.sa-uvt-cards__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.sa-uvt-cards__panel li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(11,33,45,.12);font-size:15px;line-height:1.4;font-weight:600;}
.sa-uvt-cards__panel li:last-child{border-bottom:none;}
.sa-uvt-cards__panel--us{background:linear-gradient(0deg,#000 0%,#0B212D 100%);border:1px solid rgba(248,156,34,.25);color:#fff;}
.sa-uvt-cards__panel--us h3{border-bottom-color:#F89C22;color:#fff;}
.sa-uvt-cards__panel--us li{border-bottom-color:rgba(248,156,34,.45);color:#fff;}
.sa-uvt-cards__panel--them{background:#fef5f4;border:1px solid #f4d6d4;color:#0B212D;}
.sa-uvt-cards__panel--them h3{color:#b91c1c;}
.sa-uvt-cards__icon{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
.sa-uvt-cards__icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;display:block;}
.sa-uvt-cards__icon--check{background:#15803d;color:#fff;}
.sa-uvt-cards__icon--x{background:transparent;color:#b91c1c;}
.sa-uvt-cards__icon--x svg{width:18px;height:18px;stroke-width:4.5;}
@media(max-width:760px){.sa-uvt-cards{padding:34px 16px;}.sa-uvt-cards__inner{padding:24px 16px;}.sa-uvt-cards__grid{grid-template-columns:1fr;}.sa-uvt-cards__panel{padding:22px 18px;}.sa-uvt-cards__panel li{font-size:14px;}}