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
Every detail is handled by people who care about getting it right. Clean water wells are built with and maintained by local communities. 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. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.
Details
Ninety cents of every dollar goes directly to the projects you support. We keep things simple, so you can focus on what matters to you. Volunteers give their time in schools, shelters and food banks every week. Every donation is tax-deductible, and receipts arrive by email instantly.
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. We measure success by how many donors come back and tell their friends.
Pricing
We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Local partners know their communities and make sure help arrives where it matters.
Leave a gift in your will and help future generations. Our annual report is independently audited and published in full. Companies can match employee donations and double their impact.
<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
<a class="navbar-brand" href="#">Glowia</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="relative border rounded-md p-4" 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-4">
<h3 class="h6">Intro</h3>
<p class="small">Every detail is handled by people who care about getting it right. Clean water wells are built with and maintained by local communities. 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>
<p class="small">We have helped more than two hundred thousand people since we started. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1123" class="pb-4">
<h3 class="h6">Details</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. We keep things simple, so you can focus on what matters to you. Volunteers give their time in schools, shelters and food banks every week. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
<p class="small">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. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1124" class="pb-4">
<h3 class="h6">Pricing</h3>
<p class="small">We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Local partners know their communities and make sure help arrives where it matters.</p>
<p class="small">Leave a gift in your will and help future generations. Our annual report is independently audited and published in full. Companies can match employee donations and double their impact.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Monthly gifts let us plan ahead and respond quickly when disaster strikes. We listen first, then build a plan around what you actually need. Local partners know their communities and make sure help arrives where it matters.
Step two
Every donation is tax-deductible, and receipts arrive by email instantly. Volunteers give their time in schools, shelters and food banks every week. Our annual report is independently audited and published in full.
Step three
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. Start in minutes and get help from a real person whenever you need it.
Step four
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. You receive photos and updates showing exactly what your donation achieved.
<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="relative border rounded-md p-4" 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-4">
<h3 class="h6">Step one</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. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1127" class="pb-4">
<h3 class="h6">Step two</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. Volunteers give their time in schools, shelters and food banks every week. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1128" class="pb-4">
<h3 class="h6">Step three</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. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1129" class="pb-4">
<h3 class="h6">Step four</h3>
<p class="small">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. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Disaster response
We measure success by how many donors come back and tell their friends. Clean water wells are built with and maintained by local communities. We have helped more than two hundred thousand people since we started. We keep things simple, so you can focus on what matters to you.
Food relief
Every detail is handled by people who care about getting it right. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way.
Volunteer programs
Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year.
Questions
Our annual report is independently audited and published in full. Volunteers give their time in schools, shelters and food banks every week. Every detail is handled by people who care about getting it right.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-col">
<a class="nav-link" href="#spy-1131">Disaster response</a><a class="nav-link" href="#spy-1132">Food relief</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="relative border rounded-md p-4" 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-4">
<h3 class="h6">Disaster response</h3>
<p class="small">We measure success by how many donors come back and tell their friends. Clean water wells are built with and maintained by local communities. We have helped more than two hundred thousand people since we started. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1132" class="pb-4">
<h3 class="h6">Food relief</h3>
<p class="small">Every detail is handled by people who care about getting it right. 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-1133" class="pb-4">
<h3 class="h6">Volunteer programs</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1134" class="pb-4">
<h3 class="h6">Questions</h3>
<p class="small">Our annual report is independently audited and published in full. Volunteers give their time in schools, shelters and food banks every week. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
We keep things simple, so you can focus on what matters to you. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. Clear prices, honest advice and no surprises along the way.
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. Thousands of donors already trust us, and we work hard to keep it that way.
Configure
Start in minutes and get help from a real person whenever you need it. Every donation is tax-deductible, and receipts arrive by email instantly. We have helped more than two hundred thousand people since we started. Leave a gift in your will and help future generations.
Usage
Friendly people answer your questions quickly, by phone, chat or email. 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. You receive photos and updates showing exactly what your donation achieved.
Examples
Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Thousands of donors already trust us, and we work hard to keep it that 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-1135" class="h-full flex-col items-stretch">
<nav class="nav nav-pills flex-col">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-col">
<a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-col">
<a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="relative border rounded-md p-4" 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-4">
<h3 class="h6">Getting started</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1137" class="pb-4">
<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. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1138" class="pb-4">
<h3 class="h6">Configure</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Every donation is tax-deductible, and receipts arrive by email instantly. We have helped more than two hundred thousand people since we started. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1139" class="pb-4">
<h3 class="h6">Usage</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1140" class="pb-4">
<h3 class="h6">Examples</h3>
<p class="small">Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Thousands of donors already trust us, and we work hard to keep it that way. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities. We measure success by how many donors come back and tell their friends.
Midday
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 donation is tax-deductible, and receipts arrive by email instantly.
Afternoon
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. Volunteers give their time in schools, shelters and food banks every week. Clear prices, honest advice and no surprises along the way.
Evening
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. We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations.
<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="relative border rounded-md p-4" 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-4">
<h3 class="h6">Morning</h3>
<p class="small">Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1143" class="pb-4">
<h3 class="h6">Midday</h3>
<p class="small">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 donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
<div id="spy-1144" class="pb-4">
<h3 class="h6">Afternoon</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. Volunteers give their time in schools, shelters and food banks every week. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1145" class="pb-4">
<h3 class="h6">Evening</h3>
<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. We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
We have helped more than two hundred thousand people since we started. Ninety cents of every dollar goes directly to the projects you support. Companies can match employee donations and double their impact.
Beta
Friendly people answer your questions quickly, by phone, chat or email. Local partners know their communities and make sure help arrives where it matters. We measure success by how many donors come back and tell their friends. Thousands of donors already trust us, and we work hard to keep it that way.
Gamma
Every detail is handled by people who care about getting it right. You receive photos and updates showing exactly what your donation achieved. Ninety cents of every dollar goes directly to the projects you support.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="flex flex-col gap-2 small">
<a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="relative border rounded-md p-4" 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-4">
<h3 class="h6">Alpha</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. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1148" class="pb-4">
<h3 class="h6">Beta</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Local partners know their communities and make sure help arrives where it matters. We measure success by how many donors come back and tell their friends. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1149" class="pb-4">
<h3 class="h6">Gamma</h3>
<p class="small">Every detail is handled by people who care about getting it right. 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>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Monthly gifts let us plan ahead and respond quickly when disaster strikes. We have helped more than two hundred thousand people since we started.
Features
Companies can match employee donations and double their impact. Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email.
Reviews
Volunteers give their time in schools, shelters and food banks every week. Our team has done this many times, so you never have to guess. Our annual report is independently audited and published in full. Start in minutes and get help from a real person whenever you need it.
FAQ
Clean water wells are built with and maintained by local communities. 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. Leave a gift in your will and help future generations.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-b">
<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="relative border rounded-md p-4 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-4">
<h3 class="h6">Overview</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Monthly gifts let us plan ahead and respond quickly when disaster strikes. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1152" class="pb-4">
<h3 class="h6">Features</h3>
<p class="small">Companies can match employee donations and double their impact. Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1153" class="pb-4">
<h3 class="h6">Reviews</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Our team has done this many times, so you never have to guess. Our annual report is independently audited and published in full. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1154" class="pb-4">
<h3 class="h6">FAQ</h3>
<p class="small">Clean water wells are built with and maintained by local communities. 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. Leave a gift in your will and help future generations.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Our team has done this many times, so you never have to guess. Companies can match employee donations and double their impact. Every donation is tax-deductible, and receipts arrive by email instantly. Clean water wells are built with and maintained by local communities.
Background
Leave a gift in your will and help future generations. You receive photos and updates showing exactly what your donation achieved. We have helped more than two hundred thousand people since we started.
Method
Every detail is handled by people who care about getting it right. Our annual report is independently audited and published in full. A school kit costs less than a cinema ticket and lasts a whole year.
Results
We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Ninety cents of every dollar goes directly to the projects you support.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="relative border rounded-md p-4" 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-4">
<h3 class="h6">Summary</h3>
<p class="small">Our team has done this many times, so you never have to guess. Companies can match employee donations and double their impact. Every donation is tax-deductible, and receipts arrive by email instantly. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1157" class="pb-4">
<h3 class="h6">Background</h3>
<p class="small">Leave a gift in your will and help future generations. You receive photos and updates showing exactly what your donation achieved. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1158" class="pb-4">
<h3 class="h6">Method</h3>
<p class="small">Every detail is handled by people who care about getting it right. Our annual report is independently audited and published in full. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1159" class="pb-4">
<h3 class="h6">Results</h3>
<p class="small">We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first md:order-last">
<p class="small font-semibold uppercase text-muted mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-col 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
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.
Set up your profile
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. We measure success by how many donors come back and tell their friends.
Invite the team
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. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
Go live
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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
<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="relative border rounded-md p-4" 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-4">
<h3 class="h6">Create an account</h3>
<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-1162" class="pb-4">
<h3 class="h6">Set up your profile</h3>
<p class="small">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. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1163" class="pb-4">
<h3 class="h6">Invite the team</h3>
<p class="small">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. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1164" class="pb-4">
<h3 class="h6">Go live</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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
What our donors asked us most
Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week. Thousands of donors already trust us, and we work hard to keep it that way.
Inside the shelter: from rescue to new home
Local partners know their communities and make sure help arrives where it matters. We have helped more than two hundred thousand people since we started. Every donation is tax-deductible, and receipts arrive by email instantly. Companies can match employee donations and double their impact.
Our yearly impact report, explained
Clean water wells are built with and maintained by local communities. Our annual report is independently audited and published in full. We measure success by how many donors come back and tell their friends. You receive photos and updates showing exactly what your donation achieved.
Meet the partners behind our water projects
Ninety cents of every dollar goes directly to the projects you support. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations.
<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="relative border rounded-md p-4" 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-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">What our donors asked us most</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">Inside the shelter: from rescue to new home</h3>
<p class="small mb-0">Local partners know their communities and make sure help arrives where it matters. We have helped more than two hundred thousand people since we started. 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-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Our yearly impact report, explained</h3>
<p class="small mb-0">Clean water wells are built with and maintained by local communities. Our annual report is independently audited and published in full. We measure success by how many donors come back and tell their friends. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">Meet the partners behind our water projects</h3>
<p class="small mb-0">Ninety cents of every dollar goes directly to the projects you support. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- A day in the life of a volunteer?
- Companies can match employee donations and double their impact.
- Our favourite tips for busy weeks?
- We keep things simple, so you can focus on what matters to you.
- Looking back at a busy season?
- Our annual report is independently audited and published in full.
Shipping
- A beginner's guide to getting started?
- Ninety cents of every dollar goes directly to the projects you support.
- The small habits that make a big difference?
- We measure success by how many donors come back and tell their friends.
- Why we plant trees with the schools we build?
- Clean water wells are built with and maintained by local communities.
Returns
- Why monthly giving makes such a difference?
- Every donation is tax-deductible, and receipts arrive by email instantly.
- Five things we learned this year?
- We listen first, then build a plan around what you actually need.
- Stories from the families we support?
- Monthly gifts let us plan ahead and respond quickly when disaster strikes.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
<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="relative border rounded-md p-4" 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-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">A day in the life of a volunteer?</dt>
<dd class="small text-muted">Companies can match employee donations and double their impact.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-muted">We keep things simple, so you can focus on what matters to you.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-muted">Our annual report is independently audited and published in full.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-muted">Ninety cents of every dollar goes directly to the projects you support.</dd>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-muted">We measure success by how many donors come back and tell their friends.</dd>
<dt class="small">Why we plant trees with the schools we build?</dt>
<dd class="small text-muted">Clean water wells are built with and maintained by local communities.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-4">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Why monthly giving makes such a difference?</dt>
<dd class="small text-muted">Every donation is tax-deductible, and receipts arrive by email instantly.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-muted">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">Stories from the families we support?</dt>
<dd class="small text-muted">Monthly gifts let us plan ahead and respond quickly when disaster strikes.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Friendly people answer your questions quickly, by phone, chat or email. Thousands of donors already trust us, and we work hard to keep it that way. We have helped more than two hundred thousand people since we started.
Battery
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. Volunteers give their time in schools, shelters and food banks every week. You receive photos and updates showing exactly what your donation achieved.
Connectivity
Clear prices, honest advice and no surprises along the way. Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year.
Security
Our team has done this many times, so you never have to guess. Local partners know their communities and make sure help arrives where it matters. You receive photos and updates showing exactly what your donation achieved. Leave a gift in your will and help future generations.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-col">
<a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex 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="relative border rounded-md p-4" 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-4">
<h3 class="h6">Performance</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Thousands of donors already trust us, and we work hard to keep it that way. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1176" class="pb-4">
<h3 class="h6">Battery</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. Volunteers give their time in schools, shelters and food banks every week. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1177" class="pb-4">
<h3 class="h6">Connectivity</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1178" class="pb-4">
<h3 class="h6">Security</h3>
<p class="small">Our team has done this many times, so you never have to guess. Local partners know their communities and make sure help arrives where it matters. You receive photos and updates showing exactly what your donation achieved. Leave a gift in your will and help future generations.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$10.25 / mo
- Secure giving
- Impact tracking
- Secure giving
Team
$34.58 / mo
- Secure giving
- Transparent reports
- Secure giving
Business
$59.91 / mo
- Volunteer network
- Transparent reports
- Volunteer network
<nav id="spy-nav-1179" class="nav nav-pills justify-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="relative border rounded-md p-4 bg-surface-3" 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-4">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="text-xl font-bold mb-1">$10.25<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Secure giving</li>
<li>Impact tracking</li>
<li>Secure giving</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="text-xl font-bold mb-1">$34.58<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Secure giving</li>
<li>Transparent reports</li>
<li>Secure giving</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-4">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="text-xl font-bold mb-1">$59.91<small class="text-base text-muted"> / mo</small></p>
<ul class="small mb-0">
<li>Volunteer network</li>
<li>Transparent reports</li>
<li>Volunteer network</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: What happens after a disaster appeal
We keep things simple, so you can focus on what matters to you. Every donation is tax-deductible, and receipts arrive by email instantly. 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. Friendly people answer your questions quickly, by phone, chat or email. Ninety cents of every dollar goes directly to the projects you support.
Chapter 2: Ten ways to fundraise with friends
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. Thousands of donors already trust us, and we work hard to keep it that way. Local partners know their communities and make sure help arrives where it matters.
A school kit costs less than a cinema ticket and lasts a whole year. Volunteers give their time in schools, shelters and food banks every week. Companies can match employee donations and double their impact. Our annual report is independently audited and published in full.
Chapter 3: How your donations built three new classrooms
We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.
Clean water wells are built with and maintained by local communities. Clear prices, honest advice and no surprises along the way. Clean water wells are built with and maintained by local communities.
Chapter 4: How to choose the right campaign
A school kit costs less than a cinema ticket and lasts a whole year. Start in minutes and get help from a real person whenever you need it. 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. Clear prices, honest advice and no surprises along the way. 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="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" 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-4">
<h3 class="h6">Chapter 1: What happens after a disaster appeal</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Every donation is tax-deductible, and receipts arrive by email instantly. We have helped more than two hundred thousand people since we started.</p>
<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. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1185" class="pb-4">
<h3 class="h6">Chapter 2: Ten ways to fundraise with friends</h3>
<p class="small">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. Thousands of donors already trust us, and we work hard to keep it that way. Local partners know their communities and make sure help arrives where it matters.</p>
<p class="small">A school kit costs less than a cinema ticket and lasts a whole year. Volunteers give their time in schools, shelters and food banks every week. Companies can match employee donations and double their impact. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1186" class="pb-4">
<h3 class="h6">Chapter 3: How your donations built three new classrooms</h3>
<p class="small">We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.</p>
<p class="small">Clean water wells are built with and maintained by local communities. Clear prices, honest advice and no surprises along the way. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1187" class="pb-4">
<h3 class="h6">Chapter 4: How to choose the right campaign</h3>
<p class="small">A school kit costs less than a cinema ticket and lasts a whole year. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.</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. 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
Volunteers give their time in schools, shelters and food banks every week. You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right. Our annual report is independently audited and published in full.
Notifications
We keep things simple, so you can focus on what matters to you. Every donation is tax-deductible, and receipts arrive by email instantly. We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations.
Privacy
Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. Local partners know their communities and make sure help arrives where it matters. Thousands of donors already trust us, and we work hard to keep it that way.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
<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="relative border rounded-md p-4" 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-4">
<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="Luna Rossi">
</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="Toronto">
</div>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1190" class="pb-4">
<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">We keep things simple, so you can focus on what matters to you. Every donation is tax-deductible, and receipts arrive by email instantly. We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1191" class="pb-4">
<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">Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. Local partners know their communities and make sure help arrives where it matters. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Human Resources
- Lea AlvarezSupport Specialist
- Lucas LarsenFinance Lead
- Arjun MensahArt Director
Legal
- Sofia AlvarezBackend Engineer
- Amara LindqvistFrontend Engineer
- Maya QuinnCustomer Success
Finance
- Ethan HughesSupport Specialist
- Ruby RossiMarketing Lead
- Noah DelgadoData Analyst
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Human Resources</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Finance</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
<h3 class="h6">Human Resources</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-full" width="36" height="36" alt="Lea Alvarez"><div><div class="small font-semibold">Lea Alvarez</div><div class="small text-muted">Support Specialist</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-full" width="36" height="36" alt="Lucas Larsen"><div><div class="small font-semibold">Lucas Larsen</div><div class="small text-muted">Finance Lead</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-full" width="36" height="36" alt="Arjun Mensah"><div><div class="small font-semibold">Arjun Mensah</div><div class="small text-muted">Art Director</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-4">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-full" width="36" height="36" alt="Sofia Alvarez"><div><div class="small font-semibold">Sofia Alvarez</div><div class="small text-muted">Backend Engineer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Amara Lindqvist"><div><div class="small font-semibold">Amara Lindqvist</div><div class="small text-muted">Frontend Engineer</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-full" width="36" height="36" alt="Maya Quinn"><div><div class="small font-semibold">Maya Quinn</div><div class="small text-muted">Customer Success</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-4">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-full" width="36" height="36" alt="Ethan Hughes"><div><div class="small font-semibold">Ethan Hughes</div><div class="small text-muted">Support Specialist</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-full" width="36" height="36" alt="Ruby Rossi"><div><div class="small font-semibold">Ruby Rossi</div><div class="small text-muted">Marketing Lead</div></div></li>
<li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-full" width="36" height="36" alt="Noah Delgado"><div><div class="small font-semibold">Noah Delgado</div><div class="small text-muted">Data Analyst</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Education
- Shelter support$39.00
- Clean water well$525.00
- School kit$32.00
Health
- Vet care$65.00
- School kit$32.00
- Tree planting$11.00
Environment
- Meal pack$14.00
- Health kit$33.00
- Library books$44.99
<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">Health</a><a class="nav-link" href="#spy-1204">Environment</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
<h3 class="h6">Education</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Shelter support</span><span class="font-semibold">$39.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Clean water well</span><span class="font-semibold">$525.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>School kit</span><span class="font-semibold">$32.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-4">
<h3 class="h6">Health</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Vet care</span><span class="font-semibold">$65.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>School kit</span><span class="font-semibold">$32.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Tree planting</span><span class="font-semibold">$11.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-4">
<h3 class="h6">Environment</h3>
<ul class="list-unstyled">
<li class="flex justify-between border-b py-2 small"><span>Meal pack</span><span class="font-semibold">$14.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Health kit</span><span class="font-semibold">$33.00</span></li>
<li class="flex justify-between border-b py-2 small"><span>Library books</span><span class="font-semibold">$44.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
We have helped more than two hundred thousand people since we started. Friendly people answer your questions quickly, by phone, chat or email. Our annual report is independently audited and published in full.
This week
Local partners know their communities and make sure help arrives where it matters. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started. Start in minutes and get help from a real person whenever you need it.
Later
Ninety cents of every dollar goes directly to the projects you support. Every detail is handled by people who care about getting it right. Clean water wells are built with and maintained by local communities.
<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="relative border rounded-md p-4 border-0 rounded-none" 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-4">
<h3 class="h6">Today</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Friendly people answer your questions quickly, by phone, chat or email. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1207" class="pb-4">
<h3 class="h6">This week</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1208" class="pb-4">
<h3 class="h6">Later</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Every detail is handled by people who care about getting it right. Clean water wells are built with and maintained by local communities.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many donors come back and tell their friends.
Orbit
You receive photos and updates showing exactly what your donation achieved. 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.
Landing
A school kit costs less than a cinema ticket and lasts a whole year. Companies can match employee donations and double their impact. We keep things simple, so you can focus on what matters to you.
<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
<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="relative border rounded-md p-4 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-4">
<h3 class="h6">Launch</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1211" class="pb-4">
<h3 class="h6">Orbit</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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1212" class="pb-4">
<h3 class="h6">Landing</h3>
<p class="small">A school kit costs less than a cinema ticket and lasts a whole year. Companies can match employee donations and double their impact. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Dec 5, 2025
- NewThousands of donors already trust us, and we work hard to keep it that way.
- ImprovedVolunteers give their time in schools, shelters and food banks every week.
- FixedWe listen first, then build a plan around what you actually need.
v3.1 Sep 22, 2025
- NewNinety cents of every dollar goes directly to the projects you support.
- ImprovedLeave a gift in your will and help future generations.
- FixedOur annual report is independently audited and published in full.
v3.0 Jan 29, 2026
- NewWe keep things simple, so you can focus on what matters to you.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedVolunteers give their time in schools, shelters and food banks every week.
v2.9 Jan 1, 2026
- NewStart in minutes and get help from a real person whenever you need it.
- 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.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-col 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="relative border rounded-md p-4" 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-4">
<h3 class="h6">v3.2 <small class="text-muted font-normal">Dec 5, 2025</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>Volunteers give their time in schools, shelters and food banks every week.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
</ul>
</div>
<div id="spy-1215" class="pb-4">
<h3 class="h6">v3.1 <small class="text-muted font-normal">Sep 22, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Ninety cents of every dollar goes directly to the projects you support.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Leave a gift in your will and help future generations.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our annual report is independently audited and published in full.</li>
</ul>
</div>
<div id="spy-1216" class="pb-4">
<h3 class="h6">v3.0 <small class="text-muted font-normal">Jan 29, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Volunteers give their time in schools, shelters and food banks every week.</li>
</ul>
</div>
<div id="spy-1217" class="pb-4">
<h3 class="h6">v2.9 <small class="text-muted font-normal">Jan 1, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</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-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>
</div>
</div>