Website kits
Home services header
Trade business header with a license strip, business name, three nav links, a large call button and a Get a quote button.
When to use it
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
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>Home services header</title>
<style>
body{margin:0;font-family:'Open Sans',Arial,sans-serif;color:#1a2633;background:#ffffff}
.strip{background:#14365d;color:#eef2f6}
.strip .wrap{max-width:1160px;margin:0 auto;padding:9px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.strip p{margin:0;font-size:13px;line-height:1.6;color:#eef2f6}
.bar{background:#ffffff;border-bottom:2px solid #eef2f6}
.bar .wrap{max-width:1160px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.name{margin:0;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:#14365d}
.sub{margin:2px 0 0;font-size:13px;color:#5b6b7c;letter-spacing:.04em;text-transform:uppercase}
.nav{display:flex;gap:28px}
.nav a{color:#1a2633;text-decoration:none;font-weight:600;font-size:15px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.phone{display:inline-block;padding:12px 20px;border:2px solid #14365d;border-radius:8px;color:#14365d;text-decoration:none;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:17px}
.quote{display:inline-block;padding:14px 22px;background:#f2711c;border-radius:8px;color:#1a2633;text-decoration:none;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:15px}
@media(max-width:780px){.strip .wrap{flex-direction:column;gap:2px;padding:8px 16px}.bar .wrap{flex-direction:column;align-items:flex-start;gap:14px;padding:16px}.nav{gap:20px}.actions{width:100%}.phone,.quote{flex:1;text-align:center}}
</style>
</head>
<body>
<div class="strip">
<div class="wrap">
<p>Licensed and insured · License no. [your license number]</p>
<p>Mon–Sat 7am–6pm · Emergency line [your emergency hours]</p>
</div>
</div>
<header class="bar">
<div class="wrap">
<div>
<p class="name">Hollis & Reed</p>
<p class="sub">Plumbing and electrical</p>
</div>
<nav class="nav">
<a href="#services">Services</a>
<a href="#areas">Areas</a>
<a href="#reviews">Reviews</a>
</nav>
<div class="actions">
<a class="phone" href="tel:+15550142290">Call (555) 014-2290</a>
<a class="quote" href="#quote">Get a quote</a>
</div>
</div>
</header>
</body>
</html>