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
Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact. A school kit costs less than a cinema ticket and lasts a whole year.
We measure success by how many donors come back and tell their friends. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Leave a gift in your will and help future generations.
Details
Our annual report is independently audited and published in full. Local partners know their communities and make sure help arrives where it matters. Clean water wells are built with and maintained by local communities.
Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.
Pricing
We have helped more than two hundred thousand people since we started. Volunteers give their time in schools, shelters and food banks every week. We listen first, then build a plan around what you actually need. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
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. Ninety cents of every dollar goes directly to the projects you support. Volunteers give their time in schools, shelters and food banks every week.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Pixel Deck</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">Friendly people answer your questions quickly, by phone, chat or email. Companies can match employee donations and double their impact. A school kit costs less than a cinema ticket and lasts a whole year.</p>
<p class="small">We measure success by how many donors come back and tell their friends. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Our annual report is independently audited and published in full. Local partners know their communities and make sure help arrives where it matters. Clean water wells are built with and maintained by local communities.</p>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</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. 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>
<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. Ninety cents of every dollar goes directly to the projects you support. Volunteers give their time in schools, shelters and food banks every week.</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. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.
Step two
Clean water wells are built with and maintained by local communities. 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. Every donation is tax-deductible, and receipts arrive by email instantly.
Step three
Our annual report is independently audited and published in full. You receive photos and updates showing exactly what your donation achieved. A school kit costs less than a cinema ticket and lasts a whole year.
Step four
Local partners know their communities and make sure help arrives where it matters. Companies can match employee donations and double their impact. Leave a gift in your will and help future generations. Clear prices, honest advice and no surprises along the way.
<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. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Clean water wells are built with and maintained by local communities. 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. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Our annual report is independently audited and published in full. You receive photos and updates showing exactly what your donation achieved. A school kit costs less than a cinema ticket and lasts a whole year.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Companies can match employee donations and double their impact. Leave a gift in your will and help future generations. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Volunteer programs
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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Animal rescue
We listen first, then build a plan around what you actually need. We have helped more than two hundred thousand people since we started. A school kit costs less than a cinema ticket and lasts a whole year. Our annual report is independently audited and published in full.
Food relief
Clean water wells are built with and maintained by local communities. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. You receive photos and updates showing exactly what your donation achieved.
Questions
Every donation is tax-deductible, and receipts arrive by email instantly. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Ninety cents of every dollar goes directly to the projects you support. Companies can match employee donations and double their impact.
<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">Volunteer programs</a><a class="nav-link" href="#spy-1132">Animal rescue</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">Volunteer programs</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. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Animal rescue</h3>
<p class="small">We listen first, then build a plan around what you actually need. We have helped more than two hundred thousand people since we started. A school kit costs less than a cinema ticket and lasts a whole year. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Food relief</h3>
<p class="small">Clean water wells are built with and maintained by local communities. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. You receive photos and updates showing exactly what your donation achieved.</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. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Ninety cents of every dollar goes directly to the projects you support. Companies can match employee donations and double their impact.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Local partners know their communities and make sure help arrives where it matters. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.
Install
Volunteers give their time in schools, shelters and food banks every week. Leave a gift in your will and help future generations. We keep things simple, so you can focus on what matters to you.
Configure
Thousands of donors already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. We measure success by how many donors come back and tell their friends.
Usage
We have helped more than two hundred thousand people since we started. Friendly people answer your questions quickly, by phone, chat or email. Clean water wells are built with and maintained by local communities.
Examples
Start in minutes and get help from a real person whenever you need it. Every donation is tax-deductible, and receipts arrive by email instantly. Clear prices, honest advice and no surprises along the way.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. 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-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">We have helped more than two hundred thousand people since we started. Friendly people answer your questions quickly, by phone, chat or email. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Every donation is tax-deductible, and receipts arrive by email instantly. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
You receive photos and updates showing exactly what your donation achieved. Leave a gift in your will and help future generations. Our team has done this many times, so you never have to guess. Thousands of donors already trust us, and we work hard to keep it that way.
Midday
We listen first, then build a plan around what you actually need. Monthly gifts let us plan ahead and respond quickly when disaster strikes. Friendly people answer your questions quickly, by phone, chat or email. Local partners know their communities and make sure help arrives where it matters.
Afternoon
Ninety cents of every dollar goes directly to the projects you support. 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. Every detail is handled by people who care about getting it right.
Evening
Volunteers give their time in schools, shelters and food banks every week. Our annual report is independently audited and published in full. We keep things simple, so you can focus on what matters to you.
<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">You receive photos and updates showing exactly what your donation achieved. Leave a gift in your will and help future generations. Our team has done this many times, so you never have to guess. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">We listen first, then build a plan around what you actually need. Monthly gifts let us plan ahead and respond quickly when disaster strikes. 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-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Ninety cents of every dollar goes directly to the projects you support. 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. Every detail is handled by people who care about getting it right.</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. Our annual report is independently audited and published in full. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
A school kit costs less than a cinema ticket and lasts a whole year. Companies can match employee donations and double their impact. 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.
Beta
A school kit costs less than a cinema ticket and lasts a whole year. Clear prices, honest advice and no surprises along the way. 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.
Gamma
Friendly people answer your questions quickly, by phone, chat or email. Every donation is tax-deductible, and receipts arrive by email instantly. 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-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">A school kit costs less than a cinema ticket and lasts a whole year. Companies can match employee donations and double their impact. 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.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</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. 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-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every donation is tax-deductible, and receipts arrive by email instantly. 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
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clean water wells are built with and maintained by local communities. We measure success by how many donors come back and tell their friends.
Features
Our annual report is independently audited and published in full. Leave a gift in your will and help future generations. Companies can match employee donations and double their impact. Local partners know their communities and make sure help arrives where it matters.
Reviews
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. 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.
FAQ
You receive photos and updates showing exactly what your donation achieved. 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-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">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Clean water wells are built with and maintained by local communities. We measure success by how many donors come back and tell their friends.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Our annual report is independently audited and published in full. Leave a gift in your will and help future generations. 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-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. Start in minutes and get help from a real person whenever you need it. 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-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">You receive photos and updates showing exactly what your donation achieved. Leave a gift in your will and help future generations. Thousands of donors already trust us, and we work hard to keep it that way.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
We keep things simple, so you can focus on what matters to you. Our annual report is independently audited and published in full. Every donation is tax-deductible, and receipts arrive by email instantly. Our team has done this many times, so you never have to guess.
Background
Local partners know their communities and make sure help arrives where it matters. Every detail is handled by people who care about getting it right. We measure success by how many donors come back and tell their friends. We have helped more than two hundred thousand people since we started.
Method
Clear prices, honest advice and no surprises along the way. Companies can match employee donations and double their impact. Volunteers give their time in schools, shelters and food banks every week.
Results
Monthly gifts let us plan ahead and respond quickly when disaster strikes. Friendly people answer your questions quickly, by phone, chat or email. 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-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">We keep things simple, so you can focus on what matters to you. Our annual report is independently audited and published in full. Every donation is tax-deductible, and receipts arrive by email instantly. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Every detail is handled by people who care about getting it right. We measure success by how many donors come back and tell their friends. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Companies can match employee donations and double their impact. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Friendly people answer your questions quickly, by phone, chat or email. 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
We listen first, then build a plan around what you actually need. You receive photos and updates showing exactly what your donation achieved. Ninety cents of every dollar goes directly to the projects you support. Clean water wells are built with and maintained by local communities.
Set up your profile
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. You receive photos and updates showing exactly what your donation achieved.
Invite the team
Leave a gift in your will and help future generations. Every donation is tax-deductible, and receipts arrive by email instantly. Companies can match employee donations and double their impact. Our team has done this many times, so you never have to guess.
Go live
Clear prices, honest advice and no surprises along the way. Volunteers give their time in schools, shelters and food banks every week. 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">We listen first, then build a plan around what you actually need. You receive photos and updates showing exactly what your donation achieved. Ninety cents of every dollar goes directly to the projects you support. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</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. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Leave a gift in your will and help future generations. Every donation is tax-deductible, and receipts arrive by email instantly. 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-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Volunteers give their time in schools, shelters and food banks every week. 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.
Looking back at a busy season
We have helped more than two hundred thousand people since we started. Every detail is handled by people who care about getting it right. Ninety cents of every dollar goes directly to the projects you support. We keep things simple, so you can focus on what matters to you.
A beginner's guide to getting started
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. Start in minutes and get help from a real person whenever you need it. Monthly gifts let us plan ahead and respond quickly when disaster strikes.
Ten ways to fundraise with friends
Our annual report is independently audited and published in full. Local partners know their communities and make sure help arrives where it matters. Friendly people answer your questions quickly, by phone, chat or email.
Five things we learned this year
A school kit costs less than a cinema ticket and lasts a whole year. We measure success by how many donors come back and tell their friends. Our team has done this many times, so you never have to guess.
<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">Looking back at a busy season</h3>
<p class="small mb-0">We have helped more than two hundred thousand people since we started. Every detail is handled by people who care about getting it right. Ninety cents of every dollar goes directly to the projects you support. We keep things simple, so you can focus on what matters to you.</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">A beginner's guide to getting started</h3>
<p class="small mb-0">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. Start in minutes and get help from a real person whenever you need it. Monthly gifts let us plan ahead and respond quickly when disaster strikes.</p>
</div>
<div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Ten ways to fundraise with friends</h3>
<p class="small mb-0">Our annual report is independently audited and published in full. 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-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">Five things we learned this year</h3>
<p class="small mb-0">A school kit costs less than a cinema ticket and lasts a whole year. We measure success by how many donors come back and tell their friends. Our team has done this many times, so you never have to guess.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- How your donations built three new classrooms?
- Leave a gift in your will and help future generations.
- The small habits that make a big difference?
- A school kit costs less than a cinema ticket and lasts a whole year.
- How to choose the right campaign?
- Start in minutes and get help from a real person whenever you need it.
Shipping
- What our donors asked us most?
- Clean water wells are built with and maintained by local communities.
- Why monthly giving makes such a difference?
- Local partners know their communities and make sure help arrives where it matters.
- Meet the partners behind our water projects?
- Clear prices, honest advice and no surprises along the way.
Returns
- Our favourite tips for busy weeks?
- Every detail is handled by people who care about getting it right.
- A day in the life of a volunteer?
- Companies can match employee donations and double their impact.
- Stories from the families we support?
- Monthly gifts let us plan ahead and respond quickly when disaster strikes.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills 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-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">Leave a gift in your will and help future generations.</dd>
<dt class="small">The small habits that make a big difference?</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">How to choose the right campaign?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
</dl>
</div>
<div 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">What our donors asked us most?</dt>
<dd class="small text-body-secondary">Clean water wells are built with and maintained by local communities.</dd>
<dt class="small">Why monthly giving makes such a difference?</dt>
<dd class="small text-body-secondary">Local partners know their communities and make sure help arrives where it matters.</dd>
<dt class="small">Meet the partners behind our water projects?</dt>
<dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</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">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">A day in the life of a volunteer?</dt>
<dd class="small text-body-secondary">Companies can match employee donations and double their impact.</dd>
<dt class="small">Stories from the families we support?</dt>
<dd class="small text-body-secondary">Monthly gifts let us plan ahead and respond quickly when disaster strikes.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Every donation is tax-deductible, and receipts arrive by email instantly. Volunteers give their time in schools, shelters and food banks every week. Our annual report is independently audited and published in full.
Battery
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. You receive photos and updates showing exactly what your donation achieved.
Connectivity
Friendly people answer your questions quickly, by phone, chat or email. 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.
Security
We have helped more than two hundred thousand people since we started. Every donation is tax-deductible, and receipts arrive by email instantly. We have helped more than two hundred thousand people since we started.
<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-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">Every donation is tax-deductible, and receipts arrive by email instantly. Volunteers give their time in schools, shelters and food banks every week. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. Ninety cents of every dollar goes directly to the projects you support. You receive photos and updates showing exactly what your donation achieved.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">We have helped more than two hundred thousand people since we started. 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>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$17.65 / mo
- Impact tracking
- Volunteer network
- Impact tracking
Team
$49.04 / mo
- Local partners
- Secure giving
- Local partners
Business
$50.25 / mo
- Tax receipts
- 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">$17.65<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Impact tracking</li>
<li>Volunteer network</li>
<li>Impact tracking</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$49.04<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Local partners</li>
<li>Secure giving</li>
<li>Local partners</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">$50.25<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Tax receipts</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: What happens after a disaster appeal
Our annual report is independently audited and published in full. 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.
Our team has done this many times, so you never have to guess. Leave a gift in your will and help future generations. We measure success by how many donors come back and tell their friends. Start in minutes and get help from a real person whenever you need it.
Chapter 2: Why we plant trees with the schools we build
Monthly gifts let us plan ahead and respond quickly when disaster strikes. 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.
Thousands of donors already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. Clean water wells are built with and maintained by local communities.
Chapter 3: Inside the shelter: from rescue to new home
Local partners know their communities and make sure help arrives where it matters. Volunteers give their time in schools, shelters and food banks every week. 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.
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. A school kit costs less than a cinema ticket and lasts a whole year. Our annual report is independently audited and published in full.
Chapter 4: Our yearly impact report, explained
We listen first, then build a plan around what you actually need. 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. Leave a gift in your will and help future generations.
Clean water wells are built with and maintained by local communities. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. Clear prices, honest advice and no surprises along the way.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: What happens after a disaster appeal</h3>
<p class="small">Our annual report is independently audited and published in full. 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.</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. We measure success by how many donors come back and tell their friends. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Why we plant trees with the schools we build</h3>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. 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.</p>
<p class="small">Thousands of donors already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. Clean water wells are built with and maintained by local communities.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Inside the shelter: from rescue to new home</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Volunteers give their time in schools, shelters and food banks every week. 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.</p>
<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. A school kit costs less than a cinema ticket and lasts a whole year. Our annual report is independently audited and published in full.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Our yearly impact report, explained</h3>
<p class="small">We listen first, then build a plan around what you actually need. 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. Leave a gift in your will and help future generations.</p>
<p class="small">Clean water wells are built with and maintained by local communities. Companies can match employee donations and double their impact. Ninety cents of every dollar goes directly to the projects you support. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. Friendly people answer your questions quickly, by phone, chat or email. Local partners know their communities and make sure help arrives where it matters.
Notifications
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. Our team has done this many times, so you never have to guess.
Privacy
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. Every detail is handled by people who care about getting it right. Companies can match employee donations and double their impact.
<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="Kai Rossi">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Prague">
</div>
<p class="small">Every donation is tax-deductible, and receipts arrive by email instantly. You receive photos and updates showing exactly what your donation achieved. 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-1190" class="pb-3">
<h3 class="h6">Notifications</h3>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
<label class="form-check-label small" for="spy-sw-1194">Product news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
<label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
</div>
<p class="small">Monthly gifts let us plan ahead and respond quickly when disaster strikes. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1191" class="pb-3">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Volunteers give their time in schools, shelters and food banks every week. 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>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Design
- Felix HughesArt Director
- Freya DuarteData Analyst
- Elena SatoCustomer Success
Engineering
- Nora HarlowFinance Lead
- Sofia MoreauSales Executive
- Ella AshfordContent Writer
Sales
- Noah BrennanSupport Specialist
- Ravi SilvaContent Writer
- Leo KimCustomer Success
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Design</a><a class="nav-link" href="#spy-1199">Engineering</a><a class="nav-link" href="#spy-1200">Sales</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">Design</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Felix Hughes"><div><div class="small fw-semibold">Felix Hughes</div><div class="small text-body-secondary">Art Director</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Freya Duarte"><div><div class="small fw-semibold">Freya Duarte</div><div class="small text-body-secondary">Data Analyst</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="Elena Sato"><div><div class="small fw-semibold">Elena Sato</div><div class="small text-body-secondary">Customer Success</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-6.svg" class="rounded-circle" width="36" height="36" alt="Nora Harlow"><div><div class="small fw-semibold">Nora Harlow</div><div class="small text-body-secondary">Finance Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Sofia Moreau"><div><div class="small fw-semibold">Sofia Moreau</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-3.svg" class="rounded-circle" width="36" height="36" alt="Ella Ashford"><div><div class="small fw-semibold">Ella Ashford</div><div class="small text-body-secondary">Content Writer</div></div></li>
</ul>
</div>
<div id="spy-1200" 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-3.svg" class="rounded-circle" width="36" height="36" alt="Noah Brennan"><div><div class="small fw-semibold">Noah Brennan</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-1.svg" class="rounded-circle" width="36" height="36" alt="Ravi Silva"><div><div class="small fw-semibold">Ravi Silva</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-2.svg" class="rounded-circle" width="36" height="36" alt="Leo Kim"><div><div class="small fw-semibold">Leo Kim</div><div class="small text-body-secondary">Customer Success</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Relief
- Monthly gift$25.00
- Vet care$56.00
- Clean water well$519.99
Health
- Shelter support$41.00
- Monthly gift$24.00
- Tree planting$11.00
Environment
- School kit$28.00
- Shelter support$44.00
- Health kit$34.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">Health</a><a class="nav-link" href="#spy-1204">Environment</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">Relief</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Monthly gift</span><span class="fw-semibold">$25.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Vet care</span><span class="fw-semibold">$56.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Clean water well</span><span class="fw-semibold">$519.99</span></li>
</ul>
</div>
<div id="spy-1203" 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>Shelter support</span><span class="fw-semibold">$41.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Monthly gift</span><span class="fw-semibold">$24.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Tree planting</span><span class="fw-semibold">$11.00</span></li>
</ul>
</div>
<div id="spy-1204" 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">$28.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Shelter support</span><span class="fw-semibold">$44.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Health kit</span><span class="fw-semibold">$34.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations.
This week
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. Clean water wells are built with and maintained by local communities. Every donation is tax-deductible, and receipts arrive by email instantly.
Later
A school kit costs less than a cinema ticket and lasts a whole year. Our annual report is independently audited and published in full. 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.
<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">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Leave a gift in your will and help future generations.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</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. Clean water wells are built with and maintained by local communities. Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">A school kit costs less than a cinema ticket and lasts a whole year. Our annual report is independently audited and published in full. 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.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week.
Orbit
Local partners know their communities and make sure help arrives where it matters. Ninety cents of every dollar goes directly to the projects you support. You receive photos and updates showing exactly what your donation achieved. We have helped more than two hundred thousand people since we started.
Landing
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. Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations.
<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">Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Volunteers give their time in schools, shelters and food banks every week.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Local partners know their communities and make sure help arrives where it matters. Ninety cents of every dollar goes directly to the projects you support. You receive photos and updates showing exactly what your donation achieved. We have helped more than two hundred thousand people since we started.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<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. Every donation is tax-deductible, and receipts arrive by email instantly. Leave a gift in your will and help future generations.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Apr 12, 2026
- NewYou receive photos and updates showing exactly what your donation achieved.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedStart in minutes and get help from a real person whenever you need it.
v3.1 Jun 2, 2026
- NewOur annual report is independently audited and published in full.
- ImprovedNinety cents of every dollar goes directly to the projects you support.
- FixedWe measure success by how many donors come back and tell their friends.
v3.0 Mar 2, 2026
- NewClear prices, honest advice and no surprises along the way.
- ImprovedWe listen first, then build a plan around what you actually need.
- FixedOur team has done this many times, so you never have to guess.
v2.9 Nov 22, 2025
- NewCompanies can match employee donations and double their impact.
- ImprovedLocal partners know their communities and make sure help arrives where it matters.
- FixedFriendly people answer your questions quickly, by phone, chat or email.
<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">Apr 12, 2026</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>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Start in minutes and get help from a real person whenever you need it.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jun 2, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our annual report is independently audited and published in full.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Ninety cents of every dollar goes directly to the projects you support.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many donors come back and tell their friends.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Mar 2, 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>We listen first, then build a plan around what you actually need.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Nov 22, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Companies can match employee donations and double their impact.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Friendly people answer your questions quickly, by phone, chat or email.</li>
</ul>
</div>
</div>
</div>
</div>