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
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. Companies can match employee donations and double their impact.
Local partners know their communities and make sure help arrives where it matters. Clean water wells are built with and maintained by local communities. Volunteers give their time in schools, shelters and food banks every week.
Details
Our team has done this many times, so you never have to guess. You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.
We measure success by how many donors come back and tell their friends. Every donation is tax-deductible, and receipts arrive by email instantly. We have helped more than two hundred thousand people since we started.
Pricing
A school kit costs less than a cinema ticket and lasts a whole year. Ninety cents of every dollar goes directly to the projects you support. Thousands of donors already trust us, and we work hard to keep it that way. Our annual report is independently audited and published in full.
Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations. Thousands of donors already trust us, and we work hard to keep it that way.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Pixelera</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">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. Companies can match employee donations and double their impact.</p>
<p class="small">Local partners know their communities and make sure help arrives where it matters. 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">Our team has done this many times, so you never have to guess. You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
<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. 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">A school kit costs less than a cinema ticket and lasts a whole year. Ninety cents of every dollar goes directly to the projects you support. Thousands of donors already trust us, and we work hard to keep it that way. Our annual report is independently audited and published in full.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Every detail is handled by people who care about getting it right. You receive photos and updates showing exactly what your donation achieved. We keep things simple, so you can focus on what matters to you.
Step two
Volunteers give their time in schools, shelters and food banks every week. Companies can match employee donations and double their impact. We listen first, then build a plan around what you actually need.
Step three
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 team has done this many times, so you never have to guess.
Step four
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. Our annual report is independently audited and published in full. Start in minutes and get help from a real person whenever you need it.
<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">Every detail is handled by people who care about getting it right. You receive photos and updates showing exactly what your donation achieved. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Companies can match employee donations and double their impact. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<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 team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</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. Our annual report is independently audited and published in full. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Education fund
Ninety cents of every dollar goes directly to the projects you support. Monthly gifts let us plan ahead and respond quickly when disaster strikes. We have helped more than two hundred thousand people since we started.
Disaster response
Every donation is tax-deductible, and receipts arrive by email instantly. Clear prices, honest advice and no surprises along the way. We measure success by how many donors come back and tell their friends.
Food relief
Leave a gift in your will and help future generations. 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. Companies can match employee donations and double their impact.
Questions
Our annual report is independently audited and published in full. Start in minutes and get help from a real person whenever you need it. We measure success by how many donors come back and tell their friends.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Education fund</a><a class="nav-link" href="#spy-1132">Disaster response</a><a class="nav-link" href="#spy-1133">Food relief</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Education fund</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Monthly gifts let us plan ahead and respond quickly when disaster strikes. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Disaster response</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. 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">Food relief</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. Every detail is handled by people who care about getting it right. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Our annual report is independently audited and published in full. Start in minutes and get help from a real person whenever you need it. We measure success by how many donors come back and tell their friends.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
A school kit costs less than a cinema ticket and lasts a whole year. 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. Clear prices, honest advice and no surprises along the way.
Install
Local partners know their communities and make sure help arrives where it matters. You receive photos and updates showing exactly what your donation achieved. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Ninety cents of every dollar goes directly to the projects you support.
Configure
Our team has done this many times, so you never have to guess. We have helped more than two hundred thousand people since we started. Clean water wells are built with and maintained by local communities. Volunteers give their time in schools, shelters and food banks every week.
Usage
Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations.
Examples
Volunteers give their time in schools, shelters and food banks every week. Companies can match employee donations and double their impact. Leave a gift in your will and help future generations. Ninety cents of every dollar goes directly to the projects you support.
<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">A school kit costs less than a cinema ticket and lasts a whole year. 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. Clear prices, honest advice and no surprises along the way.</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. You receive photos and updates showing exactly what your donation achieved. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Our team has done this many times, so you never have to guess. We have helped more than two hundred thousand people since we started. 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-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Companies can match employee donations and double their impact. 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>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Every donation is tax-deductible, and receipts arrive by email instantly. Our team has done this many times, so you never have to guess. We measure success by how many donors come back and tell their friends.
Midday
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. You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right.
Afternoon
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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Evening
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. Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities.
<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">Every donation is tax-deductible, and receipts arrive by email instantly. Our team has done this many times, so you never have to guess. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Thousands of donors already trust us, and we work hard to keep it that way. You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">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. Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Clear prices, honest advice and no surprises along the way. Local partners know their communities and make sure help arrives where it matters. Friendly people answer your questions quickly, by phone, chat or email.
Beta
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. We listen first, then build a plan around what you actually need.
Gamma
Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations. You receive photos and updates showing exactly what your donation achieved.
<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">Clear prices, honest advice and no surprises along the way. Local partners know their communities and make sure help arrives where it matters. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</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. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Ninety cents of every dollar goes directly to the projects you support. 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.
Features
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. Friendly people answer your questions quickly, by phone, chat or email.
Reviews
Clear prices, honest advice and no surprises along the way. Our annual report is independently audited and published in full. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clean water wells are built with and maintained by local communities.
FAQ
Companies can match employee donations and double their impact. 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. Every donation is tax-deductible, and receipts arrive by email instantly.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. 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-1152" class="pb-3">
<h3 class="h6">Features</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Our annual report is independently audited and published in full. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Companies can match employee donations and double their impact. 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. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Local partners know their communities and make sure help arrives where it matters. Thousands of donors already trust us, and we work hard to keep it that way. We have helped more than two hundred thousand people since we started.
Background
Clean water wells are built with and maintained by local communities. Every donation is tax-deductible, and receipts arrive by email instantly. Ninety cents of every dollar goes directly to the projects you support.
Method
We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
Results
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. You receive photos and updates showing exactly what your donation achieved.
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">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Local partners know their communities and make sure help arrives where it matters. Thousands of donors already trust us, and we work hard to keep it that way. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Clean water wells are built with and maintained by local communities. Every donation is tax-deductible, and receipts arrive by email instantly. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</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. You receive photos and updates showing exactly what your donation achieved.</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
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. 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.
Set up your profile
We measure success by how many donors come back and tell their friends. Our annual report is independently audited and published in full. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess.
Invite the team
You receive photos and updates showing exactly what your donation achieved. Friendly people answer your questions quickly, by phone, chat or email. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Go live
Every donation is tax-deductible, and receipts arrive by email instantly. Start in minutes and get help from a real person whenever you need it. We measure success by how many donors come back and tell their friends.
<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">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. 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.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</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. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">You receive photos and updates showing exactly what your donation achieved. Friendly people answer your questions quickly, by phone, chat or email. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. Start in minutes and get help from a real person whenever you need it. We measure success by how many donors come back and tell their friends.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
A beginner's guide to getting started
Ninety cents of every dollar goes directly to the projects you support. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Companies can match employee donations and double their impact.
What our donors asked us most
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. We have helped more than two hundred thousand people since we started.
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. Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year.
What happens after a disaster appeal
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. 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.
<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">A beginner's guide to getting started</h3>
<p class="small mb-0">Ninety cents of every dollar goes directly to the projects you support. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Companies can match employee donations and double their impact.</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">What our donors asked us most</h3>
<p class="small mb-0">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. We have helped more than two hundred thousand people since we started.</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">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. Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-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">What happens after a disaster appeal</h3>
<p class="small mb-0">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. 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>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- A day in the life of a volunteer?
- Every donation is tax-deductible, and receipts arrive by email instantly.
- Our favourite tips for busy weeks?
- Every detail is handled by people who care about getting it right.
- Why we plant trees with the schools we build?
- Ninety cents of every dollar goes directly to the projects you support.
Shipping
- Why monthly giving makes such a difference?
- Friendly people answer your questions quickly, by phone, chat or email.
- Looking back at a busy season?
- Companies can match employee donations and double their impact.
- Meet the partners behind our water projects?
- We measure success by how many donors come back and tell their friends.
Returns
- How to choose the right campaign?
- You receive photos and updates showing exactly what your donation achieved.
- Our yearly impact report, explained?
- Local partners know their communities and make sure help arrives where it matters.
- How your donations built three new classrooms?
- Our annual report is independently audited and published in full.
<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">A day in the life of a volunteer?</dt>
<dd class="small text-body-secondary">Every donation is tax-deductible, and receipts arrive by email instantly.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
<dt class="small">Why we plant trees with the schools we build?</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">Why monthly giving makes such a difference?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Companies can match employee donations and double their impact.</dd>
<dt class="small">Meet the partners behind our water projects?</dt>
<dd class="small text-body-secondary">We measure success by how many donors come back and tell their friends.</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">How to choose the right campaign?</dt>
<dd class="small text-body-secondary">You receive photos and updates showing exactly what your donation achieved.</dd>
<dt class="small">Our yearly impact report, explained?</dt>
<dd class="small text-body-secondary">Local partners know their communities and make sure help arrives where it matters.</dd>
<dt class="small">How your donations built three new classrooms?</dt>
<dd class="small text-body-secondary">Our annual report is independently audited and published in full.</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. Clean water wells are built with and maintained by local communities. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.
Battery
We have helped more than two hundred thousand people since we started. 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. Leave a gift in your will and help future generations.
Connectivity
Monthly gifts let us plan ahead and respond quickly when disaster strikes. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.
Security
Clear prices, honest advice and no surprises along the way. Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year.
<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. Clean water wells are built with and maintained by local communities. 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-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">We have helped more than two hundred thousand people since we started. 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. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$16.32 / mo
- Impact tracking
- Local partners
- Tax receipts
Team
$33.40 / mo
- Volunteer network
- Transparent reports
- Impact tracking
Business
$60.20 / mo
- Volunteer network
- Volunteer network
- Local partners
<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">$16.32<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Impact tracking</li>
<li>Local partners</li>
<li>Tax receipts</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">$33.40<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Volunteer network</li>
<li>Transparent reports</li>
<li>Impact tracking</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$60.20<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Volunteer network</li>
<li>Volunteer network</li>
<li>Local partners</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Inside the shelter: from rescue to new home
Ninety cents of every dollar goes directly to the projects you support. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess.
Clean water wells are built with and maintained by local communities. Every donation is tax-deductible, and receipts arrive by email instantly. 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.
Chapter 2: Ten ways to fundraise with friends
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. Thousands of donors already trust us, and we work hard to keep it that way. 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. 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.
Chapter 3: The small habits that make a big difference
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Our annual report is independently audited and published in full. You receive photos and updates showing exactly what your donation achieved.
Clear prices, honest advice and no surprises along the way. A school kit costs less than a cinema ticket and lasts a whole year. Leave a gift in your will and help future generations.
Chapter 4: Stories from the families we support
Every detail is handled by people who care about getting it right. Clean water wells are built with and maintained by local communities. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
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. Volunteers give their time in schools, shelters and food banks every week. You receive photos and updates showing exactly what your donation achieved.
<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: Inside the shelter: from rescue to new home</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess.</p>
<p class="small">Clean water wells are built with and maintained by local communities. Every donation is tax-deductible, and receipts arrive by email instantly. 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-1185" class="pb-3">
<h3 class="h6">Chapter 2: Ten ways to fundraise with friends</h3>
<p class="small">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. Thousands of donors already trust us, and we work hard to keep it that way. Volunteers give their time in schools, shelters and food banks every week.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. 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.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: The small habits that make a big difference</h3>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Our annual report is independently audited and published in full. 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. 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 id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Stories from the families we support</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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
<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. 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>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
We listen first, then build a plan around what you actually need. Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact.
Notifications
Our team has done this many times, so you never have to guess. 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 have helped more than two hundred thousand people since we started.
Privacy
Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Our annual report is independently audited and published in full.
<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="Omar Okafor">
</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 listen first, then build a plan around what you actually need. Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact.</p>
</div>
<div id="spy-1190" class="pb-3">
<h3 class="h6">Notifications</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
<label class="form-check-label small" for="spy-sw-1194">Product news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
<label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
</div>
<p class="small">Our team has done this many times, so you never have to guess. 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 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">Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Our annual report is independently audited and published in full.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Sales
- Chloe DelgadoProject Manager
- Noah VargaHR Partner
- Finn OkaforHR Partner
Engineering
- Kai HughesHR Partner
- Owen QuinnSupport Specialist
- Ava OrtegaCustomer Success
Design
- Arjun SatoMarketing Lead
- Ravi CarterContent Writer
- Tariq HarlowOperations 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">Design</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="Chloe Delgado"><div><div class="small fw-semibold">Chloe Delgado</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-11.svg" class="rounded-circle" width="36" height="36" alt="Noah Varga"><div><div class="small fw-semibold">Noah Varga</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-8.svg" class="rounded-circle" width="36" height="36" alt="Finn Okafor"><div><div class="small fw-semibold">Finn Okafor</div><div class="small text-body-secondary">HR Partner</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-4.svg" class="rounded-circle" width="36" height="36" alt="Kai Hughes"><div><div class="small fw-semibold">Kai Hughes</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-2.svg" class="rounded-circle" width="36" height="36" alt="Owen Quinn"><div><div class="small fw-semibold">Owen Quinn</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-8.svg" class="rounded-circle" width="36" height="36" alt="Ava Ortega"><div><div class="small fw-semibold">Ava Ortega</div><div class="small text-body-secondary">Customer Success</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Design</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="Arjun Sato"><div><div class="small fw-semibold">Arjun Sato</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="Ravi Carter"><div><div class="small fw-semibold">Ravi Carter</div><div class="small text-body-secondary">Content Writer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Tariq Harlow"><div><div class="small fw-semibold">Tariq Harlow</div><div class="small text-body-secondary">Operations Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Animals
- Shelter support$36.00
- Vet care$54.99
- School kit$32.00
Environment
- School kit$31.99
- Solar lamp$19.00
- Vet care$58.99
Health
- Health kit$35.99
- Library books$42.00
- Tree planting$10.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">Health</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>Shelter support</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">$54.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>School kit</span><span class="fw-semibold">$32.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>School kit</span><span class="fw-semibold">$31.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Solar lamp</span><span class="fw-semibold">$19.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Vet care</span><span class="fw-semibold">$58.99</span></li>
</ul>
</div>
<div id="spy-1204" 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>Health kit</span><span class="fw-semibold">$35.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Library books</span><span class="fw-semibold">$42.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Tree planting</span><span class="fw-semibold">$10.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Our team has done this many times, so you never have to guess. We measure success by how many donors come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.
This week
A school kit costs less than a cinema ticket and lasts a whole year. Leave a gift in your will and help future generations. 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.
Later
Clean water wells are built with and maintained by local communities. 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. Every donation is tax-deductible, and receipts arrive by email instantly.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">Our team has done this many times, so you never have to guess. We measure success by how many donors come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">A school kit costs less than a cinema ticket and lasts a whole year. Leave a gift in your will and help future generations. 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.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Clean water wells are built with and maintained by local communities. 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. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
You receive photos and updates showing exactly what your donation achieved. Clear prices, honest advice and no surprises along the way. We have helped more than two hundred thousand people since we started.
Orbit
Volunteers give their time in schools, shelters and food banks every week. 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.
Landing
We listen first, then build a plan around what you actually need. Companies can match employee donations and double their impact. Thousands of donors already trust us, and we work hard to keep it that way. Our annual report is independently audited and published in full.
<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">You receive photos and updates showing exactly what your donation achieved. 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-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. 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 id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">We listen first, then build a plan around what you actually need. Companies can match employee donations and double their impact. Thousands of donors already trust us, and we work hard to keep it that way. Our annual report is independently audited and published in full.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Feb 20, 2026
- NewFriendly people answer your questions quickly, by phone, chat or email.
- ImprovedCompanies can match employee donations and double their impact.
- FixedThousands of donors already trust us, and we work hard to keep it that way.
v3.1 Sep 15, 2026
- NewLeave a gift in your will and help future generations.
- ImprovedWe have helped more than two hundred thousand people since we started.
- FixedEvery donation is tax-deductible, and receipts arrive by email instantly.
v3.0 Nov 10, 2025
- NewEvery detail is handled by people who care about getting it right.
- ImprovedLocal partners know their communities and make sure help arrives where it matters.
- FixedWe keep things simple, so you can focus on what matters to you.
v2.9 Jul 17, 2026
- NewClear prices, honest advice and no surprises along the way.
- ImprovedMonthly gifts let us plan ahead and respond quickly when disaster strikes.
- FixedYou receive photos and updates showing exactly what your donation achieved.
<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">Feb 20, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Companies can match employee donations and double their impact.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of donors already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Sep 15, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Leave a gift in your will and help future generations.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We have helped more than two hundred thousand people since we started.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every donation is tax-deductible, and receipts arrive by email instantly.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Nov 10, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</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>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">Jul 17, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</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>You receive photos and updates showing exactly what your donation achieved.</li>
</ul>
</div>
</div>
</div>
</div>