Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-bs-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.
1In a navbar
Scroll the box: the navbar pill for the visible section becomes active.
Intro
Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive. More than eighty speakers share what they have learned the hard way. Our evening party is the best place to turn talks into friendships.
Sponsors meet decision-makers in a relaxed, friendly setting. We keep things simple, so you can focus on what matters to you. The venue is a short walk from the station and fully accessible.
Details
Early bird tickets save you up to forty percent until the end of the month. We listen first, then build a plan around what you actually need. Every session is recorded, so you can catch up on anything you missed. 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. Three days of keynotes, hands-on workshops and evening meetups. Start in minutes and get help from a real person whenever you need it. Group tickets include a private meeting room for your team.
Pricing
Workshops are limited to thirty seats, so everyone gets hands-on time. Every attendee receives a certificate of participation. Thousands of attendees already trust us, and we work hard to keep it that way. Virtual passes let you join the main stage live from anywhere.
Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. The networking app helps you meet the right people before you arrive.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Koraan Hub</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
<li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
</ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1122" class="pb-3">
<h3 class="h6">Intro</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive. More than eighty speakers share what they have learned the hard way. Our evening party is the best place to turn talks into friendships.</p>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. We keep things simple, so you can focus on what matters to you. The venue is a short walk from the station and fully accessible.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. We listen first, then build a plan around what you actually need. Every session is recorded, so you can catch up on anything you missed. Every detail is handled by people who care about getting it right.</p>
<p class="small">Our team has done this many times, so you never have to guess. Three days of keynotes, hands-on workshops and evening meetups. Start in minutes and get help from a real person whenever you need it. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Every attendee receives a certificate of participation. Thousands of attendees already trust us, and we work hard to keep it that way. Virtual passes let you join the main stage live from anywhere.</p>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. The networking app helps you meet the right people before you arrive.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Friendly people answer your questions quickly, by phone, chat or email. Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting.
Step two
Every detail is handled by people who care about getting it right. Three days of keynotes, hands-on workshops and evening meetups. 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.
Step three
We measure success by how many attendees come back and tell their friends. Early bird tickets save you up to forty percent until the end of the month. Every session is recorded, so you can catch up on anything you missed. Our team has done this many times, so you never have to guess.
Step four
Group tickets include a private meeting room for your team. The venue is a short walk from the station and fully accessible. Thousands of attendees already trust us, and we work hard to keep it that way. More than eighty speakers share what they have learned the hard way.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting.</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. Three days of keynotes, hands-on workshops and evening meetups. 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.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. Early bird tickets save you up to forty percent until the end of the month. Every session is recorded, so you can catch up on anything you missed. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Group tickets include a private meeting room for your team. The venue is a short walk from the station and fully accessible. Thousands of attendees already trust us, and we work hard to keep it that way. More than eighty speakers share what they have learned the hard way.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Ticketing
Virtual passes let you join the main stage live from anywhere. Every attendee receives a certificate of participation. Start in minutes and get help from a real person whenever you need it. Every session is recorded, so you can catch up on anything you missed.
Networking app
Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible. Group tickets include a private meeting room for your team.
Sponsorship
Workshops are limited to thirty seats, so everyone gets hands-on time. Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting. Friendly people answer your questions quickly, by phone, chat or email.
Questions
Start in minutes and get help from a real person whenever you need it. Every attendee receives a certificate of participation. Clear prices, honest advice and no surprises along the way. Virtual passes let you join the main stage live from anywhere.
<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">Ticketing</a><a class="nav-link" href="#spy-1132">Networking app</a><a class="nav-link" href="#spy-1133">Sponsorship</a><a class="nav-link" href="#spy-1134">Questions</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1131" class="pb-3">
<h3 class="h6">Ticketing</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Every attendee receives a certificate of participation. Start in minutes and get help from a real person whenever you need it. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Networking app</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Sponsorship</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Every attendee receives a certificate of participation. Clear prices, honest advice and no surprises along the way. Virtual passes let you join the main stage live from anywhere.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Three days of keynotes, hands-on workshops and evening meetups. Thousands of attendees already trust us, and we work hard to keep it that way. More than eighty speakers share what they have learned the hard way. The networking app helps you meet the right people before you arrive.
Install
We measure success by how many attendees come back and tell their friends. 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.
Configure
Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Our evening party is the best place to turn talks into friendships. We keep things simple, so you can focus on what matters to you.
Usage
Virtual passes let you join the main stage live from anywhere. Every session is recorded, so you can catch up on anything you missed. Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible.
Examples
The networking app helps you meet the right people before you arrive. More than eighty speakers share what they have learned the hard way. Clear prices, honest advice and no surprises along the way. Group tickets include a private meeting room for your team.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. Thousands of attendees already trust us, and we work hard to keep it that way. More than eighty speakers share what they have learned the hard way. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. 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-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Our evening party is the best place to turn talks into friendships. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Every session is recorded, so you can catch up on anything you missed. Early bird tickets save you up to forty percent until the end of the month. The venue is a short walk from the station and fully accessible.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">The networking app helps you meet the right people before you arrive. More than eighty speakers share what they have learned the hard way. Clear prices, honest advice and no surprises along the way. Group tickets include a private meeting room for your team.</p>
</div>
</div>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Sponsors meet decision-makers in a relaxed, friendly setting. Three days of keynotes, hands-on workshops and evening meetups.
Midday
We measure success by how many attendees come back and tell their friends. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.
Afternoon
Thousands of attendees already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Every attendee receives a certificate of participation.
Evening
Workshops are limited to thirty seats, so everyone gets hands-on time. Thousands of attendees already trust us, and we work hard to keep it that way. The networking app helps you meet the right people before you arrive. The venue is a short walk from the station and fully accessible.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Sponsors meet decision-makers in a relaxed, friendly setting. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Every attendee receives a certificate of participation.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Thousands of attendees already trust us, and we work hard to keep it that way. The networking app helps you meet the right people before you arrive. The venue is a short walk from the station and fully accessible.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Every session is recorded, so you can catch up on anything you missed. Early bird tickets save you up to forty percent until the end of the month.
Beta
Our evening party is the best place to turn talks into friendships. More than eighty speakers share what they have learned the hard way. Group tickets include a private meeting room for your team.
Gamma
Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. We measure success by how many attendees come back and tell their friends.
<div class="row g-3 cb-spy-plain">
<div class="col-4">
<div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
<a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
</div>
</div>
<div class="col-8">
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1147" class="pb-3">
<h3 class="h6">Alpha</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Every session is recorded, so you can catch up on anything you missed. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. More than eighty speakers share what they have learned the hard way. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. We measure success by how many attendees come back and tell their friends.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
Three days of keynotes, hands-on workshops and evening meetups. Sponsors meet decision-makers in a relaxed, friendly setting. Workshops are limited to thirty seats, so everyone gets hands-on time.
Features
We listen first, then build a plan around what you actually need. Virtual passes let you join the main stage live from anywhere. We keep things simple, so you can focus on what matters to you.
Reviews
Every attendee receives a certificate of participation. The networking app helps you meet the right people before you arrive. Early bird tickets save you up to forty percent until the end of the month.
FAQ
Workshops are limited to thirty seats, so everyone gets hands-on time. Group tickets include a private meeting room for your team. Every detail is handled by people who care about getting it right. Three days of keynotes, hands-on workshops and evening meetups.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. Sponsors meet decision-makers in a relaxed, friendly setting. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</h3>
<p class="small">We listen first, then build a plan around what you actually need. Virtual passes let you join the main stage live from anywhere. 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">Every attendee receives a certificate of participation. The networking app helps you meet the right people before you arrive. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Group tickets include a private meeting room for your team. Every detail is handled by people who care about getting it right. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. More than eighty speakers share what they have learned the hard way.
Background
Every attendee receives a certificate of participation. We measure success by how many attendees come back and tell their friends. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.
Method
Virtual passes let you join the main stage live from anywhere. Friendly people answer your questions quickly, by phone, chat or email. The venue is a short walk from the station and fully accessible. Every session is recorded, so you can catch up on anything you missed.
Results
Thousands of attendees already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Sponsors meet decision-makers in a relaxed, friendly setting.
On this page
<div class="row g-3">
<div class="col-md-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1156" class="pb-3">
<h3 class="h6">Summary</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Every attendee receives a certificate of participation. We measure success by how many attendees come back and tell their friends. Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Friendly people answer your questions quickly, by phone, chat or email. The venue is a short walk from the station and fully accessible. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Sponsors meet decision-makers in a relaxed, friendly setting.</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
Our evening party is the best place to turn talks into friendships. Three days of keynotes, hands-on workshops and evening meetups. Workshops are limited to thirty seats, so everyone gets hands-on time.
Set up your profile
We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed. We listen first, then build a plan around what you actually need.
Invite the team
Sponsors meet decision-makers in a relaxed, friendly setting. The networking app helps you meet the right people before you arrive. Group tickets include a private meeting room for your team. Friendly people answer your questions quickly, by phone, chat or email.
Go live
More than eighty speakers share what they have learned the hard way. Our team has done this many times, so you never have to guess. Thousands of attendees already trust us, and we work hard to keep it that way. Virtual passes let you join the main stage live from anywhere.
<div class="row g-3">
<div class="col-sm-5">
<div id="spy-nav-1160" class="list-group list-group-numbered">
<a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
</div>
</div>
<div class="col-sm-7">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1161" class="pb-3">
<h3 class="h6">Create an account</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. Three days of keynotes, hands-on workshops and evening meetups. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. The networking app helps you meet the right people before you arrive. Group tickets include a private meeting room for your team. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">More than eighty speakers share what they have learned the hard way. Our team has done this many times, so you never have to guess. Thousands of attendees already trust us, and we work hard to keep it that way. Virtual passes let you join the main stage live from anywhere.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
A beginner's guide to getting started
Our evening party is the best place to turn talks into friendships. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Early bird tickets save you up to forty percent until the end of the month.
What we learned from last year's feedback
Every attendee receives a certificate of participation. The venue is a short walk from the station and fully accessible. Start in minutes and get help from a real person whenever you need it. We measure success by how many attendees come back and tell their friends.
A guide to the city for visiting attendees
Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive. Sponsors meet decision-makers in a relaxed, friendly setting. Every attendee receives a certificate of participation.
Joining online: how the virtual pass works
Our evening party is the best place to turn talks into friendships. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Thousands of attendees already trust us, and we work hard to keep it that way.
<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2023</span>
<h3 class="h6">A beginner's guide to getting started</h3>
<p class="small mb-0">Our evening party is the best place to turn talks into friendships. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Early bird tickets save you up to forty percent until the end of the month.</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">What we learned from last year's feedback</h3>
<p class="small mb-0">Every attendee receives a certificate of participation. The venue is a short walk from the station and fully accessible. Start in minutes and get help from a real person whenever you need it. We measure success by how many attendees come back and tell their friends.</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 guide to the city for visiting attendees</h3>
<p class="small mb-0">Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive. Sponsors meet decision-makers in a relaxed, friendly setting. Every attendee receives a certificate of participation.</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">Joining online: how the virtual pass works</h3>
<p class="small mb-0">Our evening party is the best place to turn talks into friendships. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- Highlights from last year's workshops?
- Three days of keynotes, hands-on workshops and evening meetups.
- How to get the most out of a conference?
- Virtual passes let you join the main stage live from anywhere.
- What our attendees asked us most?
- The venue is a short walk from the station and fully accessible.
Shipping
- The small habits that make a big difference?
- Group tickets include a private meeting room for your team.
- Five things we learned this year?
- Early bird tickets save you up to forty percent until the end of the month.
- How to choose the right ticket?
- Clear prices, honest advice and no surprises along the way.
Returns
- Looking back at a busy season?
- Friendly people answer your questions quickly, by phone, chat or email.
- Behind the scenes: building the stage?
- More than eighty speakers share what they have learned the hard way.
- Announcing our first keynote speakers?
- Workshops are limited to thirty seats, so everyone gets hands-on time.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">Highlights from last year's workshops?</dt>
<dd class="small text-body-secondary">Three days of keynotes, hands-on workshops and evening meetups.</dd>
<dt class="small">How to get the most out of a conference?</dt>
<dd class="small text-body-secondary">Virtual passes let you join the main stage live from anywhere.</dd>
<dt class="small">What our attendees asked us most?</dt>
<dd class="small text-body-secondary">The venue is a short walk from the station and fully accessible.</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">Group tickets include a private meeting room for your team.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">Early bird tickets save you up to forty percent until the end of the month.</dd>
<dt class="small">How to choose the right ticket?</dt>
<dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</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">Looking back at a busy season?</dt>
<dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
<dt class="small">Behind the scenes: building the stage?</dt>
<dd class="small text-body-secondary">More than eighty speakers share what they have learned the hard way.</dd>
<dt class="small">Announcing our first keynote speakers?</dt>
<dd class="small text-body-secondary">Workshops are limited to thirty seats, so everyone gets hands-on time.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Start in minutes and get help from a real person whenever you need it. We measure success by how many attendees come back and tell their friends. We listen first, then build a plan around what you actually need.
Battery
Every session is recorded, so you can catch up on anything you missed. More than eighty speakers share what they have learned the hard way. Friendly people answer your questions quickly, by phone, chat or email. Thousands of attendees already trust us, and we work hard to keep it that way.
Connectivity
We measure success by how many attendees come back and tell their friends. Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time. Our evening party is the best place to turn talks into friendships.
Security
The venue is a short walk from the station and fully accessible. Clear prices, honest advice and no surprises along the way. Virtual passes let you join the main stage live from anywhere.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. We measure success by how many attendees come back and tell their friends. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Every session is recorded, so you can catch up on anything you missed. More than eighty speakers share what they have learned the hard way. Friendly people answer your questions quickly, by phone, chat or email. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time. Our evening party is the best place to turn talks into friendships.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">The venue is a short walk from the station and fully accessible. Clear prices, honest advice and no surprises along the way. Virtual passes let you join the main stage live from anywhere.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$14.93 / mo
- Networking lounges
- World-class speakers
- World-class speakers
Team
$46.23 / mo
- Networking lounges
- Hands-on workshops
- World-class speakers
Business
$68.00 / mo
- World-class speakers
- Networking lounges
- World-class speakers
<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
<a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1180" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Starter</h3>
<p class="fs-4 fw-bold mb-1">$14.93<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Networking lounges</li>
<li>World-class speakers</li>
<li>World-class speakers</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">$46.23<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Networking lounges</li>
<li>Hands-on workshops</li>
<li>World-class speakers</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">$68.00<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>World-class speakers</li>
<li>Networking lounges</li>
<li>World-class speakers</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: Our favourite tips for busy weeks
Every detail is handled by people who care about getting it right. Three days of keynotes, hands-on workshops and evening meetups. We keep things simple, so you can focus on what matters to you.
The networking app helps you meet the right people before you arrive. Our team has done this many times, so you never have to guess. Early bird tickets save you up to forty percent until the end of the month.
Chapter 2: How to pitch a talk that gets accepted
Sponsors meet decision-makers in a relaxed, friendly setting. Start in minutes and get help from a real person whenever you need it. Every session is recorded, so you can catch up on anything you missed.
We listen first, then build a plan around what you actually need. Every attendee receives a certificate of participation. The networking app helps you meet the right people before you arrive.
Chapter 3: Ten talks you should not miss this year
Early bird tickets save you up to forty percent until the end of the month. Friendly people answer your questions quickly, by phone, chat or email. Group tickets include a private meeting room for your team.
Every session is recorded, so you can catch up on anything you missed. Our team has done this many times, so you never have to guess. Sponsors meet decision-makers in a relaxed, friendly setting. Every detail is handled by people who care about getting it right.
Chapter 4: What makes a panel worth watching
Clear prices, honest advice and no surprises along the way. Workshops are limited to thirty seats, so everyone gets hands-on time. We listen first, then build a plan around what you actually need. More than eighty speakers share what they have learned the hard way.
Thousands of attendees 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. Our evening party is the best place to turn talks into friendships.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: Our favourite tips for busy weeks</h3>
<p class="small">Every detail is handled by people who care about getting it right. Three days of keynotes, hands-on workshops and evening meetups. We keep things simple, so you can focus on what matters to you.</p>
<p class="small">The networking app helps you meet the right people before you arrive. Our team has done this many times, so you never have to guess. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: How to pitch a talk that gets accepted</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. Start in minutes and get help from a real person whenever you need it. Every session is recorded, so you can catch up on anything you missed.</p>
<p class="small">We listen first, then build a plan around what you actually need. Every attendee receives a certificate of participation. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: Ten talks you should not miss this year</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. Friendly people answer your questions quickly, by phone, chat or email. Group tickets include a private meeting room for your team.</p>
<p class="small">Every session is recorded, so you can catch up on anything you missed. Our team has done this many times, so you never have to guess. Sponsors meet decision-makers in a relaxed, friendly setting. Every detail is handled by people who care about getting it right.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: What makes a panel worth watching</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Workshops are limited to thirty seats, so everyone gets hands-on time. We listen first, then build a plan around what you actually need. More than eighty speakers share what they have learned the hard way.</p>
<p class="small">Thousands of attendees 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. Our evening party is the best place to turn talks into friendships.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups. We keep things simple, so you can focus on what matters to you. The venue is a short walk from the station and fully accessible.
Notifications
Every attendee receives a certificate of participation. We measure success by how many attendees come back and tell their friends. Our team has done this many times, so you never have to guess. The networking app helps you meet the right people before you arrive.
Privacy
We keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed. Every detail is handled by people who care about getting it right. Workshops are limited to thirty seats, so everyone gets hands-on time.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1188" class="list-group list-group-flush border rounded">
<a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1189" class="pb-3">
<h3 class="h6">Profile</h3>
<div class="mb-2">
<label for="spy-in-1192" class="form-label small">Display name</label>
<input class="form-control form-control-sm" id="spy-in-1192" value="Chloe Haddad">
</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">Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups. We keep things simple, so you can focus on what matters to you. The venue is a short walk from the station and fully accessible.</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">Every attendee receives a certificate of participation. We measure success by how many attendees come back and tell their friends. Our team has done this many times, so you never have to guess. The networking app helps you meet the right people before you arrive.</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 keep things simple, so you can focus on what matters to you. Every session is recorded, so you can catch up on anything you missed. Every detail is handled by people who care about getting it right. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Sales
- Samir OrtegaOperations Manager
- Luna AlvarezHR Partner
- Ravi FischerFinance Lead
Operations
- Noah NovakProduct Designer
- Owen HaddadSupport Specialist
- Omar LindqvistFinance Lead
Research
- Mateo QuinnArt Director
- Sofia BrennanSales Executive
- Amara KowalskiSales Executive
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Sales</a><a class="nav-link" href="#spy-1199">Operations</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-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Sales</h3>
<ul class="list-unstyled">
<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="Samir Ortega"><div><div class="small fw-semibold">Samir Ortega</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-4.svg" class="rounded-circle" width="36" height="36" alt="Luna Alvarez"><div><div class="small fw-semibold">Luna Alvarez</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-4.svg" class="rounded-circle" width="36" height="36" alt="Ravi Fischer"><div><div class="small fw-semibold">Ravi Fischer</div><div class="small text-body-secondary">Finance Lead</div></div></li>
</ul>
</div>
<div id="spy-1199" class="pb-3">
<h3 class="h6">Operations</h3>
<ul class="list-unstyled">
<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="Noah Novak"><div><div class="small fw-semibold">Noah Novak</div><div class="small text-body-secondary">Product Designer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Owen Haddad"><div><div class="small fw-semibold">Owen Haddad</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-8.svg" class="rounded-circle" width="36" height="36" alt="Omar Lindqvist"><div><div class="small fw-semibold">Omar Lindqvist</div><div class="small text-body-secondary">Finance Lead</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-3.svg" class="rounded-circle" width="36" height="36" alt="Mateo Quinn"><div><div class="small fw-semibold">Mateo Quinn</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-6.svg" class="rounded-circle" width="36" height="36" alt="Sofia Brennan"><div><div class="small fw-semibold">Sofia Brennan</div><div class="small text-body-secondary">Sales Executive</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Amara Kowalski"><div><div class="small fw-semibold">Amara Kowalski</div><div class="small text-body-secondary">Sales Executive</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Meetup
- Evening meetup$27.00
- VIP pass$872.00
- Full access pass$528.99
Panel
- Recording pass$62.99
- Panel day ticket$187.00
- Speaker dinner$119.99
Workshop
- Speaker dinner$110.00
- Virtual pass$106.00
- Recording pass$64.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Meetup</a><a class="nav-link" href="#spy-1203">Panel</a><a class="nav-link" href="#spy-1204">Workshop</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1202" class="pb-3">
<h3 class="h6">Meetup</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Evening meetup</span><span class="fw-semibold">$27.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>VIP pass</span><span class="fw-semibold">$872.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Full access pass</span><span class="fw-semibold">$528.99</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Panel</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Recording pass</span><span class="fw-semibold">$62.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Panel day ticket</span><span class="fw-semibold">$187.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Speaker dinner</span><span class="fw-semibold">$119.99</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Workshop</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Speaker dinner</span><span class="fw-semibold">$110.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Virtual pass</span><span class="fw-semibold">$106.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Recording pass</span><span class="fw-semibold">$64.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
We measure success by how many attendees come back and tell their friends. Virtual passes let you join the main stage live from anywhere. Every attendee receives a certificate of participation. Sponsors meet decision-makers in a relaxed, friendly setting.
This week
The venue is a short walk from the station and fully accessible. Group tickets include a private meeting room for your team. Three days of keynotes, hands-on workshops and evening meetups.
Later
Early bird tickets save you up to forty percent until the end of the month. Friendly people answer your questions quickly, by phone, chat or email. More than eighty speakers share what they have learned the hard way.
<div class="card">
<div class="card-header">
<nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
<a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
</nav>
</div>
<div class="card-body p-0">
<div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1206" class="pb-3">
<h3 class="h6">Today</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. Virtual passes let you join the main stage live from anywhere. Every attendee receives a certificate of participation. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">The venue is a short walk from the station and fully accessible. Group tickets include a private meeting room for your team. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. Friendly people answer your questions quickly, by phone, chat or email. More than eighty speakers share what they have learned the hard way.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-bs-theme="dark"</code>.
Launch
Our evening party is the best place to turn talks into friendships. Thousands of attendees already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.
Orbit
Start in minutes and get help from a real person whenever you need it. Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way. Early bird tickets save you up to forty percent until the end of the month.
Landing
Virtual passes let you join the main stage live from anywhere. Our evening party is the best place to turn talks into friendships. We keep things simple, so you can focus on what matters to you.
<div data-bs-theme="dark" class="bg-dark text-body rounded p-3">
<nav id="spy-nav-1209" class="nav nav-pills mb-2">
<a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
</nav>
<div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1210" class="pb-3">
<h3 class="h6">Launch</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. Thousands of attendees already trust us, and we work hard to keep it that way. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Our evening party is the best place to turn talks into friendships. We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 May 28, 2026
- NewWe measure success by how many attendees come back and tell their friends.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedClear prices, honest advice and no surprises along the way.
v3.1 Sep 20, 2026
- NewEvery attendee receives a certificate of participation.
- ImprovedWe listen first, then build a plan around what you actually need.
- FixedSponsors meet decision-makers in a relaxed, friendly setting.
v3.0 Sep 21, 2025
- NewOur team has done this many times, so you never have to guess.
- ImprovedGroup tickets include a private meeting room for your team.
- FixedStart in minutes and get help from a real person whenever you need it.
v2.9 Jul 9, 2026
- NewThree days of keynotes, hands-on workshops and evening meetups.
- ImprovedFriendly people answer your questions quickly, by phone, chat or email.
- FixedThe venue is a short walk from the station and fully accessible.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">May 28, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many attendees come back and tell their friends.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every detail is handled by people who care about getting it right.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Sep 20, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every attendee receives a certificate of participation.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We listen first, then build a plan around what you actually need.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Sponsors meet decision-makers in a relaxed, friendly setting.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 21, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Group tickets include a private meeting room for your team.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Start in minutes and get help from a real person whenever you need it.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jul 9, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Three days of keynotes, hands-on workshops and evening meetups.</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>The venue is a short walk from the station and fully accessible.</li>
</ul>
</div>
</div>
</div>
</div>