Website kits
Nonprofit impact report page
Annual-report style impact page with four counters, percentage bars for spending and income, a story with a quote, the board list and transparency cards.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
An annual-report page for a small nonprofit, for donors, grant-makers and local reporters who want to know what gifts achieved before they give again. It opens with the year and a clear label that the figures are samples, then four headline numbers on a dark band. The finances follow as two panels of percentage bars — where each dollar went and where the money came from — because a funder’s first question is how much reaches programs. One concrete story shows the numbers at the scale of a single Saturday, and the governance section names the board and explains how anyone can check the books. Replace every figure with numbers from your reviewed accounts and remove the sample label only then; a percentage that disagrees with your public tax filing does more harm than leaving it out. Update the page once a year and keep the previous version as its own page so returning donors can compare.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 31
- Container (grid) × 3
- Container (grid, 4 columns) × 1
- Container (grid, 2 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 33
- Heading × 9
- Image × 2
- Counter × 4
- Progress Bar × 8
- Testimonial × 1
- Icon List × 1
- Icon Box × 3
- Button × 3
Things worth knowing
- The four headline numbers convert to Counter widgets with the thousands separator kept for 1,860, 412,000 and 9,400; they count up when scrolled into view.
- Each percentage bar is a track with one filled div inside, so it converts to a native Progress Bar widget with the percentage, bar color and height set, eight in total. The label and percentage above each bar are separate Text Editor widgets, so change both when a figure changes.
- The crew lead quote converts to a Testimonial widget, the board list to an Icon List and the three transparency cards to Icon Box widgets with check icons.
- The Request our financial statements button keeps its mailto: link. Below 780px the panels and columns stack and the four counters sit in a two-by-two grid.
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>Impact report — Bramwell Community Pantry</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#3b2346;background:#faf6ee}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#3b2346;font-weight:700}
h1{font-size:52px;line-height:1.1;letter-spacing:-.015em;margin:0 0 18px}
h2{font-size:36px;line-height:1.18;letter-spacing:-.01em;margin:0 0 14px}
h3{font-size:22px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#6b5b70;margin:0 0 16px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4f7a3a;margin:0 0 12px}
.button{display:inline-block;padding:15px 28px;border-radius:10px;background:#f2a93b;color:#3b2346;text-decoration:none;font-weight:800;font-size:16px}
.ghost{display:inline-block;padding:14px 26px;border-radius:10px;border:2px solid #3b2346;color:#3b2346;text-decoration:none;font-weight:800;font-size:16px}
.hero{padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.sample{display:inline-block;margin:0;padding:8px 14px;border-radius:10px;background:#f6e3d6;font-size:14px;font-weight:700;color:#3b2346}
.hero-img{width:100%;height:440px;object-fit:cover;border-radius:18px;display:block;background:#f6e3d6}
.dark{background:#3b2346}
.dark h2{color:#faf6ee}
.dark p{color:#f6e3d6}
.dark .eyebrow{color:#f2a93b}
.head{max-width:680px;margin:0 0 40px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0 0 28px}
.stat{padding:28px 24px;border-radius:14px;border:2px solid #6b5b70}
.stat .num{margin:0 0 6px;font-family:'Fraunces',Georgia,serif;font-size:46px;font-weight:700;line-height:1.1;color:#f2a93b}
.stat .label{margin:0;font-size:16px;line-height:1.5;color:#faf6ee}
.dark .note{font-size:14px;margin:0}
.money{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.panel{padding:34px;border-radius:18px;background:#f6e3d6}
.panel h3{font-size:24px;margin:0 0 6px}
.panel .total{font-size:15px;margin:0 0 26px}
.bars{display:flex;flex-direction:column;gap:0}
.bar-label{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px;font-size:16px;font-weight:700;color:#3b2346}
.track{height:14px;margin:0 0 20px;border-radius:999px;background:#faf6ee;overflow:hidden}
.fill{height:14px;border-radius:999px;background:#4f7a3a}
.fill-gold{background:#f2a93b}
.money-note{max-width:780px;margin:28px 0 0;font-size:15px}
.blush{background:#f6e3d6}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.story-img{width:100%;height:500px;object-fit:cover;border-radius:18px;display:block;background:#faf6ee}
.quote{margin:8px 0 0;padding:24px 26px;border-radius:14px;background:#faf6ee}
.quote blockquote{margin:0 0 12px;font-family:'Fraunces',Georgia,serif;font-size:20px;line-height:1.5;color:#3b2346}
.quote figcaption{font-size:15px;font-weight:700;color:#4f7a3a}
.quote cite{font-style:normal}
.gov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.board{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;padding:24px 26px;border-radius:14px;background:#f6e3d6}
.board > div{display:flex;gap:12px;align-items:baseline;font-size:16px;line-height:1.5;color:#3b2346}
.dot{color:#4f7a3a;font-size:10px}
.checks{display:flex;flex-direction:column;gap:16px;margin:0 0 26px}
.check{padding:24px 26px;border:2px solid #f6e3d6;border-radius:14px;background:#faf6ee}
.check-icon{display:inline-block;color:#4f7a3a;font-size:22px;line-height:1;margin:0 0 10px}
.check h3{font-size:20px}
.check p{font-size:16px;margin:0}
.cta{text-align:center}
.cta .inner{max-width:660px;margin:0 auto}
.cta .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.light{display:inline-block;padding:14px 26px;border-radius:10px;border:2px solid #faf6ee;color:#faf6ee;text-decoration:none;font-weight:800;font-size:16px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:36px 0 56px}
.hero .wrap,.money,.story,.gov{grid-template-columns:minmax(0,1fr);gap:24px}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{padding:20px 16px}
.stat .num{font-size:32px}
.stat .label{font-size:14px}
h1{font-size:38px}
h2{font-size:29px}
.hero-img{height:260px}
.story-img{height:300px}
.panel{padding:26px 20px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Annual report · 2025</p>
<h1>What Bramwell did together in 2025</h1>
<p>Rising rents and grocery prices brought more first-time shoppers to our doors than any year before. Donors, volunteers and partners kept the shelves full. This page is our account of what happened to every gift.</p>
<p class="sample">Sample figures — replace with your own reviewed numbers</p>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/distribution-day.jpg" width="1600" height="1000" alt="Volunteers handing out bags of produce from folding tables to neighbors in a parking lot on a sunny morning">
</div>
</section>
<section class="dark">
<div class="wrap">
<div class="head">
<p class="eyebrow">The year in numbers</p>
<h2>Twelve months at the pantry</h2>
</div>
<div class="stats">
<div class="stat"><p class="num">1,860</p><p class="label">households shopped with us</p></div>
<div class="stat"><p class="num">412,000</p><p class="label">pounds of food shared</p></div>
<div class="stat"><p class="num">9,400</p><p class="label">weekend backpacks packed</p></div>
<div class="stat"><p class="num">640</p><p class="label">volunteers gave their time</p></div>
</div>
<p class="note">Households are counted once however often they visited. Pounds are weighed at the warehouse door.</p>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Our finances</p>
<h2>Where the money went, and where it came from</h2>
<p>We keep overheads low by relying on volunteers and donated warehouse space, so most of every dollar buys food or gets it to people.</p>
</div>
<div class="money">
<div class="panel">
<h3>Where each dollar went</h3>
<p class="total">Total spending in 2025: $642,000</p>
<div class="bars">
<div class="bar-label"><span>Food and programs</span><span>84%</span></div><div class="track"><div class="fill" style="width:84%"></div></div>
<div class="bar-label"><span>Fundraising</span><span>9%</span></div><div class="track"><div class="fill" style="width:9%"></div></div>
<div class="bar-label"><span>Administration</span><span>7%</span></div><div class="track"><div class="fill" style="width:7%"></div></div>
</div>
</div>
<div class="panel">
<h3>Where the money came from</h3>
<p class="total">Total income in 2025: $668,000</p>
<div class="bars">
<div class="bar-label"><span>Individual donors</span><span>48%</span></div><div class="track"><div class="fill fill-gold" style="width:48%"></div></div>
<div class="bar-label"><span>Foundation grants</span><span>21%</span></div><div class="track"><div class="fill fill-gold" style="width:21%"></div></div>
<div class="bar-label"><span>Local businesses</span><span>14%</span></div><div class="track"><div class="fill fill-gold" style="width:14%"></div></div>
<div class="bar-label"><span>Community and faith groups</span><span>11%</span></div><div class="track"><div class="fill fill-gold" style="width:11%"></div></div>
<div class="bar-label"><span>Events</span><span>6%</span></div><div class="track"><div class="fill fill-gold" style="width:6%"></div></div>
</div>
</div>
</div>
<p class="money-note">Food donated by farms and grocers is not counted in these totals. The $26,000 surplus went into our reserve, which covers three months of operating costs.</p>
</div>
</section>
<section class="blush">
<div class="wrap story">
<img class="story-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/volunteers-sorting.jpg" width="1600" height="1000" alt="Volunteers in aprons sorting fresh vegetables into crates at long tables in a bright warehouse">
<div>
<p class="eyebrow">Story of the year</p>
<h2>The Saturday the apples came in</h2>
<p>In September a hailstorm marked the skins of half the apple crop at a Corran Valley orchard. The fruit was fine to eat but could not be sold to stores. The grower called us on a Thursday; by Saturday forty volunteers had sorted and bagged 18,000 pounds of apples.</p>
<p>Those apples went home with Pantry Market shoppers, into every Weekend Backpack for six weeks and onto the Mobile Pantry truck.</p>
<figure class="quote">
<blockquote>“Nobody had to be asked twice. People who came to shop that morning stayed to help us bag.”</blockquote>
<figcaption><cite>Lena Ortiz</cite> — Saturday crew lead</figcaption>
</figure>
</div>
</div>
</section>
<section id="about">
<div class="wrap gov">
<div>
<p class="eyebrow">Who runs the pantry</p>
<h2>A volunteer board and two paid staff</h2>
<p>Bramwell Community Pantry is an independent nonprofit. A board of local volunteers sets policy and approves the budget; our director and warehouse coordinator run the day-to-day work. Board members are not paid.</p>
<div class="board">
<div><span class="dot">●</span><span>Dana Whitcomb · Board chair, retired school principal</span></div>
<div><span class="dot">●</span><span>Theo Bell · Treasurer, small-business accountant</span></div>
<div><span class="dot">●</span><span>Priya Raman · Secretary, family nurse practitioner</span></div>
<div><span class="dot">●</span><span>Joe Kessler · Member, orchard owner in the Corran Valley</span></div>
<div><span class="dot">●</span><span>Rosa Duarte · Member, former pantry shopper and volunteer</span></div>
</div>
</div>
<div>
<p class="eyebrow">Transparency</p>
<h2>You can check our work</h2>
<div class="checks">
<div class="check"><span class="check-icon">✓</span><h3>Reviewed every year</h3><p>An independent accountant reviews our books each spring. The full financial statements are available on request.</p></div>
<div class="check"><span class="check-icon">✓</span><h3>Public tax filings</h3><p>Our annual nonprofit tax return is a public document. Email us and we will send the latest one.</p></div>
<div class="check"><span class="check-icon">✓</span><h3>Open board meetings</h3><p>The board meets on the second Monday of each quarter at 6 pm in the warehouse, and anyone may attend.</p></div>
</div>
<a class="ghost" href="mailto:[email protected]">Request our financial statements</a>
</div>
</div>
</section>
<section class="dark cta">
<div class="wrap">
<div class="inner">
<h2>Help write next year’s report</h2>
<p>Every number on this page started with one person giving an hour or a few dollars.</p>
<div class="actions">
<a class="button" href="/donate/">Donate</a>
<a class="light" href="/programs/#volunteer">Volunteer</a>
</div>
</div>
</div>
</section>
</body>
</html>
