Website kits
Law firm practice areas page
Five practice areas with what is included, typical questions and a fee approach, a fixed fee and hourly billing explainer, and a fee FAQ accordion.
When to use it
The page where a visitor decides whether to call, so it answers the cost question directly instead of saying “contact us for pricing”. It opens with the three ways the firm bills (fixed fee, hourly, and a retainer held in trust) because a reader who understands the billing method reads every fee line below it correctly. Each of the five practice areas then follows the same pattern: who it is for, what is included, the questions clients actually ask, and a highlighted fee line. Those questions are also the phrases people type into search, which helps each section get found. The FAQ at the end covers contingency fees, retainers and guarantees, the points prospective clients most often misunderstand. Replace the fee figures before anything else; they are illustrative. Keep each fixed-fee scope specific, such as “up to 15 pages” or “including powers of attorney”, so a fixed price never turns into an argument about what it covered.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 23
- Container (grid) × 6
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 16
- Heading × 19
- Button × 2
- Image × 1
- Icon Box × 3
- Icon List × 10
- Accordion × 1
Things worth knowing
- The five FAQ items are built with <details> elements and convert to one Accordion widget (core Elementor, no Pro needed), with each answer editable in its own item.
- Each practice area’s “What’s included” and “Typical questions” lists become separate Icon List widgets, ten in total, with check and arrow icons.
- The three billing cards become Icon Box widgets. The fee line in each practice area is a Text Editor with a bold label, so prices are edited as plain text.
- Below 780px each practice area’s two columns stack, with the description and fee line above the two lists.
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 practice areas 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:18px;line-height:1.35;margin:0 0 12px}
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:64px;border-bottom:1px solid #ddd5c4}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:center}
.hero-img{display:block;width:100%;height:380px;object-fit:cover;border-radius:4px;background:#ddd5c4}
.fees{background:#ffffff;border-bottom:1px solid #ddd5c4}
.intro{max-width:720px;margin-bottom:38px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fee{background:#f8f4ec;border:1px solid #ddd5c4;border-radius:4px;padding:28px}
.fee .icon{display:inline-block;width:44px;height:44px;line-height:44px;text-align:center;border-radius:50%;background:#1d2b3e;color:#ffffff;font-size:17px;margin-bottom:16px}
.fee p{margin:0;font-size:16px}
.areas{display:flex;flex-direction:column;gap:26px}
.practice{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;background:#ffffff;border:1px solid #ddd5c4;border-radius:4px;padding:40px}
.fee-line{background:#f8f4ec;border-left:3px solid #8c6d3a;padding:14px 18px;font-size:16px;margin:20px 0 0}
.fee-line strong{color:#1d2b3e}
.list{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.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:15px;line-height:1.7}
.list.questions div{color:#566273}
.faq-band{background:#ffffff;border-top:1px solid #ddd5c4}
.faq-band .wrap{max-width:860px}
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{border:1px solid #ddd5c4;border-radius:4px;background:#f8f4ec;padding:18px 22px}
.faq summary{font-weight:700;color:#1d2b3e;font-size:17px;cursor:pointer}
.faq details p{margin:12px 0 0;font-size:16px}
.cta{background:#1d2b3e;text-align:center}
.cta h2{color:#ffffff}
.cta p{color:#ddd5c4;max-width:640px;margin:0 auto 26px}
@media(max-width:780px){
section{padding-top:54px;padding-bottom:54px}
.hero .wrap,.grid-3,.practice{grid-template-columns:minmax(0,1fr);gap:24px}
.practice{padding:26px}
h1{font-size:32px}h2{font-size:25px}
.hero-img{height:240px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Practice areas</p>
<h1>What we handle, what it includes and how we charge</h1>
<p>Each area below lists the work that is included, the questions clients most often bring us, and whether it is billed as a fixed fee or by the hour. If your matter is not listed, ask anyway: if it is outside what we do, we will say so and suggest where to go.</p>
<a class="button" href="/consultation/">Book a free consultation</a>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/law/desk-documents.jpg" width="1200" height="1200" alt="Legal documents, a fountain pen and reading glasses on a wooden desk">
</div>
</section>
<section class="fees">
<div class="wrap">
<div class="intro">
<p class="eyebrow">Fees</p>
<h2>Three ways we bill, explained up front</h2>
<p>Your engagement letter states which one applies before any work starts. Court filing fees, recording fees and similar costs are passed on at cost and listed separately.</p>
</div>
<div class="grid-3">
<div class="fee"><span class="icon">◎</span><h3>Fixed fee</h3><p>For work with a predictable scope, such as a will or an LLC setup. One price covers the work described; extra work is quoted before it starts.</p></div>
<div class="fee"><span class="icon">↻</span><h3>Hourly</h3><p>For matters where the time cannot be known in advance, such as a contested estate. Billed in six-minute increments with a written estimate and monthly statements.</p></div>
<div class="fee"><span class="icon">●</span><h3>Retainer in trust</h3><p>Some hourly matters start with a deposit. It is held in a client trust account, drawn only as fees are billed, and any unused balance is returned.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="areas">
<article class="practice">
<div>
<h2>Business formation and contracts</h2>
<p>For owners starting a company, taking on a partner or signing an agreement they want checked first. We set up the structure, write the documents the business runs on and review contracts before you are bound by them.</p>
<p class="fee-line"><strong>Fee approach:</strong> LLC formation package, fixed fee of $1,250 plus the state filing fee. Contract review, fixed fee of $450 per agreement up to 15 pages. Negotiations and disputes are hourly at $295 per hour.</p>
</div>
<div>
<h3>What’s included</h3>
<div class="list">
<div><span>✓</span>Choice of entity explained against your tax and liability situation</div>
<div><span>✓</span>Articles of organization and operating agreement</div>
<div><span>✓</span>Written comments on contracts, leases and vendor terms</div>
</div>
<h3>Typical questions</h3>
<div class="list questions">
<div><span>→</span>Should we be an LLC or an S corporation?</div>
<div><span>→</span>What happens if one owner wants to leave?</div>
<div><span>→</span>Is this commercial lease fair to sign as written?</div>
</div>
</div>
</article>
<article class="practice">
<div>
<h2>Wills and estate planning</h2>
<p>For individuals and couples who want their wishes written down properly: who inherits, who looks after children, and who makes decisions if you cannot. Plans are reviewed with you in person before signing.</p>
<p class="fee-line"><strong>Fee approach:</strong> Fixed fee. Will package for one person $950, for a couple $1,450, each including powers of attorney and health care directives. Revocable trust plans from $2,400, quoted after the first meeting.</p>
</div>
<div>
<h3>What’s included</h3>
<div class="list">
<div><span>✓</span>Will, financial power of attorney and health care directive</div>
<div><span>✓</span>Guardian nominations for minor children</div>
<div><span>✓</span>A supervised signing meeting with witnesses and a notary</div>
</div>
<h3>Typical questions</h3>
<div class="list questions">
<div><span>→</span>Do I need a trust, or is a will enough?</div>
<div><span>→</span>How do beneficiary designations interact with my will?</div>
<div><span>→</span>How often should we update our plan?</div>
</div>
</div>
</article>
<article class="practice">
<div>
<h2>Probate and estate administration</h2>
<p>For executors and family members handling the estate of someone who has died. We explain each court step, prepare the filings and keep a running list of what is done and what is still open.</p>
<p class="fee-line"><strong>Fee approach:</strong> Usually hourly, at $295 per hour for attorney time and $135 per hour for paralegal time, with a written estimate once the assets are known. Small estates that qualify for a simplified procedure can be quoted as a fixed fee.</p>
</div>
<div>
<h3>What’s included</h3>
<div class="list">
<div><span>✓</span>Opening the estate and preparing the court filings</div>
<div><span>✓</span>Inventory, notice to creditors and accounting</div>
<div><span>✓</span>Final distribution and closing the estate</div>
</div>
<h3>Typical questions</h3>
<div class="list questions">
<div><span>→</span>Does every estate have to go through probate?</div>
<div><span>→</span>Am I personally responsible for the estate’s debts?</div>
<div><span>→</span>How long does administration usually take?</div>
</div>
</div>
</article>
<article class="practice">
<div>
<h2>Residential real estate</h2>
<p>For buyers and sellers of homes, and owners with a title or boundary question. We review the documents before you sign and attend the closing so the questions are answered at the table, not afterwards.</p>
<p class="fee-line"><strong>Fee approach:</strong> Fixed fee. Purchase agreement review $400. Full transaction review including closing attendance $750. Disputes between buyer and seller are hourly at $295 per hour.</p>
</div>
<div>
<h3>What’s included</h3>
<div class="list">
<div><span>✓</span>Review of the purchase agreement and contingencies</div>
<div><span>✓</span>Title commitment and survey questions explained</div>
<div><span>✓</span>Closing documents checked before the appointment</div>
</div>
<h3>Typical questions</h3>
<div class="list questions">
<div><span>→</span>Can we back out if the inspection finds a problem?</div>
<div><span>→</span>What does this easement on the title mean for us?</div>
<div><span>→</span>Who pays which costs at closing?</div>
</div>
</div>
</article>
<article class="practice">
<div>
<h2>Employment matters</h2>
<p>For employees offered a severance or non-compete agreement, and for small employers who need workplace policies that match current law. We read the document, explain the trade-offs and tell you what is worth negotiating.</p>
<p class="fee-line"><strong>Fee approach:</strong> Severance or non-compete agreement review, fixed fee of $500. Employee handbook for a small employer from $1,800. Negotiation and disputes are hourly at $295 per hour.</p>
</div>
<div>
<h3>What’s included</h3>
<div class="list">
<div><span>✓</span>A written summary of what the agreement asks you to give up</div>
<div><span>✓</span>A call to talk through options and deadlines</div>
<div><span>✓</span>Handbook policies drafted for your state and size</div>
</div>
<h3>Typical questions</h3>
<div class="list questions">
<div><span>→</span>Is this severance offer negotiable?</div>
<div><span>→</span>Can my former employer enforce this non-compete?</div>
<div><span>→</span>Which policies does a ten-person company need?</div>
</div>
</div>
</article>
</div>
</div>
</section>
<section class="faq-band">
<div class="wrap">
<p class="eyebrow">Questions about fees and process</p>
<h2>Before you get in touch</h2>
<div class="faq">
<details><summary>Is the first consultation really free?</summary><p>Yes. The first call or meeting lasts up to 30 minutes and there is no charge. We use it to understand the situation, check for conflicts of interest and tell you whether we are the right firm. You are under no obligation to hire us afterwards.</p></details>
<details><summary>Do you take cases on a contingency fee?</summary><p>No. Contingency fees are common in personal injury work, which we do not handle. If your matter needs that kind of firm, we will tell you during the first call and suggest how to find one.</p></details>
<details><summary>What happens to a retainer deposit?</summary><p>It is held in a client trust account, separate from the firm’s own money. Fees are drawn from it only after they are billed to you, each statement shows the balance, and anything left at the end of the matter is refunded.</p></details>
<details><summary>Can you tell me how my case will turn out?</summary><p>No attorney can honestly promise a result. What we can do is explain the realistic range of outcomes, the risks on each side and the likely costs, so the decisions you make are informed ones.</p></details>
<details><summary>Are there costs on top of the fee?</summary><p>Sometimes. Court filing fees, deed recording fees and certified copies are charged by courts and county offices. We pass them on at cost, with no markup, and list them separately on your statement.</p></details>
</div>
</div>
</section>
<section class="cta">
<div class="wrap">
<h2>Not sure which area your matter falls under?</h2>
<p>Describe it in a few sentences on the consultation form. We will reply within one business day with whether we can help and what the first step would be.</p>
<a class="button" href="/consultation/">Request a consultation</a>
</div>
</section>
</body>
</html>