Features & content
Four-step process timeline
Four numbered steps on a ruled timeline that runs across the page on desktop and down the page on phones, with a closing button.
When to use it
TODO
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- TODO
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>Four-step process timeline</title>
<style>
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#fff}
.process{max-width:1160px;margin:0 auto;padding:76px 24px}
.head{max-width:640px;margin:0 0 44px}
.eyebrow{margin:0 0 12px;color:#ff5b35;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
h2{margin:0 0 14px;font-size:38px;line-height:1.12;letter-spacing:-.03em}
.intro{margin:0;color:#5b6b82;font-size:16.5px;line-height:1.8}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.step{border:0 solid #d9e1ec;border-left-width:2px;padding:2px 0 2px 22px}
.num{display:inline-block;margin:0 0 16px;padding:6px 12px;border-radius:999px;background:#14233a;color:#fff;font-size:13px;font-weight:800;letter-spacing:.08em}
.step h3{margin:0 0 8px;font-size:18px;line-height:1.3}
.step p{margin:0;color:#5b6b82;font-size:14.5px;line-height:1.75}
.foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:46px 0 0;padding:24px 28px;border-radius:14px;background:#f6f8fb}
.foot p{margin:0;color:#33475f;font-size:15px;line-height:1.6}
.button{display:inline-block;padding:14px 26px;border-radius:9px;background:#ff5b35;color:#fff;text-decoration:none;font-weight:700;font-size:15px}
@media(max-width:780px){.process{padding:54px 20px}h2{font-size:29px}.head{margin-bottom:32px}.steps{grid-template-columns:1fr;gap:0}.step{padding:0 0 30px 20px}.num{margin-bottom:12px}.foot{flex-direction:column;align-items:flex-start;gap:16px;margin-top:20px;padding:22px}}
</style>
</head>
<body>
<section class="process">
<div class="head">
<p class="eyebrow">How an order works</p>
<h2>From first measurement to the piece in your home</h2>
<p class="intro">Every Oakridge Joinery commission follows the same four steps. You always know which one you are in and what happens next.</p>
</div>
<div class="steps">
<div class="step">
<span class="num">01</span>
<h3>Visit and measure</h3>
<p>We come to you, measure the space and talk through how the piece will be used. Free within 20 miles of the workshop.</p>
</div>
<div class="step">
<span class="num">02</span>
<h3>Drawings and a fixed price</h3>
<p>Within ten days you get scaled drawings, a timber sample and a fixed quote. Nothing is cut until you sign off.</p>
</div>
<div class="step">
<span class="num">03</span>
<h3>Built by one maker</h3>
<p>One person makes your piece from start to finish, and sends photos at the halfway point. Most builds take four to six weeks.</p>
</div>
<div class="step">
<span class="num">04</span>
<h3>Delivery and fitting</h3>
<p>We deliver, fit and level it, take the packaging away, and call a month later to check how it has settled.</p>
</div>
</div>
<div class="foot">
<p>Visits are booked in two-hour windows, Monday to Saturday.</p>
<a class="button" href="#book">Book a measuring visit</a>
</div>
</section>
</body>
</html>