Scrollspy
Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year. We listen first, then build a plan around what you actually need.
Friendly people answer your questions quickly, by phone, chat or email. Our annual report is independently audited and published in full. We measure success by how many donors come back and tell their friends.
Details
Monthly gifts let us plan ahead and respond quickly when disaster strikes. We have helped more than two hundred thousand people since we started. You receive photos and updates showing exactly what your donation achieved.
Every donation is tax-deductible, and receipts arrive by email instantly. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.
Pricing
Start in minutes and get help from a real person whenever you need it. Volunteers give their time in schools, shelters and food banks every week. Local partners know their communities and make sure help arrives where it matters.
We keep things simple, so you can focus on what matters to you. Ninety cents of every dollar goes directly to the projects you support. Every donation is tax-deductible, and receipts arrive by email instantly.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Bloom Kit</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year. We listen first, then build a plan around what you actually need.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our annual report is independently audited and published in full. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. We have helped more than two hundred thousand people since we started. You receive photos and updates showing exactly what your donation achieved.</p>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Volunteers give their time in schools, shelters and food banks every week. Local partners know their communities and make sure help arrives where it matters.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Ninety cents of every dollar goes directly to the projects you support. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
You receive photos and updates showing exactly what your donation achieved. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way.
Step two
Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support.
Step three
We measure success by how many donors come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Clean water wells are built with and maintained by local communities.
Step four
We have helped more than two hundred thousand people since we started. Local partners know their communities and make sure help arrives where it matters. Our annual report is independently audited and published in full.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">You receive photos and updates showing exactly what your donation achieved. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">We measure success by how many donors come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Local partners know their communities and make sure help arrives where it matters. Our annual report is independently audited and published in full.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Education fund
We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. A school kit costs less than a cinema ticket and lasts a whole year.
Clean water
Start in minutes and get help from a real person whenever you need it. Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations. Thousands of donors already trust us, and we work hard to keep it that way.
Volunteer programs
You receive photos and updates showing exactly what your donation achieved. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.
Questions
Every donation is tax-deductible, and receipts arrive by email instantly. A school kit costs less than a cinema ticket and lasts a whole year. Leave a gift in your will and help future generations.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Education fund</a><a class="nav-link" href="#spy-1132">Clean water</a><a class="nav-link" href="#spy-1133">Volunteer programs</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Education fund</h3>
<p class="small">We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Clean water</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Volunteer programs</h3>
<p class="small">You receive photos and updates showing exactly what your donation achieved. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. A school kit costs less than a cinema ticket and lasts a whole year. Leave a gift in your will and help future generations.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
We have helped more than two hundred thousand people since we started. Ninety cents of every dollar goes directly to the projects you support. We measure success by how many donors come back and tell their friends. We listen first, then build a plan around what you actually need.
Install
Clean water wells are built with and maintained by local communities. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Local partners know their communities and make sure help arrives where it matters. Every detail is handled by people who care about getting it right.
Configure
Thousands of donors already trust us, and we work hard to keep it that way. Companies can match employee donations and double their impact. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.
Usage
Volunteers give their time in schools, shelters and food banks every week. Our annual report is independently audited and published in full. Our team has done this many times, so you never have to guess. A school kit costs less than a cinema ticket and lasts a whole year.
Examples
Clean water wells are built with and maintained by local communities. Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Ninety cents of every dollar goes directly to the projects you support. We measure success by how many donors come back and tell their friends. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Clean water wells are built with and maintained by local communities. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Local partners know their communities and make sure help arrives where it matters. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. Companies can match employee donations and double their impact. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Our annual report is independently audited and published in full. Our team has done this many times, so you never have to guess. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Clean water wells are built with and maintained by local communities. Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
We have helped more than two hundred thousand people since we started. Local partners know their communities and make sure help arrives where it matters. We keep things simple, so you can focus on what matters to you.
Midday
Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.
Afternoon
We listen first, then build a plan around what you actually need. We measure success by how many donors come back and tell their friends. Companies can match employee donations and double their impact.
Evening
Thousands of donors already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Local partners know their communities and make sure help arrives where it matters. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">We listen first, then build a plan around what you actually need. We measure success by how many donors come back and tell their friends. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. Ninety cents of every dollar goes directly to the projects you support.
Beta
Our annual report is independently audited and published in full. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Our team has done this many times, so you never have to guess. Volunteers give their time in schools, shelters and food banks every week.
Gamma
We keep things simple, so you can focus on what matters to you. You receive photos and updates showing exactly what your donation achieved. Clean water wells are built with and maintained by local communities.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Our annual report is independently audited and published in full. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Our team has done this many times, so you never have to guess. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. You receive photos and updates showing exactly what your donation achieved. Clean water wells are built with and maintained by local communities.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Thousands of donors already trust us, and we work hard to keep it that way. A school kit costs less than a cinema ticket and lasts a whole year. We have helped more than two hundred thousand people since we started. Clear prices, honest advice and no surprises along the way.
Features
We measure success by how many donors come back and tell their friends. Every detail is handled by people who care about getting it right. Local partners know their communities and make sure help arrives where it matters. Ninety cents of every dollar goes directly to the projects you support.
Reviews
Friendly people answer your questions quickly, by phone, chat or email. Every donation is tax-deductible, and receipts arrive by email instantly. Start in minutes and get help from a real person whenever you need it. Leave a gift in your will and help future generations.
FAQ
We listen first, then build a plan around what you actually need. Our annual report is independently audited and published in full. Companies can match employee donations and double their impact. Every donation is tax-deductible, and receipts arrive by email instantly.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. A school kit costs less than a cinema ticket and lasts a whole year. We have helped more than two hundred thousand people since we started. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">We measure success by how many donors come back and tell their friends. Every detail is handled by people who care about getting it right. Local partners know their communities and make sure help arrives where it matters. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every donation is tax-deductible, and receipts arrive by email instantly. Start in minutes and get help from a real person whenever you need it. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">We listen first, then build a plan around what you actually need. Our annual report is independently audited and published in full. Companies can match employee donations and double their impact. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Ninety cents of every dollar goes directly to the projects you support. Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week.
Background
We listen first, then build a plan around what you actually need. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Every detail is handled by people who care about getting it right.
Method
We have helped more than two hundred thousand people since we started. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess.
Results
We measure success by how many donors come back and tell their friends. Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">We listen first, then build a plan around what you actually need. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">We measure success by how many donors come back and tell their friends. Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
Clear prices, honest advice and no surprises along the way. Leave a gift in your will and help future generations. You receive photos and updates showing exactly what your donation achieved. Start in minutes and get help from a real person whenever you need it.
Set up your profile
We keep things simple, so you can focus on what matters to you. Thousands of donors already trust us, and we work hard to keep it that way. A school kit costs less than a cinema ticket and lasts a whole year.
Invite the team
Local partners know their communities and make sure help arrives where it matters. Ninety cents of every dollar goes directly to the projects you support. Our annual report is independently audited and published in full. Volunteers give their time in schools, shelters and food banks every week.
Go live
Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. A school kit costs less than a cinema ticket and lasts a whole year.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Leave a gift in your will and help future generations. You receive photos and updates showing exactly what your donation achieved. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Thousands of donors already trust us, and we work hard to keep it that way. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Ninety cents of every dollar goes directly to the projects you support. Our annual report is independently audited and published in full. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Meet the partners behind our water projects
Clean water wells are built with and maintained by local communities. Leave a gift in your will and help future generations. We have helped more than two hundred thousand people since we started. We measure success by how many donors come back and tell their friends.
Looking back at a busy season
We listen first, then build a plan around what you actually need. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess. You receive photos and updates showing exactly what your donation achieved.
Stories from the families we support
Every detail is handled by people who care about getting it right. Every donation is tax-deductible, and receipts arrive by email instantly. Local partners know their communities and make sure help arrives where it matters.
Our favourite tips for busy weeks
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">Meet the partners behind our water projects</h3>
<p class="small mb-0">Clean water wells are built with and maintained by local communities. Leave a gift in your will and help future generations. We have helped more than two hundred thousand people since we started. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">Looking back at a busy season</h3>
<p class="small mb-0">We listen first, then build a plan around what you actually need. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Stories from the families we support</h3>
<p class="small mb-0">Every detail is handled by people who care about getting it right. Every donation is tax-deductible, and receipts arrive by email instantly. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">Our favourite tips for busy weeks</h3>
<p class="small mb-0">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Our yearly impact report, explained?
- Thousands of donors already trust us, and we work hard to keep it that way.
- How to choose the right campaign?
- Clean water wells are built with and maintained by local communities.
- A beginner's guide to getting started?
- Ninety cents of every dollar goes directly to the projects you support.
Shipping
- Inside the shelter: from rescue to new home?
- Thousands of donors already trust us, and we work hard to keep it that way.
- What our donors asked us most?
- Our team has done this many times, so you never have to guess.
- Why monthly giving makes such a difference?
- Volunteers give their time in schools, shelters and food banks every week.
Returns
- What happens after a disaster appeal?
- Friendly people answer your questions quickly, by phone, chat or email.
- How your donations built three new classrooms?
- Start in minutes and get help from a real person whenever you need it.
- Five things we learned this year?
- We keep things simple, so you can focus on what matters to you.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Our yearly impact report, explained?</dt>
<dd class="small text-body-secondary">Thousands of donors already trust us, and we work hard to keep it that way.</dd>
<dt class="small">How to choose the right campaign?</dt>
<dd class="small text-body-secondary">Clean water wells are built with and maintained by local communities.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Ninety cents of every dollar goes directly to the projects you support.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Inside the shelter: from rescue to new home?</dt>
<dd class="small text-body-secondary">Thousands of donors already trust us, and we work hard to keep it that way.</dd>
<dt class="small">What our donors asked us most?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">Why monthly giving makes such a difference?</dt>
<dd class="small text-body-secondary">Volunteers give their time in schools, shelters and food banks every week.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">What happens after a disaster appeal?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
<dt class="small">How your donations built three new classrooms?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Every detail is handled by people who care about getting it right. Local partners know their communities and make sure help arrives where it matters. Every donation is tax-deductible, and receipts arrive by email instantly.
Battery
Our annual report is independently audited and published in full. Companies can match employee donations and double their impact. We have helped more than two hundred thousand people since we started.
Connectivity
Monthly gifts let us plan ahead and respond quickly when disaster strikes. We listen first, then build a plan around what you actually need. A school kit costs less than a cinema ticket and lasts a whole year.
Security
Leave a gift in your will and help future generations. Clear prices, honest advice and no surprises along the way. You receive photos and updates showing exactly what your donation achieved.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Every detail is handled by people who care about getting it right. Local partners know their communities and make sure help arrives where it matters. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Our annual report is independently audited and published in full. Companies can match employee donations and double their impact. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. We listen first, then build a plan around what you actually need. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Leave a gift in your will and help future generations. Clear prices, honest advice and no surprises along the way. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$12.19 / mo
- Local partners
- Secure giving
- Impact tracking
Team
$41.93 / mo
- Local partners
- Local partners
- Impact tracking
Business
$52.43 / mo
- Transparent reports
- Impact tracking
- Secure giving
<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$12.19<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Local partners</li>
<li>Secure giving</li>
<li>Impact tracking</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$41.93<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Local partners</li>
<li>Local partners</li>
<li>Impact tracking</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$52.43<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Transparent reports</li>
<li>Impact tracking</li>
<li>Secure giving</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Ten ways to fundraise with friends
We measure success by how many donors come back and tell their friends. Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations. Start in minutes and get help from a real person whenever you need it.
A school kit costs less than a cinema ticket and lasts a whole year. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. We have helped more than two hundred thousand people since we started.
Chapter 2: Why we plant trees with the schools we build
Ninety cents of every dollar goes directly to the projects you support. Our annual report is independently audited and published in full. Local partners know their communities and make sure help arrives where it matters. Clean water wells are built with and maintained by local communities.
Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Companies can match employee donations and double their impact.
Chapter 3: The small habits that make a big difference
Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. We measure success by how many donors come back and tell their friends. We listen first, then build a plan around what you actually need.
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way. Thousands of donors already trust us, and we work hard to keep it that way.
Chapter 4: A day in the life of a volunteer
Leave a gift in your will and help future generations. We listen first, then build a plan around what you actually need. We have helped more than two hundred thousand people since we started.
Volunteers give their time in schools, shelters and food banks every week. Every detail is handled by people who care about getting it right. We measure success by how many donors come back and tell their friends.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Ten ways to fundraise with friends</h3>
<p class="small">We measure success by how many donors come back and tell their friends. Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations. Start in minutes and get help from a real person whenever you need it.</p>
<p class="small">A school kit costs less than a cinema ticket and lasts a whole year. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Why we plant trees with the schools we build</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Our annual report is independently audited and published in full. Local partners know their communities and make sure help arrives where it matters. Clean water wells are built with and maintained by local communities.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: The small habits that make a big difference</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. We measure success by how many donors come back and tell their friends. We listen first, then build a plan around what you actually need.</p>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: A day in the life of a volunteer</h3>
<p class="small">Leave a gift in your will and help future generations. We listen first, then build a plan around what you actually need. We have helped more than two hundred thousand people since we started.</p>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Every detail is handled by people who care about getting it right. We measure success by how many donors come back and tell their friends.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Our annual report is independently audited and published in full. Every donation is tax-deductible, and receipts arrive by email instantly. Companies can match employee donations and double their impact.
Notifications
Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Ninety cents of every dollar goes directly to the projects you support.
Privacy
Start in minutes and get help from a real person whenever you need it. Clean water wells are built with and maintained by local communities. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-3">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Chloe Carter">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Oslo">
</div>
<p class="small">Our annual report is independently audited and published in full. Every donation is tax-deductible, and receipts arrive by email instantly. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1190" class="pb-3">
<h3 class="h6">Notifications</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
<label class="form-check-label small" for="spy-sw-1194">Product news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
<label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
</div>
<p class="small">Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1191" class="pb-3">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Start in minutes and get help from a real person whenever you need it. Clean water wells are built with and maintained by local communities. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Sales
- Theo HughesProject Manager
- Freya DelgadoBackend Engineer
- Ella QuinnSupport Specialist
Research
- Theo KowalskiSales Executive
- Hana RossiMarketing Lead
- Liam AlvarezSupport Specialist
Marketing
- Isla MoreauData Analyst
- Tariq AshfordContent Writer
- Kenji PatelProduct Designer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Research</a><a class="nav-link" href="#spy-1200">Marketing</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Theo Hughes"><div><div class="small fw-semibold">Theo Hughes</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Freya Delgado"><div><div class="small fw-semibold">Freya Delgado</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Ella Quinn"><div><div class="small fw-semibold">Ella Quinn</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Research</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Theo Kowalski"><div><div class="small fw-semibold">Theo Kowalski</div><div class="small text-body-secondary">Sales Executive</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Hana Rossi"><div><div class="small fw-semibold">Hana Rossi</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Liam Alvarez"><div><div class="small fw-semibold">Liam Alvarez</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Isla Moreau"><div><div class="small fw-semibold">Isla Moreau</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Tariq Ashford"><div><div class="small fw-semibold">Tariq Ashford</div><div class="small text-body-secondary">Content Writer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Kenji Patel"><div><div class="small fw-semibold">Kenji Patel</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Education
- School kit$28.99
- Meal pack$15.00
- Tree planting$10.00
Relief
- Meal pack$16.00
- Emergency fund$47.99
- Solar lamp$17.99
Animals
- Health kit$35.00
- Emergency fund$54.99
- Vet care$55.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Education</a><a class="nav-link" href="#spy-1203">Relief</a><a class="nav-link" href="#spy-1204">Animals</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Education</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>School kit</span><span class="fw-semibold">$28.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Meal pack</span><span class="fw-semibold">$15.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Tree planting</span><span class="fw-semibold">$10.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Relief</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Meal pack</span><span class="fw-semibold">$16.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Emergency fund</span><span class="fw-semibold">$47.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Solar lamp</span><span class="fw-semibold">$17.99</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Animals</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Health kit</span><span class="fw-semibold">$35.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Emergency fund</span><span class="fw-semibold">$54.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Vet care</span><span class="fw-semibold">$55.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Our team has done this many times, so you never have to guess. You receive photos and updates showing exactly what your donation achieved. Local partners know their communities and make sure help arrives where it matters.
This week
Thousands of donors already trust us, and we work hard to keep it that way. A school kit costs less than a cinema ticket and lasts a whole year. Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations.
Later
Clear prices, honest advice and no surprises along the way. Ninety cents of every dollar goes directly to the projects you support. We measure success by how many donors come back and tell their friends.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">Our team has done this many times, so you never have to guess. You receive photos and updates showing exactly what your donation achieved. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. A school kit costs less than a cinema ticket and lasts a whole year. Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Ninety cents of every dollar goes directly to the projects you support. We measure success by how many donors come back and tell their friends.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
We have helped more than two hundred thousand people since we started. Our annual report is independently audited and published in full. Friendly people answer your questions quickly, by phone, chat or email.
Orbit
Monthly gifts let us plan ahead and respond quickly when disaster strikes. You receive photos and updates showing exactly what your donation achieved. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.
Landing
Clean water wells are built with and maintained by local communities. Our team has done this many times, so you never have to guess. Volunteers give their time in schools, shelters and food banks every week.
<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Our annual report is independently audited and published in full. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. You receive photos and updates showing exactly what your donation achieved. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Clean water wells are built with and maintained by local communities. Our team has done this many times, so you never have to guess. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Oct 8, 2025
- NewEvery donation is tax-deductible, and receipts arrive by email instantly.
- ImprovedStart in minutes and get help from a real person whenever you need it.
- FixedA school kit costs less than a cinema ticket and lasts a whole year.
v3.1 Jul 18, 2026
- NewThousands of donors already trust us, and we work hard to keep it that way.
- ImprovedCompanies can match employee donations and double their impact.
- FixedWe keep things simple, so you can focus on what matters to you.
v3.0 May 10, 2026
- NewLocal partners know their communities and make sure help arrives where it matters.
- ImprovedWe measure success by how many donors come back and tell their friends.
- FixedThousands of donors already trust us, and we work hard to keep it that way.
v2.9 Mar 26, 2026
- NewA school kit costs less than a cinema ticket and lasts a whole year.
- ImprovedMonthly gifts let us plan ahead and respond quickly when disaster strikes.
- FixedClear prices, honest advice and no surprises along the way.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Oct 8, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every donation is tax-deductible, and receipts arrive by email instantly.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>A school kit costs less than a cinema ticket and lasts a whole year.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jul 18, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of donors already trust us, and we work hard to keep it that way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Companies can match employee donations and double their impact.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">May 10, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Local partners know their communities and make sure help arrives where it matters.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We measure success by how many donors come back and tell their friends.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of donors already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Mar 26, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>A school kit costs less than a cinema ticket and lasts a whole year.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Monthly gifts let us plan ahead and respond quickly when disaster strikes.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
</ul>
</div>
</div>
</div>
</div>