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
Beginners are always welcome, with an intro session included. More than sixty classes a week, from sunrise yoga to late-night spin. Community events keep you motivated, from fun runs to workshops. We keep things simple, so you can focus on what matters to you.
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.
Details
Every detail is handled by people who care about getting it right. Nutrition plans fit your routine and the food you actually enjoy. 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. Track your progress in the app and see how far you have come. Beginners are always welcome, with an intro session included. Online coaching keeps you on track when you travel.
Pricing
Certified coaches design every session around your level and your goals. Friendly people answer your questions quickly, by phone, chat or email. 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.
Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Small group classes mean your coach knows your name and your form. Modern equipment is cleaned, serviced and ready every day.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Rallyova Craft</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">Beginners are always welcome, with an intro session included. More than sixty classes a week, from sunrise yoga to late-night spin. Community events keep you motivated, from fun runs to workshops. We keep things simple, so you can focus on what matters to you.</p>
<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.</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. Nutrition plans fit your routine and the food you actually enjoy. We measure success by how many members come back and tell their friends.</p>
<p class="small">Start in minutes and get help from a real person whenever you need it. Track your progress in the app and see how far you have come. Beginners are always welcome, with an intro session included. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Certified coaches design every session around your level and your goals. Friendly people answer your questions quickly, by phone, chat or email. 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>
<p class="small">Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Small group classes mean your coach knows your name and your form. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
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. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.
Step two
Community events keep you motivated, from fun runs to workshops. Thousands of members already trust us, and we work hard to keep it that way. Modern equipment is cleaned, serviced and ready every day.
Step three
Certified coaches design every session around your level and your goals. Small group classes mean your coach knows your name and your form. 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.
Step four
We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts. Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">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. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. 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-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Certified coaches design every session around your level and your goals. Small group classes mean your coach knows your name and your form. 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.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts. Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Nutrition plans
Nutrition plans fit your routine and the food you actually enjoy. Online coaching keeps you on track when you travel. Track your progress in the app and see how far you have come. Open 24 hours, so you can train whenever it suits your day.
Personal training
Our recovery spa has a sauna, cold plunge and massage rooms. Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day.
Yoga
Pause or change your membership any time, with no long contracts. Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. Certified coaches design every session around your level and your goals.
Questions
Modern equipment is cleaned, serviced and ready every day. Small group classes mean your coach knows your name and your form. Our team has done this many times, so you never have to guess.
<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">Nutrition plans</a><a class="nav-link" href="#spy-1132">Personal training</a><a class="nav-link" href="#spy-1133">Yoga</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">Nutrition plans</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Online coaching keeps you on track when you travel. Track your progress in the app and see how far you have come. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Personal training</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Yoga</h3>
<p class="small">Pause or change your membership any time, with no long contracts. Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. Certified coaches design every session around your level and your goals.</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. Small group classes mean your coach knows your name and your form. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
We measure success by how many members come back and tell their friends. We listen first, then build a plan around what you actually need. Nutrition plans fit your routine and the food you actually enjoy.
Install
Thousands of members already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. More than sixty classes a week, from sunrise yoga to late-night spin.
Configure
Online coaching keeps you on track when you travel. Every detail is handled by people who care about getting it right. Beginners are always welcome, with an intro session included.
Usage
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. Start in minutes and get help from a real person whenever you need it. Community events keep you motivated, from fun runs to workshops.
Examples
Start in minutes and get help from a real person whenever you need it. Small group classes mean your coach knows your name and your form. 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.
<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">We measure success by how many members come back and tell their friends. We listen first, then build a plan around what you actually need. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Thousands of members already trust us, and we work hard to keep it that way. 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-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Online coaching keeps you on track when you travel. Every detail is handled by people who care about getting it right. Beginners are always welcome, with an intro session included.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">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. Start in minutes and get help from a real person whenever you need it. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Small group classes mean your coach knows your name and your form. 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.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Nutrition plans fit your routine and the food you actually enjoy. 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.
Midday
We measure success by how many members come back and tell their friends. 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. Our recovery spa has a sauna, cold plunge and massage rooms.
Afternoon
Open 24 hours, so you can train whenever it suits your day. More than sixty classes a week, from sunrise yoga to late-night spin. Modern equipment is cleaned, serviced and ready every day.
Evening
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Online coaching keeps you on track when you travel. Beginners are always welcome, with an intro session included.
<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">Nutrition plans fit your routine and the food you actually enjoy. 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-1143" class="pb-3">
<h3 class="h6">Midday</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. Thousands of members already trust us, and we work hard to keep it that way. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Open 24 hours, so you can train whenever it suits your day. More than sixty classes a week, from sunrise yoga to late-night spin. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Online coaching keeps you on track when you travel. Beginners are always welcome, with an intro session included.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.
Beta
Open 24 hours, so you can train whenever it suits your day. 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. Beginners are always welcome, with an intro session included.
Gamma
Pause or change your membership any time, with no long contracts. 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.
<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">Every detail is handled by people who care about getting it right. 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-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Open 24 hours, so you can train whenever it suits your day. 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. Beginners are always welcome, with an intro session included.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Pause or change your membership any time, with no long contracts. 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.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
We listen first, then build a plan around what you actually need. Our recovery spa has a sauna, cold plunge and massage rooms. Track your progress in the app and see how far you have come.
Features
Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day. Our team has done this many times, so you never have to guess.
Reviews
We measure success by how many members come back and tell their friends. Every detail is handled by people who care about getting it right. Community events keep you motivated, from fun runs to workshops.
FAQ
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. Friendly people answer your questions quickly, by phone, chat or email.
<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">We listen first, then build a plan around what you actually need. 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-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">We measure success by how many members come back and tell their friends. Every detail is handled by people who care about getting it right. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
We 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. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.
Background
Community events keep you motivated, from fun runs to workshops. 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. We keep things simple, so you can focus on what matters to you.
Method
Small group classes mean your coach knows your name and your form. Track your progress in the app and see how far you have come. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day.
Results
Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms. More than sixty classes a week, from sunrise yoga to late-night spin.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">We 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. 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-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. 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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Track your progress in the app and see how far you have come. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms. More than sixty classes a week, from sunrise yoga to late-night spin.</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
Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way. Certified coaches design every session around your level and your goals. Nutrition plans fit your routine and the food you actually enjoy.
Set up your profile
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. We measure success by how many members come back and tell their friends. Community events keep you motivated, from fun runs to workshops.
Invite the team
Certified coaches design every session around your level and your goals. Nutrition plans fit your routine and the food you actually enjoy. 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.
Go live
Beginners are always welcome, with an intro session included. 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.
<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">Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way. Certified coaches design every session around your level and your goals. 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">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. We measure success by how many members come back and tell their friends. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Certified coaches design every session around your level and your goals. Nutrition plans fit your routine and the food you actually enjoy. 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 id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Beginners are always welcome, with an intro session included. 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>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
The small habits that make a big difference
Small group classes mean your coach knows your name and your form. 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. Our recovery spa has a sauna, cold plunge and massage rooms.
A beginner's guide to strength training
Modern equipment is cleaned, serviced and ready every day. Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day.
Looking back at a busy season
Pause or change your membership any time, with no long contracts. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Online coaching keeps you on track when you travel.
Five stretches for desk workers
We listen first, then build a plan around what you actually need. 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-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">The small habits that make a big difference</h3>
<p class="small mb-0">Small group classes mean your coach knows your name and your form. 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. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">A beginner's guide to strength training</h3>
<p class="small mb-0">Modern equipment is cleaned, serviced and ready every day. Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day.</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">Looking back at a busy season</h3>
<p class="small mb-0">Pause or change your membership any time, with no long contracts. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. 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">Five stretches for desk workers</h3>
<p class="small mb-0">We listen first, then build a plan around what you actually need. 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
- What our members asked us most?
- Start in minutes and get help from a real person whenever you need it.
- Our favourite tips for busy weeks?
- Community events keep you motivated, from fun runs to workshops.
- How to choose the right class?
- Every detail is handled by people who care about getting it right.
Shipping
- How to stay motivated through winter?
- Track your progress in the app and see how far you have come.
- Our most popular classes this month?
- Friendly people answer your questions quickly, by phone, chat or email.
- A beginner's guide to getting started?
- Nutrition plans fit your routine and the food you actually enjoy.
Returns
- Why recovery matters as much as training?
- Modern equipment is cleaned, serviced and ready every day.
- Building a workout habit that lasts?
- Small group classes mean your coach knows your name and your form.
- Running your first 5K: an eight-week plan?
- We listen first, then build a plan around what you actually need.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">What our members asked us most?</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">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Community events keep you motivated, from fun runs to workshops.</dd>
<dt class="small">How to choose the right class?</dt>
<dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</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">How to stay motivated through winter?</dt>
<dd class="small text-body-secondary">Track your progress in the app and see how far you have come.</dd>
<dt class="small">Our most popular classes this month?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
<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>
</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">Why recovery matters as much as training?</dt>
<dd class="small text-body-secondary">Modern equipment is cleaned, serviced and ready every day.</dd>
<dt class="small">Building a workout habit that lasts?</dt>
<dd class="small text-body-secondary">Small group classes mean your coach knows your name and your form.</dd>
<dt class="small">Running your first 5K: an eight-week plan?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
We keep things simple, so you can focus on what matters to you. 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.
Battery
We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts. More than sixty classes a week, from sunrise yoga to late-night spin.
Connectivity
Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day. Online coaching keeps you on track when you travel.
Security
Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</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. 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">Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$17.55 / mo
- Progress tracking
- Progress tracking
- Modern equipment
Team
$41.56 / mo
- Modern equipment
- Flexible plans
- Modern equipment
Business
$52.32 / mo
- Flexible plans
- Modern equipment
- Progress tracking
<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$17.55<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Progress tracking</li>
<li>Progress tracking</li>
<li>Modern equipment</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">$41.56<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Modern equipment</li>
<li>Flexible plans</li>
<li>Modern equipment</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">$52.32<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Flexible plans</li>
<li>Modern equipment</li>
<li>Progress tracking</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Five things we learned this year
Community events keep you motivated, from fun runs to workshops. More than sixty classes a week, from sunrise yoga to late-night spin. Thousands of members already trust us, and we work hard to keep it that way.
Start in minutes and get help from a real person whenever you need it. Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Nutrition plans fit your routine and the food you actually enjoy.
Chapter 2: What to eat before a morning workout
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.
Track your progress in the app and see how far you have come. 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.
Chapter 3: HIIT twice a week: how hard is hard enough?
We keep things simple, so you can focus on what matters to you. Certified coaches design every session around your level and your goals. 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.
Clear prices, honest advice and no surprises along the way. Pause or change your membership any time, with no long contracts. 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.
Chapter 4: How our coaches plan a new class
Online coaching keeps you on track when you travel. Community events keep you motivated, from fun runs to workshops. Track your progress in the app and see how far you have come. Certified coaches design every session around your level and your goals.
Nutrition plans fit your routine and the food you actually enjoy. 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. We keep things simple, so you can focus on what matters to you.
<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: Five things we learned this year</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. More than sixty classes a week, from sunrise yoga to late-night spin. Thousands of members already trust us, and we work hard to keep it that way.</p>
<p class="small">Start in minutes and get help from a real person whenever you need it. Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: What to eat before a morning workout</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.</p>
<p class="small">Track your progress in the app and see how far you have come. 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-1186" class="pb-3">
<h3 class="h6">Chapter 3: HIIT twice a week: how hard is hard enough?</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Certified coaches design every session around your level and your goals. 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.</p>
<p class="small">Clear prices, honest advice and no surprises along the way. Pause or change your membership any time, with no long contracts. 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-1187" class="pb-3">
<h3 class="h6">Chapter 4: How our coaches plan a new class</h3>
<p class="small">Online coaching keeps you on track when you travel. Community events keep you motivated, from fun runs to workshops. Track your progress in the app and see how far you have come. Certified coaches design every session around your level and your goals.</p>
<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. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many members come back and tell their friends. Clear prices, honest advice and no surprises along the way. Open 24 hours, so you can train whenever it suits your day.
Notifications
Small group classes mean your coach knows your name and your form. Modern equipment is cleaned, serviced and ready every day. Pause or change your membership any time, with no long contracts. Our recovery spa has a sauna, cold plunge and massage rooms.
Privacy
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.
<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="Diego Sato">
</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="Valencia">
</div>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many members come back and tell their friends. Clear prices, honest advice and no surprises along the way. Open 24 hours, so you can train whenever it suits your 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">Small group classes mean your coach knows your name and your form. Modern equipment is cleaned, serviced and ready every day. Pause or change your membership any time, with no long contracts. Our recovery spa has a sauna, cold plunge and massage rooms.</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">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.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Marketing
- Theo MensahProject Manager
- Isla RossiFrontend Engineer
- Ravi HaddadSupport Specialist
Research
- Theo QuinnCustomer Success
- Ethan IbrahimCustomer Success
- Jonah AshfordSales Executive
Engineering
- Mia HughesSupport Specialist
- Priya SilvaCustomer Success
- Maya NguyenFinance Lead
<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">Research</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-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-5.svg" class="rounded-circle" width="36" height="36" alt="Theo Mensah"><div><div class="small fw-semibold">Theo Mensah</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-8.svg" class="rounded-circle" width="36" height="36" alt="Isla Rossi"><div><div class="small fw-semibold">Isla 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-2.svg" class="rounded-circle" width="36" height="36" alt="Ravi Haddad"><div><div class="small fw-semibold">Ravi Haddad</div><div class="small text-body-secondary">Support Specialist</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Research</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="Theo Quinn"><div><div class="small fw-semibold">Theo Quinn</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-1.svg" class="rounded-circle" width="36" height="36" alt="Ethan Ibrahim"><div><div class="small fw-semibold">Ethan Ibrahim</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-8.svg" class="rounded-circle" width="36" height="36" alt="Jonah Ashford"><div><div class="small fw-semibold">Jonah Ashford</div><div class="small text-body-secondary">Sales Executive</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Mia Hughes"><div><div class="small fw-semibold">Mia Hughes</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-11.svg" class="rounded-circle" width="36" height="36" alt="Priya Silva"><div><div class="small fw-semibold">Priya Silva</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-3.svg" class="rounded-circle" width="36" height="36" alt="Maya Nguyen"><div><div class="small fw-semibold">Maya Nguyen</div><div class="small text-body-secondary">Finance Lead</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Cardio
- Personal training$61.00
- Coaching plan$188.99
- Mobility workshop$32.00
HIIT
- Nutrition guide$30.99
- Spin class pack$88.00
- Day pass$14.00
Recovery
- Monthly pass$43.99
- 10-class pack$121.00
- Yoga retreat$397.99
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Cardio</a><a class="nav-link" href="#spy-1203">HIIT</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-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">Cardio</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Personal training</span><span class="fw-semibold">$61.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$188.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Mobility workshop</span><span class="fw-semibold">$32.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">HIIT</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">$30.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Spin class pack</span><span class="fw-semibold">$88.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Day pass</span><span class="fw-semibold">$14.00</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>Monthly pass</span><span class="fw-semibold">$43.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>10-class pack</span><span class="fw-semibold">$121.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Yoga retreat</span><span class="fw-semibold">$397.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops. Small group classes mean your coach knows your name and your form. Our recovery spa has a sauna, cold plunge and massage rooms.
This week
Online coaching keeps you on track when you travel. We measure success by how many members come back and tell their friends. Beginners are always welcome, with an intro session included. We keep things simple, so you can focus on what matters to you.
Later
We listen first, then build a plan around what you actually need. 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.
<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">Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops. Small group classes mean your coach knows your name and your form. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Online coaching keeps you on track when you travel. We measure success by how many members come back and tell their friends. Beginners are always welcome, with an intro session included. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">We listen first, then build a plan around what you actually need. 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>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
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. Modern equipment is cleaned, serviced and ready every day.
Orbit
Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Pause or change your membership any time, with no long contracts. 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. 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. We keep things simple, so you can focus on what matters to you.
<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">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. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. 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 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. 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. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Nov 27, 2025
- NewStart in minutes and get help from a real person whenever you need it.
- ImprovedWe measure success by how many members come back and tell their friends.
- FixedEvery detail is handled by people who care about getting it right.
v3.1 Sep 14, 2025
- NewThousands of members already trust us, and we work hard to keep it that way.
- ImprovedSmall group classes mean your coach knows your name and your form.
- FixedClear prices, honest advice and no surprises along the way.
v3.0 Apr 25, 2026
- NewWe listen first, then build a plan around what you actually need.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedModern equipment is cleaned, serviced and ready every day.
v2.9 Mar 27, 2026
- NewNutrition plans fit your routine and the food you actually enjoy.
- ImprovedOur recovery spa has a sauna, cold plunge and massage rooms.
- FixedCertified coaches design every session around your level and your goals.
<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">Nov 27, 2025</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>We measure success by how many members come back and tell their friends.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every detail is handled by people who care about getting it right.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Sep 14, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of members already trust us, and we work hard to keep it that way.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Small group classes mean your coach knows your name and your form.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Apr 25, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</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>Modern equipment is cleaned, serviced and ready every day.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Mar 27, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Nutrition plans fit your routine and the food you actually enjoy.</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>Certified coaches design every session around your level and your goals.</li>
</ul>
</div>
</div>
</div>
</div>