Pages Medium

Law Firm — Practice Areas

An authoritative law-firm practice-areas overview page with a navy hero strip, gold filter chips that live-filter a responsive grid of eight practice cards (Corporate, Litigation, Family, Real Estate, Criminal, IP, Employment, Estate), each with icon, blurb and link, plus a consultation CTA band.

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: #e3ddd1;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 27, 51, 0.06), 0 8px 24px rgba(16, 27, 51, 0.06);
  --serif: "Georgia", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%);
  color: var(--white);
  padding: 4.5rem 1.5rem 4rem;
}
.hero__inner { max-width: 880px; margin: 0 auto; }
.hero__eyebrow {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 1.2rem;
}
.hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.4rem;
}
.hero__lede {
  margin: 0;
  max-width: 56ch;
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Page wrap ---------- */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 1.5rem 0;
}

/* ---------- Filters ---------- */
.filters { margin-bottom: 2.2rem; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.chip {
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.chip:active { transform: translateY(1px); }
.chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.filters__count {
  margin: 1rem 0 0;
  font-size: .85rem;
  color: var(--muted);
}

/* ---------- Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 1.4rem;
}
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem 1.6rem;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card::before {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem; top: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(16, 27, 51, 0.12);
  border-color: var(--gold-soft);
}
.card:hover::before { transform: scaleX(1); }
.card[hidden] { display: none; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--navy);
  margin-bottom: 1.1rem;
}
.card__icon svg { width: 24px; height: 24px; }
.card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.28rem;
  margin: 0 0 .55rem;
  color: var(--navy);
}
.card__desc {
  margin: 0 0 1.2rem;
  font-size: .92rem;
  color: var(--muted);
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.card__link span { transition: transform .18s ease; }
.card__link:hover { color: var(--gold); }
.card__link:hover span { transform: translateX(4px); }

.grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  padding: 2.5rem 0;
}

/* ---------- CTA band ---------- */
.cta {
  margin: 4rem 0 0;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%);
  color: var(--white);
}
.cta__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3.6rem 1.5rem;
  text-align: center;
}
.cta__rule {
  display: inline-block;
  width: 56px; height: 2px;
  background: var(--gold);
  margin-bottom: 1.4rem;
}
.cta__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 .9rem;
}
.cta__text {
  margin: 0 auto 1.8rem;
  max-width: 50ch;
  color: rgba(255, 255, 255, 0.8);
}
.cta__btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-d);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  padding: .85rem 2rem;
  border-radius: var(--radius);
  transition: background .18s ease, transform .12s ease;
}
.cta__btn:hover { background: #c69e64; }
.cta__btn:active { transform: translateY(1px); }

/* ---------- Footer ---------- */
.foot {
  text-align: center;
  padding: 1.8rem 1.5rem;
  font-size: .82rem;
  color: var(--muted);
  background: var(--bg);
}
.foot p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .hero { padding: 3.2rem 1.2rem 2.8rem; }
  .page { padding: 2.2rem 1.2rem 0; }
  .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .chips { gap: .5rem; }
  .chip { font-size: .82rem; padding: .45rem .9rem; }
  .cta__inner { padding: 2.8rem 1.2rem; }
}

(function () {
  "use strict";

  var chips = Array.prototype.slice.call(document.querySelectorAll(".chip"));
  var cards = Array.prototype.slice.call(document.querySelectorAll(".card"));
  var count = document.getElementById("resultCount");
  var empty = document.getElementById("emptyState");
  var total = cards.length;

  function label(area) {
    var chip = chips.find(function (c) { return c.dataset.area === area; });
    return chip ? chip.textContent.trim() : area;
  }

  function applyFilter(area) {
    var visible = 0;

    cards.forEach(function (card) {
      var match = area === "all" || card.dataset.area === area;
      card.hidden = !match;
      if (match) { visible += 1; }
    });

    // Toggle active chip state
    chips.forEach(function (chip) {
      var active = chip.dataset.area === area;
      chip.classList.toggle("is-active", active);
      chip.setAttribute("aria-pressed", active ? "true" : "false");
    });

    // Empty state + live count
    if (empty) { empty.hidden = visible !== 0; }
    if (count) {
      if (area === "all") {
        count.textContent = "Showing all " + total + " practice areas";
      } else if (visible === 0) {
        count.textContent = "No practice areas match “" + label(area) + "”";
      } else {
        count.textContent =
          "Showing " + visible + " of " + total + " — " + label(area);
      }
    }
  }

  chips.forEach(function (chip) {
    chip.addEventListener("click", function () {
      applyFilter(chip.dataset.area);
    });
  });

  // Initial state
  applyFilter("all");
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hartwell &amp; Reyes LLP — Practice Areas</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="hero">
    <div class="hero__inner">
      <p class="hero__eyebrow">Hartwell &amp; Reyes LLP</p>
      <h1 class="hero__title">Practice Areas</h1>
      <span class="hero__rule" aria-hidden="true"></span>
      <p class="hero__lede">
        Counsel built on four decades of courtroom and boardroom experience. Explore the
        disciplines our attorneys handle for clients across the region.
      </p>
    </div>
  </header>

  <main class="page">
    <section class="filters" aria-label="Filter practice areas">
      <h2 class="visually-hidden">Filter by area</h2>
      <div class="chips" role="group" aria-label="Practice area filters">
        <button class="chip is-active" type="button" data-area="all" aria-pressed="true">All areas</button>
        <button class="chip" type="button" data-area="corporate" aria-pressed="false">Corporate</button>
        <button class="chip" type="button" data-area="litigation" aria-pressed="false">Litigation</button>
        <button class="chip" type="button" data-area="family" aria-pressed="false">Family</button>
        <button class="chip" type="button" data-area="realestate" aria-pressed="false">Real Estate</button>
        <button class="chip" type="button" data-area="criminal" aria-pressed="false">Criminal</button>
        <button class="chip" type="button" data-area="ip" aria-pressed="false">IP</button>
        <button class="chip" type="button" data-area="employment" aria-pressed="false">Employment</button>
        <button class="chip" type="button" data-area="estate" aria-pressed="false">Estate</button>
      </div>
      <p class="filters__count" id="resultCount" aria-live="polite">Showing all 8 practice areas</p>
    </section>

    <section class="grid" aria-label="Practice areas">
      <article class="card" data-area="corporate">
        <span class="card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="8" width="18" height="12" rx="1"/><path d="M8 8V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3M3 13h18"/></svg>
        </span>
        <h3 class="card__title">Corporate &amp; Commercial</h3>
        <p class="card__desc">Formation, M&amp;A, financing rounds and governance for founders, boards and growth-stage companies.</p>
        <a class="card__link" href="#corporate">Learn more <span aria-hidden="true">&rarr;</span></a>
      </article>

      <article class="card" data-area="litigation">
        <span class="card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 7l6 2M21 7l-6 2M6 9l-3 6h6l-3-6Zm12 0l-3 6h6l-3-6ZM12 4v15M7 20h10"/></svg>
        </span>
        <h3 class="card__title">Litigation &amp; Disputes</h3>
        <p class="card__desc">Strategic representation in commercial, contract and tort disputes — from mediation through trial and appeal.</p>
        <a class="card__link" href="#litigation">Learn more <span aria-hidden="true">&rarr;</span></a>
      </article>

      <article class="card" data-area="family">
        <span class="card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="16" cy="8" r="3"/><path d="M3 20c0-3 2-5 5-5s5 2 5 5M13 20c.3-2.4 1.9-4 4-4s3.7 1.6 4 4"/></svg>
        </span>
        <h3 class="card__title">Family Law</h3>
        <p class="card__desc">Compassionate guidance through divorce, custody, support and prenuptial agreements with discretion.</p>
        <a class="card__link" href="#family">Learn more <span aria-hidden="true">&rarr;</span></a>
      </article>

      <article class="card" data-area="realestate">
        <span class="card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 11l8-6 8 6M6 10v9h12v-9M10 19v-5h4v5"/></svg>
        </span>
        <h3 class="card__title">Real Estate</h3>
        <p class="card__desc">Acquisitions, leasing, zoning and closings for residential, commercial and development clients.</p>
        <a class="card__link" href="#realestate">Learn more <span aria-hidden="true">&rarr;</span></a>
      </article>

      <article class="card" data-area="criminal">
        <span class="card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3l7 4v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V7l7-4Z"/><path d="M9 12l2 2 4-4"/></svg>
        </span>
        <h3 class="card__title">Criminal Defense</h3>
        <p class="card__desc">Vigorous defense for state and federal charges, with around-the-clock counsel and protected rights.</p>
        <a class="card__link" href="#criminal">Learn more <span aria-hidden="true">&rarr;</span></a>
      </article>

      <article class="card" data-area="ip">
        <span class="card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3a6 6 0 0 0-3 11.2V17h6v-2.8A6 6 0 0 0 12 3ZM9 20h6M10 17v3M14 17v3"/></svg>
        </span>
        <h3 class="card__title">Intellectual Property</h3>
        <p class="card__desc">Trademark, copyright and patent strategy, plus licensing and enforcement to protect your ideas.</p>
        <a class="card__link" href="#ip">Learn more <span aria-hidden="true">&rarr;</span></a>
      </article>

      <article class="card" data-area="employment">
        <span class="card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="8" width="18" height="12" rx="1"/><path d="M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18"/></svg>
        </span>
        <h3 class="card__title">Employment &amp; Labor</h3>
        <p class="card__desc">Contracts, compliance, workplace policy and dispute resolution for employers and executives alike.</p>
        <a class="card__link" href="#employment">Learn more <span aria-hidden="true">&rarr;</span></a>
      </article>

      <article class="card" data-area="estate">
        <span class="card__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 3h8l4 4v14H7zM15 3v4h4"/><path d="M10 12h6M10 16h6"/></svg>
        </span>
        <h3 class="card__title">Estate Planning</h3>
        <p class="card__desc">Wills, trusts, probate and succession planning to preserve wealth across generations.</p>
        <a class="card__link" href="#estate">Learn more <span aria-hidden="true">&rarr;</span></a>
      </article>

      <p class="grid__empty" id="emptyState" hidden>No practice areas match that filter.</p>
    </section>

    <section class="cta">
      <div class="cta__inner">
        <span class="cta__rule" aria-hidden="true"></span>
        <h2 class="cta__title">Speak with an attorney</h2>
        <p class="cta__text">
          Your first 30-minute consultation is complimentary and fully confidential. Tell us about
          your matter and we will connect you with the right partner.
        </p>
        <a class="cta__btn" href="#book">Book a consultation</a>
      </div>
    </section>
  </main>

  <footer class="foot">
    <p>Hartwell &amp; Reyes LLP &middot; 412 Marshall Avenue, Suite 1900 &middot; (212) 555-0147</p>
  </footer>

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

Practice Areas

An authoritative, trust-first overview page for a law firm’s practice areas. A navy hero strip with a thin gold rule sets the tone, followed by a row of gold filter chips (Corporate, Litigation, Family, and more) that instantly filter the card grid client-side and announce the visible count to assistive tech.

Each of the eight practice cards leads with a line-art icon, a clear heading, a concise blurb and a Learn more link with an animated underline. A closing CTA band invites visitors to book a free consultation. The palette pairs navy and warm paper with a restrained gold accent, serif headings and Inter body text for a classic, generous-whitespace feel.

All interactions are vanilla JavaScript — no libraries, no build step. The filter is keyboard accessible, respects focus styles, and collapses gracefully on narrow screens.

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