SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-results-explorer
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Filterable case-results explorer for aguiarinjurylawyers.com. A sticky chip-filter bar (by case category) plus a live result count, feeding a responsive 3-up card grid where each card shows a large Georgia/Times New Roman orange settlement amount, a short orange divider, and an uppercase case-type label, all centered. JS-driven from a single RESULTS array (42 verified amounts). Use on the Case Results page (/about-us/our-results/) or any page needing an interactive, browsable list of firm settlements and verdicts. Triggers on results explorer, filterable results, case results grid, sa-results-explorer, results filter chips, browse case results, or any request for an interactive case-results browser. Distinct from the rotating ticker (sa-case-results-ticker / sa-cva-results-ticker), an auto-fading marquee; this one is a static, filterable grid the visitor controls. NEVER add case summaries to cards (amount + type only). Amounts are verified: do not edit, invent, or embellish.
When to use
On the Case Results page or any page needing an interactive, browsable list of firm settlements and verdicts that the visitor controls (sticky chip filters + live count + 3-up card grid).
Source skill
Rules (one per line, leading dash optional)
- Cards show amount + case type only — NEVER add case summaries. - Amounts are verified — do not edit, invent, or embellish. - Orange (#D97706) for the amount and divider only, never background. - No emoji. Full-opacity text.
Live reference URL
Deployment notes
All classes namespaced sa-rx-; IDs sa-rx-chips/sa-rx-count/sa-rx-grid. JS-driven from a single RESULTS array (42 verified amounts). Distinct from the rotating ticker (sa-case-results-ticker / sa-cva-results-ticker) — pick one per page. Run pre-publish-qa and playwright-visual-qa after deploy.
HTML
<!-- SA RESULTS EXPLORER (filterable case-results grid) - START --> <section class="sa-rx"> <div class="sa-rx-controls"> <div class="sa-rx-chips" id="sa-rx-chips" role="group" aria-label="Filter results by case type"></div> <div class="sa-rx-subbar"> <div class="sa-rx-count" id="sa-rx-count"></div> </div> </div> <div class="sa-rx-grid" id="sa-rx-grid"></div> </section> <script> (function(){ /* All 42 results, verbatim amounts + case types. No summaries (descriptions intentionally omitted). */ var RESULTS=[ {amt:14000000,type:"Insurance Dispute",cat:"Insurance Dispute"}, {amt:12000000,type:"Wrongful Death",cat:"Wrongful Death"}, {amt:6800000,type:"Car Accident",cat:"Car Accident"}, {amt:6250000,type:"Commercial Vehicle",cat:"Truck & Commercial"}, {amt:6100000,type:"Box Truck Accident",cat:"Truck & Commercial"}, {amt:6000000,type:"Semi Truck Accident",cat:"Truck & Commercial"}, {amt:6000000,type:"Wrongful Death",cat:"Wrongful Death"}, {amt:6000000,type:"Premises Liability",cat:"Premises Liability"}, {amt:5600000,type:"Wrongful Death",cat:"Wrongful Death"}, {amt:5200000,type:"Trucking Accident",cat:"Truck & Commercial"}, {amt:4100000,type:"Car Accident",cat:"Car Accident"}, {amt:4000000,type:"Trucking Accident",cat:"Truck & Commercial"}, {amt:4000000,type:"Trucking Accident",cat:"Truck & Commercial"}, {amt:3600000,type:"Trucking Accident",cat:"Truck & Commercial"}, {amt:3300000,type:"Insurance Dispute",cat:"Insurance Dispute"}, {amt:3000000,type:"Trucking Accident",cat:"Truck & Commercial"}, {amt:3000000,type:"School Supervision",cat:"Other"}, {amt:2500000,type:"Car Accident",cat:"Car Accident"}, {amt:2500000,type:"Wrongful Death",cat:"Wrongful Death"}, {amt:2200000,type:"Truck Accident",cat:"Truck & Commercial"}, {amt:2000000,type:"Trucking Accident",cat:"Truck & Commercial"}, {amt:1800000,type:"Underinsured Motorist",cat:"UM / UIM"}, {amt:1800000,type:"Wrongful Death",cat:"Wrongful Death"}, {amt:1500000,type:"Motorcycle Accident",cat:"Motorcycle"}, {amt:1600000,type:"Trucking Accident",cat:"Truck & Commercial"}, {amt:1600000,type:"Car Accident",cat:"Car Accident"}, {amt:1500000,type:"Civil Rights",cat:"Civil Rights"}, {amt:1500000,type:"UM Coverage",cat:"UM / UIM"}, {amt:1400000,type:"Trucking Accident",cat:"Truck & Commercial"}, {amt:1250000,type:"Car Accident",cat:"Car Accident"}, {amt:1250000,type:"Civil Rights",cat:"Civil Rights"}, {amt:1200000,type:"Car Accident",cat:"Car Accident"}, {amt:1150000,type:"Car Accident",cat:"Car Accident"}, {amt:1125000,type:"Car Accident",cat:"Car Accident"}, {amt:1100000,type:"UM Claim",cat:"UM / UIM"}, {amt:1100000,type:"Car Accident",cat:"Car Accident"}, {amt:1000000,type:"Loss of Consortium",cat:"Other"}, {amt:1000000,type:"Car Accident",cat:"Car Accident"}, {amt:1000000,type:"UIM Claim",cat:"UM / UIM"}, {amt:1000000,type:"Police Chase",cat:"Other"}, {amt:1000000,type:"Dram Shop",cat:"Other"}, {amt:1000000,type:"Premises Liability",cat:"Premises Liability"} ]; var CATS=["All","Car Accident","Truck & Commercial","Wrongful Death","Insurance Dispute","UM / UIM","Motorcycle","Civil Rights","Premises Liability","Other"]; var fmt=function(n){return "$"+n.toLocaleString("en-US");}; var activeCat="All"; var chipsEl=document.getElementById("sa-rx-chips"); CATS.forEach(function(c){ var n=c==="All"?RESULTS.length:RESULTS.filter(function(r){return r.cat===c;}).length; var b=document.createElement("button"); b.className="sa-rx-chip"; b.type="button"; b.dataset.cat=c; b.setAttribute("aria-pressed",c==="All"?"true":"false"); b.innerHTML=c+'<span class="sa-rx-c">'+n+'</span>'; b.addEventListener("click",function(){ activeCat=c; document.querySelectorAll(".sa-rx-chip").forEach(function(x){x.setAttribute("aria-pressed",x.dataset.cat===c);}); render(); }); chipsEl.appendChild(b); }); var grid=document.getElementById("sa-rx-grid"), countEl=document.getElementById("sa-rx-count"); function render(){ var list=RESULTS.filter(function(r){return activeCat==="All"||r.cat===activeCat;}); grid.innerHTML=""; list.forEach(function(r){ var d=document.createElement("article"); d.className="sa-rx-card"; d.innerHTML='<div class="sa-rx-amt">'+fmt(r.amt)+'</div><hr class="sa-rx-divider"><p class="sa-rx-type">'+r.type+'</p>'; grid.appendChild(d); }); countEl.innerHTML="Showing <b>"+list.length+"</b> of "+RESULTS.length+" results"+(activeCat!=="All"?" · "+activeCat:""); } render(); })(); </script> <!-- SA RESULTS EXPLORER - END -->
CSS
.sa-rx{max-width:1180px;margin:0 auto;padding:64px 24px 96px;font-family:'Poppins',system-ui,sans-serif;color:#0B212D} .sa-rx-controls{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:24px 0;border-bottom:1px solid #e7ecee;margin-bottom:48px;text-align:center} .sa-rx-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .sa-rx-chip{font-family:'Poppins',system-ui,sans-serif;font-size:14px;font-weight:600;color:#0B212D;background:#f7f9fa;border:1px solid #e2e8ea;border-radius:999px;padding:9px 16px;min-height:44px;cursor:pointer;transition:all 220ms cubic-bezier(.2,.8,.2,1);white-space:nowrap} .sa-rx-chip:hover{border-color:#D97706} .sa-rx-chip[aria-pressed="true"]{background:#0B212D;color:#fff;border-color:#0B212D} .sa-rx-chip .sa-rx-c{color:#56666f;font-weight:500;margin-left:6px} .sa-rx-chip[aria-pressed="true"] .sa-rx-c{color:#fff} .sa-rx-subbar{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:16px} .sa-rx-count{font-size:14px;color:#56666f;font-weight:500} .sa-rx-count b{color:#0B212D} .sa-rx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:900px){.sa-rx-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.sa-rx-grid{grid-template-columns:1fr}} .sa-rx-card{background:#fff;border:1px solid #e9eef0;border-radius:14px;padding:48px 24px;box-shadow:0 1px 2px rgba(11,33,45,.06),0 1px 1px rgba(11,33,45,.04);text-align:center;transition:transform 220ms cubic-bezier(.2,.8,.2,1),box-shadow 220ms cubic-bezier(.2,.8,.2,1),border-color 220ms cubic-bezier(.2,.8,.2,1)} .sa-rx-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(11,33,45,.12);border-color:#dfe6e9} .sa-rx-card .sa-rx-amt{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,3.4vw,44px);color:#D97706;line-height:1;letter-spacing:-.01em} .sa-rx-card .sa-rx-divider{width:90px;height:2px;background:#D97706;border:0;margin:18px auto} .sa-rx-card .sa-rx-type{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#0B212D;margin:0} @media(prefers-reduced-motion:reduce){.sa-rx-chip,.sa-rx-card{transition:none}}
Save changes
Cancel