Edit element

sa-us-vs-them-side-by-side-cards

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional) Live reference URL Deployment notes 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;}}

Cancel