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
We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. 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. Our recovery spa has a sauna, cold plunge and massage rooms. 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.
Details
More than sixty classes a week, from sunrise yoga to late-night spin. 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. We listen first, then build a plan around what you actually need.
Online coaching keeps you on track when you travel. Pause or change your membership any time, with no long contracts. Nutrition plans fit your routine and the food you actually enjoy.
Pricing
Beginners are always welcome, with an intro session included. Clear prices, honest advice and no surprises along the way. Modern equipment is cleaned, serviced and ready every day.
Small group classes mean your coach knows your name and your form. Community events keep you motivated, from fun runs to workshops. Open 24 hours, so you can train whenever it suits your day. Every detail is handled by people who care about getting it right.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Sageo Studio</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">We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. 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. Our recovery spa has a sauna, cold plunge and massage rooms. 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.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. Certified coaches design every session around your level and your goals. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.</p>
<p class="small">Online coaching keeps you on track when you travel. Pause or change your membership any time, with no long contracts. 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. Clear prices, honest advice and no surprises along the way. Modern equipment is cleaned, serviced and ready every day.</p>
<p class="small">Small group classes mean your coach knows your name and your form. Community events keep you motivated, from fun runs to workshops. Open 24 hours, so you can train whenever it suits your day. Every detail is handled by people who care about getting it right.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
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. Every detail is handled by people who care about getting it right.
Step two
Community events keep you motivated, from fun runs to workshops. Clear prices, honest advice and no surprises along the way. Pause or change your membership any time, with no long contracts. Small group classes mean your coach knows your name and your form.
Step three
Certified coaches design every session around your level and your goals. Open 24 hours, so you can train whenever it suits your day. Modern equipment is cleaned, serviced and ready every day.
Step four
More than sixty classes a week, from sunrise yoga to late-night spin. Our recovery spa has a sauna, cold plunge and massage rooms. We measure success by how many members come back and tell their friends.
<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">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. 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. Clear prices, honest advice and no surprises along the way. Pause or change your membership any time, with no long contracts. 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">Certified coaches design every session around your level and your goals. Open 24 hours, so you can train whenever it suits your day. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. Our recovery spa has a sauna, cold plunge and massage rooms. We measure success by how many members come back and tell their friends.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Personal training
We keep things simple, so you can focus on what matters to you. Nutrition plans fit your routine and the food you actually enjoy. Friendly people answer your questions quickly, by phone, chat or email.
Nutrition plans
Online coaching keeps you on track when you travel. 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.
Online coaching
Beginners are always welcome, with an intro session included. 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. Thousands of members already trust us, and we work hard to keep it that way.
Questions
Track your progress in the app and see how far you have come. Pause or change your membership any time, with no long contracts. We keep things simple, so you can focus on what matters to you.
<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">Personal training</a><a class="nav-link" href="#spy-1132">Nutrition plans</a><a class="nav-link" href="#spy-1133">Online coaching</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">Personal training</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Nutrition plans fit your routine and the food you actually enjoy. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Nutrition plans</h3>
<p class="small">Online coaching keeps you on track when you travel. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Online coaching</h3>
<p class="small">Beginners are always welcome, with an intro session included. Track your progress in the app and see how far you have come. Open 24 hours, so you can train whenever it suits your day. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Track your progress in the app and see how far you have come. 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>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Community events keep you motivated, from fun runs to workshops. Modern equipment is cleaned, serviced and ready every day. Nutrition plans fit your routine and the food you actually enjoy. Beginners are always welcome, with an intro session included.
Install
Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Online coaching keeps you on track when you travel.
Configure
Certified coaches design every session around your level and your goals. 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.
Usage
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. Small group classes mean your coach knows your name and your form. More than sixty classes a week, from sunrise yoga to late-night spin.
Examples
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. Beginners are always welcome, with an intro session included. 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-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Modern equipment is cleaned, serviced and ready every day. 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-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Online coaching keeps you on track when you travel.</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. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our recovery spa has a sauna, cold plunge and massage rooms. Small group classes mean your coach knows your name and your form. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</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. Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Small group classes mean your coach knows your name and your form. Pause or change your membership any time, with no long contracts. We keep things simple, so you can focus on what matters to you.
Midday
We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Open 24 hours, so you can train whenever it suits your day. Community events keep you motivated, from fun runs to workshops.
Afternoon
Online coaching keeps you on track when you travel. More than sixty classes a week, from sunrise yoga to late-night spin. Modern equipment is cleaned, serviced and ready every day.
Evening
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. Nutrition plans fit your routine and the food you actually enjoy.
<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">Small group classes mean your coach knows your name and your form. 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-1143" class="pb-3">
<h3 class="h6">Midday</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. Open 24 hours, so you can train whenever it suits your day. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Online coaching keeps you on track when you travel. 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">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. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Friendly people answer your questions quickly, by phone, chat or email. Certified coaches design every session around your level and your goals. We measure success by how many members come back and tell their friends.
Beta
Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Beginners are always welcome, with an intro session included.
Gamma
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. More than sixty classes a week, from sunrise yoga to late-night spin.
<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">Friendly people answer your questions quickly, by phone, chat or email. 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 id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. 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">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. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
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. Track your progress in the app and see how far you have come. Clear prices, honest advice and no surprises along the way.
Features
Online coaching keeps you on track when you travel. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.
Reviews
Small group classes mean your coach knows your name and your form. Open 24 hours, so you can train whenever it suits your day. We keep things simple, so you can focus on what matters to you.
FAQ
Our recovery spa has a sauna, cold plunge and massage rooms. Pause or change your membership any time, with no long contracts. Community events keep you motivated, from fun runs to workshops.
<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">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. Track your progress in the app and see how far you have come. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Online coaching keeps you on track when you travel. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Open 24 hours, so you can train whenever it suits your day. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. Pause or change your membership any time, with no long contracts. Community events keep you motivated, from fun runs to workshops.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Certified coaches design every session around your level and your goals. Every detail is handled by people who care about getting it right. Nutrition plans fit your routine and the food you actually enjoy.
Background
Modern equipment is cleaned, serviced and ready every day. We measure success by how many members come back and tell their friends. Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel.
Method
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. Beginners are always welcome, with an intro session included.
Results
More than sixty classes a week, from sunrise yoga to late-night spin. Modern equipment is cleaned, serviced and ready every day. Open 24 hours, so you can train whenever it suits your day.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">Certified coaches design every session around your level and your goals. 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-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Modern equipment is cleaned, serviced and ready every day. We measure success by how many members come back and tell their friends. Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">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. Beginners are always welcome, with an intro session included.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. Modern equipment is cleaned, serviced and ready every day. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
</div>
</div>
<div class="col-md-3 order-first order-md-last">
<p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
<nav id="spy-nav-1155" class="nav nav-pills flex-column small">
<a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
</nav>
</div>
</div>9Numbered steps
<code>.list-group-numbered</code> turns the spy menu into a step counter.
Create an account
Pause or change your membership any time, with no long contracts. 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.
Set up your profile
Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.
Invite the team
Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.
Go live
Nutrition plans fit your routine and the food you actually enjoy. Small group classes mean your coach knows your name and your form. Our recovery spa has a sauna, cold plunge and massage rooms. Open 24 hours, so you can train whenever it suits your day.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">Pause or change your membership any time, with no long contracts. 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.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</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. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Small group classes mean your coach knows your name and your form. 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>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Five things we learned this year
We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms. We listen first, then build a plan around what you actually need.
Building a workout habit that lasts
Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops.
How to stay motivated through winter
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. Clear prices, honest advice and no surprises along the way.
A beginner's guide to strength training
Pause or change your membership any time, with no long contracts. Every detail is handled by people who care about getting it right. Small group classes mean your coach knows your name and your form.
<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">Five things we learned this year</h3>
<p class="small mb-0">We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms. We listen first, then build a plan around what you actually need.</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">Building a workout habit that lasts</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Nutrition plans fit your routine and the food you actually enjoy. Community events keep you motivated, from fun runs to workshops.</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">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. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2026</span>
<h3 class="h6">A beginner's guide to strength training</h3>
<p class="small mb-0">Pause or change your membership any time, with no long contracts. Every detail is handled by people who care about getting it right. Small group classes mean your coach knows your name and your form.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Running your first 5K: an eight-week plan?
- Certified coaches design every session around your level and your goals.
- Looking back at a busy season?
- Our team has done this many times, so you never have to guess.
- Our most popular classes this month?
- Track your progress in the app and see how far you have come.
Shipping
- What our members asked us most?
- We measure success by how many members come back and tell their friends.
- How to choose the right class?
- Online coaching keeps you on track when you travel.
- What to eat before a morning workout?
- Beginners are always welcome, with an intro session included.
Returns
- The small habits that make a big difference?
- Modern equipment is cleaned, serviced and ready every day.
- How our coaches plan a new class?
- Thousands of members already trust us, and we work hard to keep it that way.
- Our favourite tips for busy weeks?
- Start in minutes and get help from a real person whenever you need it.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Running your first 5K: an eight-week plan?</dt>
<dd class="small text-body-secondary">Certified coaches design every session around your level and your goals.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
<dt class="small">Our most popular classes this month?</dt>
<dd class="small text-body-secondary">Track your progress in the app and see how far you have come.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">What our members asked us most?</dt>
<dd class="small text-body-secondary">We measure success by how many members come back and tell their friends.</dd>
<dt class="small">How to choose the right class?</dt>
<dd class="small text-body-secondary">Online coaching keeps you on track when you travel.</dd>
<dt class="small">What to eat before a morning workout?</dt>
<dd class="small text-body-secondary">Beginners are always welcome, with an intro session included.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">Modern equipment is cleaned, serviced and ready every day.</dd>
<dt class="small">How our coaches plan a new class?</dt>
<dd class="small text-body-secondary">Thousands of members already trust us, and we work hard to keep it that way.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Community events keep you motivated, from fun runs to workshops. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Modern equipment is cleaned, serviced and ready every day.
Battery
Our recovery spa has a sauna, cold plunge and massage rooms. We listen first, then build a plan around what you actually need. Beginners are always welcome, with an intro session included.
Connectivity
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. Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess.
Security
We measure success by how many members come back and tell their friends. We keep things simple, so you can focus on what matters to you. Certified coaches design every session around your level and your goals. Pause or change your membership any time, with no long contracts.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. We listen first, then build a plan around what you actually need. Beginners are always welcome, with an intro session included.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">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. Nutrition plans fit your routine and the food you actually enjoy. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">We measure success by how many members come back and tell their friends. We keep things simple, so you can focus on what matters to you. Certified coaches design every session around your level and your goals. Pause or change your membership any time, with no long contracts.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$18.50 / mo
- Open 24/7
- Modern equipment
- Flexible plans
Team
$47.59 / mo
- Modern equipment
- Modern equipment
- Community events
Business
$65.17 / mo
- Progress tracking
- Community events
- Certified coaches
<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">$18.50<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Open 24/7</li>
<li>Modern equipment</li>
<li>Flexible plans</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">$47.59<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Modern equipment</li>
<li>Modern equipment</li>
<li>Community events</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$65.17<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Progress tracking</li>
<li>Community events</li>
<li>Certified coaches</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: A beginner's guide to getting started
Small group classes mean your coach knows your name and your form. Online coaching keeps you on track when you travel. 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. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day.
Chapter 2: HIIT twice a week: how hard is hard enough?
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. Beginners are always welcome, with an intro session included.
Community events keep you motivated, from fun runs to workshops. Nutrition plans fit your routine and the food you actually enjoy. 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.
Chapter 3: Five stretches for desk workers
Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day. Our recovery spa has a sauna, cold plunge and massage rooms. We listen first, then build a plan around what you actually need.
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. Clear prices, honest advice and no surprises along the way.
Chapter 4: Why recovery matters as much as training
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. Our team has done this many times, so you never have to guess.
Certified coaches design every session around your level and your goals. We measure success by how many members come back and tell their friends. Certified coaches design every session around your level and your goals. Our team has done this many times, so you never have to guess.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-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: A beginner's guide to getting started</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. Every detail is handled by people who care about getting it right.</p>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: HIIT twice a week: how hard is hard enough?</h3>
<p class="small">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. Beginners are always welcome, with an intro session included.</p>
<p class="small">Community events keep you motivated, from fun runs to workshops. Nutrition plans fit your routine and the food you actually enjoy. 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-1186" class="pb-3">
<h3 class="h6">Chapter 3: Five stretches for desk workers</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day. Our recovery spa has a sauna, cold plunge and massage rooms. We listen first, then build a plan around what you actually need.</p>
<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. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: Why recovery matters as much as training</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. 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>
<p class="small">Certified coaches design every session around your level and your goals. We measure success by how many members come back and tell their friends. Certified coaches design every session around your level and your goals. Our team has done this many times, so you never have to guess.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
More than sixty classes a week, from sunrise yoga to late-night spin. Friendly people answer your questions quickly, by phone, chat or email. Track your progress in the app and see how far you have come. Pause or change your membership any time, with no long contracts.
Notifications
Beginners are always welcome, with an intro session included. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops. Clear prices, honest advice and no surprises along the way.
Privacy
Small group classes mean your coach knows your name and your form. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-3">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Mason Okafor">
</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="Barcelona">
</div>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. Friendly people answer your questions quickly, by phone, chat or email. Track your progress in the app and see how far you have come. Pause or change your membership any time, with no long contracts.</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">Beginners are always welcome, with an intro session included. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops. Clear prices, honest advice and no surprises along the way.</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">Small group classes mean your coach knows your name and your form. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Customer Support
- Ava QuinnData Analyst
- Felix OrtegaProject Manager
- Zoe KowalskiContent Writer
Engineering
- Chloe LindqvistMarketing Lead
- Jonah VargaProduct Designer
- Nadia DelgadoBackend Engineer
Human Resources
- Ava HaddadData Analyst
- Maya OkaforProject Manager
- Liam FischerFinance Lead
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Customer Support</a><a class="nav-link" href="#spy-1199">Engineering</a><a class="nav-link" href="#spy-1200">Human Resources</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">Customer Support</h3>
<ul class="list-unstyled">
<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="Ava Quinn"><div><div class="small fw-semibold">Ava Quinn</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Felix Ortega"><div><div class="small fw-semibold">Felix Ortega</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-11.svg" class="rounded-circle" width="36" height="36" alt="Zoe Kowalski"><div><div class="small fw-semibold">Zoe Kowalski</div><div class="small text-body-secondary">Content Writer</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Chloe Lindqvist"><div><div class="small fw-semibold">Chloe Lindqvist</div><div class="small text-body-secondary">Marketing Lead</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="Jonah Varga"><div><div class="small fw-semibold">Jonah Varga</div><div class="small text-body-secondary">Product Designer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Nadia Delgado"><div><div class="small fw-semibold">Nadia Delgado</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1200" 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-3.svg" class="rounded-circle" width="36" height="36" alt="Ava Haddad"><div><div class="small fw-semibold">Ava Haddad</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Maya Okafor"><div><div class="small fw-semibold">Maya 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-4.svg" class="rounded-circle" width="36" height="36" alt="Liam Fischer"><div><div class="small fw-semibold">Liam Fischer</div><div class="small text-body-secondary">Finance Lead</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Strength
- Spin class pack$86.00
- Sauna session$17.00
- Mobility workshop$38.00
Recovery
- Yoga retreat$398.00
- Coaching plan$212.99
- 10-class pack$123.99
Yoga
- Yoga retreat$373.99
- Massage$73.99
- Mobility workshop$32.99
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Strength</a><a class="nav-link" href="#spy-1203">Recovery</a><a class="nav-link" href="#spy-1204">Yoga</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Strength</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">$86.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Sauna session</span><span class="fw-semibold">$17.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 id="spy-1203" 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>Yoga retreat</span><span class="fw-semibold">$398.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$212.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>10-class pack</span><span class="fw-semibold">$123.99</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Yoga</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Yoga retreat</span><span class="fw-semibold">$373.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Massage</span><span class="fw-semibold">$73.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Mobility workshop</span><span class="fw-semibold">$32.99</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Every detail is handled by people who care about getting it right. Online coaching keeps you on track when you travel. Start in minutes and get help from a real person whenever you need it. Open 24 hours, so you can train whenever it suits your day.
This week
Thousands of members already trust us, and we work hard to keep it that way. Nutrition plans fit your routine and the food you actually enjoy. Open 24 hours, so you can train whenever it suits your day.
Later
Pause or change your membership any time, with no long contracts. Certified coaches design every session around your level and your goals. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.
<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">Every detail is handled by people who care about getting it right. Online coaching keeps you on track when you travel. Start in minutes and get help from a real person whenever you need it. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Thousands of members already trust us, and we work hard to keep it that way. Nutrition plans fit your routine and the food you actually enjoy. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</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. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Beginners are always welcome, with an intro session included. 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.
Orbit
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. Online coaching keeps you on track when you travel.
Landing
Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. More than sixty classes a week, from sunrise yoga to late-night spin.
<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">Beginners are always welcome, with an intro session included. 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.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</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. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Jun 10, 2026
- NewModern equipment is cleaned, serviced and ready every day.
- ImprovedCommunity events keep you motivated, from fun runs to workshops.
- FixedTrack your progress in the app and see how far you have come.
v3.1 Aug 24, 2026
- NewWe keep things simple, so you can focus on what matters to you.
- ImprovedOur recovery spa has a sauna, cold plunge and massage rooms.
- FixedWe measure success by how many members come back and tell their friends.
v3.0 Oct 1, 2025
- NewMore than sixty classes a week, from sunrise yoga to late-night spin.
- ImprovedOpen 24 hours, so you can train whenever it suits your day.
- FixedClear prices, honest advice and no surprises along the way.
v2.9 May 17, 2026
- NewBeginners are always welcome, with an intro session included.
- ImprovedNutrition plans fit your routine and the food you actually enjoy.
- FixedOur recovery spa has a sauna, cold plunge and massage rooms.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Jun 10, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Modern equipment is cleaned, serviced and ready every day.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Community events keep you motivated, from fun runs to workshops.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Track your progress in the app and see how far you have come.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Aug 24, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our recovery spa has a sauna, cold plunge and massage rooms.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We measure success by how many members come back and tell their friends.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Oct 1, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>More than sixty classes a week, from sunrise yoga to late-night spin.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Open 24 hours, so you can train whenever it suits your day.</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-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">May 17, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Beginners are always welcome, with an intro session included.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Nutrition plans fit your routine and the food you actually enjoy.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our recovery spa has a sauna, cold plunge and massage rooms.</li>
</ul>
</div>
</div>
</div>
</div>