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
More than sixty classes a week, from sunrise yoga to late-night spin. Online coaching keeps you on track when you travel. Pause or change your membership any time, with no long contracts. 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. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.
Details
Track your progress in the app and see how far you have come. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Modern equipment is cleaned, serviced and ready every day.
Community events keep you motivated, from fun runs to workshops. 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 listen first, then build a plan around what you actually need.
Pricing
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. Every detail is handled by people who care about getting it right.
Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms. More than sixty classes a week, from sunrise yoga to late-night spin. Our team has done this many times, so you never have to guess.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Kiteera</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">More than sixty classes a week, from sunrise yoga to late-night spin. Online coaching keeps you on track when you travel. Pause or change your membership any time, with no long contracts. We measure success by how many members come back and tell their friends.</p>
<p class="small">Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Track your progress in the app and see how far you have come. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Modern equipment is cleaned, serviced and ready every day.</p>
<p class="small">Community events keep you motivated, from fun runs to workshops. 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 listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">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. Every detail is handled by people who care about getting it right.</p>
<p class="small">Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms. More than sixty classes a week, from sunrise yoga to late-night spin. Our team has done this many times, so you never have to guess.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Online coaching keeps you on track when you travel. Friendly people answer your questions quickly, by phone, chat or email. Certified coaches design every session around your level and your goals.
Step two
We measure success by how many members come back and tell their friends. Beginners are always welcome, with an intro session included. Community events keep you motivated, from fun runs to workshops.
Step three
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.
Step four
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. Modern equipment is cleaned, serviced and ready every day.
<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">Online coaching keeps you on track when you travel. Friendly people answer your questions quickly, by phone, chat or email. Certified coaches design every session around your level and your goals.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">We measure success by how many members come back and tell their friends. Beginners are always welcome, with an intro session included. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Open 24 hours, so you can train whenever it suits your day. 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.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">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. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Nutrition plans
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. Pause or change your membership any time, with no long contracts. Small group classes mean your coach knows your name and your form.
Personal training
Nutrition plans fit your routine and the food you actually enjoy. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
Group classes
Track your progress in the app and see how far you have come. Beginners are always welcome, with an intro session included. We listen first, then build a plan around what you actually need. Online coaching keeps you on track when you travel.
Questions
Clear prices, honest advice and no surprises along the way. Open 24 hours, so you can train whenever it suits your day. More than sixty classes a week, from sunrise yoga to late-night spin. Modern equipment is cleaned, serviced and ready every day.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1130" class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1131">Nutrition plans</a><a class="nav-link" href="#spy-1132">Personal training</a><a class="nav-link" href="#spy-1133">Group classes</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Nutrition plans</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Track your progress in the app and see how far you have come. 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-1132" class="pb-3">
<h3 class="h6">Personal training</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Group classes</h3>
<p class="small">Track your progress in the app and see how far you have come. Beginners are always welcome, with an intro session included. We listen first, then build a plan around what you actually need. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</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. 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>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Every detail is handled by people who care about getting it right. Nutrition plans fit your routine and the food you actually enjoy. We keep things simple, so you can focus on what matters to you. Community events keep you motivated, from fun runs to workshops.
Install
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 measure success by how many members come back and tell their friends. Small group classes mean your coach knows your name and your form.
Configure
Pause or change your membership any time, with no long contracts. Thousands of members already trust us, and we work hard to keep it that way. Our recovery spa has a sauna, cold plunge and massage rooms. Friendly people answer your questions quickly, by phone, chat or email.
Usage
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. Friendly people answer your questions quickly, by phone, chat or email.
Examples
Clear prices, honest advice and no surprises along the way. 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.
<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">Every detail is handled by people who care about getting it right. Nutrition plans fit your routine and the food you actually enjoy. 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 id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">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 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 id="spy-1138" class="pb-3">
<h3 class="h6">Configure</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. Our recovery spa has a sauna, cold plunge and massage rooms. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-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. Open 24 hours, so you can train whenever it suits your day. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Online coaching keeps you on track when you travel. Every detail is handled by people who care about getting it right. Modern equipment is cleaned, serviced and ready every day.
Midday
Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you. Our recovery spa has a sauna, cold plunge and massage rooms. Community events keep you motivated, from fun runs to workshops.
Afternoon
Nutrition plans fit your routine and the food you actually enjoy. Beginners are always welcome, with an intro session included. Our team has done this many times, so you never have to guess. More than sixty classes a week, from sunrise yoga to late-night spin.
Evening
Pause or change your membership any time, with no long contracts. Small group classes mean your coach knows your name and your form. We measure success by how many members come back and tell their friends.
<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">Online coaching keeps you on track when you travel. Every detail is handled by people who care about getting it right. Modern equipment is cleaned, serviced and ready every day.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</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. 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-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Beginners are always welcome, with an intro session included. Our team has done this many times, so you never have to guess. More than sixty classes a week, from sunrise yoga to late-night spin.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Pause or change your membership any time, with no long contracts. Small group classes mean your coach knows your name and your form. We measure success by how many members come back and tell their friends.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Thousands of members already trust us, and we work hard to keep it that way. Our recovery spa has a sauna, cold plunge and massage rooms. Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel.
Beta
Every detail is handled by people who care about getting it right. Thousands of members already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.
Gamma
More than sixty classes a week, from sunrise yoga to late-night spin. We measure success by how many members come back and tell their friends. We listen first, then build a plan around what you actually need.
<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">Thousands of members already trust us, and we work hard to keep it that way. Our recovery spa has a sauna, cold plunge and massage rooms. Friendly people answer your questions quickly, by phone, chat or email. Online coaching keeps you on track when you travel.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Every detail is handled by people who care about getting it right. Thousands of members already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. We measure success by how many members come back and tell their friends. We listen first, then build a plan around what you actually need.</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. Community events keep you motivated, from fun runs to workshops. Beginners are always welcome, with an intro session included.
Features
Modern equipment is cleaned, serviced and ready every day. 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. We keep things simple, so you can focus on what matters to you.
Reviews
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. Open 24 hours, so you can train whenever it suits your day. Certified coaches design every session around your level and your goals.
FAQ
Nutrition plans fit your routine and the food you actually enjoy. Our recovery spa has a sauna, cold plunge and massage rooms. Beginners are always welcome, with an intro session included. We measure success by how many members come back and tell their friends.
<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. Community events keep you motivated, from fun runs to workshops. Beginners are always welcome, with an intro session included.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">Modern equipment is cleaned, serviced and ready every day. 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. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Pause or change your membership any time, with no long contracts. 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-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Nutrition plans fit your routine and the food you actually enjoy. Our recovery spa has a sauna, cold plunge and massage rooms. Beginners are always welcome, with an intro session included. We measure success by how many members come back and tell their friends.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Open 24 hours, so you can train whenever it suits your day.
Background
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.
Method
Modern equipment is cleaned, serviced and ready every day. Certified coaches design every session around your level and your goals. Online coaching keeps you on track when you travel. Clear prices, honest advice and no surprises along the way.
Results
More than sixty classes a week, from sunrise yoga to late-night spin. Pause or change your membership any time, with no long contracts. We keep things simple, so you can focus on what matters to you. Track your progress in the app and see how far you have come.
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">Small group classes mean your coach knows your name and your form. Every detail is handled by people who care about getting it right. Open 24 hours, so you can train whenever it suits your day.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">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.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Modern equipment is cleaned, serviced and ready every day. Certified coaches design every session around your level and your goals. Online coaching keeps you on track when you travel. Clear prices, honest advice and no surprises along the way.</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. Pause or change your membership any time, with no long contracts. We keep things simple, so you can focus on what matters to you. Track your progress in the app and see how far you have come.</p>
</div>
</div>
</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
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. Community events keep you motivated, from fun runs to workshops.
Set up your profile
Our team has done this many times, so you never have to guess. Online coaching keeps you on track when you travel. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.
Invite the team
Open 24 hours, so you can train whenever it suits your day. Small group classes mean your coach knows your name and your form. Clear prices, honest advice and no surprises along the way.
Go live
Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. We measure success by how many members come back and tell their friends.
<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">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. Community events keep you motivated, from fun runs to workshops.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Our team has done this many times, so you never have to guess. Online coaching keeps you on track when you travel. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Open 24 hours, so you can train whenever it suits your day. Small group classes mean your coach knows your name and your form. 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">Modern equipment is cleaned, serviced and ready every day. Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. We measure success by how many members come back and tell their friends.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Our favourite tips for busy weeks
Start in minutes and get help from a real person whenever you need it. Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you. Nutrition plans fit your routine and the food you actually enjoy.
A beginner's guide to strength training
We listen first, then build a plan around what you actually need. Thousands of members already trust us, and we work hard to keep it that way. Beginners are always welcome, with an intro session included.
How to stay motivated through winter
Our recovery spa has a sauna, cold plunge and massage rooms. Track your progress in the app and see how far you have come. More than sixty classes a week, from sunrise yoga to late-night spin. Pause or change your membership any time, with no long contracts.
Our most popular classes this month
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. More than sixty classes a week, from sunrise yoga to late-night spin. Beginners are always welcome, with an intro session included.
<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">Our favourite tips for busy weeks</h3>
<p class="small mb-0">Start in minutes and get help from a real person whenever you need it. Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you. Nutrition plans fit your routine and the food you actually enjoy.</p>
</div>
<div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2024</span>
<h3 class="h6">A beginner's guide to strength training</h3>
<p class="small mb-0">We listen first, then build a plan around what you actually need. 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>
</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">Our recovery spa has a sauna, cold plunge and massage rooms. Track your progress in the app and see how far you have come. 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 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">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. More than sixty classes a week, from sunrise yoga to late-night spin. Beginners are always welcome, with an intro session included.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Looking back at a busy season?
- Track your progress in the app and see how far you have come.
- What to eat before a morning workout?
- Friendly people answer your questions quickly, by phone, chat or email.
- The small habits that make a big difference?
- Nutrition plans fit your routine and the food you actually enjoy.
Shipping
- Five things we learned this year?
- Modern equipment is cleaned, serviced and ready every day.
- How our coaches plan a new class?
- Pause or change your membership any time, with no long contracts.
- Building a workout habit that lasts?
- Small group classes mean your coach knows your name and your form.
Returns
- How to choose the right class?
- We keep things simple, so you can focus on what matters to you.
- HIIT twice a week: how hard is hard enough??
- Thousands of members already trust us, and we work hard to keep it that way.
- A beginner's guide to getting started?
- Our team has done this many times, so you never have to guess.
<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">Looking back at a busy season?</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">Friendly people answer your questions quickly, by phone, chat or email.</dd>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">Nutrition plans fit your routine and the food you actually enjoy.</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">Five things we learned this year?</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">Pause or change your membership any time, with no long contracts.</dd>
<dt class="small">Building a workout habit that lasts?</dt>
<dd class="small text-body-secondary">Small group classes mean your coach knows your name and your form.</dd>
</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">How to choose the right class?</dt>
<dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
<dt class="small">HIIT twice a week: how hard is hard enough??</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">A beginner's guide to getting started?</dt>
<dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Our recovery spa has a sauna, cold plunge and massage rooms. Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel. Certified coaches design every session around your level and your goals.
Battery
Clear prices, honest advice and no surprises along the way. 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. Every detail is handled by people who care about getting it right.
Connectivity
Small group classes mean your coach knows your name and your form. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.
Security
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. Modern equipment is cleaned, serviced and ready every day. 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-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">Our recovery spa has a sauna, cold plunge and massage rooms. Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel. Certified coaches design every session around your level and your goals.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Small group classes mean your coach knows your name and your form. Friendly people answer your questions quickly, by phone, chat or email. 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">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. Modern equipment is cleaned, serviced and ready every day. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$16.89 / mo
- Open 24/7
- Community events
- Progress tracking
Team
$38.74 / mo
- Flexible plans
- Progress tracking
- Community events
Business
$69.96 / mo
- Modern equipment
- Flexible plans
- Flexible plans
<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$16.89<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Open 24/7</li>
<li>Community events</li>
<li>Progress tracking</li>
</ul>
</div>
</div>
<div id="spy-1181" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Team</h3>
<p class="fs-4 fw-bold mb-1">$38.74<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Flexible plans</li>
<li>Progress tracking</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">$69.96<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Modern equipment</li>
<li>Flexible plans</li>
<li>Flexible plans</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Five stretches for desk workers
Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Open 24 hours, so you can train whenever it suits your day.
More than sixty classes a week, from sunrise yoga to late-night spin. Beginners are always welcome, with an intro session included. Our recovery spa has a sauna, cold plunge and massage rooms.
Chapter 2: Running your first 5K: an eight-week plan
Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel. 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. Nutrition plans fit your routine and the food you actually enjoy. 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.
Chapter 3: What our members asked us most
Pause or change your membership any time, with no long contracts. Every detail is handled by people who care about getting it right. Online coaching keeps you on track when you travel.
Our team has done this many times, so you never have to guess. More than sixty classes a week, from sunrise yoga to late-night spin. Start in minutes and get help from a real person whenever you need it. Modern equipment is cleaned, serviced and ready every day.
Chapter 4: Why recovery matters as much as training
Community events keep you motivated, from fun runs to workshops. Pause or change your membership any time, with no long contracts. 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. Certified coaches design every session around your level and your goals. We keep things simple, so you can focus on what matters to you. Track your progress in the app and see how far you have come.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Five stretches for desk workers</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Open 24 hours, so you can train whenever it suits your day.</p>
<p class="small">More than sixty classes a week, from sunrise yoga to late-night spin. Beginners are always welcome, with an intro session included. 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: Running your first 5K: an eight-week plan</h3>
<p class="small">Community events keep you motivated, from fun runs to workshops. Online coaching keeps you on track when you travel. Start in minutes and get help from a real person whenever you need it.</p>
<p class="small">Every detail is handled by people who care about getting it right. Nutrition plans fit your routine and the food you actually enjoy. 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-1186" class="pb-3">
<h3 class="h6">Chapter 3: What our members asked us most</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. Online coaching keeps you on track when you travel.</p>
<p class="small">Our team has done this many times, so you never have to guess. More than sixty classes a week, from sunrise yoga to late-night spin. Start in minutes and get help from a real person whenever you need it. Modern equipment is cleaned, serviced and ready every day.</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">Community events keep you motivated, from fun runs to workshops. Pause or change your membership any time, with no long contracts. Small group classes mean your coach knows your name and your form.</p>
<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. We keep things simple, so you can focus on what matters to you. Track your progress in the app and see how far you have come.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends. Beginners are always welcome, with an intro session included. Friendly people answer your questions quickly, by phone, chat or email.
Notifications
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. Nutrition plans fit your routine and the food you actually enjoy.
Privacy
Clear prices, honest advice and no surprises along the 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.
<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="Ella Alvarez">
</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="Edinburgh">
</div>
<p class="small">Clear prices, honest advice and no surprises along the way. We measure success by how many members come back and tell their friends. Beginners are always welcome, with an intro session included. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-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">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. 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">Clear prices, honest advice and no surprises along the 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.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Legal
- Arjun KimProject Manager
- Hana HughesContent Writer
- Ava MensahQA Engineer
Marketing
- Arjun KimQA Engineer
- Isla SilvaMarketing Lead
- Samir MoreauSales Executive
Engineering
- Felix MorganProject Manager
- Freya OrtegaArt Director
- Noah KowalskiProduct Designer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Marketing</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Legal</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Arjun Kim"><div><div class="small fw-semibold">Arjun Kim</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Hana Hughes"><div><div class="small fw-semibold">Hana Hughes</div><div class="small text-body-secondary">Content Writer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Ava Mensah"><div><div class="small fw-semibold">Ava Mensah</div><div class="small text-body-secondary">QA Engineer</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Marketing</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Arjun Kim"><div><div class="small fw-semibold">Arjun Kim</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-4.svg" class="rounded-circle" width="36" height="36" alt="Isla Silva"><div><div class="small fw-semibold">Isla Silva</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-5.svg" class="rounded-circle" width="36" height="36" alt="Samir Moreau"><div><div class="small fw-semibold">Samir Moreau</div><div class="small text-body-secondary">Sales Executive</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Engineering</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Felix Morgan"><div><div class="small fw-semibold">Felix Morgan</div><div class="small text-body-secondary">Project Manager</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Freya Ortega"><div><div class="small fw-semibold">Freya Ortega</div><div class="small text-body-secondary">Art Director</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Noah Kowalski"><div><div class="small fw-semibold">Noah Kowalski</div><div class="small text-body-secondary">Product Designer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Strength
- 10-class pack$130.00
- Monthly pass$51.00
- Personal training$64.00
Yoga
- Massage$73.99
- Nutrition guide$27.00
- Bootcamp$130.00
Recovery
- Day pass$14.00
- Coaching plan$201.00
- 10-class pack$118.00
<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">Yoga</a><a class="nav-link" href="#spy-1204">Recovery</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Strength</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>10-class pack</span><span class="fw-semibold">$130.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Monthly pass</span><span class="fw-semibold">$51.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Personal training</span><span class="fw-semibold">$64.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>Massage</span><span class="fw-semibold">$73.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Nutrition guide</span><span class="fw-semibold">$27.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Bootcamp</span><span class="fw-semibold">$130.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Recovery</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Day pass</span><span class="fw-semibold">$14.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Coaching plan</span><span class="fw-semibold">$201.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>10-class pack</span><span class="fw-semibold">$118.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Open 24 hours, so you can train whenever it suits your day. Every detail is handled by people who care about getting it right. More than sixty classes a week, from sunrise yoga to late-night spin. Certified coaches design every session around your level and your goals.
This week
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. Online coaching keeps you on track when you travel. Small group classes mean your coach knows your name and your form.
Later
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.
<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">Open 24 hours, so you can train whenever it suits your day. Every detail is handled by people who care about getting it right. More than sixty classes a week, from sunrise yoga to late-night spin. Certified coaches design every session around your level and your goals.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</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. Online coaching keeps you on track when you travel. Small group classes mean your coach knows your name and your form.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</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>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. Thousands of members already trust us, and we work hard to keep it that way. Pause or change your membership any time, with no long contracts.
Orbit
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.
Landing
We measure success by how many members come back and tell their friends. Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.
<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">Friendly people answer your questions quickly, by phone, chat or email. Our recovery spa has a sauna, cold plunge and massage rooms. Thousands of members already trust us, and we work hard to keep it that way. Pause or change your membership any time, with no long contracts.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">We listen first, then build a plan around what you actually need. 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.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">We measure success by how many members come back and tell their friends. Community events keep you motivated, from fun runs to workshops. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Oct 7, 2025
- NewBeginners are always welcome, with an intro session included.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedCertified coaches design every session around your level and your goals.
v3.1 Mar 15, 2026
- NewOnline coaching keeps you on track when you travel.
- ImprovedOur recovery spa has a sauna, cold plunge and massage rooms.
- FixedThousands of members already trust us, and we work hard to keep it that way.
v3.0 Oct 9, 2026
- NewNutrition plans fit your routine and the food you actually enjoy.
- ImprovedWe keep things simple, so you can focus on what matters to you.
- FixedTrack your progress in the app and see how far you have come.
v2.9 Sep 18, 2025
- NewWe listen first, then build a plan around what you actually need.
- ImprovedMore than sixty classes a week, from sunrise yoga to late-night spin.
- FixedFriendly people answer your questions quickly, by phone, chat or email.
<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">Oct 7, 2025</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>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Certified coaches design every session around your level and your goals.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Mar 15, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Online coaching keeps you on track when you travel.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Thousands of members already trust us, and we work hard to keep it that way.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Oct 9, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Nutrition plans fit your routine and the food you actually enjoy.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Track your progress in the app and see how far you have come.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Sep 18, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>More than sixty classes a week, from sunrise yoga to late-night spin.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
</ul>
</div>
</div>
</div>
</div>