SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-us-vs-them-side-by-side-cards
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
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.
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.
Source skill
Rules (one per line, leading dash optional)
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.
Live reference URL
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®</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;}}
Save changes
Cancel