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
Ninety cents of every dollar goes directly to the projects you support. 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. Local partners know their communities and make sure help arrives where it matters.
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. Companies can match employee donations and double their impact. Clear prices, honest advice and no surprises along the way.
Details
We measure success by how many donors come back and tell their friends. Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities. You receive photos and updates showing exactly what your donation achieved.
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Every donation is tax-deductible, and receipts arrive by email instantly. We have helped more than two hundred thousand people since we started.
Pricing
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. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.
Our annual report is independently audited and published in full. 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 have helped more than two hundred thousand people since we started.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Lumen Co</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">Ninety cents of every dollar goes directly to the projects you support. 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. Local partners know their communities and make sure help arrives where it matters.</p>
<p class="small">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. Companies can match employee donations and double their impact. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">We measure success by how many donors come back and tell their friends. Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities. You receive photos and updates showing exactly what your donation achieved.</p>
<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. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">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. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small">Our annual report is independently audited and published in full. 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 have helped more than two hundred thousand people since we started.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
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. We listen first, then build a plan around what you actually need. Ninety cents of every dollar goes directly to the projects you support.
Step two
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. Volunteers give their time in schools, shelters and food banks every week.
Step three
You receive photos and updates showing exactly what your donation achieved. We measure success by how many donors come back and tell their friends. 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.
Step four
Leave a gift in your will and help future generations. Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
<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">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. We listen first, then build a plan around what you actually need. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</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. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">You receive photos and updates showing exactly what your donation achieved. We measure success by how many donors come back and tell their friends. Local partners know their communities and make sure help arrives where it matters. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Leave a gift in your will and help future generations. Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Food relief
Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started. Friendly people answer your questions quickly, by phone, chat or email.
Clean water
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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Disaster response
We keep things simple, so you can focus on what matters to you. 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. Clean water wells are built with and maintained by local communities.
Questions
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. Start in minutes and get help from a real person whenever you need it.
<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">Food relief</a><a class="nav-link" href="#spy-1132">Clean water</a><a class="nav-link" href="#spy-1133">Disaster response</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">Food relief</h3>
<p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Clean water</h3>
<p class="small">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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Disaster response</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<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. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Thousands of donors already trust us, and we work hard to keep it that way. Ninety cents of every dollar goes directly to the projects you support. Clear prices, honest advice and no surprises along the way. We measure success by how many donors come back and tell their friends.
Install
Local partners know their communities and make sure help arrives where it matters. Volunteers give their time in schools, shelters and food banks every week. Every donation is tax-deductible, and receipts arrive by email instantly.
Configure
You receive photos and updates showing exactly what your donation achieved. 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.
Usage
We measure success by how many donors come back and tell their friends. 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. Local partners know their communities and make sure help arrives where it matters.
Examples
Leave a gift in your will and help future generations. Ninety cents of every dollar goes directly to the projects you support. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
<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">Thousands of donors already trust us, and we work hard to keep it that way. Ninety cents of every dollar goes directly to the projects you support. 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 id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Volunteers give their time in schools, shelters and food banks every week. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</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. Volunteers give their time in schools, shelters and food banks every week.</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. 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. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Leave a gift in your will and help future generations. Ninety cents of every dollar goes directly to the projects you support. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Clean water wells are built with and maintained by local communities. 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.
Midday
Every donation is tax-deductible, and receipts arrive by email instantly. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.
Afternoon
A school kit costs less than a cinema ticket and lasts a whole year. Every detail is handled by people who care about getting it right. We have helped more than two hundred thousand people since we started. Our annual report is independently audited and published in full.
Evening
Companies can match employee donations and double their impact. You receive photos and updates showing exactly what your donation achieved. Our team has done this many times, so you never have to guess.
<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">Clean water wells are built with and maintained by local communities. 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.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. 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-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">A school kit costs less than a cinema ticket and lasts a whole year. Every detail is handled by people who care about getting it right. We have helped more than two hundred thousand people since we started. 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">Companies can match employee donations and double their impact. You receive photos and updates showing exactly what your donation achieved. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Volunteers give their time in schools, shelters and food banks every week. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Local partners know their communities and make sure help arrives where it matters.
Beta
Our annual report is independently audited and published in full. We have helped more than two hundred thousand people since we started. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Gamma
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 measure success by how many donors come back and tell their friends. A school kit costs less than a cinema ticket and lasts a whole year.
<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">Volunteers give their time in schools, shelters and food banks every week. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Our annual report is independently audited and published in full. We have helped more than two hundred thousand people since we started. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Every donation is tax-deductible, and receipts arrive by email instantly. We measure success by how many donors come back and tell their friends. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right. Clean water wells are built with and maintained by local communities.
Features
Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. We listen first, then build a plan around what you actually need.
Reviews
Thousands of donors already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Leave a gift in your will and help future generations. Start in minutes and get help from a real person whenever you need it.
FAQ
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. Clean water wells are built with and maintained by local communities.
<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">You receive photos and updates showing exactly what your donation achieved. 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 id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Leave a gift in your will and help future generations. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</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. Clean water wells are built with and maintained by local communities.</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 annual report is independently audited and published in full. 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.
Background
Monthly gifts let us plan ahead and respond quickly when disaster strikes. 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. Leave a gift in your will and help future generations.
Method
We have helped more than two hundred thousand people since we started. Friendly people answer your questions quickly, by phone, chat or email. Ninety cents of every dollar goes directly to the projects you support.
Results
Local partners know their communities and make sure help arrives where it matters. Volunteers give their time in schools, shelters and food banks every week. Companies can match employee donations and double their impact. Clear prices, honest advice and no surprises along the way.
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">Our annual report is independently audited and published in full. 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.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</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. Thousands of donors already trust us, and we work hard to keep it that way. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">We have helped more than two hundred thousand people since we started. 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-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Volunteers give their time in schools, shelters and food banks every week. Companies can match employee donations and double their impact. Clear prices, honest advice and no surprises along the way.</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
We measure success by how many donors come back and tell their friends. Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. We listen first, then build a plan around what you actually need.
Set up your profile
Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact. 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.
Invite the team
We keep things simple, so you can focus on what matters to you. Every donation is tax-deductible, and receipts arrive by email instantly. Local partners know their communities and make sure help arrives where it matters. Clean water wells are built with and maintained by local communities.
Go live
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. 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="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">We measure success by how many donors come back and tell their friends. Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact. 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.</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. Every donation is tax-deductible, and receipts arrive by email instantly. Local partners know their communities and make sure help arrives where it matters. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</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. 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.
Stories from the families we support
Thousands of donors already trust us, and we work hard to keep it that way. Leave a gift in your will and help future generations. Clear prices, honest advice and no surprises along the way. Our annual report is independently audited and published in full.
Meet the partners behind our water projects
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. Every detail is handled by people who care about getting it right.
Why we plant trees with the schools we build
We measure success by how many donors come back and tell their friends. Volunteers give their time in schools, shelters and food banks every week. Every donation is tax-deductible, and receipts arrive by email instantly. Our annual report is independently audited and published in full.
Looking back at a busy season
We listen first, then build a plan around what you actually need. We measure success by how many donors come back and tell their friends. Companies can match employee donations and double their impact.
<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">Stories from the families we support</h3>
<p class="small mb-0">Thousands of donors already trust us, and we work hard to keep it that way. Leave a gift in your will and help future generations. Clear prices, honest advice and no surprises along the way. Our annual report is independently audited and published in full.</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">Meet the partners behind our water projects</h3>
<p class="small mb-0">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. Every detail is handled by people who care about getting it right.</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">Why we plant trees with the schools we build</h3>
<p class="small mb-0">We measure success by how many donors come back and tell their friends. Volunteers give their time in schools, shelters and food banks every week. Every donation is tax-deductible, and receipts arrive by email instantly. Our annual report is independently audited and published in full.</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">Looking back at a busy season</h3>
<p class="small mb-0">We listen first, then build a plan around what you actually need. We measure success by how many donors come back and tell their friends. Companies can match employee donations and double their impact.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Our yearly impact report, explained?
- We keep things simple, so you can focus on what matters to you.
- Ten ways to fundraise with friends?
- Clear prices, honest advice and no surprises along the way.
- Our favourite tips for busy weeks?
- Thousands of donors already trust us, and we work hard to keep it that way.
Shipping
- How to choose the right campaign?
- Leave a gift in your will and help future generations.
- A beginner's guide to getting started?
- Volunteers give their time in schools, shelters and food banks every week.
- Inside the shelter: from rescue to new home?
- Local partners know their communities and make sure help arrives where it matters.
Returns
- A day in the life of a volunteer?
- Every detail is handled by people who care about getting it right.
- The small habits that make a big difference?
- You receive photos and updates showing exactly what your donation achieved.
- Five things we learned this year?
- Start in minutes and get help from a real person whenever you need it.
<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">We keep things simple, so you can focus on what matters to you.</dd>
<dt class="small">Ten ways to fundraise with friends?</dt>
<dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Thousands of donors already trust us, and we work hard to keep it that way.</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">How to choose the right campaign?</dt>
<dd class="small text-body-secondary">Leave a gift in your will and help future generations.</dd>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Volunteers give their time in schools, shelters and food banks every week.</dd>
<dt class="small">Inside the shelter: from rescue to new home?</dt>
<dd class="small text-body-secondary">Local partners know their communities and make sure help arrives where it matters.</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 day in the life of a volunteer?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">You receive photos and updates showing exactly what your donation achieved.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</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. 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.
Battery
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. Our team has done this many times, so you never have to guess.
Connectivity
Volunteers give their time in schools, shelters and food banks every week. You receive photos and updates showing exactly what your donation achieved. Companies can match employee donations and double their impact.
Security
Friendly people answer your questions quickly, by phone, chat or email. 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">
<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">Friendly people answer your questions quickly, by phone, chat or email. 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.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<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. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$14.47 / mo
- Transparent reports
- Secure giving
- Transparent reports
Team
$44.71 / mo
- Transparent reports
- Tax receipts
- Transparent reports
Business
$60.37 / mo
- Local partners
- Impact tracking
- Transparent reports
<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">$14.47<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Transparent reports</li>
<li>Secure giving</li>
<li>Transparent reports</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">$44.71<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Transparent reports</li>
<li>Tax receipts</li>
<li>Transparent reports</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">$60.37<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Local partners</li>
<li>Impact tracking</li>
<li>Transparent reports</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. A school kit costs less than a cinema ticket and lasts a whole year. Monthly gifts let us plan ahead and respond quickly when disaster strikes. We measure success by how many donors come back and tell their friends.
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. Local partners know their communities and make sure help arrives where it matters. Every donation is tax-deductible, and receipts arrive by email instantly.
Chapter 2: How your donations built three new classrooms
Ninety cents of every dollar goes directly to the projects you support. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started. Our annual report is independently audited and published in full.
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. We have helped more than two hundred thousand people since we started. Leave a gift in your will and help future generations.
Chapter 3: Why monthly giving makes such a difference
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. You receive photos and updates showing exactly what your donation achieved.
Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Companies can match employee donations and double their impact.
Chapter 4: What our donors asked us most
Friendly people answer your questions quickly, by phone, chat or email. 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.
Local partners know their communities and make sure help arrives where it matters. Every detail is handled by people who care about getting it right. 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.
<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: What happens after a disaster appeal</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. A school kit costs less than a cinema ticket and lasts a whole year. Monthly gifts let us plan ahead and respond quickly when disaster strikes. We measure success by how many donors come back and tell their friends.</p>
<p class="small">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. 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-1185" class="pb-3">
<h3 class="h6">Chapter 2: How your donations built three new classrooms</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started. 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. 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. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Why monthly giving makes such a difference</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. You receive photos and updates showing exactly what your donation achieved.</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. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: What our donors asked us most</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every donation is tax-deductible, and receipts arrive by email instantly. Volunteers give their time in schools, shelters and food banks every week. Our annual report is independently audited and published in full.</p>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Every detail is handled by people who care about getting it right. 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.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
We measure success by how many donors come back and tell their friends. 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.
Notifications
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Ninety cents of every dollar goes directly to the projects you support. 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.
Privacy
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. Every detail is handled by people who care about getting it right.
<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="Felix Larsen">
</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="Cape Town">
</div>
<p class="small">We measure success by how many donors come back and tell their friends. 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>
</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">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Ninety cents of every dollar goes directly to the projects you support. 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-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">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. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Legal
- Elena HaddadBackend Engineer
- Nadia QuinnHR Partner
- Samir AshfordMarketing Lead
Finance
- Freya LarsenHR Partner
- Theo DuarteBackend Engineer
- Mason FischerBackend Engineer
Marketing
- Priya MoreauArt Director
- Noah HarlowOperations Manager
- Amara AlvarezData Analyst
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Marketing</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Elena Haddad"><div><div class="small fw-semibold">Elena Haddad</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Nadia Quinn"><div><div class="small fw-semibold">Nadia Quinn</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-4.svg" class="rounded-circle" width="36" height="36" alt="Samir Ashford"><div><div class="small fw-semibold">Samir Ashford</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Freya Larsen"><div><div class="small fw-semibold">Freya Larsen</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-4.svg" class="rounded-circle" width="36" height="36" alt="Theo Duarte"><div><div class="small fw-semibold">Theo Duarte</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Mason Fischer"><div><div class="small fw-semibold">Mason Fischer</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Priya Moreau"><div><div class="small fw-semibold">Priya Moreau</div><div class="small text-body-secondary">Art Director</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="Noah Harlow"><div><div class="small fw-semibold">Noah Harlow</div><div class="small text-body-secondary">Operations Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Amara Alvarez"><div><div class="small fw-semibold">Amara Alvarez</div><div class="small text-body-secondary">Data Analyst</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Animals
- Teacher training$121.00
- Health kit$36.00
- Vet care$59.00
Environment
- Teacher training$113.99
- Tree planting$10.00
- Health kit$33.99
Education
- Teacher training$120.99
- Emergency fund$46.00
- Library books$50.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Animals</a><a class="nav-link" href="#spy-1203">Environment</a><a class="nav-link" href="#spy-1204">Education</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">Animals</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">$121.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Health kit</span><span class="fw-semibold">$36.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Vet care</span><span class="fw-semibold">$59.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">$113.99</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>Health kit</span><span class="fw-semibold">$33.99</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Education</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Teacher training</span><span class="fw-semibold">$120.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Emergency fund</span><span class="fw-semibold">$46.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Library books</span><span class="fw-semibold">$50.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Every donation is tax-deductible, and receipts arrive by email instantly. We measure success by how many donors come back and tell their friends. Our team has done this many times, so you never have to guess. Leave a gift in your will and help future generations.
This week
Our annual report is independently audited and published in full. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started.
Later
Local partners know their communities and make sure help arrives where it matters. Ninety cents of every dollar goes directly to the projects you support. 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="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">Every donation is tax-deductible, and receipts arrive by email instantly. We measure success by how many donors come back and tell their friends. Our team has done this many times, so you never have to guess. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Our annual report is independently audited and published in full. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started.</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. Ninety cents of every dollar goes directly to the projects you support. 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
Friendly people answer your questions quickly, by phone, chat or email. 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. We keep things simple, so you can focus on what matters to you.
Orbit
Clear prices, honest advice and no surprises along the way. Volunteers give their time in schools, shelters and food banks every week. Friendly people answer your questions quickly, by phone, chat or email.
Landing
Start in minutes and get help from a real person whenever you need it. Our annual report is independently audited and published in full. Ninety cents of every dollar goes directly to the projects you support.
<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">Friendly people answer your questions quickly, by phone, chat or email. 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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Volunteers give their time in schools, shelters and food banks every week. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our annual report is independently audited and published in full. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Dec 30, 2025
- NewClean water wells are built with and maintained by local communities.
- ImprovedWe measure success by how many donors come back and tell their friends.
- FixedYou receive photos and updates showing exactly what your donation achieved.
v3.1 Sep 28, 2025
- NewWe have helped more than two hundred thousand people since we started.
- ImprovedLocal partners know their communities and make sure help arrives where it matters.
- FixedA school kit costs less than a cinema ticket and lasts a whole year.
v3.0 Jul 19, 2026
- NewThousands of donors already trust us, and we work hard to keep it that way.
- ImprovedEvery donation is tax-deductible, and receipts arrive by email instantly.
- FixedOur team has done this many times, so you never have to guess.
v2.9 Nov 19, 2025
- NewCompanies can match employee donations and double their impact.
- ImprovedWe keep things simple, so you can focus on what matters to you.
- FixedMonthly gifts let us plan ahead and respond quickly when disaster strikes.
<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">Dec 30, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clean water wells are built with and maintained by local communities.</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>You receive photos and updates showing exactly what your donation achieved.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Sep 28, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We have helped more than two hundred thousand people since we started.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Local partners know their communities and make sure help arrives where it matters.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>A school kit costs less than a cinema ticket and lasts a whole year.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jul 19, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of donors already trust us, and we work hard to keep it that way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every donation is tax-deductible, and receipts arrive by email instantly.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Nov 19, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Companies can match employee donations and double their impact.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Monthly gifts let us plan ahead and respond quickly when disaster strikes.</li>
</ul>
</div>
</div>
</div>
</div>