Website kits
Creative agency work and case study page
Agency work page with a four-project grid, an archive list and one full case study: facts, challenge, approach, outcome, deliverables, results and a quote.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The portfolio page, built for two kinds of visitor: the one who skims thumbnails and the one who reads a whole case study before getting in touch. The four-project grid and the archive list serve the skimmer and show range without needing a photo for every past job. The featured case study serves the reader, in the order a buyer weighs it: who the client was, what was wrong, what you did and why, what was delivered and what changed. The results are framed as figures the sample client reported over a stated period, which is how to present them on your own site too, because a bare “+38%” with no source reads as advertising. Replace the featured case study with your strongest project whose client will let you publish numbers, and get the quote approved in writing. Keep the archive list current; a portfolio that stops two years ago makes a studio look quiet.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 23
- Container (grid, 2 columns) × 1
- Container (grid) × 5
- Container (grid, 4 columns) × 1
- Container (grid, 3 columns) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 36
- Heading × 8
- Image Box × 4
- Image × 2
- Icon List × 1
- Counter × 3
- Testimonial × 1
- Button × 1
Things worth knowing
- The four project cards convert to Image Box widgets with a 480px cover crop, and the featured photo and the deliverables photo become Image widgets. All image slots arrive empty, so select your own images after import.
- The three result figures convert to Counter widgets: 38 with a + prefix and % suffix, 3 with an x suffix and 46 with %. The source line under them is a Text Editor; keep it beside the numbers when you edit them.
- The deliverables list becomes an Icon List with check icons, and the client quote becomes a Testimonial widget with the name and job title in separate fields.
- Each archive row is a three-column grid Container (client, work, year) that stacks into one column below 780px; duplicate a row in Elementor to add a project.
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>Work — Lowtide Studio</title>
<style>
body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#f2efe9;background:#0e0e10}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:96px 0;background:#0e0e10}
h1,h2,h3{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;color:#f2efe9;font-weight:700}
h1{font-size:84px;line-height:1;letter-spacing:-.045em;margin:0 0 28px;max-width:960px}
h2{font-size:48px;line-height:1.05;letter-spacing:-.035em;margin:0 0 18px}
h3{font-size:24px;line-height:1.25;letter-spacing:-.015em;margin:0 0 10px}
p{font-size:17px;line-height:1.7;color:#a3a1a8;margin:0 0 18px}
.eyebrow{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ff4d8d;margin:0 0 20px}
.button{display:inline-block;padding:16px 28px;border-radius:999px;background:#ff4d8d;color:#0e0e10;text-decoration:none;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:700;font-size:16px}
.intro{padding:104px 0 56px}
.intro .lead{max-width:660px;font-size:20px;line-height:1.6;color:#f2efe9;margin:0}
.index{padding-top:24px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
.case img{width:100%;height:480px;object-fit:cover;border-radius:4px;display:block;margin:0 0 20px;background:#18181c}
.case p{font-size:16px;margin:0}
.archive{margin:80px 0 0;border-top:1px solid #2a2a31}
.archive-title{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f2efe9;margin:28px 0 8px}
.row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) 80px;gap:24px;padding:18px 0;border-bottom:1px solid #2a2a31}
.row p{margin:0;font-size:16px}
.row .client{color:#f2efe9;font-weight:600}
.row .year{text-align:right}
.graphite{background:#18181c}
.case-head{max-width:860px;margin:0 0 40px}
.feature-img{width:100%;height:560px;object-fit:cover;border-radius:4px;display:block;background:#0e0e10}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:36px 0 0;padding:0 0 36px;border-bottom:1px solid #2a2a31}
.fact-label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a3a1a8;margin:0 0 6px}
.fact-value{font-size:16px;line-height:1.5;color:#f2efe9;margin:0}
.story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:56px 0 0}
.story p{font-size:16px;margin:0 0 14px}
.label{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:15px;font-weight:700;color:#ff4d8d;margin:0 0 12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.detail-img{width:100%;height:520px;object-fit:cover;border-radius:4px;display:block;background:#18181c}
.delivered{display:flex;flex-direction:column;gap:14px;margin:8px 0 0}
.delivered > div{display:flex;align-items:flex-start;gap:14px;font-size:17px;line-height:1.5;color:#f2efe9}
.tick{color:#ff4d8d;font-size:15px;line-height:1.6}
.results{padding:88px 0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0 0 28px}
.stat{padding:30px 28px;border:1px solid #2a2a31;border-radius:4px;background:#0e0e10}
.stat-num{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:64px;font-weight:700;letter-spacing:-.04em;line-height:1;color:#ff4d8d;margin:0 0 12px}
.stat-label{font-size:16px;line-height:1.5;color:#f2efe9;margin:0}
.source{font-size:15px;max-width:760px;margin:0}
.quote{margin:0;max-width:940px}
.quote blockquote{margin:0 0 28px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:36px;line-height:1.24;letter-spacing:-.025em;color:#f2efe9}
.quote figcaption{font-size:16px;color:#a3a1a8}
.quote cite{font-style:normal;font-weight:700;color:#f2efe9}
.cta{padding:104px 0;border-top:1px solid #2a2a31}
.cta h2{font-size:60px;line-height:1.02;letter-spacing:-.045em;max-width:820px}
.cta p{max-width:580px;margin:0 0 32px}
@media(max-width:780px){
section{padding:64px 0}
.wrap{padding:0 16px}
.intro{padding:64px 0 32px}
h1{font-size:48px;line-height:1.02}
h2{font-size:32px}
h3{font-size:22px}
.intro .lead{font-size:18px}
.index{padding-top:8px}
.grid,.facts,.story,.split,.stats{grid-template-columns:minmax(0,1fr);gap:28px}
.case img{height:300px}
.archive{margin:56px 0 0}
.row{grid-template-columns:minmax(0,1fr);gap:4px}
.row .year{text-align:left}
.feature-img{height:260px}
.facts{gap:18px}
.story{margin:40px 0 0}
.detail-img{height:300px}
.results{padding:64px 0}
.stat-num{font-size:48px}
.quote blockquote{font-size:25px}
.cta{padding:72px 0}
.cta h2{font-size:38px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Selected work</p>
<h1>Projects we are glad to put our name to.</h1>
<p class="lead">A selection from the last two years. Each one started with a business problem, not a style, so each case study begins with what the client needed to change.</p>
</div>
</section>
<section class="index">
<div class="wrap">
<div class="grid">
<article class="case">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/work-coffee-brand.jpg" width="1200" height="1200" alt="Blank coffee bags, cups and cards in coral and cream laid out on a dark stone surface">
<h3>Fernhill Coffee Roasters</h3>
<p>Brand identity, packaging, online shop · 2025</p>
</article>
<article class="case">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/work-web-laptop.jpg" width="1200" height="1200" alt="Laptop on a dark desk showing a website layout made of colored blocks and photos">
<h3>Marrow Architects</h3>
<p>Website design and WordPress build · 2025</p>
</article>
<article class="case">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/work-app-phones.jpg" width="1200" height="1200" alt="Two smartphones on a dark surface showing a booking app interface in soft colors">
<h3>Kindred Physio</h3>
<p>Research and product design for a booking app · 2024</p>
</article>
<article class="case">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/work-print-objects.jpg" width="1200" height="1200" alt="Stack of blank printed booklets and tote bags in deep green and pink under directional light">
<h3>Saltmarsh Film Festival</h3>
<p>Festival identity, print and launch content · 2024</p>
</article>
</div>
<div class="archive">
<p class="archive-title">Also in the archive</p>
<div class="row"><p class="client">Ridgeback Outdoor Supply</p><p>Online shop redesign and product photography</p><p class="year">2025</p></div>
<div class="row"><p class="client">Orchard Lane Dental</p><p>Brand refresh and a six-page website</p><p class="year">2024</p></div>
<div class="row"><p class="client">Northgate Tenants Union</p><p>Identity and campaign materials, pro bono</p><p class="year">2024</p></div>
<div class="row"><p class="client">Ledgerline</p><p>Dashboard redesign for a bookkeeping app</p><p class="year">2023</p></div>
</div>
</div>
</section>
<section class="graphite" id="fernhill">
<div class="wrap">
<div class="case-head">
<p class="eyebrow">Featured case study · sample client</p>
<h2>Fernhill Coffee Roasters: from market stall to wholesale brand</h2>
<p>A family roaster selling at two farmers’ markets wanted cafés and grocers to stock their beans. The brand and the website had to work on a shelf, on a café counter and in a buyer’s inbox.</p>
</div>
<img class="feature-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/case-fernhill-hero.jpg" width="1600" height="900" alt="Coffee bags in coral and cream packaging lined up on a wooden café counter beside a grinder">
<div class="facts">
<div><p class="fact-label">Client</p><p class="fact-value">Fernhill Coffee Roasters</p></div>
<div><p class="fact-label">Services</p><p class="fact-value">Brand identity, packaging, website</p></div>
<div><p class="fact-label">Timeline</p><p class="fact-value">Fourteen weeks, spring 2025</p></div>
<div><p class="fact-label">Studio team</p><p class="fact-value">Two designers, a developer and a writer</p></div>
</div>
<div class="story">
<div>
<p class="label">The challenge</p>
<h3>Good coffee, invisible on a shelf</h3>
<p>Fernhill’s hand-stamped bags looked charming at the market and disappeared next to national brands. Wholesale buyers asked for a price list and a website before they would taste anything.</p>
</div>
<div>
<p class="label">Our approach</p>
<h3>One color per origin, one clear system</h3>
<p>We built the identity around a bold color for each origin so a café could restock by sight. The website put wholesale pricing and sample requests one click from the home page.</p>
</div>
<div>
<p class="label">The outcome</p>
<h3>Stocked in 23 cafés within a year</h3>
<p>The new bags went into production in May. By the following spring Fernhill was supplying 23 cafés and four grocers, and had hired its first full-time roaster.</p>
</div>
</div>
</div>
</section>
<section>
<div class="wrap split">
<img class="detail-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/team-review.jpg" width="1000" height="1250" alt="Two designers comparing printed packaging samples in different colors on a studio table">
<div>
<p class="eyebrow">What we delivered</p>
<h2>Everything a roaster needs to sell wholesale</h2>
<p>We designed and produced every piece in-house, then trained Fernhill’s team to add new origins without us.</p>
<div class="delivered">
<div><span class="tick">✓</span><span>Logo, color system and packaging for eight origins</span></div>
<div><span class="tick">✓</span><span>Online shop with subscriptions and a wholesale area</span></div>
<div><span class="tick">✓</span><span>A two-page wholesale price sheet and sample request form</span></div>
<div><span class="tick">✓</span><span>Photo day at the roastery and launch copy</span></div>
</div>
</div>
</div>
</section>
<section class="graphite results">
<div class="wrap">
<div class="case-head">
<p class="eyebrow">Results</p>
<h2>What changed for Fernhill</h2>
</div>
<div class="stats">
<div class="stat"><p class="stat-num">+38%</p><p class="stat-label">online orders, first six months</p></div>
<div class="stat"><p class="stat-num">3x</p><p class="stat-label">wholesale enquiries per month</p></div>
<div class="stat"><p class="stat-num">46%</p><p class="stat-label">fewer abandoned checkouts</p></div>
</div>
<p class="source">Figures reported by Fernhill Coffee Roasters, comparing the six months after launch with the six months before. They are this client’s results, not a forecast for other projects.</p>
</div>
</section>
<section>
<div class="wrap">
<figure class="quote">
<blockquote>“Buyers used to ask who designed our bags as a polite way of saying they looked homemade. Now they ask because they want to know.”</blockquote>
<figcaption><cite>Leo Marchetti</cite> — Head of wholesale, Fernhill Coffee Roasters</figcaption>
</figure>
</div>
</section>
<section class="cta">
<div class="wrap">
<h2>Working on something similar?</h2>
<p>Send us a short brief. We will tell you honestly whether we are the right studio for it, and if not, who might be.</p>
<a class="button" href="/contact/">Start a project</a>
</div>
</section>
</body>
</html>
