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
Clear prices, honest advice and no surprises along the way. You receive photos and updates showing exactly what your donation achieved. We have helped more than two hundred thousand people since we started. A school kit costs less than a cinema ticket and lasts a whole year.
Companies can match employee donations and double their impact. Clean water wells are built with and maintained by local communities. Volunteers give their time in schools, shelters and food banks every week.
Details
Start in minutes and get help from a real person whenever you need it. Leave a gift in your will and help future generations. Our annual report is independently audited and published in full.
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. We listen first, then build a plan around what you actually need.
Pricing
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. 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.
Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Thousands of donors already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Rallyium</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">Clear prices, honest advice and no surprises along the way. You receive photos and updates showing exactly what your donation achieved. We have helped more than two hundred thousand people since we started. A school kit costs less than a cinema ticket and lasts a whole year.</p>
<p class="small">Companies can match employee donations and double their impact. Clean water wells are built with and maintained by local communities. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Leave a gift in your will and help future generations. Our annual report is independently audited and published in full.</p>
<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. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<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. 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.</p>
<p class="small">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Thousands of donors already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Volunteers give their time in schools, shelters and food banks every week. Start in minutes and get help from a real person whenever you need it. 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.
Step two
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. Every detail is handled by people who care about getting it right.
Step three
Leave a gift in your will and help future generations. We keep things simple, so you can focus on what matters to you. Clean water wells are built with and maintained by local communities. You receive photos and updates showing exactly what your donation achieved.
Step four
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. We measure success by how many donors come back and tell their friends.
<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">Volunteers give their time in schools, shelters and food banks every week. Start in minutes and get help from a real person whenever you need it. 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.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">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. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Leave a gift in your will and help future generations. We keep things simple, so you can focus on what matters to you. Clean water wells are built with and maintained by local communities. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">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. We measure success by how many donors come back and tell their friends.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Animal rescue
Ninety cents of every dollar goes directly to the projects you support. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Companies can match employee donations and double their impact.
Food relief
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. 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.
Volunteer programs
Our team has done this many times, so you never have to guess. Clean water wells are built with and maintained by local communities. Local partners know their communities and make sure help arrives where it matters.
Questions
Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Every donation is tax-deductible, and receipts arrive by email instantly.
<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">Animal rescue</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="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">Animal rescue</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Food relief</h3>
<p class="small">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. 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-1133" class="pb-3">
<h3 class="h6">Volunteer programs</h3>
<p class="small">Our team has done this many times, so you never have to guess. Clean water wells are built with and maintained by local communities. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Install
You receive photos and updates showing exactly what your donation achieved. 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. Leave a gift in your will and help future generations.
Configure
We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our annual report is independently audited and published in full.
Usage
We measure success by how many donors come back and tell their friends. Every donation is tax-deductible, and receipts arrive by email instantly. Every detail is handled by people who care about getting it right.
Examples
Companies can match employee donations and double their impact. 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.
<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">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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">You receive photos and updates showing exactly what your donation achieved. 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. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">We listen first, then build a plan around what you actually need. 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-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">We measure success by how many donors come back and tell their friends. Every donation is tax-deductible, and receipts arrive by email instantly. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Companies can match employee donations and double their impact. 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.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.
Midday
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. Ninety cents of every dollar goes directly to the projects you support.
Afternoon
We listen first, then build a plan around what you actually need. Clean water wells are built with and maintained by local communities. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Our annual report is independently audited and published in full.
Evening
We have helped more than two hundred thousand people since we started. 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.
<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">Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</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. Ninety cents of every dollar goes directly to the projects you support.</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. Clean water wells are built with and maintained by local communities. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">We have helped more than two hundred thousand people since we started. 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.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
You receive photos and updates showing exactly what your donation achieved. Leave a gift in your will and help future generations. 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.
Beta
Our team has done this many times, so you never have to guess. Our annual report is independently audited and published in full. Local partners know their communities and make sure help arrives where it matters.
Gamma
Clear prices, honest advice and no surprises along the way. A school kit costs less than a cinema ticket and lasts a whole year. We measure success by how many donors come back and tell their friends. 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="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">You receive photos and updates showing exactly what your donation achieved. Leave a gift in your will and help future generations. 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.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Our team has done this many times, so you never have to guess. Our annual report is independently audited and published in full. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. A school kit costs less than a cinema ticket and lasts a whole year. We measure success by how many donors come back and tell their friends. 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
Every donation is tax-deductible, and receipts arrive by email instantly. We keep things simple, so you can focus on what matters to you. Leave a gift in your will and help future generations. Companies can match employee donations and double their impact.
Features
Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week. You receive photos and updates showing exactly what your donation achieved.
Reviews
Monthly gifts let us plan ahead and respond quickly when disaster strikes. We have helped more than two hundred thousand people since we started. Clean water wells are built with and maintained by local communities. We listen first, then build a plan around what you actually need.
FAQ
Thousands of donors already trust us, and we work hard to keep it that way. 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.
<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">Every donation is tax-deductible, and receipts arrive by email instantly. We keep things simple, so you can focus on what matters to you. Leave a gift in your will and help future generations. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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-1153" class="pb-3">
<h3 class="h6">Reviews</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. Clean water wells are built with and maintained by local communities. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. 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>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
You receive photos and updates showing exactly what your donation achieved. We keep things simple, so you can focus on what matters to you. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Background
Volunteers give their time in schools, shelters and food banks every week. Start in minutes and get help from a real person whenever you need it. Companies can match employee donations and double their impact. We measure success by how many donors come back and tell their friends.
Method
Our annual report is independently audited and published in full. Ninety cents of every dollar goes directly to the projects you support. Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations.
Results
We have helped more than two hundred thousand people since we started. Every detail is handled by people who care about getting it right. A school kit costs less than a cinema ticket and lasts a whole year.
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">You receive photos and updates showing exactly what your donation achieved. We keep things simple, so you can focus on what matters to you. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Start in minutes and get help from a real person whenever you need it. Companies can match employee donations and double their impact. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Our annual report is independently audited and published in full. Ninety cents of every dollar goes directly to the projects you support. Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Every detail is handled by people who care about getting it right. A school kit costs less than a cinema ticket and lasts a whole year.</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
Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Clean water wells are built with and maintained by local communities.
Set up your profile
Thousands of donors already trust us, and we work hard to keep it that way. 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.
Invite the team
We keep things simple, so you can focus on what matters to you. Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess.
Go live
Friendly people answer your questions quickly, by phone, chat or email. 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-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">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. 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-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. 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 id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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>10Timeline by year
Year buttons follow a scrolling company timeline.
Five things we learned this year
We listen first, then build a plan around what you actually need. Clean water wells are built with and maintained by local communities. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
How your donations built three new classrooms
Every donation is tax-deductible, and receipts arrive by email instantly. Thousands of donors already trust us, and we work hard to keep it that way. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support.
Ten ways to fundraise with friends
Volunteers give their time in schools, shelters and food banks every week. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.
How to choose the right campaign
You receive photos and updates showing exactly what your donation achieved. Our annual report is independently audited and published in full. 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.
<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">Five things we learned this year</h3>
<p class="small mb-0">We listen first, then build a plan around what you actually need. 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 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">How your donations built three new classrooms</h3>
<p class="small mb-0">Every donation is tax-deductible, and receipts arrive by email instantly. Thousands of donors already trust us, and we work hard to keep it that way. 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-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">Ten ways to fundraise with friends</h3>
<p class="small mb-0">Volunteers give their time in schools, shelters and food banks every week. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</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">How to choose the right campaign</h3>
<p class="small mb-0">You receive photos and updates showing exactly what your donation achieved. Our annual report is independently audited and published in full. 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>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Our yearly impact report, explained?
- You receive photos and updates showing exactly what your donation achieved.
- Stories from the families we support?
- Leave a gift in your will and help future generations.
- Our favourite tips for busy weeks?
- Ninety cents of every dollar goes directly to the projects you support.
Shipping
- What happens after a disaster appeal?
- We listen first, then build a plan around what you actually need.
- What our donors asked us most?
- Companies can match employee donations and double their impact.
- A day in the life of a volunteer?
- Friendly people answer your questions quickly, by phone, chat or email.
Returns
- A beginner's guide to getting started?
- Our team has done this many times, so you never have to guess.
- Inside the shelter: from rescue to new home?
- Start in minutes and get help from a real person whenever you need it.
- Meet the partners behind our water projects?
- Volunteers give their time in schools, shelters and food banks every week.
<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">You receive photos and updates showing exactly what your donation achieved.</dd>
<dt class="small">Stories from the families we support?</dt>
<dd class="small text-body-secondary">Leave a gift in your will and help future generations.</dd>
<dt class="small">Our favourite tips for busy weeks?</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">What happens after a disaster appeal?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">What our donors asked us most?</dt>
<dd class="small text-body-secondary">Companies can match employee donations and double their impact.</dd>
<dt class="small">A day in the life of a volunteer?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</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">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">Inside the shelter: from rescue to new home?</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">Meet the partners behind our water projects?</dt>
<dd class="small text-body-secondary">Volunteers give their time in schools, shelters and food banks every week.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
A school kit costs less than a cinema ticket and lasts a whole year. Our annual report is independently audited and published in full. Clear prices, honest advice and no surprises along the way.
Battery
We keep things simple, so you can focus on what matters to you. Clean water wells are built with and maintained by local communities. Local partners know their communities and make sure help arrives where it matters.
Connectivity
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Every detail is handled by people who care about getting it right. Every donation is tax-deductible, and receipts arrive by email instantly. Thousands of donors already trust us, and we work hard to keep it that way.
Security
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. Companies can match employee donations and double their impact.
<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">A school kit costs less than a cinema ticket and lasts a whole year. Our annual report is independently audited and published in full. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Clean water wells are built with and maintained by local communities. Local partners know their communities and make sure help arrives where it matters.</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. Every detail is handled by people who care about getting it right. Every donation is tax-deductible, and receipts arrive by email instantly. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">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. Companies can match employee donations and double their impact.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$18.47 / mo
- Tax receipts
- Transparent reports
- Impact tracking
Team
$43.60 / mo
- Secure giving
- Secure giving
- Secure giving
Business
$53.40 / mo
- Secure giving
- Impact tracking
- Impact tracking
<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">$18.47<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Tax receipts</li>
<li>Transparent reports</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">$43.60<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Secure giving</li>
<li>Secure giving</li>
<li>Secure giving</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">$53.40<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Secure giving</li>
<li>Impact tracking</li>
<li>Impact tracking</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: The small habits that make a big difference
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations. Our annual report is independently audited and published in full.
Every detail is handled by people who care about getting it right. You receive photos and updates showing exactly what your donation achieved. Thousands of donors already trust us, and we work hard to keep it that way.
Chapter 2: Why monthly giving makes such a difference
Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week. 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.
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. Local partners know their communities and make sure help arrives where it matters. We listen first, then build a plan around what you actually need.
Chapter 3: Why we plant trees with the schools we build
Clear prices, honest advice and no surprises along the way. 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.
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. 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.
Chapter 4: Looking back at a busy season
Clear prices, honest advice and no surprises along the way. 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. Companies can match employee donations and double their impact. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Start in minutes and get help from a real person whenever you need it.
<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: The small habits that make a big difference</h3>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations. Our annual report is independently audited and published in full.</p>
<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. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Why monthly giving makes such a difference</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week. 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>
<p class="small">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. Local partners know their communities and make sure help arrives where it matters. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Why we plant trees with the schools we build</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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.</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. 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 id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Looking back at a busy season</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
<p class="small">Leave a gift in your will and help future generations. Companies can match employee donations and double their impact. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
You receive photos and updates showing exactly what your donation achieved. Thousands of donors already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Volunteers give their time in schools, shelters and food banks every week.
Notifications
Clean water wells are built with and maintained by local communities. Local partners know their communities and make sure help arrives where it matters. Our annual report is independently audited and published in full. We have helped more than two hundred thousand people since we started.
Privacy
Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.
<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 Morgan">
</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="Edinburgh">
</div>
<p class="small">You receive photos and updates showing exactly what your donation achieved. Thousands of donors already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Volunteers give their time in schools, shelters and food banks every week.</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">Clean water wells are built with and maintained by local communities. Local partners know their communities and make sure help arrives where it matters. Our annual report is independently audited and published in full. We have helped more than two hundred thousand people since we started.</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">Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Sales
- Freya OrtegaHR Partner
- Mia OkaforQA Engineer
- Aria CarterSales Executive
Engineering
- Elena PatelFinance Lead
- Priya IbrahimMarketing Lead
- Mateo VargaSales Executive
Research
- Nora SatoProject Manager
- Lucas NguyenSupport Specialist
- Kai AlvarezOperations Manager
<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">Engineering</a><a class="nav-link" href="#spy-1200">Research</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-1.svg" class="rounded-circle" width="36" height="36" alt="Freya Ortega"><div><div class="small fw-semibold">Freya Ortega</div><div class="small text-body-secondary">HR Partner</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Mia Okafor"><div><div class="small fw-semibold">Mia Okafor</div><div class="small text-body-secondary">QA 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="Aria Carter"><div><div class="small fw-semibold">Aria Carter</div><div class="small text-body-secondary">Sales Executive</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<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="Elena Patel"><div><div class="small fw-semibold">Elena Patel</div><div class="small text-body-secondary">Finance Lead</div></div></li>
<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="Priya Ibrahim"><div><div class="small fw-semibold">Priya Ibrahim</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-5.svg" class="rounded-circle" width="36" height="36" alt="Mateo Varga"><div><div class="small fw-semibold">Mateo Varga</div><div class="small text-body-secondary">Sales Executive</div></div></li>
</ul>
</div>
<div id="spy-1200" 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-12.svg" class="rounded-circle" width="36" height="36" alt="Nora Sato"><div><div class="small fw-semibold">Nora Sato</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-9.svg" class="rounded-circle" width="36" height="36" alt="Lucas Nguyen"><div><div class="small fw-semibold">Lucas Nguyen</div><div class="small text-body-secondary">Support Specialist</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="Kai Alvarez"><div><div class="small fw-semibold">Kai Alvarez</div><div class="small text-body-secondary">Operations Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Health
- Emergency fund$48.00
- Tree planting$10.00
- Vet care$64.00
Environment
- Teacher training$109.00
- Meal pack$16.00
- Monthly gift$26.00
Animals
- Solar lamp$22.00
- School kit$32.99
- Monthly gift$22.99
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Health</a><a class="nav-link" href="#spy-1203">Environment</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">Health</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Emergency fund</span><span class="fw-semibold">$48.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>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Vet care</span><span class="fw-semibold">$64.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Environment</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Teacher training</span><span class="fw-semibold">$109.00</span></li>
<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>Monthly gift</span><span class="fw-semibold">$26.00</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>Solar lamp</span><span class="fw-semibold">$22.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>School kit</span><span class="fw-semibold">$32.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Monthly gift</span><span class="fw-semibold">$22.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Thousands of donors already trust us, and we work hard to keep it that way. 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.
This week
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. Every donation is tax-deductible, and receipts arrive by email instantly.
Later
Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess. Leave a gift in your will and help future generations. Ninety cents of every dollar goes directly to the projects you support.
<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">Thousands of donors already trust us, and we work hard to keep it that way. 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-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">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. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess. Leave a gift in your will and help future generations. Ninety cents of every dollar goes directly to the projects you support.</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. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Volunteers give their time in schools, shelters and food banks every week.
Orbit
You receive photos and updates showing exactly what your donation achieved. Our annual report is independently audited and published in full. Companies can match employee donations and double their impact.
Landing
Every detail is handled by people who care about getting it right. Clean water wells are built with and maintained by local communities. Friendly people answer your questions quickly, by phone, chat or email.
<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. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">You receive photos and updates showing exactly what your donation achieved. Our annual report is independently audited and published in full. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Oct 10, 2025
- NewMonthly gifts let us plan ahead and respond quickly when disaster strikes.
- ImprovedOur annual report is independently audited and published in full.
- FixedClean water wells are built with and maintained by local communities.
v3.1 Dec 25, 2025
- NewEvery donation is tax-deductible, and receipts arrive by email instantly.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedFriendly people answer your questions quickly, by phone, chat or email.
v3.0 Jul 2, 2026
- NewA school kit costs less than a cinema ticket and lasts a whole year.
- ImprovedVolunteers give their time in schools, shelters and food banks every week.
- FixedWe keep things simple, so you can focus on what matters to you.
v2.9 Dec 26, 2025
- NewNinety cents of every dollar goes directly to the projects you support.
- 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 10, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Monthly gifts let us plan ahead and respond quickly when disaster strikes.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our annual report is independently audited and published in full.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clean water wells are built with and maintained by local communities.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Dec 25, 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>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>Friendly people answer your questions quickly, by phone, chat or email.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jul 2, 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>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 keep things simple, so you can focus on what matters to you.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Dec 26, 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>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>