Media
Galleries, portfolio grids, case study layouts, and video sections. Image paths are placeholders — swap in your own.
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.
Gallery grid
gallery-grid.html
<section class="section" aria-labelledby="gg-heading">
<div class="width-container stack-lg">
<h2 class="text-3xl font-semibold" id="gg-heading">Recent work</h2>
<ul class="grid-auto-sm list-none pl-0">
<li><img class="aspect-square object-cover w-full rounded-md" src="/images/placeholders/workshop.jpg" alt="Describe the job shown"></li>
<li><img class="aspect-square object-cover w-full rounded-md" src="/images/placeholders/office.jpg" alt="Describe the job shown"></li>
<li><img class="aspect-square object-cover w-full rounded-md" src="/images/placeholders/community-event.jpg" alt="Describe the job shown"></li>
<li><img class="aspect-square object-cover w-full rounded-md" src="/images/placeholders/case-study.jpg" alt="Describe the job shown"></li>
</ul>
</div>
</section>Masonry gallery
masonry-gallery.html
<section class="section" aria-labelledby="mg-heading">
<div class="width-container stack-lg">
<h2 class="text-3xl font-semibold" id="mg-heading">Project gallery</h2>
<div class="masonry">
<img class="w-full rounded-md" src="/images/placeholders/workshop.jpg" alt="Describe the image">
<img class="w-full rounded-md" src="/images/placeholders/hero-service.jpg" alt="Describe the image">
<img class="w-full rounded-md" src="/images/placeholders/workshop.jpg" alt="Describe the image">
<img class="w-full rounded-md" src="/images/placeholders/office.jpg" alt="Describe the image">
</div>
</div>
</section>Case study detail layout
case-study-detail-layout.html
<article class="section">
<div class="width-container stack-lg">
<header class="stack-sm">
<span class="eyebrow">Case study</span>
<h1 class="hero-title">Project headline: the outcome</h1>
<p class="hero-lead">One-sentence summary of client, problem and result.</p>
</header>
<img class="aspect-video object-cover w-full rounded-md" src="/images/placeholders/case-study.jpg" alt="Finished project overview">
<div class="sidebar">
<!-- Project facts panel -->
<aside class="card stack-sm" aria-label="Project facts">
<h2 class="text-lg font-semibold">At a glance</h2>
<dl class="stack-sm">
<div><dt class="text-sm text-neutral-60">Location</dt><dd class="font-semibold text-neutral-90">Whitley Bay</dd></div>
<div><dt class="text-sm text-neutral-60">Duration</dt><dd class="font-semibold text-neutral-90">3 weeks</dd></div>
<div><dt class="text-sm text-neutral-60">Services</dt><dd class="font-semibold text-neutral-90">Service A, Service B</dd></div>
</dl>
</aside>
<div class="prose">
<h2>The problem</h2>
<p>What the client faced, in plain terms.</p>
<h2>What we did</h2>
<p>The approach and any decisions worth explaining.</p>
<h2>The result</h2>
<p>The measurable outcome and what the client said.</p>
</div>
</div>
</div>
</article>Video section
video-section.html
<section class="section" aria-labelledby="vs-heading">
<div class="width-container stack-lg">
<h2 class="text-3xl font-semibold" id="vs-heading">See the work</h2>
<div class="aspect-video">
<iframe class="w-full h-full rounded-md" src="about:blank" title="Describe the video content" allowfullscreen loading="lazy"></iframe>
</div>
</div>
</section>Image/text alternating section
image-text-alternating-section.html
<section class="section stack-xl" aria-label="Project highlights">
<div class="width-container split">
<img class="aspect-4/3 object-cover w-full rounded-md" src="/images/placeholders/workshop.jpg" alt="Describe the image">
<div class="stack-sm">
<h2 class="text-2xl font-semibold">First highlight</h2>
<p class="text-neutral-60">Copy beside the image.</p>
</div>
</div>
<div class="width-container split">
<div class="stack-sm">
<h2 class="text-2xl font-semibold">Second highlight</h2>
<p class="text-neutral-60">Copy on the left this time — order swapped in source so it alternates naturally.</p>
</div>
<img class="aspect-4/3 object-cover w-full rounded-md" src="/images/placeholders/office.jpg" alt="Describe the image">
</div>
</section>