Scrollspy
Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-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
Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel.
Small group classes mean your coach knows your name and your form. Community events keep you motivated, from fun runs to workshops. We measure success by how many members come back and tell their friends.
Details
Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Pause or change your membership any time, with no long contracts.
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. Modern equipment is cleaned, serviced and ready every day.
Pricing
More than sixty classes a week, from sunrise yoga to late-night spin. 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.
Beginners are always welcome, with an intro session included. 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.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Lumenan 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">Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel.</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. 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">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. Pause or change your membership any time, with no long contracts.</p>
<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. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. 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>
<p class="small">Beginners are always welcome, with an intro session included. 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.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Our recovery spa has a sauna, cold plunge and massage rooms. Modern equipment is cleaned, serviced and ready every day. We measure success by how many members come back and tell their friends.
Step two
Every detail is handled by people who care about getting it right. Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way.
Step three
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. Small group classes mean your coach knows your name and your form. Nutrition plans fit your routine and the food you actually enjoy.
Step four
Online coaching keeps you on track when you travel. We keep things simple, so you can focus on what matters to you. Community events keep you motivated, from fun runs to workshops.
<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">Our recovery spa has a sauna, cold plunge and massage rooms. Modern equipment is cleaned, serviced and ready every day. We measure success by how many members come back and tell their friends.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Every detail is handled by people who care about getting it right. Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</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. Small group classes mean your coach knows your name and your form. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Online coaching keeps you on track when you travel. We keep things simple, so you can focus on what matters to you. Community events keep you motivated, from fun runs to workshops.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Nutrition plans
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. Pause or change your membership any time, with no long contracts. Beginners are always welcome, with an intro session included.
Online coaching
Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. More than sixty classes a week, from sunrise yoga to late-night spin.
Personal training
We listen first, then build a plan around what you actually need. 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. Our team has done this many times, so you never have to guess.
Questions
Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. Small group classes mean your coach knows your name and your form.
<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">Online coaching</a><a class="nav-link" href="#spy-1133">Personal training</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-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">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. Pause or change your membership any time, with no long contracts. Beginners are always welcome, with an intro session included.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Online coaching</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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 id="spy-1133" class="pb-3">
<h3 class="h6">Personal training</h3>
<p class="small">We listen first, then build a plan around what you actually need. 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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. Small group classes mean your coach knows your name and your form.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Certified coaches design every session around your level and your goals. We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.
Install
Thousands of members already trust us, and we work hard to keep it that way. Beginners are always welcome, with an intro session included. Friendly people answer your questions quickly, by phone, chat or email. Open 24 hours, so you can train whenever it suits your day.
Configure
More than sixty classes a week, from sunrise yoga to late-night spin. Track your progress in the app and see how far you have come. Nutrition plans fit your routine and the food you actually enjoy.
Usage
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. Modern equipment is cleaned, serviced and ready every day. Our recovery spa has a sauna, cold plunge and massage rooms.
Examples
Online coaching keeps you on track when you travel. Track your progress in the app and see how far you have come. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops.
<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">Certified coaches design every session around your level and your goals. We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Thousands of members already trust us, and we work hard to keep it that way. Beginners are always welcome, with an intro session included. 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-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. Track your progress in the app and see how far you have come. Nutrition plans fit your routine and the food you actually enjoy.</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. We measure success by how many members come back and tell their friends. Modern equipment is cleaned, serviced and ready every day. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Online coaching keeps you on track when you travel. Track your progress in the app and see how far you have come. Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
We measure success by how many members come back and tell their friends. Thousands of members already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need.
Midday
Pause or change your membership any time, with no long contracts. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess.
Afternoon
Small group classes mean your coach knows your name and your form. Start in minutes and get help from a real person whenever you need it. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day.
Evening
Our recovery spa has a sauna, cold plunge and massage rooms. More than sixty classes a week, from sunrise yoga to late-night spin. Online coaching keeps you on track when you travel.
<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">We measure success by how many members come back and tell their friends. Thousands of members already trust us, and we work hard to keep it that way. 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-1143" class="pb-3">
<h3 class="h6">Midday</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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Start in minutes and get help from a real person whenever you need it. Beginners are always welcome, with an intro session included. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Our recovery spa has a sauna, cold plunge and massage rooms. More than sixty classes a week, from sunrise yoga to late-night spin. Online coaching keeps you on track when you travel.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
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.
Beta
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.
Gamma
Beginners are always welcome, with an intro session included. 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.
<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">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-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. 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-1149" class="pb-3">
<h3 class="h6">Gamma</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. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Our recovery spa has a sauna, cold plunge and massage rooms. Community events keep you motivated, from fun runs to workshops.
Features
Certified coaches design every session around your level and your goals. Track your progress in the app and see how far you have come. We listen first, then build a plan around what you actually need.
Reviews
Clear prices, honest advice and no surprises along the way. Open 24 hours, so you can train whenever it suits your day. We measure success by how many members come back and tell their friends.
FAQ
Pause or change your membership any time, with no long contracts. Modern equipment is cleaned, serviced and ready every day. We keep things simple, so you can focus on what matters to you. Online coaching keeps you on track when you travel.
<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">Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Our recovery spa has a sauna, cold plunge and massage rooms. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Certified coaches design every session around your level and your goals. Track your progress in the app and see how far you have come. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Open 24 hours, so you can train whenever it suits your day. We measure success by how many members come back and tell their friends.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Pause or change your membership any time, with no long contracts. Modern equipment is cleaned, serviced and ready every day. We keep things simple, so you can focus on what matters to you. Online coaching keeps you on track when you travel.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
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. Thousands of members already trust us, and we work hard to keep it that way.
Background
Clear prices, honest advice and no surprises along the way. 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. We keep things simple, so you can focus on what matters to you.
Method
More than sixty classes a week, from sunrise yoga to late-night spin. Online coaching keeps you on track when you travel. Beginners are always welcome, with an intro session included.
Results
Community events keep you motivated, from fun runs to workshops. 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.
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">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. Thousands of members already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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. 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">More than sixty classes a week, from sunrise yoga to late-night spin. Online coaching keeps you on track when you travel. 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">Community events keep you motivated, from fun runs to workshops. 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.</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. 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. Nutrition plans fit your routine and the food you actually enjoy.
Set up your profile
Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Modern equipment is cleaned, serviced and ready every day.
Invite the team
Certified coaches design every session around your level and your goals. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts.
Go live
Open 24 hours, so you can train whenever it suits your day. Clear prices, honest advice and no surprises along the way. More than sixty classes a week, from sunrise yoga to late-night spin. Pause or change your membership any time, with no long contracts.
<div class="row g-3">
<div class="col-sm-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. 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. 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">Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. Modern equipment is cleaned, serviced and ready every day.</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. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</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. More than sixty classes a week, from sunrise yoga to late-night spin. Pause or change your membership any time, with no long contracts.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
HIIT twice a week: how hard is hard enough?
We keep things simple, so you can focus on what matters to you. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day.
Five stretches for desk workers
We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Beginners are always welcome, with an intro session included. Community events keep you motivated, from fun runs to workshops.
A beginner's guide to strength training
Our recovery spa has a sauna, cold plunge and massage rooms. Track your progress in the app and see how far you have come. Friendly people answer your questions quickly, by phone, chat or email.
Our most popular classes this month
Nutrition plans fit your routine and the food you actually enjoy. 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. Certified coaches design every session around your level and your goals.
<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">HIIT twice a week: how hard is hard enough?</h3>
<p class="small mb-0">We keep things simple, so you can focus on what matters to you. Online coaching keeps you on track when you travel. Modern equipment is cleaned, serviced and ready every day.</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">Five stretches for desk workers</h3>
<p class="small mb-0">We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Beginners are always welcome, with an intro session included. 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">A beginner's guide to strength training</h3>
<p class="small mb-0">Our recovery spa has a sauna, cold plunge and massage rooms. Track your progress in the app and see how far you have come. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div 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">Our most popular classes this month</h3>
<p class="small mb-0">Nutrition plans fit your routine and the food you actually enjoy. 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. Certified coaches design every session around your level and your goals.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- How to choose the right class?
- We measure success by how many members come back and tell their friends.
- Looking back at a busy season?
- Small group classes mean your coach knows your name and your form.
- How our coaches plan a new class?
- Every detail is handled by people who care about getting it right.
Shipping
- The small habits that make a big difference?
- We keep things simple, so you can focus on what matters to you.
- Why recovery matters as much as training?
- We listen first, then build a plan around what you actually need.
- Running your first 5K: an eight-week plan?
- We measure success by how many members come back and tell their friends.
Returns
- A beginner's guide to getting started?
- Track your progress in the app and see how far you have come.
- What to eat before a morning workout?
- More than sixty classes a week, from sunrise yoga to late-night spin.
- Our favourite tips for busy weeks?
- Nutrition plans fit your routine and the food you actually enjoy.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">How to choose the right class?</dt>
<dd class="small text-body-secondary">We measure success by how many members come back and tell their friends.</dd>
<dt class="small">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Small group classes mean your coach knows your name and your form.</dd>
<dt class="small">How our coaches plan a new 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">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
<dt class="small">Why recovery matters as much as training?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">Running your first 5K: an eight-week plan?</dt>
<dd class="small text-body-secondary">We measure success by how many members come back and tell their friends.</dd>
</dl>
</div>
<div id="spy-1173" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Track your progress in the app and see how far you have come.</dd>
<dt class="small">What to eat before a morning workout?</dt>
<dd class="small text-body-secondary">More than sixty classes a week, from sunrise yoga to late-night spin.</dd>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Nutrition plans fit your routine and the food you actually enjoy.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Modern equipment is cleaned, serviced and ready every day. Open 24 hours, so you can train whenever it suits your day. Every detail is handled by people who care about getting it right.
Battery
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. Online coaching keeps you on track when you travel. Our team has done this many times, so you never have to guess.
Connectivity
Our recovery spa has a sauna, cold plunge and massage rooms. Pause or change your membership any time, with no long contracts. Friendly people answer your questions quickly, by phone, chat or email.
Security
Start in minutes and get help from a real person whenever you need it. Community events keep you motivated, from fun runs to workshops. Clear prices, honest advice and no surprises along the way. Small group classes mean your coach knows your name and your form.
<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">Modern equipment is cleaned, serviced and ready every day. 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 id="spy-1176" class="pb-3">
<h3 class="h6">Battery</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. Online coaching keeps you on track when you travel. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Community events keep you motivated, from fun runs to workshops. Clear prices, honest advice and no surprises along the way. Small group classes mean your coach knows your name and your form.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$15.85 / mo
- Progress tracking
- Flexible plans
- Community events
Team
$48.94 / mo
- Flexible plans
- Flexible plans
- Flexible plans
Business
$59.74 / mo
- Open 24/7
- Flexible plans
- 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">$15.85<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Progress tracking</li>
<li>Flexible plans</li>
<li>Community events</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">$48.94<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Flexible plans</li>
<li>Flexible plans</li>
<li>Flexible plans</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$59.74<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Open 24/7</li>
<li>Flexible plans</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: How to stay motivated through winter
Beginners are always welcome, with an intro session included. 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.
Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel. More than sixty classes a week, from sunrise yoga to late-night spin. Our recovery spa has a sauna, cold plunge and massage rooms.
Chapter 2: What our members asked us most
Clear prices, honest advice and no surprises along the way. Track your progress in the app and see how far you have come. Small group classes mean your coach knows your name and your form.
Our team has done this many times, so you never have to guess. Nutrition plans fit your routine and the food you actually enjoy. Beginners are always welcome, with an intro session included. Certified coaches design every session around your level and your goals.
Chapter 3: Building a workout habit that lasts
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. Open 24 hours, so you can train whenever it suits your day. Every detail is handled by people who care about getting it right.
We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. Pause or change your membership any time, with no long contracts. We keep things simple, so you can focus on what matters to you.
Chapter 4: Five things we learned this year
Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Open 24 hours, so you can train whenever it suits your day.
Every detail is handled by people who care about getting it right. Our recovery spa has a sauna, cold plunge and massage rooms. Certified coaches design every session around your level and your goals.
<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: How to stay motivated through winter</h3>
<p class="small">Beginners are always welcome, with an intro session included. 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.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel. More than sixty classes a week, from sunrise yoga to late-night spin. Our recovery spa has a sauna, cold plunge and massage rooms.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: What our members asked us most</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Track your progress in the app and see how far you have come. Small group classes mean your coach knows your name and your form.</p>
<p class="small">Our team has done this many times, so you never have to guess. Nutrition plans fit your routine and the food you actually enjoy. Beginners are always welcome, with an intro session included. Certified coaches design every session around your level and your goals.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Building a workout habit that lasts</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. 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>
<p class="small">We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need. 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-1187" class="pb-3">
<h3 class="h6">Chapter 4: Five things we learned this year</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Open 24 hours, so you can train whenever it suits your day.</p>
<p class="small">Every detail is handled by people who care about getting it right. 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>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. 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.
Notifications
Beginners are always welcome, with an intro session included. Friendly people answer your questions quickly, by phone, chat or email. Nutrition plans fit your routine and the food you actually enjoy.
Privacy
We listen first, then build a plan around what you actually need. We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts.
<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="Chloe Kowalski">
</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="Lisbon">
</div>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. 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.</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. Friendly people answer your questions quickly, by phone, chat or email. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-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">We listen first, then build a plan around what you actually need. We measure success by how many members come back and tell their friends. Pause or change your membership any time, with no long contracts.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Customer Support
- Nadia MensahQA Engineer
- Ella HaddadBackend Engineer
- Omar OrtegaFrontend Engineer
Human Resources
- Leo OkaforOperations Manager
- Lucas SilvaHR Partner
- Nora HarlowBackend Engineer
Research
- Priya CarterFinance Lead
- Arjun LindqvistSupport Specialist
- Luna LarsenArt Director
<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">Human Resources</a><a class="nav-link" href="#spy-1200">Research</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-1.svg" class="rounded-circle" width="36" height="36" alt="Nadia Mensah"><div><div class="small fw-semibold">Nadia Mensah</div><div class="small text-body-secondary">QA Engineer</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="Ella Haddad"><div><div class="small fw-semibold">Ella Haddad</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Omar Ortega"><div><div class="small fw-semibold">Omar Ortega</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1199" 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-2.svg" class="rounded-circle" width="36" height="36" alt="Leo Okafor"><div><div class="small fw-semibold">Leo Okafor</div><div class="small text-body-secondary">Operations Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Lucas Silva"><div><div class="small fw-semibold">Lucas Silva</div><div class="small text-body-secondary">HR Partner</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Nora Harlow"><div><div class="small fw-semibold">Nora Harlow</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
<div id="spy-1200" 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-10.svg" class="rounded-circle" width="36" height="36" alt="Priya Carter"><div><div class="small fw-semibold">Priya Carter</div><div class="small text-body-secondary">Finance Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Arjun Lindqvist"><div><div class="small fw-semibold">Arjun Lindqvist</div><div class="small text-body-secondary">Support Specialist</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Luna Larsen"><div><div class="small fw-semibold">Luna Larsen</div><div class="small text-body-secondary">Art Director</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
HIIT
- Nutrition guide$30.00
- Yoga retreat$366.99
- Mobility workshop$32.00
Yoga
- Personal training$63.00
- Massage$63.99
- Spin class pack$102.99
Cardio
- Yoga retreat$401.99
- Bootcamp$144.00
- Coaching plan$209.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">HIIT</a><a class="nav-link" href="#spy-1203">Yoga</a><a class="nav-link" href="#spy-1204">Cardio</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">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.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Yoga retreat</span><span class="fw-semibold">$366.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">Yoga</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">$63.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Massage</span><span class="fw-semibold">$63.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Spin class pack</span><span class="fw-semibold">$102.99</span></li>
</ul>
</div>
<div id="spy-1204" 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>Yoga retreat</span><span class="fw-semibold">$401.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Bootcamp</span><span class="fw-semibold">$144.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$209.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Community events keep you motivated, from fun runs to workshops. 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. We listen first, then build a plan around what you actually need.
This week
Track your progress in the app and see how far you have come. We keep things simple, so you can focus on what matters to you. Open 24 hours, so you can train whenever it suits your day. Certified coaches design every session around your level and your goals.
Later
Our team has done this many times, so you never have to guess. We measure success by how many members come back and tell their friends. Small group classes mean your coach knows your name and your form.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-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">Community events keep you motivated, from fun runs to workshops. 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. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Track your progress in the app and see how far you have come. We keep things simple, so you can focus on what matters to you. Open 24 hours, so you can train whenever it suits your day. Certified coaches design every session around your level and your goals.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Our team has done this many times, so you never have to guess. We measure success by how many members come back and tell their friends. Small group classes mean your coach knows your name and your form.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
More than sixty classes a week, from sunrise yoga to late-night spin. Our recovery spa has a sauna, cold plunge and massage rooms. Nutrition plans fit your routine and the food you actually enjoy.
Orbit
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. Every detail is handled by people who care about getting it right.
Landing
Modern equipment is cleaned, serviced and ready every day. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Community events keep you motivated, from fun runs to workshops.
<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">More than sixty classes a week, from sunrise yoga to late-night spin. Our recovery spa has a sauna, cold plunge and massage rooms. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Pause or change your membership any time, with no long contracts. Thousands of members already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Modern equipment is cleaned, serviced and ready every day. Clear prices, honest advice and no surprises along the way. 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>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Dec 19, 2025
- NewOnline coaching keeps you on track when you travel.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedBeginners are always welcome, with an intro session included.
v3.1 Nov 2, 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.
- FixedMore than sixty classes a week, from sunrise yoga to late-night spin.
v3.0 Apr 15, 2026
- NewModern equipment is cleaned, serviced and ready every day.
- ImprovedOnline coaching keeps you on track when you travel.
- FixedPause or change your membership any time, with no long contracts.
v2.9 Aug 26, 2026
- NewOur team has done this many times, so you never have to guess.
- ImprovedCommunity events keep you motivated, from fun runs to workshops.
- FixedEvery detail is handled by people who care about getting it right.
<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">Dec 19, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Online coaching keeps you on track when you travel.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Beginners are always welcome, with an intro session included.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Nov 2, 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>More than sixty classes a week, from sunrise yoga to late-night spin.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Apr 15, 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>Online coaching keeps you on track when you travel.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Pause or change your membership any time, with no long contracts.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Aug 26, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Every detail is handled by people who care about getting it right.</li>
</ul>
</div>
</div>
</div>
</div>