Website kits
Law firm home page
Hero with a who-we-help statement and consultation button, six practice area cards, a four-step process, an approach band, a client quote and a CTA.
When to use it
Written for a small general-practice firm whose clients are individuals and small businesses rather than corporations. The hero answers the first question a visitor has, which is whether you handle their kind of problem and where, in one headline, then offers a free consultation before anything else. The six practice area cards follow so people can recognize their own situation, with a last card for anyone who cannot. The four steps explain what happens after the first call, which is what makes many people hesitate to contact a lawyer at all, and the navy band turns vague promises into checkable commitments such as written fees and next-day replies. The client quote is generic and anonymous on purpose. Replace the hero headline and city first, then the practice cards. Before publishing any testimonial, check your state bar’s rules: several states restrict client testimonials or require a disclaimer next to them, which is why one sits under the quote.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 22
- Container (grid) × 3
- Container (grid, 3 columns) × 1
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 21
- Heading × 9
- Button × 4
- Image × 1
- Icon Box × 6
- Icon List × 1
- Testimonial × 1
Things worth knowing
- The six practice area cards become Icon Box widgets with the arrow on a filled circle (Font Awesome arrow-right), and the five commitments in the navy band become one Icon List widget with check icons.
- The client quote becomes a Testimonial widget with the name and role filled in. The permission and past-results line under it stays a separate Text Editor, so it is not lost if you replace the quote.
- Step numbers are written as text (“Step 1”), not CSS counters, so they come across as Text Editor widgets instead of disappearing.
- The hero image is an Image widget pointing at the library URL; upload your own photo and replace it. Below 780px every grid becomes one column and the image moves under the hero text.
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 home 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:80px;padding-bottom:80px}
h1,h2,h3{font-family:'Libre Baskerville',Georgia,serif;color:#1d2b3e;font-weight:700}
h1{font-size:46px;line-height:1.18;margin:0 0 20px;color:#ffffff}
h2{font-size:32px;line-height:1.25;margin:0 0 14px}
h3{font-size:19px;line-height:1.35;margin:0 0 10px}
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}
.button-line{display:inline-block;padding:14px 25px;border:1px solid #ddd5c4;color:#ffffff;text-decoration:none;border-radius:4px;font-weight:700;font-size:16px}
.button-dark{display:inline-block;padding:14px 25px;border:1px solid #1d2b3e;color:#1d2b3e;text-decoration:none;border-radius:4px;font-weight:700;font-size:16px}
.hero{background:#1d2b3e}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.hero p{color:#ddd5c4}
.hero .eyebrow{color:#ddd5c4}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 22px}
.hero .small{font-size:15px;margin:0}
.hero-img{display:block;width:100%;height:440px;object-fit:cover;border-radius:4px;background:#566273}
.intro{max-width:700px;margin-bottom:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.area{background:#ffffff;border:1px solid #ddd5c4;border-radius:4px;padding:30px}
.area .icon{display:inline-block;width:44px;height:44px;line-height:44px;text-align:center;border-radius:50%;background:#f8f4ec;color:#8c6d3a;font-size:18px;margin-bottom:18px}
.area p,.step p{margin:0;font-size:16px}
.more{margin-top:34px}
.steps-band{background:#ffffff;border-top:1px solid #ddd5c4;border-bottom:1px solid #ddd5c4}
.step{border-top:3px solid #8c6d3a;padding-top:20px}
.step .num{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#8c6d3a;margin:0 0 8px}
.approach{background:#1d2b3e}
.approach .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.approach h2{color:#ffffff}
.approach p{color:#ddd5c4}
.checks{display:flex;flex-direction:column;gap:16px}
.checks div{display:flex;gap:14px;align-items:flex-start;color:#ffffff;font-size:17px;line-height:1.6}
.checks span{color:#8c6d3a;font-size:16px;line-height:1.7}
.quote-wrap{max-width:820px;margin:0 auto;text-align:center}
.testimonial{margin:0}
.testimonial blockquote{margin:0 0 22px;font-family:'Libre Baskerville',Georgia,serif;font-size:24px;line-height:1.6;color:#1d2b3e}
.testimonial strong{display:block;color:#1d2b3e;font-size:16px}
.testimonial span{display:block;color:#566273;font-size:15px;margin-top:4px}
.quote-note{font-size:14px;margin:26px 0 0}
.cta{background:#ffffff;border-top:1px solid #ddd5c4}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:40px;align-items:center}
.cta-side{text-align:right}
.cta-side p{margin:12px 0 0;font-size:15px}
@media(max-width:780px){
section{padding-top:56px;padding-bottom:56px}
.hero .wrap,.grid-3,.grid-4,.approach .wrap,.cta .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
h1{font-size:33px}h2{font-size:26px}
.hero-img{height:260px}
.testimonial blockquote{font-size:20px}
.cta-side{text-align:left}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Wrenfield & Osei · Columbus, Ohio</p>
<h1>Clear legal advice for families and small businesses in central Ohio</h1>
<p>We help people write wills and trusts, settle a parent’s estate, buy or sell a home, and set up or protect a small business. You get a plain-English plan and a written fee before any work starts.</p>
<div class="actions">
<a class="button" href="/consultation/">Book a free consultation</a>
<a class="button-line" href="/practice-areas/">See practice areas</a>
</div>
<p class="small">The first call is free and lasts up to 30 minutes. Tuesday evening appointments available.</p>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/law/client-meeting.jpg" width="1600" height="1000" alt="Attorney and two clients reviewing papers together at a wooden conference table">
</div>
</section>
<section>
<div class="wrap">
<div class="intro">
<p class="eyebrow">Practice areas</p>
<h2>What we can help with</h2>
<p>Most of our clients come to us at a turning point: a new business, a new home, a death in the family or a problem at work. These are the matters we handle every week.</p>
</div>
<div class="grid-3">
<div class="area"><span class="icon">→</span><h3>Business formation and contracts</h3><p>LLC and corporation setup, operating agreements, and review of leases, vendor and client contracts.</p></div>
<div class="area"><span class="icon">→</span><h3>Wills and estate planning</h3><p>Wills, revocable trusts, powers of attorney and health care directives, reviewed with you line by line.</p></div>
<div class="area"><span class="icon">→</span><h3>Probate and estate administration</h3><p>Guidance for executors from the first court filing to the final distribution to heirs.</p></div>
<div class="area"><span class="icon">→</span><h3>Residential real estate</h3><p>Purchase agreements, title questions, closings and disputes between buyers and sellers.</p></div>
<div class="area"><span class="icon">→</span><h3>Employment matters</h3><p>Severance agreement review, non-compete questions and workplace policies for small employers.</p></div>
<div class="area"><span class="icon">→</span><h3>Not sure where it fits?</h3><p>Describe the situation on the consultation form and we will tell you whether we can help, or who can.</p></div>
</div>
<div class="more"><a class="button-dark" href="/practice-areas/">Fees and details for each area</a></div>
</div>
</section>
<section class="steps-band">
<div class="wrap">
<div class="intro">
<p class="eyebrow">How a matter works</p>
<h2>From first call to a closed file</h2>
<p>Every matter follows the same four steps, so you always know what happens next and what it will cost.</p>
</div>
<div class="grid-4">
<div class="step"><p class="num">Step 1</p><h3>Free first call</h3><p>Up to 30 minutes to describe the situation. We check for conflicts of interest before we discuss details.</p></div>
<div class="step"><p class="num">Step 2</p><h3>Written engagement</h3><p>A short letter setting out the scope of work, who handles it and the fixed fee or hourly estimate.</p></div>
<div class="step"><p class="num">Step 3</p><h3>The work itself</h3><p>Drafts and updates arrive by email, with a call whenever a decision is yours to make.</p></div>
<div class="step"><p class="num">Step 4</p><h3>Closing the file</h3><p>Signed originals, a summary of what was done and a note of any dates you need to remember.</p></div>
</div>
</div>
</section>
<section class="approach">
<div class="wrap">
<div>
<p class="eyebrow">Our approach</p>
<h2>A small firm, on purpose</h2>
<p>Four attorneys and two paralegals, all in one office. The attorney you meet at the first appointment is the one who handles your matter, and you can reach them directly.</p>
<p>Every attorney here is admitted to practice in Ohio and completes continuing legal education each year in the areas they practice.</p>
</div>
<div class="checks">
<div><span>✓</span>Fees agreed in writing before any work begins</div>
<div><span>✓</span>Replies to calls and emails within one business day</div>
<div><span>✓</span>Documents explained in plain English before you sign</div>
<div><span>✓</span>Client funds held in a separate trust account</div>
<div><span>✓</span>An honest answer if your matter needs a different firm</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="quote-wrap">
<figure class="testimonial">
<blockquote>“They explained the probate process in one meeting, sent a timeline the next day and told us what each stage would cost. We never had to chase anyone for an update.”</blockquote>
<figcaption><strong>Executor of a family estate</strong><span>Probate and estate administration client</span></figcaption>
</figure>
<p class="quote-note">Client comment shared with permission. Every matter is different, and past client experiences do not guarantee a similar outcome.</p>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<div>
<h2>Talk through your situation before you decide anything</h2>
<p>Tell us briefly what is happening. We will confirm there is no conflict of interest, then call you to arrange a free first consultation.</p>
</div>
<div class="cta-side">
<a class="button" href="/consultation/">Request a consultation</a>
<p>Or call (614) 555-0142</p>
</div>
</div>
</section>
</body>
</html>