SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-uvp-block
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Numbered four-point UVP block on a Visible Depth gradient background. Every card title is split onto two lines for uniform card height. Use as a page's UVP moment when the page does NOT use sa-commitments-grid. Pick one per page.
When to use
Practice-area pages and the homepage when the page does NOT use sa-commitments-grid. Pick one per page.
Source skill
Rules (one per line, leading dash optional)
1. Numbered four-point UVP variant. Distinct from sa-commitments-grid (six-card variant). 2. Pick one per page, never both. 3. Dark Visible Depth gradient background, white type, orange numerals. 4. Four points only — never five, never three. Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle. UVP casing standard: use exactly "$0 Out-Of-Pocket Forever" for this benefit label, including title case and hyphens.
Live reference URL
Deployment notes
Copy verbatim. Replace bracketed placeholders. Run pre-publish-qa, playwright-visual-qa (desktop 1280 / mobile 390), sa-content-rot-detector, and sa-css-leak-guard after deploy. Log via content-publish-logger and notify search engines via batch-indexnow. See the source skill for full rules. Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle. 2026-06-15: Normalized the Out-Of-Pocket Forever UVP casing standard in the registry.
HTML
<section class="sa-uvp"> <div class="sa-uvp-inner"> <h2 class="sa-uvp-h2">Why Choose Sam Aguiar Injury Lawyers</h2> <ol class="sa-uvp-list"> <li> <h3>Bigger Share<br>Guarantee®</h3> <p>You always walk away with more than the lawyer after all bills, liens, and costs are paid. If your share is ever less, we cut our fee.</p> </li> <li> <h3>$0 Out-Of-Pocket<br>Forever</h3> <p>We cover every expense - investigators, experts, exhibits, filing fees. You owe nothing unless we recover for you.</p> </li> <li> <h3>Dedicated Team<br>Of Three</h3> <p>Every client gets a top-rated attorney, an experienced case manager, and a skilled legal assistant. Low caseloads mean faster results.</p> </li> <li> <h3>No Increase<br>For Litigation</h3> <p>Our flat contingency fee does not go up if your case has to be filed or tried. Other firms jump to 40-45%.</p> </li> <li> <h3>World-Class<br>Service</h3> <p>Biweekly case updates at a minimum. We answer calls and texts 24/7/365.</p> </li> <li> <h3>Award-Winning<br>Representation</h3> <p>Forbes 2025 Best-In-State (1 of 2 in Kentucky). 2026 Super Lawyers. National Trial Lawyers Top 100. Multi-Million Dollar Advocates Forum.</p> </li> </ol> </div> </section>
CSS
.sa-uvp{background:#fff;padding:64px 20px} .sa-uvp-inner{max-width:1100px;margin:0 auto} .sa-uvp-h2{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(26px,3.5vw,36px);color:#0B212D;text-align:center;margin:0 0 40px} .sa-uvp-list{list-style:none;counter-reset:uvp;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px} .sa-uvp-list li{counter-increment:uvp;background:#f7f9fa;border-left:4px solid #D97706;border-radius:6px;padding:24px 24px 24px 64px;position:relative} .sa-uvp-list li::before{content:counter(uvp);position:absolute;left:20px;top:24px;width:32px;height:32px;background:#0B212D;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Poppins,sans-serif;font-weight:700;font-size:16px} .sa-uvp-list h3{font-family:Poppins,sans-serif;font-weight:600;font-size:18px;color:#0B212D;margin:0 0 8px} .sa-uvp-list p{font-family:Poppins,sans-serif;font-weight:500;font-size:15px;line-height:1.55;color:#0B212D;margin:0} /* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */ .sa-uvp h1,.sa-uvp h2,.sa-uvp h3{text-transform:uppercase !important;text-align:center !important;} .sa-uvp .cva-btn,.sa-uvp .cva-btn--primary,.sa-uvp .cva-btn--ghost,.sa-uvp .sa-cta-banner-btn,.sa-uvp .sa-sidebar-btn,.sa-uvp .sa-side-btn,.sa-uvp .sa-submit-btn,.sa-uvp .sa-bsg-cta,.sa-uvp .sa-hero-cta,.sa-uvp .sa-partner-btn,.sa-uvp .sa-btn,.sa-uvp .sa-cta,.sa-uvp .sa-cta-btn,.sa-uvp .btn{text-transform:uppercase !important;text-align:center !important;}
Save changes
Cancel