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
Our team has done this many times, so you never have to guess. Nutrition plans fit your routine and the food you actually enjoy. Pause or change your membership any time, with no long contracts. Open 24 hours, so you can train whenever it suits your day.
Clear prices, honest advice and no surprises along the way. Community events keep you motivated, from fun runs to workshops. Start in minutes and get help from a real person whenever you need it.
Details
Every detail is handled by people who care about getting it right. Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you.
We measure success by how many members come back and tell their friends. Our recovery spa has a sauna, cold plunge and massage rooms. Friendly people answer your questions quickly, by phone, chat or email.
Pricing
Thousands of members already trust us, and we work hard to keep it that way. Modern equipment is cleaned, serviced and ready every day. Beginners are always welcome, with an intro session included.
Track your progress in the app and see how far you have come. Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Aeroium 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">Our team has done this many times, so you never have to guess. Nutrition plans fit your routine and the food you actually enjoy. Pause or change your membership any time, with no long contracts. Open 24 hours, so you can train whenever it suits your day.</p>
<p class="small">Clear prices, honest advice and no surprises along the way. Community events keep you motivated, from fun runs to workshops. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Every detail is handled by people who care about getting it right. Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you.</p>
<p class="small">We measure success by how many members come back and tell their friends. Our recovery spa has a sauna, cold plunge and massage rooms. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Thousands of members already trust us, and we work hard to keep it that way. Modern equipment is cleaned, serviced and ready every day. Beginners are always welcome, with an intro session included.</p>
<p class="small">Track your progress in the app and see how far you have come. Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
We listen first, then build a plan around what you actually need. We measure success by how many members come back and tell their friends. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops.
Step two
Nutrition plans fit your routine and the food you actually enjoy. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.
Step three
Open 24 hours, so you can train whenever it suits your day. Certified coaches design every session around your level and your goals. Beginners are always welcome, with an intro session included. Small group classes mean your coach knows your name and your form.
Step four
Pause or change your membership any time, with no long contracts. Thousands of members already trust us, and we work hard to keep it that way. More than sixty classes a week, from sunrise yoga to late-night spin. Our team has done this many times, so you never have to guess.
<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">We listen first, then build a plan around what you actually need. We measure success by how many members come back and tell their friends. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Open 24 hours, so you can train whenever it suits your day. Certified coaches design every session around your level and your goals. Beginners are always welcome, with an intro session included. Small group classes mean your coach knows your name and your form.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Pause or change your membership any time, with no long contracts. Thousands of members already trust us, and we work hard to keep it that way. More than sixty classes a week, from sunrise yoga to late-night spin. Our team has done this many times, so you never have to guess.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Recovery spa
Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms. Track your progress in the app and see how far you have come.
Personal training
Online coaching keeps you on track when you travel. Our team has done this many times, so you never have to guess. Online coaching keeps you on track when you travel.
Group classes
Small group classes mean your coach knows your name and your form. Start in minutes and get help from a real person whenever you need it. Thousands of members already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right.
Questions
Certified coaches design every session around your level and your goals. Modern equipment is cleaned, serviced and ready every day. We measure success by how many members come back and tell their friends. Track your progress in the app and see how far you have come.
<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">Recovery spa</a><a class="nav-link" href="#spy-1132">Personal training</a><a class="nav-link" href="#spy-1133">Group classes</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">Recovery spa</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms. Track your progress in the app and see how far you have come.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Personal training</h3>
<p class="small">Online coaching keeps you on track when you travel. Our team has done this many times, so you never have to guess. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Group classes</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Start in minutes and get help from a real person whenever you need it. Thousands of members already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Certified coaches design every session around your level and your goals. Modern equipment is cleaned, serviced and ready every day. We measure success by how many members come back and tell their friends. Track your progress in the app and see how far you have come.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Community events keep you motivated, from fun runs to workshops. Our recovery spa has a sauna, cold plunge and massage rooms. We keep things simple, so you can focus on what matters to you. More than sixty classes a week, from sunrise yoga to late-night spin.
Install
Open 24 hours, so you can train whenever it suits your day. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts.
Configure
Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.
Usage
Nutrition plans fit your routine and the food you actually enjoy. We measure success by how many members come back and tell their friends. Our team has done this many times, so you never have to guess. Track your progress in the app and see how far you have come.
Examples
We listen first, then build a plan around what you actually need. Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel.
<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">Community events keep you motivated, from fun runs to workshops. Our recovery spa has a sauna, cold plunge and massage rooms. We keep things simple, so you can focus on what matters to you. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Open 24 hours, so you can train whenever it suits your day. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. We measure success by how many members come back and tell their friends. Our team has done this many times, so you never have to guess. Track your progress in the app and see how far you have come.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">We listen first, then build a plan around what you actually need. Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Modern equipment is cleaned, serviced and ready every day. Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms.
Midday
Clear prices, honest advice and no surprises along the way. Pause or change your membership any time, with no long contracts. Open 24 hours, so you can train whenever it suits your day. Small group classes mean your coach knows your name and your form.
Afternoon
Friendly people answer your questions quickly, by phone, chat or email. Certified coaches design every session around your level and your goals. More than sixty classes a week, from sunrise yoga to late-night spin.
Evening
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. Thousands of members already trust us, and we work hard to keep it that way.
<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">Modern equipment is cleaned, serviced and ready every day. Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Pause or change your membership any time, with no long contracts. Open 24 hours, so you can train whenever it suits your day. Small group classes mean your coach knows your name and your form.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Certified coaches design every session around your level and your goals. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">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. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Nutrition plans fit your routine and the food you actually enjoy. 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. Modern equipment is cleaned, serviced and ready every day.
Beta
We keep things simple, so you can focus on what matters to you. Thousands of members already trust us, and we work hard to keep it that way. Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess.
Gamma
Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. Track your progress in the app and see how far you have come. Friendly people answer your questions quickly, by phone, chat or email.
<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">Nutrition plans fit your routine and the food you actually enjoy. 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. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Thousands of members already trust us, and we work hard to keep it that way. Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. Track your progress in the app and see how far you have come. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms. Pause or change your membership any time, with no long contracts. Online coaching keeps you on track when you travel.
Features
Small group classes mean your coach knows your name and your form. Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way.
Reviews
More than sixty classes a week, from sunrise yoga to late-night spin. Certified coaches design every session around your level and your goals. We listen first, then build a plan around what you actually need.
FAQ
We measure success by how many members come back and tell their friends. Nutrition plans fit your routine and the food you actually enjoy. Online coaching keeps you on track when you travel. Certified coaches design every session around your level and your goals.
<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">Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms. Pause or change your membership any time, with no long contracts. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. Certified coaches design every session around your level and your goals. 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">We measure success by how many members come back and tell their friends. Nutrition plans fit your routine and the food you actually enjoy. Online coaching keeps you on track when you travel. Certified coaches design every session around your level and your goals.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
More than sixty classes a week, from sunrise yoga to late-night spin. Beginners are always welcome, with an intro session included. Track your progress in the app and see how far you have come.
Background
We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Thousands of members already trust us, and we work hard to keep it that way.
Method
Friendly people answer your questions quickly, by phone, chat or email. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops.
Results
We listen first, then build a plan around what you actually need. We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts. Open 24 hours, so you can train whenever it suits your day.
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">More than sixty classes a week, from sunrise yoga to late-night spin. Beginners are always welcome, with an intro session included. Track your progress in the app and see how far you have come.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">We listen first, then build a plan around what you actually need. We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
Our recovery spa has a sauna, cold plunge and massage rooms. Every detail is handled by people who care about getting it right. Small group classes mean your coach knows your name and your form.
Set up your profile
Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Our recovery spa has a sauna, cold plunge and massage rooms.
Invite the team
We measure success by how many members come back and tell their friends. Modern equipment is cleaned, serviced and ready every day. Clear prices, honest advice and no surprises along the way. Certified coaches design every session around your level and your goals.
Go live
Small group classes mean your coach knows your name and your form. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. Every detail is handled by people who care about getting it right. Small group classes mean your coach knows your name and your form.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">We measure success by how many members come back and tell their friends. Modern equipment is cleaned, serviced and ready every day. Clear prices, honest advice and no surprises along the way. Certified coaches design every session around your level and your goals.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Running your first 5K: an eight-week plan
Community events keep you motivated, from fun runs to workshops. Nutrition plans fit your routine and the food you actually enjoy. Every detail is handled by people who care about getting it right.
What to eat before a morning workout
Thousands of members already trust us, and we work hard to keep it that way. Pause or change your membership any time, with no long contracts. Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel.
How to choose the right class
More than sixty classes a week, from sunrise yoga to late-night spin. Start in minutes and get help from a real person whenever you need it. 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.
A beginner's guide to strength training
Track your progress in the app and see how far you have come. Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel.
<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">Running your first 5K: an eight-week plan</h3>
<p class="small mb-0">Community events keep you motivated, from fun runs to workshops. Nutrition plans fit your routine and the food you actually enjoy. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">What to eat before a morning workout</h3>
<p class="small mb-0">Thousands of members already trust us, and we work hard to keep it that way. Pause or change your membership any time, with no long contracts. Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel.</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 class</h3>
<p class="small mb-0">More than sixty classes a week, from sunrise yoga to late-night spin. Start in minutes and get help from a real person whenever you need it. 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.</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 beginner's guide to strength training</h3>
<p class="small mb-0">Track your progress in the app and see how far you have come. Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- A beginner's guide to getting started?
- Nutrition plans fit your routine and the food you actually enjoy.
- Five stretches for desk workers?
- Open 24 hours, so you can train whenever it suits your day.
- Our favourite tips for busy weeks?
- We listen first, then build a plan around what you actually need.
Shipping
- Building a workout habit that lasts?
- Thousands of members already trust us, and we work hard to keep it that way.
- How to stay motivated through winter?
- We keep things simple, so you can focus on what matters to you.
- Five things we learned this year?
- We measure success by how many members come back and tell their friends.
Returns
- HIIT twice a week: how hard is hard enough??
- Beginners are always welcome, with an intro session included.
- Why recovery matters as much as training?
- Our recovery spa has a sauna, cold plunge and massage rooms.
- How our coaches plan a new class?
- 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-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Nutrition plans fit your routine and the food you actually enjoy.</dd>
<dt class="small">Five stretches for desk workers?</dt>
<dd class="small text-body-secondary">Open 24 hours, so you can train whenever it suits your day.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Building a workout habit that lasts?</dt>
<dd class="small text-body-secondary">Thousands of members already trust us, and we work hard to keep it that way.</dd>
<dt class="small">How to stay motivated through winter?</dt>
<dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">We measure success by how many members come back and tell their friends.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">HIIT twice a week: how hard is hard enough??</dt>
<dd class="small text-body-secondary">Beginners are always welcome, with an intro session included.</dd>
<dt class="small">Why recovery matters as much as training?</dt>
<dd class="small text-body-secondary">Our recovery spa has a sauna, cold plunge and massage rooms.</dd>
<dt class="small">How our coaches plan a new class?</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
Track your progress in the app and see how far you have come. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Community events keep you motivated, from fun runs to workshops.
Battery
Start in minutes and get help from a real person whenever you need it. Pause or change your membership any time, with no long contracts. Every detail is handled by people who care about getting it right.
Connectivity
Certified coaches design every session around your level and your goals. Modern equipment is cleaned, serviced and ready every day. More than sixty classes a week, from sunrise yoga to late-night spin.
Security
Beginners are always welcome, with an intro session included. More than sixty classes a week, from sunrise yoga to late-night spin. Pause or change your membership any time, with no long contracts.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Track your progress in the app and see how far you have come. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Pause or change your membership any time, with no long contracts. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Certified coaches design every session around your level and your goals. Modern equipment is cleaned, serviced and ready every day. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Beginners are always welcome, with an intro session included. More than sixty classes a week, from sunrise yoga to late-night spin. Pause or change your membership any time, with no long contracts.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$16.86 / mo
- Community events
- Flexible plans
- Certified coaches
Team
$35.51 / mo
- Flexible plans
- Progress tracking
- Flexible plans
Business
$65.29 / mo
- Open 24/7
- Open 24/7
- Flexible plans
<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$16.86<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Community events</li>
<li>Flexible plans</li>
<li>Certified coaches</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">$35.51<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Flexible plans</li>
<li>Progress tracking</li>
<li>Flexible plans</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">$65.29<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Open 24/7</li>
<li>Open 24/7</li>
<li>Flexible plans</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: The small habits that make a big difference
Track your progress in the app and see how far you have come. We listen first, then build a plan around what you actually need. We measure success by how many members come back and tell their friends. Certified coaches design every session around your level and your goals.
Start in minutes and get help from a real person whenever you need it. Open 24 hours, so you can train whenever it suits your day. Every detail is handled by people who care about getting it right. Thousands of members already trust us, and we work hard to keep it that way.
Chapter 2: Our most popular classes this month
Friendly people answer your questions quickly, by phone, chat or email. Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel.
We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms. Modern equipment is cleaned, serviced and ready every day.
Chapter 3: What our members asked us most
Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.
We keep things simple, so you can focus on what matters to you. Nutrition plans fit your routine and the food you actually enjoy. Online coaching keeps you on track when you travel. Our recovery spa has a sauna, cold plunge and massage rooms.
Chapter 4: Looking back at a busy season
We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts. 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. Modern equipment is cleaned, serviced and ready every day. Small group classes mean your coach knows your name and your form. We listen first, then build a plan around what you actually need.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: The small habits that make a big difference</h3>
<p class="small">Track your progress in the app and see how far you have come. We listen first, then build a plan around what you actually need. We measure success by how many members come back and tell their friends. Certified coaches design every session around your level and your goals.</p>
<p class="small">Start in minutes and get help from a real person whenever you need it. Open 24 hours, so you can train whenever it suits your day. Every detail is handled by people who care about getting it right. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Our most popular classes this month</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: What our members asked us most</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Nutrition plans fit your routine and the food you actually enjoy. Online coaching keeps you on track when you travel. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Looking back at a busy season</h3>
<p class="small">We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts. Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small">Start in minutes and get help from a real person whenever you need it. Modern equipment is cleaned, serviced and ready every day. Small group classes mean your coach knows your name and your form. We listen first, then build a plan around what you actually need.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Beginners are always welcome, with an intro session included. Track your progress in the app and see how far you have come. Thousands of members already trust us, and we work hard to keep it that way.
Notifications
Community events keep you motivated, from fun runs to workshops. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. More than sixty classes a week, from sunrise yoga to late-night spin.
Privacy
Open 24 hours, so you can train whenever it suits your day. Certified coaches design every session around your level and your goals. Every detail is handled by people who care about getting it right. Modern equipment is cleaned, serviced and ready every day.
<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="Mason Carter">
</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="Auckland">
</div>
<p class="small">Beginners are always welcome, with an intro session included. Track your progress in the app and see how far you have come. Thousands of members already trust us, and we work hard to keep it that way.</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">Community events keep you motivated, from fun runs to workshops. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. More than sixty classes a week, from sunrise yoga to late-night spin.</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">Open 24 hours, so you can train whenever it suits your day. Certified coaches design every session around your level and your goals. Every detail is handled by people who care about getting it right. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Marketing
- Aria PatelSupport Specialist
- Ravi LarsenCustomer Success
- Liam KowalskiHR Partner
Engineering
- Noah LindqvistArt Director
- Ethan HughesBackend Engineer
- Omar KimMarketing Lead
Sales
- Kenji RossiFrontend Engineer
- Leo NguyenContent Writer
- Luna AlvarezCustomer Success
<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">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">Marketing</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="Aria Patel"><div><div class="small fw-semibold">Aria 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-7.svg" class="rounded-circle" width="36" height="36" alt="Ravi Larsen"><div><div class="small fw-semibold">Ravi Larsen</div><div class="small text-body-secondary">Customer Success</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="Liam Kowalski"><div><div class="small fw-semibold">Liam Kowalski</div><div class="small text-body-secondary">HR Partner</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Noah Lindqvist"><div><div class="small fw-semibold">Noah Lindqvist</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-4.svg" class="rounded-circle" width="36" height="36" alt="Ethan Hughes"><div><div class="small fw-semibold">Ethan Hughes</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Omar Kim"><div><div class="small fw-semibold">Omar Kim</div><div class="small text-body-secondary">Marketing Lead</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-5.svg" class="rounded-circle" width="36" height="36" alt="Kenji Rossi"><div><div class="small fw-semibold">Kenji Rossi</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-6.svg" class="rounded-circle" width="36" height="36" alt="Leo Nguyen"><div><div class="small fw-semibold">Leo Nguyen</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-5.svg" class="rounded-circle" width="36" height="36" alt="Luna Alvarez"><div><div class="small fw-semibold">Luna Alvarez</div><div class="small text-body-secondary">Customer Success</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Recovery
- Bootcamp$133.00
- 10-class pack$125.99
- Coaching plan$179.00
Cardio
- Mobility workshop$34.00
- Personal training$65.99
- Spin class pack$96.00
Yoga
- Yoga retreat$378.00
- Day pass$15.00
- Coaching plan$198.99
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Recovery</a><a class="nav-link" href="#spy-1203">Cardio</a><a class="nav-link" href="#spy-1204">Yoga</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">Recovery</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Bootcamp</span><span class="fw-semibold">$133.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>10-class pack</span><span class="fw-semibold">$125.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$179.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Cardio</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Mobility workshop</span><span class="fw-semibold">$34.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Personal training</span><span class="fw-semibold">$65.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Spin class pack</span><span class="fw-semibold">$96.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Yoga</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Yoga retreat</span><span class="fw-semibold">$378.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Day pass</span><span class="fw-semibold">$15.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$198.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Thousands of members already trust us, and we work hard to keep it that way. Community events keep you motivated, from fun runs to workshops. We measure success by how many members come back and tell their friends.
This week
Clear prices, honest advice and no surprises along the way. More than sixty classes a week, from sunrise yoga to late-night spin. We keep things simple, so you can focus on what matters to you. Track your progress in the app and see how far you have come.
Later
Small group classes mean your coach knows your name and your form. Nutrition plans fit your routine and the food you actually enjoy. Friendly people answer your questions quickly, by phone, chat or email.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">Thousands of members already trust us, and we work hard to keep it that way. Community events keep you motivated, from fun runs to workshops. We measure success by how many members come back and tell their friends.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. More than sixty classes a week, from sunrise yoga to late-night spin. We keep things simple, so you can focus on what matters to you. Track your progress in the app and see how far you have come.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Nutrition plans fit your routine and the food you actually enjoy. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Our recovery spa has a sauna, cold plunge and massage rooms. Open 24 hours, so you can train whenever it suits your day. Our team has done this many times, so you never have to guess.
Orbit
We listen first, then build a plan around what you actually need. Certified coaches design every session around your level and your goals. Start in minutes and get help from a real person whenever you need it.
Landing
Online coaching keeps you on track when you travel. Pause or change your membership any time, with no long contracts. Every detail is handled by people who care about getting it right.
<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">Our recovery spa has a sauna, cold plunge and massage rooms. Open 24 hours, so you can train whenever it suits your day. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">We listen first, then build a plan around what you actually need. Certified coaches design every session around your level and your goals. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Online coaching keeps you on track when you travel. Pause or change your membership any time, with no long contracts. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Jun 8, 2026
- NewBeginners are always welcome, with an intro session included.
- ImprovedNutrition plans fit your routine and the food you actually enjoy.
- FixedCommunity events keep you motivated, from fun runs to workshops.
v3.1 May 13, 2026
- NewStart in minutes and get help from a real person whenever you need it.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedWe measure success by how many members come back and tell their friends.
v3.0 Feb 20, 2026
- NewModern equipment is cleaned, serviced and ready every day.
- ImprovedOur recovery spa has a sauna, cold plunge and massage rooms.
- FixedWe keep things simple, so you can focus on what matters to you.
v2.9 Mar 1, 2026
- NewOnline coaching keeps you on track when you travel.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedSmall group classes mean your coach knows your name and your form.
<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">Jun 8, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Beginners are always welcome, with an intro session included.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Nutrition plans fit your routine and the food you actually enjoy.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Community events keep you motivated, from fun runs to workshops.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">May 13, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many members 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">Feb 20, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Modern equipment is cleaned, serviced and ready every day.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our recovery spa has a sauna, cold plunge and massage rooms.</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">Mar 1, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Online coaching keeps you on track when you travel.</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>Small group classes mean your coach knows your name and your form.</li>
</ul>
</div>
</div>
</div>
</div>