Pages Medium

Law Firm — Attorney Profile

A trust-first attorney profile page with avatar, title and contact header, a detailed bio, education, bar admissions, notable cases and languages, plus a sidebar listing practice areas and a Request a consultation button that toggles an inline mini intake form.

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(27, 42, 74, 0.12);
  --serif: "Georgia", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(16, 27, 51, 0.08);
}

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

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

a { color: inherit; }

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

/* topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--gold-soft);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.5px;
}
.brand-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--navy);
  letter-spacing: 0.3px;
}
.brand-name em { color: var(--gold); font-style: normal; }
.topnav { display: flex; gap: 26px; }
.topnav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.topnav a:hover { color: var(--navy); border-color: var(--gold); }

/* breadcrumb */
.crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  padding: 18px 0;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

/* layout */
.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

/* bio header */
.bio-head {
  display: flex;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--gold);
}
.avatar {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--navy), var(--navy-d));
  color: var(--gold-soft);
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing: 1px;
  box-shadow: var(--shadow);
}
.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
}
.bio-id h1 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.15;
  color: var(--navy);
}
.pronoun { margin: 0 0 14px; color: var(--muted); }
.contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 14px;
}
.contact .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-right: 6px;
}
.contact a { color: var(--navy); text-decoration: none; }
.contact a:hover { color: var(--gold); text-decoration: underline; }

/* content blocks */
.block {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.block--last { border-bottom: none; }
.block h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--navy);
}
.block p { margin: 0 0 12px; color: var(--ink); }
.block p:last-child { margin-bottom: 0; }

/* cases */
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cases li {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.case-title { margin: 0 0 4px; font-weight: 600; color: var(--navy); }
.case-desc { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 999px;
}
.badge--win { background: rgba(46, 125, 80, 0.12); color: #2e7d50; }
.badge--neutral { background: var(--gold-soft); color: #8a6d3b; }

/* rows */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rows li { display: flex; flex-direction: column; }
.row-main { font-weight: 600; color: var(--navy); }
.row-sub { font-size: 14px; color: var(--muted); }
.row-sub em { font-style: italic; }

/* chips */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
}
.chips--inline li { background: var(--gold-soft); border-color: transparent; color: #6f5630; }

/* sidebar */
.sidebar { display: grid; gap: 20px; position: sticky; top: 22px; }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-h {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--navy);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold);
}
.card--cta { background: linear-gradient(165deg, var(--navy), var(--navy-d)); border-color: transparent; }
.card--cta .card-h { color: var(--gold-soft); border-color: rgba(176, 141, 87, 0.5); }
.card-note { margin: 0 0 16px; font-size: 13px; color: rgba(239, 227, 207, 0.8); }

/* buttons */
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  padding: 11px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
.btn--gold {
  width: 100%;
  background: var(--gold);
  color: var(--navy-d);
}
.btn--gold:hover { background: #c79c63; box-shadow: 0 6px 16px rgba(176, 141, 87, 0.4); }
.btn--ghost {
  background: transparent;
  color: var(--gold-soft);
  border-color: rgba(239, 227, 207, 0.4);
}
.btn--ghost:hover { background: rgba(239, 227, 207, 0.1); }

/* consult form */
.consult { margin-top: 16px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--gold-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(239, 227, 207, 0.5);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.3);
}
.form-actions { display: flex; gap: 10px; }
.form-actions .btn { width: auto; flex: 1; }
.form-status {
  margin: 0;
  font-size: 13px;
  min-height: 1px;
  color: var(--gold-soft);
}
.form-status.is-ok { color: #9fe0b6; font-weight: 600; }
.form-status.is-err { color: #f3b0a8; font-weight: 600; }

/* footer */
.foot {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* responsive */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; gap: 28px; }
  .sidebar { position: static; }
}

@media (max-width: 520px) {
  .page { padding: 0 16px 40px; }
  .topnav { display: none; }
  .bio-head { flex-direction: column; gap: 16px; }
  .avatar { width: 84px; height: 84px; font-size: 28px; }
  .bio-id h1 { font-size: 27px; }
  .contact { gap: 6px 16px; }
  .form-actions { flex-direction: column; }
}

(function () {
  "use strict";

  var ctaBtn = document.getElementById("ctaBtn");
  var form = document.getElementById("consultForm");
  var cancelBtn = document.getElementById("cancelBtn");
  var status = document.getElementById("formStatus");

  if (!ctaBtn || !form) return;

  function openForm() {
    form.hidden = false;
    ctaBtn.setAttribute("aria-expanded", "true");
    ctaBtn.hidden = true;
    var first = document.getElementById("cf-name");
    if (first) first.focus();
  }

  function closeForm() {
    form.hidden = true;
    ctaBtn.hidden = false;
    ctaBtn.setAttribute("aria-expanded", "false");
    ctaBtn.focus();
  }

  ctaBtn.addEventListener("click", openForm);

  if (cancelBtn) {
    cancelBtn.addEventListener("click", function () {
      setStatus("", "");
      closeForm();
    });
  }

  function setStatus(msg, kind) {
    status.textContent = msg;
    status.classList.remove("is-ok", "is-err");
    if (kind) status.classList.add(kind);
  }

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    var name = document.getElementById("cf-name");
    var email = document.getElementById("cf-email");
    var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!name.value.trim()) {
      setStatus("Please enter your name.", "is-err");
      name.focus();
      return;
    }
    if (!emailRe.test(email.value.trim())) {
      setStatus("Please enter a valid email address.", "is-err");
      email.focus();
      return;
    }

    var first = name.value.trim().split(/\s+/)[0];
    setStatus(
      "Thank you, " + first + ". Eleanor's office will reply within one business day.",
      "is-ok"
    );
    form.querySelectorAll("input, select, textarea").forEach(function (el) {
      el.value = "";
    });
  });

  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && !form.hidden) closeForm();
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Eleanor M. Hartwell — Hartwell &amp; Crane LLP</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="page">
    <header class="topbar">
      <a class="brand" href="#" aria-label="Hartwell and Crane LLP home">
        <span class="brand-mark" aria-hidden="true">H&amp;C</span>
        <span class="brand-name">Hartwell &amp; Crane <em>LLP</em></span>
      </a>
      <nav class="topnav" aria-label="Primary">
        <a href="#">Attorneys</a>
        <a href="#">Practices</a>
        <a href="#">Insights</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <nav class="crumbs" aria-label="Breadcrumb">
      <a href="#">Attorneys</a>
      <span aria-hidden="true">/</span>
      <span aria-current="page">Eleanor M. Hartwell</span>
    </nav>

    <main class="layout">
      <article class="profile">
        <header class="bio-head">
          <div class="avatar" aria-hidden="true">EH</div>
          <div class="bio-id">
            <p class="eyebrow">Partner &amp; Co-Chair, Litigation</p>
            <h1>Eleanor M. Hartwell</h1>
            <p class="pronoun">Commercial Litigation &amp; Appellate Practice</p>
            <ul class="contact" aria-label="Contact details">
              <li><span class="lbl">Office</span> New York, NY</li>
              <li><span class="lbl">Direct</span> <a href="tel:+12125550148">+1 (212) 555-0148</a></li>
              <li><span class="lbl">Email</span> <a href="mailto:[email protected]">[email protected]</a></li>
            </ul>
          </div>
        </header>

        <section class="block" aria-labelledby="overview-h">
          <h2 id="overview-h">Overview</h2>
          <p>
            Eleanor Hartwell is a partner in the firm's New York office and co-chair of the
            Litigation department, where she has spent more than eighteen years representing
            financial institutions, technology companies and individual executives in high-stakes
            commercial disputes. She is recognized for guiding clients through bet-the-company
            litigation, regulatory investigations and complex appellate matters.
          </p>
          <p>
            Clients describe her as a calm, precise advocate who reduces dense factual records into
            clear narratives that resonate with judges and juries alike. She has tried more than
            forty matters to verdict and argued before five federal courts of appeals.
          </p>
        </section>

        <section class="block" aria-labelledby="cases-h">
          <h2 id="cases-h">Notable matters</h2>
          <ul class="cases">
            <li>
              <p class="case-title">Meridian Capital v. Oakline Holdings</p>
              <p class="case-desc">Secured a defense verdict in a $240M breach-of-contract action after a six-week jury trial in the Southern District of New York.</p>
              <span class="badge badge--win">Defense verdict</span>
            </li>
            <li>
              <p class="case-title">In re Velocity Robotics Securities Litigation</p>
              <p class="case-desc">Obtained dismissal with prejudice of a putative class action alleging disclosure violations following an IPO.</p>
              <span class="badge badge--win">Dismissed</span>
            </li>
            <li>
              <p class="case-title">Northbridge Bank — SEC Inquiry</p>
              <p class="case-desc">Led the internal investigation and response to a formal SEC inquiry, resolved with no enforcement action.</p>
              <span class="badge badge--neutral">No action</span>
            </li>
            <li>
              <p class="case-title">Carter v. Lumen Health Systems</p>
              <p class="case-desc">Argued and won reversal at the Second Circuit, reinstating the client's $18M judgment on appeal.</p>
              <span class="badge badge--win">Reversed on appeal</span>
            </li>
          </ul>
        </section>

        <section class="block" aria-labelledby="edu-h">
          <h2 id="edu-h">Education</h2>
          <ul class="rows">
            <li><span class="row-main">Columbia Law School</span><span class="row-sub">J.D., 2006 — <em>magna cum laude</em>, Stone Scholar</span></li>
            <li><span class="row-main">Georgetown University</span><span class="row-sub">B.A. in Government, 2003 — <em>summa cum laude</em></span></li>
          </ul>
        </section>

        <section class="block" aria-labelledby="bar-h">
          <h2 id="bar-h">Bar admissions &amp; courts</h2>
          <ul class="rows">
            <li><span class="row-main">New York</span><span class="row-sub">Admitted 2006</span></li>
            <li><span class="row-main">U.S. District Court, S.D.N.Y. &amp; E.D.N.Y.</span><span class="row-sub">Admitted 2007</span></li>
            <li><span class="row-main">U.S. Court of Appeals, Second Circuit</span><span class="row-sub">Admitted 2009</span></li>
          </ul>
        </section>

        <section class="block block--last" aria-labelledby="lang-h">
          <h2 id="lang-h">Languages</h2>
          <ul class="chips chips--inline">
            <li>English</li>
            <li>French</li>
            <li>Spanish</li>
          </ul>
        </section>
      </article>

      <aside class="sidebar" aria-label="Practice areas and consultation">
        <section class="card">
          <h2 class="card-h">Practice areas</h2>
          <ul class="chips">
            <li>Commercial Litigation</li>
            <li>Appellate Practice</li>
            <li>Securities Defense</li>
            <li>Regulatory &amp; Enforcement</li>
            <li>Internal Investigations</li>
            <li>Arbitration</li>
          </ul>
        </section>

        <section class="card card--cta">
          <h2 class="card-h">Request a consultation</h2>
          <p class="card-note">Confidential, no obligation. Eleanor's office typically replies within one business day.</p>
          <button class="btn btn--gold" id="ctaBtn" type="button" aria-expanded="false" aria-controls="consultForm">
            Request a consultation
          </button>

          <form class="consult" id="consultForm" hidden novalidate>
            <div class="field">
              <label for="cf-name">Full name</label>
              <input id="cf-name" name="name" type="text" autocomplete="name" placeholder="Jordan Avery" required />
            </div>
            <div class="field">
              <label for="cf-email">Email</label>
              <input id="cf-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required />
            </div>
            <div class="field">
              <label for="cf-matter">Matter type</label>
              <select id="cf-matter" name="matter">
                <option value="">Select a practice area</option>
                <option>Commercial Litigation</option>
                <option>Appellate Practice</option>
                <option>Securities Defense</option>
                <option>Regulatory &amp; Enforcement</option>
                <option>Other</option>
              </select>
            </div>
            <div class="field">
              <label for="cf-msg">Brief description</label>
              <textarea id="cf-msg" name="message" rows="3" placeholder="A few sentences about your situation."></textarea>
            </div>
            <div class="form-actions">
              <button class="btn btn--gold" type="submit">Send request</button>
              <button class="btn btn--ghost" type="button" id="cancelBtn">Cancel</button>
            </div>
            <p class="form-status" id="formStatus" role="status" aria-live="polite"></p>
          </form>
        </section>
      </aside>
    </main>

    <footer class="foot">
      <p>Hartwell &amp; Crane LLP · Attorney advertising. Prior results do not guarantee a similar outcome.</p>
    </footer>
  </div>

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

Attorney Profile

An authoritative single-attorney profile page for a law firm. The header pairs a serif name and title with a contact block, while the main column walks through a substantive bio, education, bar admissions, a list of notable representative matters and spoken languages — all set in generous whitespace and divided by thin gold rules.

The sidebar lists the attorney’s practice areas as chips and surfaces a Request a consultation call to action. Clicking it slides open an inline mini intake form, complete with focus styles, labelled fields and a vanilla-JS confirmation state. No libraries are used.

Illustrative UI only — not legal advice and not a substitute for a licensed attorney.