Core pages
Full-page templates for the pages every site needs: home, about, services, contact, legal, and utility pages.
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
homepage.html
<a class="skip-link" href="#main">Skip to main content</a>
<header class="py-4 border-b border-neutral-20">
<div class="width-container cluster-between">
<a class="text-xl font-bold text-neutral-90 no-underline" href="/">Fenwick Heating</a>
<nav aria-label="Main">
<ul class="inline-list">
<li><a class="text-neutral-80" href="/services">Services</a></li>
<li><a class="text-neutral-80" href="/about">About</a></li>
<li><a class="btn btn-primary btn-sm" href="/contact">Get a quote</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<!-- organisms/heroes.html → Homepage hero -->
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Trusted local service</span>
<h1 class="hero-title">A clear headline about the outcome you deliver</h1>
<p class="hero-lead">Who you help, where you work, why people choose you.</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 what we do</a>
</div>
</div>
</section>
<!-- patterns/trust-strip.html → text badge strip -->
<section class="section-sm" aria-label="Why customers trust us">
<div class="width-container">
<ul class="trust-strip">
<li><span class="badge">Certified</span></li>
<li><span class="badge">Fully insured</span></li>
<li><span class="badge">Free quotes</span></li>
</ul>
</div>
</section>
<!-- patterns/cards.html → service card grid (3 cards) -->
<section class="section" aria-labelledby="t-services">
<div class="width-container stack-lg">
<h2 class="text-3xl font-semibold" id="t-services">What we can help with</h2>
<div class="grid-auto" role="list">
<article class="card card-hover stack-sm relative" role="listitem">
<h3 class="text-xl font-semibold"><a class="text-neutral-90 no-underline" href="/services/one">Boiler servicing<span class="absolute inset-0" aria-hidden="true"></span></a></h3>
<p class="text-neutral-60">Short description.</p>
</article>
<!-- + two more cards -->
</div>
</div>
</section>
<!-- patterns/sections.html → why-us split -->
<!-- organisms/trust.html → testimonials grid -->
<!-- patterns/cta-band.html → CTA band -->
<!-- organisms/conversion.html → contact choice cards or short enquiry form -->
</main>About page
about-page.html
<main id="main">
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">About us</span>
<h1 class="hero-title">Who we are and how we work</h1>
<p class="hero-lead">The one-paragraph version of the story.</p>
</div>
</section>
<!-- organisms/trust.html → founder/owner credibility section -->
<section class="section">
<div class="width-container split">
<img class="aspect-4/3 object-cover w-full rounded-md" src="/images/placeholders/team-member.jpg" alt="Founder name at work">
<div class="stack">
<h2 class="text-3xl font-semibold">Who you are dealing with</h2>
<p class="text-neutral-60">Founder background and why the business runs the way it does.</p>
</div>
</div>
</section>
<!-- organisms/trust.html → team section -->
<!-- organisms/trust.html → accessibility and quality assurance block -->
<!-- organisms/trust.html → local proof section -->
<!-- patterns/cta-band.html → CTA band -->
</main>Reviews/testimonials page
reviews-testimonials-page.html
<main id="main">
<!-- organisms/heroes.html → hero with review proof -->
<section class="section-lg">
<div class="width-container">
<h1 class="hero-title">What customers say</h1>
<p class="text-neutral-80"><strong class="text-neutral-90">Rated 4.9 out of 5</strong> from 200+ local reviews</p>
</div>
</section>
<!-- organisms/trust.html → testimonials grid (repeat block for more reviews) -->
<section class="section">
<div class="width-container grid-auto">
<figure class="card stack-sm">
<blockquote><p class="text-neutral-80">“Short quote about the result.”</p></blockquote>
<figcaption><span class="font-semibold text-neutral-90">Customer name</span> <span class="block text-sm text-neutral-60">Town</span></figcaption>
</figure>
<!-- + more testimonial cards -->
</div>
</section>
<!-- organisms/trust.html → insurance/guarantee block -->
<!-- patterns/cta-band.html → CTA band -->
</main>Contact page
contact-page.html
<main id="main">
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Contact</span>
<h1 class="hero-title">Get in touch</h1>
<p class="hero-lead">Response expectation in one sentence.</p>
</div>
</section>
<!-- organisms/conversion.html → contact choice cards -->
<!-- organisms/conversion.html → short enquiry form, split with: -->
<!-- organisms/informational.html → contact details + opening hours -->
<section class="section" id="contact">
<div class="width-container split">
<!-- short enquiry form here -->
<aside class="card stack-sm" aria-label="Direct contact details">
<h2 class="text-xl font-semibold">Prefer to talk?</h2>
<p class="text-neutral-60"><a class="text-brand-80 font-semibold" href="tel:+441914980210">0191 498 0210</a></p>
<p class="text-neutral-60">Mon–Fri, 8am–6pm</p>
</aside>
</div>
</section>
<!-- organisms/services.html → service area list -->
</main>Thank-you page
thank-you-page.html
<main id="main"> <!-- organisms/conversion.html → thank-you confirmation panel --> <!-- organisms/informational.html → related articles / internal link cluster --> </main>
Services index
services-index.html
<main id="main">
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Services</span>
<h1 class="hero-title">Everything we do</h1>
<p class="hero-lead">One sentence about the breadth of the offering.</p>
</div>
</section>
<!-- organisms/services.html → featured services -->
<!-- patterns/cards.html → service card grid (all services) -->
<!-- organisms/services.html → process/how-it-works -->
<!-- organisms/services.html → service area list -->
<!-- patterns/cta-band.html → CTA band -->
</main>Single service page
single-service-page.html
<main id="main">
<!-- organisms/heroes.html → service page hero (with breadcrumb) -->
<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 it is, who it is for, the outcome.</p>
<a class="btn btn-primary btn-lg" href="#quote">Get a quote for this service</a>
</div>
</section>
<!-- organisms/services.html → service intro section -->
<!-- organisms/services.html → problem/solution blocks -->
<!-- organisms/services.html → common issues section -->
<!-- organisms/services.html → packages/pricing section -->
<!-- organisms/services.html → process/how-it-works -->
<!-- molecules/content.html → FAQ items (2–4, service-specific) -->
<!-- organisms/services.html → related services section -->
<!-- organisms/conversion.html → detailed quote form, anchored -->
<section class="section" id="quote" aria-label="Quote request">
<div class="width-container">
<!-- detailed quote form here -->
</div>
</section>
</main>Service-area index
service-area-index.html
<main id="main">
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Coverage</span>
<h1 class="hero-title">Areas we cover</h1>
<p class="hero-lead">The catchment in one sentence.</p>
</div>
</section>
<!-- organisms/services.html → service area list / postcode coverage -->
<section class="section">
<div class="width-container stack-lg">
<ul class="inline-list">
<li><a class="badge" href="/areas/town-one">Town one</a></li>
<li><a class="badge" href="/areas/town-two">Town two</a></li>
<!-- + more area links -->
</ul>
</div>
</section>
<!-- organisms/trust.html → local proof section -->
<!-- patterns/cta-band.html → CTA band -->
</main>Single location/service-area page
single-location-service-area-page.html
<main id="main">
<!-- organisms/heroes.html → local area hero -->
<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, nearby areas.</p>
<a class="btn btn-primary btn-lg" href="#contact">Check availability</a>
</div>
</section>
<!-- patterns/cards.html → service card grid -->
<!-- organisms/trust.html → local proof section -->
<!-- organisms/trust.html → testimonials grid (local reviews) -->
<!-- organisms/services.html → postcode/town coverage -->
<!-- patterns/cta-band.html → CTA band -->
</main>Pricing/packages page
pricing-packages-page.html
<main id="main">
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Pricing</span>
<h1 class="hero-title">Clear prices, no surprises</h1>
<p class="hero-lead">How pricing works here, in one sentence.</p>
</div>
</section>
<!-- organisms/services.html → packages/pricing section -->
<!-- organisms/services.html → maintenance plan section -->
<!-- organisms/services.html → payment/finance options block -->
<!-- molecules/content.html → FAQ items (pricing questions) -->
<!-- patterns/cta-band.html → CTA band -->
</main>Blog/news index
blog-news-index.html
<main id="main">
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">News</span>
<h1 class="hero-title">Latest articles</h1>
</div>
</section>
<!-- organisms/informational.html → blog/news grid -->
<!-- molecules/content.html → pagination -->
<section class="section-sm">
<div class="width-container">
<nav aria-label="Pagination">
<ul class="inline-list">
<li><span class="btn btn-secondary btn-sm" aria-current="page">1</span></li>
<li><a class="btn btn-ghost btn-sm" href="?page=2">2</a></li>
<li><a class="btn btn-ghost btn-sm" href="?page=2">Next<span class="sr-only"> page</span></a></li>
</ul>
</nav>
</div>
</section>
<!-- organisms/informational.html → internal link cluster -->
</main>Single article page
single-article-page.html
<main id="main">
<article class="section">
<div class="width-container stack-lg">
<header class="stack-sm content-wide">
<nav aria-label="Breadcrumb">
<ol class="inline-list text-sm">
<li><a class="text-neutral-80" href="/blog">News</a> <span class="text-neutral-60" aria-hidden="true">/</span></li>
<li><span class="text-neutral-90 font-semibold" aria-current="page">Article headline</span></li>
</ol>
</nav>
<h1 class="text-5xl font-bold text-neutral-90">Article headline</h1>
<!-- molecules/cards.html → author/byline block -->
<div class="media-object">
<img class="avatar" src="/images/placeholders/team-member.jpg" alt="">
<div>
<p class="font-semibold text-neutral-90">Author name</p>
<p class="text-sm text-neutral-60">Role · <time datetime="2026-07-01">1 July 2026</time></p>
</div>
</div>
</header>
<!-- organisms/informational.html → text-only editorial section (prose body) -->
<div class="prose">
<p>Article body in a comfortable reading column.</p>
<h2>Subheading</h2>
<p>More copy.</p>
</div>
<!-- organisms/informational.html → pull quote section -->
<!-- molecules/content.html → social share links -->
<!-- organisms/informational.html → related articles section -->
</div>
</article>
<!-- patterns/cta-band.html → CTA band -->
</main>Case studies index
case-studies-index.html
<main id="main">
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Our work</span>
<h1 class="hero-title">Recent projects</h1>
</div>
</section>
<!-- organisms/media-portfolio.html → case study teaser section (featured) -->
<!-- organisms/media-portfolio.html → portfolio grid (all case studies) -->
<!-- patterns/cta-band.html → CTA band -->
</main>Single case study
single-case-study.html
<main id="main"> <!-- organisms/media-portfolio.html → case study detail layout (whole block) --> <!-- organisms/media-portfolio.html → gallery grid (project photos) --> <!-- molecules/cards.html → testimonial card (the client's words) --> <!-- patterns/cta-band.html → CTA band --> </main>
Gallery/portfolio page
gallery-portfolio-page.html
<main id="main">
<section class="section-lg">
<div class="width-container">
<span class="eyebrow">Gallery</span>
<h1 class="hero-title">Our work in pictures</h1>
</div>
</section>
<!-- organisms/media-portfolio.html → masonry gallery -->
<!-- atoms/media.html → before/after labelled pairs -->
<!-- patterns/cta-band.html → CTA band -->
</main>Legal/privacy page
legal-privacy-page.html
<main id="main">
<section class="section">
<div class="width-container stack-lg">
<header class="content">
<h1 class="text-4xl font-bold text-neutral-90">Privacy policy</h1>
<p class="text-sm text-neutral-60">Last updated: <time datetime="2026-07-05">5 July 2026</time></p>
</header>
<div class="prose">
<h2>What we collect</h2>
<p>Plain-language policy copy.</p>
<h2>How we use it</h2>
<p>More policy copy.</p>
<h2>Contact</h2>
<p>Who to contact about your data.</p>
</div>
</div>
</section>
</main>Accessibility statement page
accessibility-statement-page.html
<main id="main">
<section class="section">
<div class="width-container stack-lg">
<header class="content">
<h1 class="text-4xl font-bold text-neutral-90">Accessibility statement</h1>
<p class="text-sm text-neutral-60">Last reviewed: <time datetime="2026-07-05">5 July 2026</time></p>
</header>
<div class="prose">
<h2>Our commitment</h2>
<p>Target conformance level and scope.</p>
<h2>Known issues</h2>
<ul>
<li>Honest list of current gaps and workarounds.</li>
</ul>
<h2>Tell us about a problem</h2>
<p>Contact route and expected response time.</p>
</div>
</div>
</section>
</main>404 page
404-page.html
<main id="main">
<section class="section-lg">
<div class="width-container stack" style="max-width: 36rem; margin-inline: auto; text-align: center">
<p class="eyebrow">404</p>
<h1 class="text-4xl font-bold text-neutral-90">That page is not here</h1>
<p class="text-neutral-60">The link may be old or mistyped. These usually help:</p>
<div class="button-group" style="justify-content: center">
<a class="btn btn-primary" href="/">Homepage</a>
<a class="btn btn-secondary" href="/services">Services</a>
<a class="btn btn-secondary" href="/contact">Contact</a>
</div>
</div>
</section>
</main>Coming soon page
coming-soon-page.html
<main id="main" class="cover">
<div class="cover-center width-container stack" style="max-width: 36rem; text-align: center">
<p class="text-xl font-bold text-neutral-90">Fenwick Heating</p>
<h1 class="hero-title">Something new is on the way</h1>
<p class="hero-lead" style="margin-inline: auto">One sentence about what and roughly when.</p>
<p><a class="btn btn-primary" href="mailto:hello@fenwickheating.co.uk">Get in touch meanwhile</a></p>
</div>
</main>Maintenance page
maintenance-page.html
<main id="main" class="cover">
<div class="cover-center width-container stack" style="max-width: 36rem; text-align: center">
<p class="text-xl font-bold text-neutral-90">Fenwick Heating</p>
<h1 class="text-4xl font-bold text-neutral-90">Down for maintenance</h1>
<p class="text-neutral-60">Back by TIME. Urgent? Call <a class="text-brand-80 font-semibold" href="tel:+441914980210">0191 498 0210</a>.</p>
</div>
</main>