Features & content
Six-service icon grid
A centered heading over six icon cards in a 3×2 grid, each with an icon, a service name and one sentence, closed by a 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>Six-service icon grid</title>
<style>
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#f6f8fb}
.services{max-width:1160px;margin:0 auto;padding:76px 24px}
.head{text-align:center;max-width:680px;margin:0 auto 42px}
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}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:28px;border:1px solid #e3e9f1;border-radius:14px;background:#fff}
.icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#fff0eb;color:#ff5b35;font-size:20px;font-weight:700;margin:0 0 18px}
.card h3{margin:0 0 8px;font-size:18px;line-height:1.3}
.card p{margin:0;color:#5b6b82;font-size:14.5px;line-height:1.75}
.foot{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin:40px 0 0}
.foot p{margin:0;color:#33475f;font-size:15px}
.button{display:inline-block;padding:14px 26px;border-radius:9px;background:#14233a;color:#fff;text-decoration:none;font-weight:700;font-size:15px}
@media(max-width:780px){.services{padding:54px 20px}h2{font-size:29px}.head{margin-bottom:30px}.grid{grid-template-columns:1fr;gap:14px}.card{padding:24px}.foot{flex-direction:column;gap:16px;text-align:center}}
</style>
</head>
<body>
<section class="services">
<div class="head">
<h2>IT support for offices of 5 to 50 people</h2>
<p class="intro">Northgate looks after the computers, accounts and network of small offices that do not need a full-time IT person, but cannot afford a lost morning either.</p>
</div>
<div class="grid">
<article class="card">
<span class="icon">♥</span>
<h3>Help desk for your staff</h3>
<p>Phone and email support on weekdays from 8 to 6, with most requests picked up within the hour.</p>
</article>
<article class="card">
<span class="icon">↻</span>
<h3>Backups that get tested</h3>
<p>Nightly backups of files and email, plus a restore test every quarter so you know they actually work.</p>
</article>
<article class="card">
<span class="icon">✔</span>
<h3>Security reviews</h3>
<p>A check of passwords, admin accounts and devices twice a year, with a short written list of what to fix.</p>
</article>
<article class="card">
<span class="icon">+</span>
<h3>New starter setup</h3>
<p>Laptop, accounts and access ready on someone’s first morning, and switched off on the day they leave.</p>
</article>
<article class="card">
<span class="icon">→</span>
<h3>Office moves</h3>
<p>Network, printers and phones moved and tested over a weekend, so Monday starts like any other day.</p>
</article>
<article class="card">
<span class="icon">●</span>
<h3>Network and Wi-Fi</h3>
<p>Wi-Fi planned for your actual floor plan, with guest access kept apart from company devices.</p>
</article>
</div>
<div class="foot">
<p>One flat monthly price per person, no setup fee.</p>
<a class="button" href="#plans">See monthly plans</a>
</div>
</section>
</body>
</html>