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-bs-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
Volunteers give their time in schools, shelters and food banks every week. 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. Local partners know their communities and make sure help arrives where it matters.
Leave a gift in your will and help future generations. Start in minutes and get help from a real person whenever you need it. You receive photos and updates showing exactly what your donation achieved.
Details
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Ninety cents of every dollar goes directly to the projects you support.
Every detail is handled by people who care about getting it right. We have helped more than two hundred thousand people since we started. We measure success by how many donors come back and tell their friends. Our team has done this many times, so you never have to guess.
Pricing
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 have helped more than two hundred thousand people since we started. Our annual report is independently audited and published in full. A school kit costs less than a cinema ticket and lasts a whole year.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Sageio</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-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. 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. Local partners know their communities and make sure help arrives where it matters.</p>
<p class="small">Leave a gift in your will and help future generations. Start in minutes and get help from a real person whenever you need it. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Ninety cents of every dollar goes directly to the projects you support.</p>
<p class="small">Every detail is handled by people who care about getting it right. We have helped more than two hundred thousand people since we started. We measure success by how many donors come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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.</p>
<p class="small">We have helped more than two hundred thousand people since we started. Our annual report is independently audited and published in full. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Clean water wells are built with and maintained by local communities. Local partners know their communities and make sure help arrives where it matters. You receive photos and updates showing exactly what your donation achieved. Volunteers give their time in schools, shelters and food banks every week.
Step two
Thousands of donors already trust us, and we work hard to keep it that way. Every donation is tax-deductible, and receipts arrive by email instantly. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Every detail is handled by people who care about getting it right.
Step three
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.
Step four
Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</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. You receive photos and updates showing exactly what your donation achieved. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. Every donation is tax-deductible, and receipts arrive by email instantly. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">We measure success by how many donors come back and tell their friends. 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-1129" class="pb-3">
<h3 class="h6">Step four</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. Friendly people answer your questions quickly, by phone, chat or email. Leave a gift in your will and help future generations.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Education fund
Clear prices, honest advice and no surprises along the way. 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. Ninety cents of every dollar goes directly to the projects you support.
Clean water
Friendly people answer your questions quickly, by phone, chat or email. We have helped more than two hundred thousand people since we started. Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess.
Volunteer programs
You receive photos and updates showing exactly what your donation achieved. Companies can match employee donations and double their impact. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Questions
Every donation is tax-deductible, and receipts arrive by email instantly. A school kit costs less than a cinema ticket and lasts a whole year. We listen first, then build a plan around what you actually need.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Education fund</a><a class="nav-link" href="#spy-1132">Clean water</a><a class="nav-link" href="#spy-1133">Volunteer programs</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Education fund</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Clean water</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. We have helped more than two hundred thousand people since we started. Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Volunteer programs</h3>
<p class="small">You receive photos and updates showing exactly what your donation achieved. Companies can match employee donations and double their impact. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. A school kit costs less than a cinema ticket and lasts a whole year. We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Thousands of donors already trust us, and we work hard to keep it that way.
Install
We measure success by how many donors come back and tell their friends. Leave a gift in your will and help future generations. Volunteers give their time in schools, shelters and food banks every week.
Configure
Our annual report is independently audited and published in full. We keep things simple, so you can focus on what matters to you. Clean water wells are built with and maintained by local communities.
Usage
Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. A school kit costs less than a cinema ticket and lasts a whole year.
Examples
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. Our annual report is independently audited and published in full.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">We measure success by how many donors come back and tell their friends. Leave a gift in your will and help future generations. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Our annual report is independently audited and published in full. 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 id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">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. Our annual report is independently audited and published in full.</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. Local partners know their communities and make sure help arrives where it matters. You receive photos and updates showing exactly what your donation achieved.
Midday
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. Friendly people answer your questions quickly, by phone, chat or email.
Afternoon
Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Evening
Volunteers give their time in schools, shelters and food banks every week. Every detail is handled by people who care about getting it right. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-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. Local partners know their communities and make sure help arrives where it matters. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. 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-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Every detail is handled by people who care about getting it right. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Leave a gift in your will and help future generations. We have helped more than two hundred thousand people since we started. Ninety cents of every dollar goes directly to the projects you support.
Beta
Clean water wells are built with and maintained by local communities. Friendly people answer your questions quickly, by phone, chat or email. Local partners know their communities and make sure help arrives where it matters.
Gamma
We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Leave a gift in your will and help future generations. We have helped more than two hundred thousand people since we started. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Clean water wells are built with and maintained by local communities. Friendly people answer your questions quickly, by phone, chat or email. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
We have helped more than two hundred thousand people since we started. Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations.
Features
You receive photos and updates showing exactly what your donation achieved. We keep things simple, so you can focus on what matters to you. We measure success by how many donors come back and tell their friends.
Reviews
Companies can match employee donations and double their impact. 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. Thousands of donors already trust us, and we work hard to keep it that way.
FAQ
A school kit costs less than a cinema ticket and lasts a whole year. Clear prices, honest advice and no surprises along the way. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</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. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Companies can match employee donations and double their impact. 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. Thousands of donors already trust us, and we work hard to keep it that way.</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. Clear prices, honest advice and no surprises along the way. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</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. You receive photos and updates showing exactly what your donation achieved.
Background
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clean water wells are built with and maintained by local communities. Companies can match employee donations and double their impact. Local partners know their communities and make sure help arrives where it matters.
Method
A school kit costs less than a cinema ticket and lasts a whole year. Friendly people answer your questions quickly, by phone, chat or email. 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.
Results
Ninety cents of every dollar goes directly to the projects you support. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.
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-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-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. You receive photos and updates showing exactly what your donation achieved.</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. Clean water wells are built with and maintained by local communities. Companies can match employee donations and double their impact. Local partners know their communities and make sure help arrives where it matters.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">A school kit costs less than a cinema ticket and lasts a whole year. Friendly people answer your questions quickly, by phone, chat or email. 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.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</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. Start in minutes and get help from a real person whenever you need it.</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 donation is tax-deductible, and receipts arrive by email instantly. We have helped more than two hundred thousand people since we started. We keep things simple, so you can focus on what matters to you.
Set up your profile
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. Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations.
Invite the team
Our team has done this many times, so you never have to guess. Companies can match employee donations and double their impact. 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.
Go live
Ninety cents of every dollar goes directly to the projects you support. Leave a gift in your will and help future generations. 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.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. We have helped more than two hundred thousand people since we started. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. Our annual report is independently audited and published in full. Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Our team has done this many times, so you never have to guess. Companies can match employee donations and double their impact. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Leave a gift in your will and help future generations. 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.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Why monthly giving makes such a difference
We measure success by how many donors come back and tell their friends. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.
The small habits that make a big difference
Friendly people answer your questions quickly, by phone, chat or email. You receive photos and updates showing exactly what your donation achieved. Local partners know their communities and make sure help arrives where it matters. Our annual report is independently audited and published in full.
How to choose the right campaign
Clear prices, honest advice and no surprises along the way. 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.
A day in the life of a volunteer
Volunteers give their time in schools, shelters and food banks every week. 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.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-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">Why monthly giving makes such a difference</h3>
<p class="small mb-0">We measure success by how many donors come back and tell their friends. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</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">The small habits that make a big difference</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. You receive photos and updates showing exactly what your donation achieved. Local partners know their communities and make sure help arrives where it matters. Our annual report is independently audited and published in full.</p>
</div>
<div 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">How to choose the right campaign</h3>
<p class="small mb-0">Clear prices, honest advice and no surprises along the way. 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-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">A day in the life of a volunteer</h3>
<p class="small mb-0">Volunteers give their time in schools, shelters and food banks every week. 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.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- How your donations built three new classrooms?
- Every donation is tax-deductible, and receipts arrive by email instantly.
- What happens after a disaster appeal?
- Ninety cents of every dollar goes directly to the projects you support.
- Ten ways to fundraise with friends?
- Every donation is tax-deductible, and receipts arrive by email instantly.
Shipping
- Five things we learned this year?
- Start in minutes and get help from a real person whenever you need it.
- Stories from the families we support?
- We listen first, then build a plan around what you actually need.
- Our yearly impact report, explained?
- Local partners know their communities and make sure help arrives where it matters.
Returns
- Looking back at a busy season?
- Volunteers give their time in schools, shelters and food banks every week.
- Our favourite tips for busy weeks?
- A school kit costs less than a cinema ticket and lasts a whole year.
- What our donors asked us most?
- Friendly people answer your questions quickly, by phone, chat or email.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">How your donations built three new classrooms?</dt>
<dd class="small text-body-secondary">Every donation is tax-deductible, and receipts arrive by email instantly.</dd>
<dt class="small">What happens after a disaster appeal?</dt>
<dd class="small text-body-secondary">Ninety cents of every dollar goes directly to the projects you support.</dd>
<dt class="small">Ten ways to fundraise with friends?</dt>
<dd class="small text-body-secondary">Every donation is tax-deductible, and receipts arrive by email instantly.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
<dl>
<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>
<dt class="small">Stories from the families we support?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</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>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Volunteers give their time in schools, shelters and food banks every week.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">A school kit costs less than a cinema ticket and lasts a whole year.</dd>
<dt class="small">What our donors asked us most?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Companies can match employee donations and double their impact. Thousands of donors already trust us, and we work hard to keep it that way. Clean water wells are built with and maintained by local communities.
Battery
Clear prices, honest advice and no surprises along the way. Leave a gift in your will and help future generations. Our annual report is independently audited and published in full.
Connectivity
Our team has done this many times, so you never have to guess. You receive photos and updates showing exactly what your donation achieved. We keep things simple, so you can focus on what matters to you. We have helped more than two hundred thousand people since we started.
Security
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. 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-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-fill" 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-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Companies can match employee donations and double their impact. Thousands of donors already trust us, and we work hard to keep it that way. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Leave a gift in your will and help future generations. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</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. We keep things simple, so you can focus on what matters to you. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$18.52 / mo
- Local partners
- Transparent reports
- Local partners
Team
$46.12 / mo
- Impact tracking
- Secure giving
- Transparent reports
Business
$76.81 / mo
- Impact tracking
- 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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$18.52<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Local partners</li>
<li>Transparent reports</li>
<li>Local partners</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">$46.12<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Impact tracking</li>
<li>Secure giving</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">$76.81<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Impact tracking</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: Meet the partners behind our water projects
We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Clean water wells are built with and maintained by local communities.
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. Every detail is handled by people who care about getting it right.
Chapter 2: A beginner's guide to getting started
Thousands of donors already trust us, and we work hard to keep it that way. Companies can match employee donations and double their impact. 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.
Ninety cents of every dollar goes directly to the projects you support. Volunteers give their time in schools, shelters and food banks every week. A school kit costs less than a cinema ticket and lasts a whole year. Clear prices, honest advice and no surprises along the way.
Chapter 3: Why we plant trees with the schools we build
Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email. Local partners know their communities and make sure help arrives where it matters. Our annual report is independently audited and published in full.
Our team has done this many times, so you never have to guess. Leave a gift in your will and help future generations. You receive photos and updates showing exactly what your donation achieved.
Chapter 4: Inside the shelter: from rescue to new home
Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year. Clear prices, honest advice and no surprises along the way. You receive photos and updates showing exactly what your donation achieved.
Companies can match employee donations and double their impact. Every detail is handled by people who care about getting it right. Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Meet the partners behind our water projects</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Clean water wells are built with and maintained by local communities.</p>
<p class="small">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. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: A beginner's guide to getting started</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. Companies can match employee donations and double their impact. 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>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. Volunteers give their time in schools, shelters and food banks every week. A school kit costs less than a cinema ticket and lasts a whole year. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Why we plant trees with the schools we build</h3>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email. Local partners know their communities and make sure help arrives where it matters. Our annual report is independently audited and published in full.</p>
<p class="small">Our team has done this many times, so you never have to guess. Leave a gift in your will and help future generations. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Inside the shelter: from rescue to new home</h3>
<p class="small">Leave a gift in your will and help future generations. A school kit costs less than a cinema ticket and lasts a whole year. Clear prices, honest advice and no surprises along the way. You receive photos and updates showing exactly what your donation achieved.</p>
<p class="small">Companies can match employee donations and double their impact. Every detail is handled by people who care about getting it right. Local partners know their communities and make sure help arrives where it matters. Our team has done this many times, so you never have to guess.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Our annual report is independently audited and published in full. 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.
Notifications
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. Start in minutes and get help from a real person whenever you need it. Ninety cents of every dollar goes directly to the projects you support.
Privacy
Clean water wells are built with and maintained by local communities. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. We measure success by how many donors come back and tell their friends.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-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="Leo Fischer">
</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="Montreal">
</div>
<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. 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-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">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. Start in minutes and get help from a real person whenever you need it. Ninety cents of every dollar goes directly to the projects you support.</p>
</div>
<div id="spy-1191" class="pb-3">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Clean water wells are built with and maintained by local communities. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. We measure success by how many donors come back and tell their friends.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Marketing
- Freya WhitakerFrontend Engineer
- Ella NovakSales Executive
- Jonah SatoSupport Specialist
Sales
- Kai IbrahimFrontend Engineer
- Ava PatelSupport Specialist
- Nadia SilvaOperations Manager
Engineering
- Lea VargaProduct Designer
- Liam OkaforOperations Manager
- Priya HaddadHR Partner
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Marketing</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1198" 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-9.svg" class="rounded-circle" width="36" height="36" alt="Freya Whitaker"><div><div class="small fw-semibold">Freya Whitaker</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Ella Novak"><div><div class="small fw-semibold">Ella Novak</div><div class="small text-body-secondary">Sales Executive</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Jonah Sato"><div><div class="small fw-semibold">Jonah Sato</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
<div id="spy-1199" 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="Kai Ibrahim"><div><div class="small fw-semibold">Kai Ibrahim</div><div class="small text-body-secondary">Frontend Engineer</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="Ava Patel"><div><div class="small fw-semibold">Ava Patel</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-3.svg" class="rounded-circle" width="36" height="36" alt="Nadia Silva"><div><div class="small fw-semibold">Nadia Silva</div><div class="small text-body-secondary">Operations Manager</div></div></li>
</ul>
</div>
<div id="spy-1200" 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-2.svg" class="rounded-circle" width="36" height="36" alt="Lea Varga"><div><div class="small fw-semibold">Lea Varga</div><div class="small text-body-secondary">Product Designer</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="Liam Okafor"><div><div class="small fw-semibold">Liam Okafor</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-5.svg" class="rounded-circle" width="36" height="36" alt="Priya Haddad"><div><div class="small fw-semibold">Priya Haddad</div><div class="small text-body-secondary">HR Partner</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Relief
- Health kit$35.00
- Solar lamp$20.99
- Teacher training$119.99
Animals
- Shelter support$43.00
- Solar lamp$18.99
- Monthly gift$26.00
Education
- Meal pack$14.00
- Teacher training$118.99
- Library books$44.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Relief</a><a class="nav-link" href="#spy-1203">Animals</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-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Relief</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Health kit</span><span class="fw-semibold">$35.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Solar lamp</span><span class="fw-semibold">$20.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Teacher training</span><span class="fw-semibold">$119.99</span></li>
</ul>
</div>
<div id="spy-1203" 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">$43.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Solar lamp</span><span class="fw-semibold">$18.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Monthly gift</span><span class="fw-semibold">$26.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Education</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Meal pack</span><span class="fw-semibold">$14.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Teacher training</span><span class="fw-semibold">$118.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Library books</span><span class="fw-semibold">$44.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Volunteers give their time in schools, shelters and food banks every week. Our team has done this many times, so you never have to guess. Companies can match employee donations and double their impact. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
This week
Every donation is tax-deductible, and receipts arrive by email instantly. Friendly people answer your questions quickly, by phone, chat or email. We have helped more than two hundred thousand people since we started. Every detail is handled by people who care about getting it right.
Later
We listen first, then build a plan around what you actually need. Ninety cents of every dollar goes directly to the projects you support. Leave a gift in your will and help future generations.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Our team has done this many times, so you never have to guess. Companies can match employee donations and double their impact. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</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. We have helped more than two hundred thousand people since we started. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">We listen first, then build a plan around what you actually need. Ninety cents of every dollar goes directly to the projects you support. Leave a gift in your will and help future generations.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
Local partners know their communities and make sure help arrives where it matters. Clear prices, honest advice and no surprises along the way. Thousands of donors already trust us, and we work hard to keep it that way.
Orbit
Start in minutes and get help from a real person whenever you need it. A school kit costs less than a cinema ticket and lasts a whole year. Volunteers give their time in schools, shelters and food banks every week.
Landing
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.
<div data-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Clear prices, honest advice and no surprises along the way. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. A school kit costs less than a cinema ticket and lasts a whole year. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Our annual report is independently audited and published in full. Clean water wells are built with and maintained by local communities. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Aug 15, 2026
- NewWe measure success by how many donors come back and tell their friends.
- ImprovedWe keep things simple, so you can focus on what matters to you.
- FixedA school kit costs less than a cinema ticket and lasts a whole year.
v3.1 Oct 15, 2026
- NewEvery detail is handled by people who care about getting it right.
- ImprovedClear prices, honest advice and no surprises along the way.
- FixedWe listen first, then build a plan around what you actually need.
v3.0 Sep 21, 2026
- NewOur team has done this many times, so you never have to guess.
- ImprovedLeave a gift in your will and help future generations.
- FixedWe keep things simple, so you can focus on what matters to you.
v2.9 Oct 5, 2025
- NewYou receive photos and updates showing exactly what your donation achieved.
- ImprovedLocal partners know their communities and make sure help arrives where it matters.
- FixedClean water wells are built with and maintained by local communities.
<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-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Aug 15, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many donors come back and tell their friends.</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>A school kit costs less than a cinema ticket and lasts a whole year.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 15, 2026</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>Clear prices, honest advice and no surprises along the way.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 21, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Leave a gift in your will and help future generations.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>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">Oct 5, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>You receive photos and updates showing exactly what your donation achieved.</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>Clean water wells are built with and maintained by local communities.</li>
</ul>
</div>
</div>
</div>
</div>