Content
Editorial, text-and-image, and pull-quote sections for pages that explain rather than sell.
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.
Text-only editorial section
text-only-editorial-section.html
<section class="section">
<div class="width-container">
<div class="prose">
<h2>Editorial heading</h2>
<p>Long-form copy set in a comfortable reading measure. Paragraphs, lists and quotes all get sensible spacing without extra classes.</p>
<ul>
<li>Point one</li>
<li>Point two</li>
</ul>
<p>Closing paragraph with a <a href="/next">link onward</a>.</p>
</div>
</div>
</section>Text and image section
text-and-image-section.html
<section class="section">
<div class="width-container split">
<div class="stack">
<h2 class="text-3xl font-semibold">Heading beside an image</h2>
<p class="text-neutral-60">Copy that the image supports. Collapses to a single column on mobile with the image after the text.</p>
</div>
<img class="aspect-4/3 object-cover w-full rounded-md" src="/images/placeholders/office.jpg" alt="Describe what the image shows">
</div>
</section>Pull quote section
pull-quote-section.html
<section class="section-sm">
<div class="width-container">
<figure class="stack-sm content">
<blockquote class="text-2xl font-semibold text-neutral-90" style="border-left: 4px solid var(--color-brand); padding-left: 1rem">
<p>The single sentence worth stopping the page for.</p>
</blockquote>
<figcaption class="text-sm text-neutral-60">Who said it, and why they matter</figcaption>
</figure>
</div>
</section>Checklist section
checklist-section.html
<section class="section" aria-labelledby="cl-heading">
<div class="width-container stack-lg content-wide">
<h2 class="text-3xl font-semibold" id="cl-heading">What is included</h2>
<ul class="stack-sm list-none pl-0">
<li class="cluster" style="gap: 0.5rem">
<svg class="fill-current w-5 h-5 text-success-80" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M8 14l-4-4 1.4-1.4L8 11.2l6.6-6.6L16 6z"/></svg>
<span class="text-neutral-80">Included item one</span>
</li>
<li class="cluster" style="gap: 0.5rem">
<svg class="fill-current w-5 h-5 text-success-80" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M8 14l-4-4 1.4-1.4L8 11.2l6.6-6.6L16 6z"/></svg>
<span class="text-neutral-80">Included item two</span>
</li>
</ul>
</div>
</section>Warning/advice block
warning-advice-block.html
<section class="section-sm">
<div class="width-container">
<div class="alert alert-warning content-wide">
<p><strong>Before you book:</strong> the one thing customers should check first, stated plainly.</p>
</div>
</div>
</section>Download/resource section
download-resource-section.html
<section class="section" aria-labelledby="dr-heading">
<div class="width-container stack-lg">
<h2 class="text-3xl font-semibold" id="dr-heading">Guides and documents</h2>
<div class="grid-auto">
<article class="card stack-sm">
<h3 class="text-lg font-semibold">Resource title</h3>
<p class="text-neutral-60">What it covers.</p>
<a class="btn btn-secondary" href="/files/guide.pdf" download>Download (PDF, 1.2 MB)</a>
</article>
<article class="card stack-sm">
<h3 class="text-lg font-semibold">Second resource</h3>
<p class="text-neutral-60">What it covers.</p>
<a class="btn btn-secondary" href="/files/checklist.pdf" download>Download (PDF, 300 KB)</a>
</article>
</div>
</div>
</section>Blog/news grid
blog-news-grid.html
<section class="section" aria-labelledby="bn-heading">
<div class="width-container stack-lg">
<h2 class="text-3xl font-semibold" id="bn-heading">Latest articles</h2>
<div class="grid-auto">
<article class="card card-hover stack-sm relative">
<h3 class="text-xl font-semibold"><a class="text-neutral-90 no-underline" href="/blog/one">Article headline<span class="absolute inset-0" aria-hidden="true"></span></a></h3>
<p class="text-neutral-60">Standfirst.</p>
<p class="text-sm text-neutral-60"><time datetime="2026-07-01">1 July 2026</time></p>
</article>
<article class="card card-hover stack-sm relative">
<h3 class="text-xl font-semibold"><a class="text-neutral-90 no-underline" href="/blog/two">Second headline<span class="absolute inset-0" aria-hidden="true"></span></a></h3>
<p class="text-neutral-60">Standfirst.</p>
<p class="text-sm text-neutral-60"><time datetime="2026-06-20">20 June 2026</time></p>
</article>
</div>
</div>
</section>Related articles section
related-articles-section.html
<section class="section-sm" aria-labelledby="ra-heading">
<div class="width-container stack">
<h2 class="text-2xl font-semibold" id="ra-heading">Related reading</h2>
<ul class="stack-sm list-none pl-0">
<li><a class="text-brand-80 font-semibold no-underline" href="/blog/related-1">Related article one <span aria-hidden="true">→</span></a></li>
<li><a class="text-brand-80 font-semibold no-underline" href="/blog/related-2">Related article two <span aria-hidden="true">→</span></a></li>
</ul>
</div>
</section>Internal link cluster
internal-link-cluster.html
<nav class="section-sm" aria-labelledby="il-heading">
<div class="width-container stack">
<h2 class="text-2xl font-semibold" id="il-heading">Explore</h2>
<ul class="inline-list">
<li><a class="badge" href="/services/one">Boiler servicing</a></li>
<li><a class="badge" href="/services/two">Central heating repairs</a></li>
<li><a class="badge" href="/areas/town">Town coverage</a></li>
<li><a class="badge" href="/faq">FAQs</a></li>
</ul>
</div>
</nav>Opening hours section
opening-hours-section.html
<section class="section-sm" aria-labelledby="oh-heading">
<div class="width-container card stack-sm" style="max-width: 24rem">
<h2 class="text-xl font-semibold" id="oh-heading">Opening hours</h2>
<dl class="stack-sm">
<div class="cluster-between"><dt class="text-neutral-60">Mon–Fri</dt><dd class="font-semibold text-neutral-90">8am–6pm</dd></div>
<div class="cluster-between"><dt class="text-neutral-60">Saturday</dt><dd class="font-semibold text-neutral-90">9am–1pm</dd></div>
<div class="cluster-between"><dt class="text-neutral-60">Sunday</dt><dd class="font-semibold text-neutral-90">Closed</dd></div>
</dl>
</div>
</section>Contact details section
contact-details-section.html
<section class="section" aria-labelledby="cd-heading">
<div class="width-container stack-lg">
<h2 class="text-3xl font-semibold" id="cd-heading">Contact details</h2>
<div class="grid-auto">
<div class="stack-sm">
<h3 class="text-lg font-semibold">Phone</h3>
<p><a class="text-brand-80 font-semibold" href="tel:+441914980210">0191 498 0210</a></p>
</div>
<div class="stack-sm">
<h3 class="text-lg font-semibold">Email</h3>
<p><a class="text-brand-80 font-semibold" href="mailto:hello@fenwickheating.co.uk">hello@fenwickheating.co.uk</a></p>
</div>
<div class="stack-sm">
<h3 class="text-lg font-semibold">Address</h3>
<p class="text-neutral-80">Street address<br>Town<br>Postcode</p>
</div>
</div>
</div>
</section>