Scrollspy
Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-bs-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
Modern equipment is cleaned, serviced and ready every day. More than sixty classes a week, from sunrise yoga to late-night spin. Certified coaches design every session around your level and your goals.
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. Friendly people answer your questions quickly, by phone, chat or email.
Details
Track your progress in the app and see how far you have come. We measure success by how many members come back and tell their friends. Online coaching keeps you on track when you travel.
Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Nutrition plans fit your routine and the food you actually enjoy.
Pricing
Beginners are always welcome, with an intro session included. 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. Community events keep you motivated, from fun runs to workshops.
Our recovery spa has a sauna, cold plunge and massage rooms. 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. 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="#">Junoio Kit</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">Modern equipment is cleaned, serviced and ready every day. More than sixty classes a week, from sunrise yoga to late-night spin. Certified coaches design every session around your level and your goals.</p>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Track your progress in the app and see how far you have come. We measure success by how many members come back and tell their friends. Online coaching keeps you on track when you travel.</p>
<p class="small">Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Beginners are always welcome, with an intro session included. 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. Community events keep you motivated, from fun runs to workshops.</p>
<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. Thousands of members already trust us, and we work hard to keep it that way. 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
Community events keep you motivated, from fun runs to workshops. Certified coaches design every session around your level and your goals. Clear prices, honest advice and no surprises along the way.
Step two
We measure success by how many members come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Nutrition plans fit your routine and the food you actually enjoy. Small group classes mean your coach knows your name and your form.
Step three
Pause or change your membership any time, with no long contracts. 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.
Step four
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.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Certified coaches design every session around your level and your goals. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">We measure success by how many members come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Nutrition plans fit your routine and the food you actually enjoy. Small group classes mean your coach knows your name and your form.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Pause or change your membership any time, with no long contracts. 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.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. 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.
Group classes
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. Thousands of members already trust us, and we work hard to keep it that way.
Recovery spa
Open 24 hours, so you can train whenever it suits your day. Friendly people answer your questions quickly, by phone, chat or email. More than sixty classes a week, from sunrise yoga to late-night spin. Nutrition plans fit your routine and the food you actually enjoy.
Personal training
Start in minutes and get help from a real person whenever you need it. More than sixty classes a week, from sunrise yoga to late-night spin. Track your progress in the app and see how far you have come.
Questions
Modern equipment is cleaned, serviced and ready every day. Beginners are always welcome, with an intro session included. Thousands of members already trust us, and we work hard to keep it that way. We measure success by how many members come back and tell their friends.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Group classes</a><a class="nav-link" href="#spy-1132">Recovery spa</a><a class="nav-link" href="#spy-1133">Personal training</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Group classes</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. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Recovery spa</h3>
<p class="small">Open 24 hours, so you can train whenever it suits your day. Friendly people answer your questions quickly, by phone, chat or email. More than sixty classes a week, from sunrise yoga to late-night spin. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Personal training</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. More than sixty classes a week, from sunrise yoga to late-night spin. Track your progress in the app and see how far you have come.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Modern equipment is cleaned, serviced and ready every day. Beginners are always welcome, with an intro session included. Thousands of members already trust us, and we work hard to keep it that way. We measure success by how many members come back and tell their friends.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Our recovery spa has a sauna, cold plunge and massage rooms. Small group classes mean your coach knows your name and your form. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.
Install
Every detail is handled by people who care about getting it right. Online coaching keeps you on track when you travel. Pause or change your membership any time, with no long contracts.
Configure
Certified coaches design every session around your level and your goals. Community events keep you motivated, from fun runs to workshops. We keep things simple, so you can focus on what matters to you.
Usage
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. Friendly people answer your questions quickly, by phone, chat or email.
Examples
Pause or change your membership any time, with no long contracts. We listen first, then build a plan around what you actually need. Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. Small group classes mean your coach knows your name and your form. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Every detail is handled by people who care about getting it right. Online coaching keeps you on track when you travel. 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">Certified coaches design every session around your level and your goals. Community events keep you motivated, from fun runs to workshops. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Pause or change your membership any time, with no long contracts. We listen first, then build a plan around what you actually need. Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Online coaching keeps you on track when you travel. Beginners are always welcome, with an intro session included. We keep things simple, so you can focus on what matters to you. Certified coaches design every session around your level and your goals.
Midday
Start in minutes and get help from a real person whenever you need it. Our recovery spa has a sauna, cold plunge and massage rooms. Open 24 hours, so you can train whenever it suits your day.
Afternoon
Track your progress in the app and see how far you have come. Friendly people answer your questions quickly, by phone, chat or email. Modern equipment is cleaned, serviced and ready every day. Nutrition plans fit your routine and the food you actually enjoy.
Evening
Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends. More than sixty classes a week, from sunrise yoga to late-night spin.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">Online coaching keeps you on track when you travel. Beginners are always welcome, with an intro session included. We keep things simple, so you can focus on what matters to you. Certified coaches design every session around your level and your goals.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our recovery spa has a sauna, cold plunge and massage rooms. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Track your progress in the app and see how far you have come. Friendly people answer your questions quickly, by phone, chat or email. Modern equipment is cleaned, serviced and ready every day. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Community events keep you motivated, from fun runs to workshops. 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.
Beta
Our recovery spa has a sauna, cold plunge and massage rooms. Our team has done this many times, so you never have to guess. Pause or change your membership any time, with no long contracts. We listen first, then build a plan around what you actually need.
Gamma
Online coaching keeps you on track when you travel. Clear prices, honest advice and no surprises along the way. Track your progress in the app and see how far you have come.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. 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-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. Our team has done this many times, so you never have to guess. Pause or change your membership any time, with no long contracts. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Online coaching keeps you on track when you travel. Clear prices, honest advice and no surprises along the way. Track your progress in the app and see how far you have come.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Small group classes mean your coach knows your name and your form. Thousands of members already trust us, and we work hard to keep it that way. Modern equipment is cleaned, serviced and ready every day.
Features
We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Nutrition plans fit your routine and the food you actually enjoy.
Reviews
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. More than sixty classes a week, from sunrise yoga to late-night spin.
FAQ
We measure success by how many members come back and tell their friends. Community events keep you motivated, from fun runs to workshops. 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.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Thousands of members already trust us, and we work hard to keep it that way. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</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. More than sixty classes a week, from sunrise yoga to late-night spin.</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. Community events keep you motivated, from fun runs to workshops. 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>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Clear prices, honest advice and no surprises along the way. 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.
Background
Every detail is handled by people who care about getting it right. We measure success by how many members come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.
Method
Our recovery spa has a sauna, cold plunge and massage rooms. 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.
Results
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.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Every detail is handled by people who care about getting it right. We measure success by how many members come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. 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-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">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>
</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
Beginners are always welcome, with an intro session included. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day. Nutrition plans fit your routine and the food you actually enjoy.
Set up your profile
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. More than sixty classes a week, from sunrise yoga to late-night spin.
Invite the team
Community events keep you motivated, from fun runs to workshops. We listen first, then build a plan around what you actually need. Open 24 hours, so you can train whenever it suits your day. Nutrition plans fit your routine and the food you actually enjoy.
Go live
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. Clear prices, honest advice and no surprises along the way. We measure success by how many members 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-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">Beginners are always welcome, with an intro session included. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">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. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. We listen first, then build a plan around what you actually need. Open 24 hours, so you can train whenever it suits your day. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">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. Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
What to eat before a morning workout
Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. Community events keep you motivated, from fun runs to workshops. More than sixty classes a week, from sunrise yoga to late-night spin.
Why recovery matters as much as training
Pause or change your membership any time, with no long contracts. Small group classes mean your coach knows your name and your form. Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you.
How to stay motivated through winter
Beginners are always welcome, with an intro session included. 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. Online coaching keeps you on track when you travel.
The small habits that make a big difference
Our team has done this many times, so you never have to guess. Modern equipment is cleaned, serviced and ready every day. Our recovery spa has a sauna, cold plunge and massage rooms. Clear prices, honest advice and no surprises along the way.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">What to eat before a morning workout</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. Community events keep you motivated, from fun runs to workshops. More than sixty classes a week, from sunrise yoga to late-night spin.</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">Why recovery matters as much as training</h3>
<p class="small mb-0">Pause or change your membership any time, with no long contracts. Small group classes mean your coach knows your name and your form. 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>
</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 stay motivated through winter</h3>
<p class="small mb-0">Beginners are always welcome, with an intro session included. 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. Online coaching keeps you on track when you travel.</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">The small habits that make a big difference</h3>
<p class="small mb-0">Our team has done this many times, so you never have to guess. Modern equipment is cleaned, serviced and ready every day. Our recovery spa has a sauna, cold plunge and massage rooms. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Our favourite tips for busy weeks?
- Small group classes mean your coach knows your name and your form.
- Our most popular classes this month?
- Beginners are always welcome, with an intro session included.
- How to choose the right class?
- Friendly people answer your questions quickly, by phone, chat or email.
Shipping
- Looking back at a busy season?
- Pause or change your membership any time, with no long contracts.
- HIIT twice a week: how hard is hard enough??
- Start in minutes and get help from a real person whenever you need it.
- How our coaches plan a new class?
- Online coaching keeps you on track when you travel.
Returns
- What our members asked us most?
- We listen first, then build a plan around what you actually need.
- Running your first 5K: an eight-week plan?
- Our team has done this many times, so you never have to guess.
- Five things we learned this year?
- Nutrition plans fit your routine and the food you actually enjoy.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Small group classes mean your coach knows your name and your form.</dd>
<dt class="small">Our most popular classes this month?</dt>
<dd class="small text-body-secondary">Beginners are always welcome, with an intro session included.</dd>
<dt class="small">How to choose the right class?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</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">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Pause or change your membership any time, with no long contracts.</dd>
<dt class="small">HIIT twice a week: how hard is hard enough??</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
<dt class="small">How our coaches plan a new class?</dt>
<dd class="small text-body-secondary">Online coaching keeps you on track when you travel.</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">What our members asked us most?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">Running your first 5K: an eight-week plan?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">Nutrition plans fit your routine and the food you actually enjoy.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
We measure success by how many members come back and tell their friends. Thousands of members already trust us, and we work hard to keep it that way. Certified coaches design every session around your level and your goals.
Battery
We keep things simple, so you can focus on what matters to you. Modern equipment is cleaned, serviced and ready every day. Every detail is handled by people who care about getting it right. More than sixty classes a week, from sunrise yoga to late-night spin.
Connectivity
Community events keep you motivated, from fun runs to workshops. Open 24 hours, so you can train whenever it suits your day. Track your progress in the app and see how far you have come. Start in minutes and get help from a real person whenever you need it.
Security
Beginners are always welcome, with an intro session included. We measure success by how many members come back and tell their friends. Online coaching keeps you on track when you travel. More than sixty classes a week, from sunrise yoga to late-night spin.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">We measure success by how many members come back and tell their friends. Thousands of members already trust us, and we work hard to keep it that way. Certified coaches design every session around your level and your goals.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Modern equipment is cleaned, serviced and ready every day. Every detail is handled by people who care about getting it right. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Open 24 hours, so you can train whenever it suits your day. Track your progress in the app and see how far you have come. Start in minutes and get help from a real person whenever you need it.</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. We measure success by how many members come back and tell their friends. Online coaching keeps you on track when you travel. More than sixty classes a week, from sunrise yoga to late-night spin.</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.50 / mo
- Modern equipment
- Progress tracking
- Open 24/7
Team
$38.16 / mo
- Community events
- Open 24/7
- Progress tracking
Business
$59.97 / mo
- Progress tracking
- Progress tracking
- 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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$16.50<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Modern equipment</li>
<li>Progress tracking</li>
<li>Open 24/7</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">$38.16<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Community events</li>
<li>Open 24/7</li>
<li>Progress tracking</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$59.97<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Progress tracking</li>
<li>Progress tracking</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: Building a workout habit that lasts
Our recovery spa has a sauna, cold plunge and massage rooms. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops.
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. Friendly people answer your questions quickly, by phone, chat or email.
Chapter 2: Five stretches for desk workers
Nutrition plans fit your routine and the food you actually enjoy. We listen first, then build a plan around what you actually need. Certified coaches design every session around your level and your goals.
Thousands of members already trust us, and we work hard to keep it that way. 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. Pause or change your membership any time, with no long contracts.
Chapter 3: A beginner's guide to getting started
Small group classes mean your coach knows your name and your form. Clear prices, honest advice and no surprises along the way. 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. Open 24 hours, so you can train whenever it suits your day. We listen first, then build a plan around what you actually need.
Chapter 4: A beginner's guide to strength training
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. Every detail is handled by people who care about getting it right. Our recovery spa has a sauna, cold plunge and massage rooms.
Nutrition plans fit your routine and the food you actually enjoy. Pause or change your membership any time, with no long contracts. Certified coaches design every session around your level and your goals. We measure success by how many members come back and tell their friends.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Building a workout habit that lasts</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops.</p>
<p class="small">We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Five stretches for desk workers</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. We listen first, then build a plan around what you actually need. Certified coaches design every session around your level and your goals.</p>
<p class="small">Thousands of members already trust us, and we work hard to keep it that way. 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. Pause or change your membership any time, with no long contracts.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: A beginner's guide to getting started</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Clear prices, honest advice and no surprises along the way. Track your progress in the app and see how far you have come.</p>
<p class="small">Our team has done this many times, so you never have to guess. Open 24 hours, so you can train whenever it suits your day. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: A beginner's guide to strength training</h3>
<p class="small">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. Every detail is handled by people who care about getting it right. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Pause or change your membership any time, with no long contracts. Certified coaches design every session around your level and your goals. We measure success by how many members come back and tell their friends.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Thousands of members already trust us, and we work hard to keep it that way. Small group classes mean your coach knows your name and your form. Modern equipment is cleaned, serviced and ready every day.
Notifications
Clear prices, honest advice and no surprises along the way. Track your progress in the app and see how far you have come. Beginners are always welcome, with an intro session included. Friendly people answer your questions quickly, by phone, chat or email.
Privacy
Start in minutes and get help from a real person whenever you need it. Online coaching keeps you on track when you travel. Community events keep you motivated, from fun runs to workshops.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-3">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Maya Morgan">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Cape Town">
</div>
<p class="small">Thousands of members already trust us, and we work hard to keep it that way. Small group classes mean your coach knows your name and your form. Modern equipment is cleaned, serviced and ready every day.</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">Clear prices, honest advice and no surprises along the way. Track your progress in the app and see how far you have come. Beginners are always welcome, with an intro session included. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1191" class="pb-3">
<h3 class="h6">Privacy</h3>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="spy-sw-1196">
<label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
</div>
<p class="small">Start in minutes and get help from a real person whenever you need it. Online coaching keeps you on track when you travel. Community events keep you motivated, from fun runs to workshops.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Human Resources
- Owen AlvarezOperations Manager
- Mia TanakaContent Writer
- Kenji LarsenMarketing Lead
Sales
- Jonah OkaforProject Manager
- Arjun NguyenSupport Specialist
- Elena HarlowProject Manager
Legal
- Ravi HughesSales Executive
- Nora LindqvistFinance Lead
- Luna SilvaSupport Specialist
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Human Resources</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Legal</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Human Resources</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Owen Alvarez"><div><div class="small fw-semibold">Owen Alvarez</div><div class="small text-body-secondary">Operations Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Mia Tanaka"><div><div class="small fw-semibold">Mia Tanaka</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-12.svg" class="rounded-circle" width="36" height="36" alt="Kenji Larsen"><div><div class="small fw-semibold">Kenji Larsen</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Jonah Okafor"><div><div class="small fw-semibold">Jonah Okafor</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Arjun Nguyen"><div><div class="small fw-semibold">Arjun Nguyen</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-10.svg" class="rounded-circle" width="36" height="36" alt="Elena Harlow"><div><div class="small fw-semibold">Elena Harlow</div><div class="small text-body-secondary">Project Manager</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Ravi Hughes"><div><div class="small fw-semibold">Ravi Hughes</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-4.svg" class="rounded-circle" width="36" height="36" alt="Nora Lindqvist"><div><div class="small fw-semibold">Nora Lindqvist</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-7.svg" class="rounded-circle" width="36" height="36" alt="Luna Silva"><div><div class="small fw-semibold">Luna Silva</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Yoga
- Coaching plan$199.00
- Personal training$67.99
- Spin class pack$91.00
Cardio
- Nutrition guide$28.00
- 10-class pack$130.00
- Massage$66.99
Recovery
- Spin class pack$99.00
- Coaching plan$179.00
- Mobility workshop$38.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Yoga</a><a class="nav-link" href="#spy-1203">Cardio</a><a class="nav-link" href="#spy-1204">Recovery</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Yoga</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$199.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Personal training</span><span class="fw-semibold">$67.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Spin class pack</span><span class="fw-semibold">$91.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>Nutrition guide</span><span class="fw-semibold">$28.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>10-class pack</span><span class="fw-semibold">$130.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Massage</span><span class="fw-semibold">$66.99</span></li>
</ul>
</div>
<div id="spy-1204" 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>Spin class pack</span><span class="fw-semibold">$99.00</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>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Mobility workshop</span><span class="fw-semibold">$38.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
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.
This week
Modern equipment is cleaned, serviced and ready every day. Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel.
Later
We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many members come back and tell their friends. Small group classes mean your coach knows your name and your form.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">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.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Modern equipment is cleaned, serviced and ready every day. Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many members come back and tell their friends. Small group classes mean your coach knows your name and your form.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
Orbit
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. Certified coaches design every session around your level and your goals. Open 24 hours, so you can train whenever it suits your day.
Landing
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. Pause or change your membership any time, with no long contracts.
<div data-bs-theme="dark" class="bg-dark text-body rounded p-3">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms. Clear prices, honest advice and no surprises along the way. 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">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. Certified coaches design every session around your level and your goals. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</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. Pause or change your membership any time, with no long contracts.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 May 31, 2026
- NewEvery detail is handled by people who care about getting it right.
- ImprovedModern equipment is cleaned, serviced and ready every day.
- FixedOnline coaching keeps you on track when you travel.
v3.1 Nov 22, 2025
- NewOur team has done this many times, so you never have to guess.
- ImprovedWe keep things simple, so you can focus on what matters to you.
- FixedThousands of members already trust us, and we work hard to keep it that way.
v3.0 Apr 2, 2026
- NewTrack your progress in the app and see how far you have come.
- ImprovedClear prices, honest advice and no surprises along the way.
- FixedOur recovery spa has a sauna, cold plunge and massage rooms.
v2.9 Feb 15, 2026
- NewCertified coaches design every session around your level and your goals.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedMore than sixty classes a week, from sunrise yoga to late-night spin.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">May 31, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Modern equipment is cleaned, serviced and ready every day.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Online coaching keeps you on track when you travel.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <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>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of members already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Apr 2, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Track your progress in the app and see how far you have come.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clear prices, honest advice and no surprises along the way.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our recovery spa has a sauna, cold plunge and massage rooms.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Feb 15, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Certified coaches design every session around your level and your goals.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>More than sixty classes a week, from sunrise yoga to late-night spin.</li>
</ul>
</div>
</div>
</div>
</div>