Website kits
Law firm attorneys page
Four attorney profile cards with portraits, a bar admissions and education section, four firm values and a consultation call to action.
When to use it
For firms small enough that clients choose a person rather than a brand. The profile cards come first because the first question on this page is who the visitor would actually be dealing with; each card stays short, with a name, a role and two practice areas, so the grid reads at a glance. Admissions and education sit in their own section below instead of being squeezed into each card, which keeps the cards clean and gives the credentials room to be read properly. The values section sets out commitments a client can hold the firm to, and the closing call to action promises a match with the right attorney. Replace the names, portraits and admission years first, and use recent photos taken in similar light so the grid looks consistent. List each attorney’s jurisdictions and admission years exactly as the licensing court records them, because prospective clients do look attorneys up in the state directory.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 18
- Container (grid, 4 columns) × 1
- Container (grid, 2 columns) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 11
- Heading × 8
- Image Box × 4
- Icon List × 4
- Icon Box × 4
- Button × 1
Things worth knowing
- Each attorney card (portrait, name and one-line summary) becomes an Image Box widget. The portraits keep a fixed 320px height with object-fit cover, so differently cropped photos still line up.
- Admissions and education are four Icon List widgets with a small circle icon, one per attorney, so you can add or remove a line without touching the layout.
- The four firm values become Icon Box widgets with the icon on a filled gold circle.
- The four-column profile grid and the two-column credential and value grids become a single column below 780px.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Law firm attorneys page</title>
<style>
body{margin:0;font-family:'Source Sans 3',Arial,sans-serif;color:#566273;background:#f8f4ec}
.wrap{max-width:1140px;margin:0 auto;padding-left:24px;padding-right:24px}
section{padding-top:76px;padding-bottom:76px}
h1,h2,h3{font-family:'Libre Baskerville',Georgia,serif;color:#1d2b3e;font-weight:700}
h1{font-size:44px;line-height:1.2;margin:0 0 18px}
h2{font-size:30px;line-height:1.25;margin:0 0 14px}
h3{font-size:19px;line-height:1.35;margin:0 0 8px}
p{font-size:17px;line-height:1.75;margin:0 0 16px}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#8c6d3a;margin:0 0 12px}
.button{display:inline-block;padding:15px 26px;background:#8c6d3a;color:#ffffff;text-decoration:none;border-radius:4px;font-weight:700;font-size:16px}
.hero{padding-top:64px;padding-bottom:40px}
.hero .wrap > div{max-width:760px}
.team{padding-top:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.person{background:#ffffff;border:1px solid #ddd5c4;border-radius:4px;padding:0 0 24px}
.person img{display:block;width:100%;height:320px;object-fit:cover;border-radius:4px 4px 0 0;background:#ddd5c4;margin-bottom:20px}
.person h3{padding:0 22px}
.person p{padding:0 22px;margin:0;font-size:15px;line-height:1.6}
.creds-band{background:#ffffff;border-top:1px solid #ddd5c4;border-bottom:1px solid #ddd5c4}
.intro{max-width:720px;margin-bottom:36px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cred{border:1px solid #ddd5c4;border-radius:4px;padding:28px;background:#f8f4ec}
.cred h3{margin-bottom:6px}
.cred .role{font-size:15px;margin:0 0 16px;color:#8c6d3a;font-weight:700}
.list{display:flex;flex-direction:column;gap:9px}
.list div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;color:#1d2b3e}
.list span{color:#8c6d3a;font-size:9px;line-height:2.8}
.values{background:#1d2b3e}
.values h2,.values h3{color:#ffffff}
.values .intro p{color:#ddd5c4}
.values .eyebrow{color:#ddd5c4}
.value{border:1px solid #566273;border-radius:4px;padding:28px}
.value .icon{display:inline-block;width:42px;height:42px;line-height:42px;text-align:center;border-radius:50%;background:#8c6d3a;color:#ffffff;font-size:16px;margin-bottom:16px}
.value p{color:#ddd5c4;margin:0;font-size:16px}
.cta{text-align:center}
.cta p{max-width:620px;margin:0 auto 26px}
@media(max-width:780px){
section{padding-top:54px;padding-bottom:54px}
.grid-4,.grid-2{grid-template-columns:minmax(0,1fr);gap:20px}
h1{font-size:32px}h2{font-size:25px}
.person img{height:360px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Attorneys</p>
<h1>The people who will handle your matter</h1>
<p>Wrenfield & Osei is four attorneys and two paralegals working from one office in Columbus. Each attorney focuses on two related areas of law, so the person you meet first is the person who does the work.</p>
</div>
</div>
</section>
<section class="team">
<div class="wrap">
<div class="grid-4">
<div class="person"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/law/attorney-ruth.jpg" width="1000" height="1250" alt="Portrait of a woman in her fifties in a navy suit, standing in a bright office"><h3>Ruth Wrenfield</h3><p>Founding partner. Estate planning, trusts and probate administration.</p></div>
<div class="person"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/law/attorney-kwame.jpg" width="1000" height="1250" alt="Portrait of a man in his forties in a gray suit and open-collar shirt, beside a bookshelf"><h3>Kwame Osei</h3><p>Partner. Business formation, commercial contracts and leases.</p></div>
<div class="person"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/law/attorney-laura.jpg" width="1000" height="1250" alt="Portrait of a woman in her thirties with shoulder-length hair, wearing a cream blazer"><h3>Laura Brennan</h3><p>Associate. Residential real estate and title questions.</p></div>
<div class="person"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/law/attorney-samuel.jpg" width="1000" height="1250" alt="Portrait of a man in his thirties with glasses, wearing a navy jacket, in a meeting room"><h3>Samuel Ibarra</h3><p>Associate. Employment agreements and workplace policies.</p></div>
</div>
</div>
</section>
<section class="creds-band">
<div class="wrap">
<div class="intro">
<p class="eyebrow">Admissions and education</p>
<h2>Licensed where we practice</h2>
<p>Every attorney at the firm is admitted to practice in Ohio and is in good standing. You can confirm any attorney’s status on the Supreme Court of Ohio attorney directory.</p>
</div>
<div class="grid-2">
<div class="cred">
<h3>Ruth Wrenfield</h3>
<p class="role">Founding partner</p>
<div class="list">
<div><span>●</span>Admitted to the Ohio bar, 2001</div>
<div><span>●</span>U.S. District Court, Southern District of Ohio</div>
<div><span>●</span>J.D., 2001 · B.A. in History, 1997</div>
</div>
</div>
<div class="cred">
<h3>Kwame Osei</h3>
<p class="role">Partner</p>
<div class="list">
<div><span>●</span>Admitted to the Ohio bar, 2007</div>
<div><span>●</span>U.S. District Court, Southern District of Ohio</div>
<div><span>●</span>J.D., 2007 · B.S. in Accounting, 2003</div>
</div>
</div>
<div class="cred">
<h3>Laura Brennan</h3>
<p class="role">Associate</p>
<div class="list">
<div><span>●</span>Admitted to the Ohio bar, 2016</div>
<div><span>●</span>Previously a title examiner for six years</div>
<div><span>●</span>J.D., 2016 · B.A. in Economics, 2009</div>
</div>
</div>
<div class="cred">
<h3>Samuel Ibarra</h3>
<p class="role">Associate</p>
<div class="list">
<div><span>●</span>Admitted to the Ohio bar, 2019</div>
<div><span>●</span>Conversational Spanish with clients</div>
<div><span>●</span>J.D., 2019 · B.A. in Political Science, 2015</div>
</div>
</div>
</div>
</div>
</section>
<section class="values">
<div class="wrap">
<div class="intro">
<p class="eyebrow">Firm values</p>
<h2>How we work with clients</h2>
<p>These are the habits we hold each other to. If we fall short on any of them, tell the attorney on your matter or either partner directly.</p>
</div>
<div class="grid-2">
<div class="value"><span class="icon">✓</span><h3>Fees in writing first</h3><p>No work starts until you have a signed engagement letter that states the scope and the fee or hourly estimate.</p></div>
<div class="value"><span class="icon">◎</span><h3>Plain-English advice</h3><p>We explain what a document does and what could go wrong before you sign it, not after.</p></div>
<div class="value"><span class="icon">↻</span><h3>Replies within a business day</h3><p>Calls and emails are answered by the next business day, even when the answer is that we need more time.</p></div>
<div class="value"><span class="icon">○</span><h3>Honest about fit</h3><p>If a matter is outside our experience, we say so at the first call and point you toward a firm that handles it.</p></div>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<h2>Talk to the attorney who handles your kind of matter</h2>
<p>Tell us what you need help with and we will match you with the right attorney for a free first consultation.</p>
<a class="button" href="/consultation/">Book a free consultation</a>
</div>
</section>
</body>
</html>