Pages Medium

Law Firm — Case Results

An authoritative law-firm case-results page with a navy stat band of total recovered and cases won, gold practice-area filters, sort by amount or year, and responsive cards listing each outcome, verdict or settlement, a short summary and the year it resolved.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  --navy: #1b2a4a;
  --navy-d: #101b33;
  --gold: #b08d57;
  --gold-soft: #efe3cf;
  --ink: #1a1f2b;
  --muted: #5b6577;
  --bg: #f5f3ee;
  --white: #ffffff;
  --line: rgba(176, 141, 87, 0.35);
  --serif: "Georgia", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 27, 51, 0.06), 0 10px 28px rgba(16, 27, 51, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

/* ── Masthead ─────────────────────────────────────────── */
.masthead {
  text-align: center;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  font-family: var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
}

.masthead h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--navy);
  margin: 10px 0 12px;
  letter-spacing: -0.01em;
}

.lede {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--muted);
}

/* ── Stat band ────────────────────────────────────────── */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 40px 0;
  box-shadow: var(--shadow);
}

.stat {
  background: var(--navy);
  background: linear-gradient(180deg, var(--navy), var(--navy-d));
  color: var(--white);
  text-align: center;
  padding: 28px 16px;
}

.stat-num {
  display: block;
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1.1;
}

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* ── Controls ─────────────────────────────────────────── */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.chip:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.chip.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.chip:focus-visible,
.sort select:focus-visible,
.cta-btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.sort select {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}

.result-count {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 22px;
}

.result-count #count {
  font-weight: 700;
  color: var(--navy);
}

/* ── Results ──────────────────────────────────────────── */
.results {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.case {
  background: var(--white);
  border: 1px solid rgba(16, 27, 51, 0.08);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.case:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(16, 27, 51, 0.08), 0 16px 36px rgba(16, 27, 51, 0.12);
}

.case.is-hidden {
  display: none;
}

.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.badge {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
}

.badge.verdict {
  background: var(--navy);
  color: var(--gold-soft);
}

.badge.settlement {
  background: var(--gold-soft);
  color: var(--navy);
}

.area-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}

.amount {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.05;
  margin-bottom: 6px;
}

.case-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.summary {
  font-size: 0.9rem;
  color: var(--ink);
}

.meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

.meta .year {
  font-weight: 700;
  color: var(--navy);
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-style: italic;
}

/* ── CTA ──────────────────────────────────────────────── */
.cta {
  margin-top: 48px;
  text-align: center;
  background: linear-gradient(180deg, var(--navy), var(--navy-d));
  color: var(--white);
  border-radius: var(--radius);
  padding: 44px 24px;
  box-shadow: var(--shadow);
}

.cta h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 8px;
}

.cta p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
}

.cta-btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
  background: var(--gold);
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 8px;
  transition: background 0.18s ease, transform 0.18s ease;
}

.cta-btn:hover {
  background: var(--gold-soft);
  transform: translateY(-2px);
}

/* ── Disclaimer ───────────────────────────────────────── */
.disclaimer {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.disclaimer p {
  font-size: 0.74rem;
  color: var(--muted);
  max-width: 64ch;
  margin: 0 auto;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 760px) {
  .stat-band {
    grid-template-columns: repeat(2, 1fr);
  }
  .results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .page {
    padding: 36px 16px 56px;
  }
  .stat-band {
    grid-template-columns: 1fr;
  }
  .controls {
    flex-direction: column;
    align-items: stretch;
  }
  .sort {
    justify-content: space-between;
  }
  .sort select {
    flex: 1;
  }
  .amount {
    font-size: 1.85rem;
  }
}

// ── Case Results: filter by practice area + sort by amount/year ──────────────
const list = document.getElementById("results");
const chips = Array.from(document.querySelectorAll(".chip"));
const sortSelect = document.getElementById("sort-select");
const countEl = document.getElementById("count");
const emptyEl = document.getElementById("empty");

const cases = Array.from(list.querySelectorAll(".case"));
let activeFilter = "all";

function applyFilter() {
  let visible = 0;
  cases.forEach((card) => {
    const match = activeFilter === "all" || card.dataset.area === activeFilter;
    card.classList.toggle("is-hidden", !match);
    if (match) visible++;
  });
  countEl.textContent = visible;
  emptyEl.hidden = visible !== 0;
}

function applySort() {
  const value = sortSelect.value;
  const sorted = [...cases].sort((a, b) => {
    const amtA = Number(a.dataset.amount);
    const amtB = Number(b.dataset.amount);
    const yrA = Number(a.dataset.year);
    const yrB = Number(b.dataset.year);
    switch (value) {
      case "amount-asc":
        return amtA - amtB;
      case "year-desc":
        return yrB - yrA || amtB - amtA;
      case "year-asc":
        return yrA - yrB || amtB - amtA;
      case "amount-desc":
      default:
        return amtB - amtA;
    }
  });
  // Re-append in sorted order (keeps filter classes intact).
  sorted.forEach((card) => list.appendChild(card));
}

chips.forEach((chip) => {
  chip.addEventListener("click", () => {
    chips.forEach((c) => {
      const on = c === chip;
      c.classList.toggle("is-active", on);
      c.setAttribute("aria-pressed", String(on));
    });
    activeFilter = chip.dataset.filter;
    applyFilter();
  });
});

sortSelect.addEventListener("change", applySort);

// Initial paint
applySort();
applyFilter();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Whitaker &amp; Reyes LLP — Case Results</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="page">
      <header class="masthead">
        <p class="eyebrow">Whitaker &amp; Reyes LLP</p>
        <h1>Case Results</h1>
        <p class="lede">
          A record of selected outcomes our trial lawyers have secured for clients. Past results do not
          guarantee a similar outcome.
        </p>
      </header>

      <section class="stat-band" aria-label="Firm results at a glance">
        <div class="stat">
          <span class="stat-num">$248M+</span>
          <span class="stat-label">Recovered for clients</span>
        </div>
        <div class="stat">
          <span class="stat-num">920+</span>
          <span class="stat-label">Cases won</span>
        </div>
        <div class="stat">
          <span class="stat-num">31</span>
          <span class="stat-label">Years in practice</span>
        </div>
        <div class="stat">
          <span class="stat-num">96%</span>
          <span class="stat-label">Favorable resolutions</span>
        </div>
      </section>

      <section class="controls" aria-label="Filter and sort case results">
        <div class="filters" role="group" aria-label="Filter by practice area">
          <button class="chip is-active" data-filter="all" aria-pressed="true">All areas</button>
          <button class="chip" data-filter="personal-injury" aria-pressed="false">Personal Injury</button>
          <button class="chip" data-filter="medical" aria-pressed="false">Medical Malpractice</button>
          <button class="chip" data-filter="employment" aria-pressed="false">Employment</button>
          <button class="chip" data-filter="product" aria-pressed="false">Product Liability</button>
          <button class="chip" data-filter="commercial" aria-pressed="false">Commercial</button>
        </div>
        <div class="sort">
          <label for="sort-select">Sort by</label>
          <select id="sort-select">
            <option value="amount-desc">Largest amount</option>
            <option value="amount-asc">Smallest amount</option>
            <option value="year-desc">Most recent</option>
            <option value="year-asc">Oldest first</option>
          </select>
        </div>
      </section>

      <p class="result-count" aria-live="polite"><span id="count">8</span> results shown</p>

      <ul class="results" id="results">
        <li class="case" data-area="personal-injury" data-amount="14200000" data-year="2025">
          <div class="case-head">
            <span class="badge verdict">Jury Verdict</span>
            <span class="area-tag">Personal Injury</span>
          </div>
          <p class="amount">$14.2M</p>
          <h2 class="case-title">Truck collision on Interstate 35</h2>
          <p class="summary">
            Secured a unanimous jury verdict for a delivery driver who suffered a spinal injury when a
            commercial carrier ran a red light. Liability was contested through trial.
          </p>
          <p class="meta"><span class="year">2025</span> · Travis County, TX</p>
        </li>

        <li class="case" data-area="medical" data-amount="9750000" data-year="2024">
          <div class="case-head">
            <span class="badge settlement">Settlement</span>
            <span class="area-tag">Medical Malpractice</span>
          </div>
          <p class="amount">$9.75M</p>
          <h2 class="case-title">Delayed cancer diagnosis</h2>
          <p class="summary">
            Confidential settlement for a family after a radiologist failed to flag a tumor on two
            successive scans, delaying treatment by eleven months.
          </p>
          <p class="meta"><span class="year">2024</span> · Cook County, IL</p>
        </li>

        <li class="case" data-area="product" data-amount="6300000" data-year="2024">
          <div class="case-head">
            <span class="badge verdict">Jury Verdict</span>
            <span class="area-tag">Product Liability</span>
          </div>
          <p class="amount">$6.3M</p>
          <h2 class="case-title">Defective industrial press</h2>
          <p class="summary">
            Won a verdict against a machinery manufacturer whose missing guard caused a factory worker
            to lose three fingers. Punitive damages were awarded.
          </p>
          <p class="meta"><span class="year">2024</span> · Wayne County, MI</p>
        </li>

        <li class="case" data-area="employment" data-amount="4100000" data-year="2025">
          <div class="case-head">
            <span class="badge settlement">Settlement</span>
            <span class="area-tag">Employment</span>
          </div>
          <p class="amount">$4.1M</p>
          <h2 class="case-title">Class-wide wage &amp; hour claim</h2>
          <p class="summary">
            Resolved unpaid-overtime claims for 340 logistics employees misclassified as exempt,
            including back pay and liquidated damages.
          </p>
          <p class="meta"><span class="year">2025</span> · Alameda County, CA</p>
        </li>

        <li class="case" data-area="commercial" data-amount="3850000" data-year="2023">
          <div class="case-head">
            <span class="badge verdict">Arbitration Award</span>
            <span class="area-tag">Commercial</span>
          </div>
          <p class="amount">$3.85M</p>
          <h2 class="case-title">Breach of supply contract</h2>
          <p class="summary">
            Recovered lost profits for a regional brewer after a bottling supplier abandoned a
            multi-year agreement mid-season.
          </p>
          <p class="meta"><span class="year">2023</span> · Hennepin County, MN</p>
        </li>

        <li class="case" data-area="personal-injury" data-amount="2400000" data-year="2023">
          <div class="case-head">
            <span class="badge settlement">Settlement</span>
            <span class="area-tag">Personal Injury</span>
          </div>
          <p class="amount">$2.4M</p>
          <h2 class="case-title">Premises liability — stairwell fall</h2>
          <p class="summary">
            Settled on behalf of a tenant who fell on an unlit, code-violating stairwell, suffering a
            traumatic brain injury and permanent disability.
          </p>
          <p class="meta"><span class="year">2023</span> · Kings County, NY</p>
        </li>

        <li class="case" data-area="medical" data-amount="1650000" data-year="2022">
          <div class="case-head">
            <span class="badge settlement">Settlement</span>
            <span class="area-tag">Medical Malpractice</span>
          </div>
          <p class="amount">$1.65M</p>
          <h2 class="case-title">Surgical error</h2>
          <p class="summary">
            Confidential resolution for a patient who required a second corrective procedure after a
            preventable error during a routine operation.
          </p>
          <p class="meta"><span class="year">2022</span> · Maricopa County, AZ</p>
        </li>

        <li class="case" data-area="employment" data-amount="875000" data-year="2022">
          <div class="case-head">
            <span class="badge verdict">Jury Verdict</span>
            <span class="area-tag">Employment</span>
          </div>
          <p class="amount">$875K</p>
          <h2 class="case-title">Retaliation &amp; wrongful termination</h2>
          <p class="summary">
            Verdict for a nurse fired after reporting unsafe staffing levels, including compensatory and
            emotional-distress damages.
          </p>
          <p class="meta"><span class="year">2022</span> · King County, WA</p>
        </li>
      </ul>

      <p class="empty" id="empty" hidden>No results in this practice area yet.</p>

      <section class="cta">
        <h2>Think you may have a case?</h2>
        <p>Consultations are free and confidential. There is no fee unless we win.</p>
        <a class="cta-btn" href="#consult">Request a free consultation</a>
      </section>

      <footer class="disclaimer">
        <p>
          Results shown are illustrative placeholders. Prior outcomes do not guarantee or predict a
          similar result in any future matter. This page is not legal advice.
        </p>
      </footer>
    </main>

    <script src="script.js"></script>
  </body>
</html>

Case Results

A trust-first results page for a law firm. It opens with a navy stat band — total recovered for clients, cases won, years in practice — framed by thin gold rules, then presents a filterable, sortable list of case-result cards. Each card leads with the outcome amount or verdict, a practice-area tag, a concise summary and the year the matter resolved.

Gold filter chips narrow the list by practice area client-side and announce the visible count to assistive tech. A select control lets visitors sort by largest amount or most recent year. The palette pairs navy and warm paper with a restrained gold accent, serif headings and Inter body text for a classic, generous-whitespace feel.

Every interaction is vanilla JavaScript — no libraries, no build step. Filtering and sorting are keyboard accessible, preserve focus styles and collapse gracefully on narrow screens.

Illustrative UI only — placeholder results, not affiliated with any real law firm and not legal advice.