Edit element

sa-results-explorer

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-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"?" &middot; "+activeCat:"");
}
render();
})();
</script>

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}}

Cancel