Heroes
Opening sections that state what the page offers and where to act. One h1 per page; compose inside .section-lg and .width-container.
Previews are rendered live by the same emily.css this site ships, generated from its emily.config.json with emily-css v2.2.1. Copy the HTML, keep the semantics, and your own tokens restyle it. Where the copy reads as guidance ("A clear headline about…"), it is placeholder text from the component library — replace it with your own.
Homepage hero
Eyebrow, headline, lead, and a primary/secondary action pair.
homepage-hero.html
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Gas Safe registered · Serving Tyneside</span>
<h1 class="hero-title">Heating repairs done the same week you call</h1>
<p class="hero-lead">Boiler servicing, repairs, and full installations for homes across Newcastle and North Tyneside.</p>
<div class="button-group">
<a class="btn btn-primary btn-lg" href="/quote">Get a free quote</a>
<a class="btn btn-secondary btn-lg" href="/services">See our services</a>
</div>
</div>
</section>Service page hero
service-page-hero.html
<section class="section-lg">
<div class="width-container">
<nav aria-label="Breadcrumb">
<ol class="inline-list text-sm">
<li><a class="text-neutral-80" href="/">Home</a> <span class="text-neutral-60" aria-hidden="true">/</span></li>
<li><a class="text-neutral-80" href="/services">Services</a> <span class="text-neutral-60" aria-hidden="true">/</span></li>
<li><span class="text-neutral-90 font-semibold" aria-current="page">Boiler servicing</span></li>
</ol>
</nav>
<h1 class="hero-title">Boiler servicing</h1>
<p class="hero-lead">What this service is, who it is for, and the outcome it delivers.</p>
<a class="btn btn-primary btn-lg" href="#quote">Get a quote for this service</a>
</div>
</section>Local area hero
local-area-hero.html
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Serving Whitley Bay</span>
<h1 class="hero-title">Boiler servicing in Whitley Bay</h1>
<p class="hero-lead">Local availability, response time, and the areas covered nearby.</p>
<a class="btn btn-primary btn-lg" href="#contact">Check availability</a>
</div>
</section>Landing page hero
landing-page-hero.html
<section class="section-lg">
<div class="width-container">
<h1 class="hero-title">One offer, stated plainly</h1>
<p class="hero-lead">The single benefit and who it applies to. No navigation distractions.</p>
<a class="btn btn-primary btn-lg" href="#form">Claim the offer</a>
</div>
</section>Campaign/PPC hero
campaign-ppc-hero.html
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Limited availability</span>
<h1 class="hero-title">Headline matching the ad the visitor clicked</h1>
<p class="hero-lead">Reinforce the same promise, then move straight to the action.</p>
<div class="button-group">
<a class="btn btn-primary btn-lg" href="#form">Get started</a>
</div>
<p class="text-sm text-neutral-60">No obligation · Reply within one working day</p>
</div>
</section>Centred text hero
A single centred statement for pages with one message and one action.
centred-text-hero.html
<section class="section-lg">
<div class="width-container stack text-center" style="justify-items: center">
<h1 class="hero-title" style="margin-inline: auto">Plain-numbers accounting for small businesses</h1>
<p class="hero-lead" style="margin-inline: auto">Fixed monthly pricing, no jargon, and your accounts ready weeks before the deadline.</p>
<p><a class="btn btn-primary btn-lg" href="/contact">Book a free consultation</a></p>
</div>
</section>Text-and-image split hero
text-and-image-split-hero.html
<section class="section-lg">
<div class="width-container split">
<div>
<span class="eyebrow">Trusted local service</span>
<h1 class="hero-title">Headline beside a supporting image</h1>
<p class="hero-lead">Lead copy on the left, image on the right; stacks on mobile.</p>
<a class="btn btn-primary btn-lg" href="/quote">Get a free quote</a>
</div>
<img class="aspect-4/3 object-cover w-full rounded-md" src="/images/placeholders/case-study.jpg" alt="Describe what the image shows">
</div>
</section>Hero with trust badges
Headline and action first, then a badge strip does the reassuring.
hero-with-trust-badges.html
<section class="section-lg">
<div class="width-container stack-lg">
<div>
<h1 class="hero-title">Roof repairs backed by a ten-year guarantee</h1>
<p class="hero-lead">Slate, tile, and flat roofing across the North East — surveyed, photographed, and quoted before any work starts.</p>
<a class="btn btn-primary btn-lg" href="/quote">Book a free survey</a>
</div>
<ul class="trust-strip" style="justify-content: flex-start">
<li><span class="badge">Ten-year guarantee</span></li>
<li><span class="badge">Fully insured</span></li>
<li><span class="badge">Free surveys</span></li>
</ul>
</div>
</section>Hero with review proof
hero-with-review-proof.html
<section class="section-lg">
<div class="width-container">
<h1 class="hero-title">Headline backed by customers</h1>
<p class="hero-lead">Lead copy as usual.</p>
<p class="text-neutral-80"><strong class="text-neutral-90">Rated 4.9 out of 5</strong> from 200+ local reviews</p>
<a class="btn btn-primary btn-lg" href="/quote">Get a free quote</a>
</div>
</section>Hero with quote form
Headline beside an enquiry form — the shortest path from arrival to enquiry.
hero-with-quote-form.html
<section class="section-lg">
<div class="width-container split">
<div>
<h1 class="hero-title">Garden landscaping quotes within 48 hours</h1>
<p class="hero-lead">Patios, decking, planting, and full redesigns — priced from a site visit, not a guess.</p>
<ul class="stack-sm pl-6 list-disc text-neutral-80">
<li>Free site visit and written quote</li>
<li>Work scheduled within three weeks</li>
</ul>
</div>
<form class="card stack" method="post" action="/quote" aria-labelledby="hq-title">
<h2 class="text-xl font-semibold" id="hq-title">Request a quote</h2>
<div class="field-container" style="margin-bottom: 0">
<label for="hq-name">Full name</label>
<input class="input" id="hq-name" name="name" type="text" autocomplete="name" required>
</div>
<div class="field-container" style="margin-bottom: 0">
<label for="hq-phone">Phone number</label>
<input class="input" id="hq-phone" name="phone" type="tel" autocomplete="tel" required>
</div>
<button class="btn btn-primary" type="submit">Request a call back</button>
</form>
</div>
</section>The h1 stays on the page content; the form heading is an h2 linked via aria-labelledby.
Hero with availability/emergency message
hero-with-availability-emergency-message.html
<section class="section-lg">
<div class="width-container stack">
<div class="alert alert-success" style="max-width: 30rem">
<p><strong>Available today:</strong> emergency call-outs before 6pm.</p>
</div>
<h1 class="hero-title">Emergency service headline</h1>
<p class="hero-lead">What qualifies as an emergency and how fast you respond.</p>
<a class="btn btn-primary btn-lg" href="tel:+441914980210">Call the emergency line</a>
</div>
</section>