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
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Thousands of attendees already trust us, and we work hard to keep it that way. Every session is recorded, so you can catch up on anything you missed.
Our evening party is the best place to turn talks into friendships. The venue is a short walk from the station and fully accessible. The networking app helps you meet the right people before you arrive.
Details
Early bird tickets save you up to forty percent until the end of the month. Start in minutes and get help from a real person whenever you need it. 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.
Every attendee receives a certificate of participation. Workshops are limited to thirty seats, so everyone gets hands-on time. Virtual passes let you join the main stage live from anywhere.
Pricing
Our team has done this many times, so you never have to guess. Three days of keynotes, hands-on workshops and evening meetups. Every detail is handled by people who care about getting it right.
Sponsors meet decision-makers in a relaxed, friendly setting. We measure success by how many attendees come back and tell their friends. More than eighty speakers share what they have learned the hard way. Every detail is handled by people who care about getting it right.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Sageis Flow</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">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Thousands of attendees already trust us, and we work hard to keep it that way. Every session is recorded, so you can catch up on anything you missed.</p>
<p class="small">Our evening party is the best place to turn talks into friendships. The venue is a short walk from the station and fully accessible. The networking app helps you meet the right people before you arrive.</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. Start in minutes and get help from a real person whenever you need it. 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>
<p class="small">Every attendee receives a certificate of participation. Workshops are limited to thirty seats, so everyone gets hands-on time. Virtual passes let you join the main stage live from anywhere.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<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. Every detail is handled by people who care about getting it right.</p>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. We measure success by how many attendees come back and tell their friends. More than eighty speakers share what they have learned the hard way. Every detail is handled by people who care about getting it right.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
We measure success by how many attendees come back and tell their friends. The networking app helps you meet the right people before you arrive. Clear prices, honest advice and no surprises along the way. Three days of keynotes, hands-on workshops and evening meetups.
Step two
Virtual passes let you join the main stage live from anywhere. We keep things simple, so you can focus on what matters to you. Group tickets include a private meeting room for your team.
Step three
We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. 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.
Step four
Every attendee receives a certificate of participation. 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. Thousands of attendees already trust us, and we work hard to keep it that way.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. The networking app helps you meet the right people before you arrive. Clear prices, honest advice and no surprises along the way. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. We keep things simple, so you can focus on what matters to you. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. 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-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Every attendee receives a certificate of participation. 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. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Venue booking
Sponsors meet decision-makers in a relaxed, friendly setting. Workshops are limited to thirty seats, so everyone gets hands-on time. The venue is a short walk from the station and fully accessible. More than eighty speakers share what they have learned the hard way.
Live streaming
Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting. Virtual passes let you join the main stage live from anywhere. Thousands of attendees already trust us, and we work hard to keep it that way.
Sponsorship
Start in minutes and get help from a real person whenever you need it. Every attendee receives a certificate of participation. We listen first, then build a plan around what you actually need.
Questions
Three days of keynotes, hands-on workshops and evening meetups. Early bird tickets save you up to forty percent until the end of the month. 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.
<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">Venue booking</a><a class="nav-link" href="#spy-1132">Live streaming</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-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">Venue booking</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. Workshops are limited to thirty seats, so everyone gets hands-on time. The venue is a short walk from the station and fully accessible. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Live streaming</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. Sponsors meet decision-makers in a relaxed, friendly setting. Virtual passes let you join the main stage live from anywhere. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Sponsorship</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. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. Early bird tickets save you up to forty percent until the end of the month. 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.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
The venue is a short walk from the station and fully accessible. Every detail is handled by people who care about getting it right. Group tickets include a private meeting room for your team.
Install
Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We measure success by how many attendees come back and tell their friends.
Configure
Our evening party is the best place to turn talks into friendships. More than eighty speakers share what they have learned the hard way. Workshops are limited to thirty seats, so everyone gets hands-on time. Our team has done this many times, so you never have to guess.
Usage
The networking app helps you meet the right people before you arrive. Every session is recorded, so you can catch up on anything you missed. The networking app helps you meet the right people before you arrive.
Examples
Our evening party is the best place to turn talks into friendships. We measure success by how many attendees come back and tell their friends. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#spy-1136">Getting started</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
</nav>
<a class="nav-link" href="#spy-1139">Usage</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1136" class="pb-3">
<h3 class="h6">Getting started</h3>
<p class="small">The venue is a short walk from the station and fully accessible. Every detail is handled by people who care about getting it right. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</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. Workshops are limited to thirty seats, so everyone gets hands-on time. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1139" class="pb-3">
<h3 class="h6">Usage</h3>
<p class="small">The networking app helps you meet the right people before you arrive. Every session is recorded, so you can catch up on anything you missed. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. We measure success by how many attendees come back and tell their friends. 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>
</div>
</div>5List group
List group items as the spy menu - clear active state with no extra styling.
Morning
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. 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.
Midday
Every detail is handled by people who care about getting it right. More than eighty speakers share what they have learned the hard way. Workshops are limited to thirty seats, so everyone gets hands-on time. Group tickets include a private meeting room for your team.
Afternoon
Start in minutes and get help from a real person whenever you need it. The venue is a short walk from the station and fully accessible. Every attendee receives a certificate of participation. We listen first, then build a plan around what you actually need.
Evening
Sponsors meet decision-makers in a relaxed, friendly setting. We keep things simple, so you can focus on what matters to you. Three days of keynotes, hands-on workshops and evening meetups.
<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">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. 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.</p>
</div>
<div id="spy-1143" class="pb-3">
<h3 class="h6">Midday</h3>
<p class="small">Every detail is handled by people who care about getting it right. More than eighty speakers share what they have learned the hard way. Workshops are limited to thirty seats, so everyone gets hands-on time. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1144" class="pb-3">
<h3 class="h6">Afternoon</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. The venue is a short walk from the station and fully accessible. Every attendee receives a certificate of participation. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<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. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
</div>
</div>
</div>6Simple anchors
Any links work as targets; style the active one with a scoped class.
Alpha
We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.
Beta
Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way. Every session is recorded, so you can catch up on anything you missed. Thousands of attendees already trust us, and we work hard to keep it that way.
Gamma
Every detail is handled by people who care about getting it right. Sponsors meet decision-makers in a relaxed, friendly setting. Group tickets include a private meeting room for your team.
<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">We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way. Every session is recorded, so you can catch up on anything you missed. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1149" class="pb-3">
<h3 class="h6">Gamma</h3>
<p class="small">Every detail is handled by people who care about getting it right. Sponsors meet decision-makers in a relaxed, friendly setting. Group tickets include a private meeting room for your team.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
We listen first, then build a plan around what you actually need. Our evening party is the best place to turn talks into friendships. The venue is a short walk from the station and fully accessible. Our team has done this many times, so you never have to guess.
Features
We measure success by how many attendees come back and tell their friends. Virtual passes let you join the main stage live from anywhere. Three days of keynotes, hands-on workshops and evening meetups.
Reviews
Every attendee receives a certificate of participation. Friendly people answer your questions quickly, by phone, chat or email. Early bird tickets save you up to forty percent until the end of the month.
FAQ
The networking app helps you meet the right people before you arrive. We listen first, then build a plan around what you actually need. Early bird tickets save you up to forty percent until the end of the month.
<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
<a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1151" class="pb-3">
<h3 class="h6">Overview</h3>
<p class="small">We listen first, then build a plan around what you actually need. Our evening party is the best place to turn talks into friendships. The venue is a short walk from the station and fully accessible. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</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. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Every attendee receives a certificate of participation. Friendly people answer your questions quickly, by phone, chat or email. 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">The networking app helps you meet the right people before you arrive. We listen first, then build a plan around what you actually need. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Every session is recorded, so you can catch up on anything you missed. We measure success by how many attendees come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Virtual passes let you join the main stage live from anywhere.
Background
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. The venue is a short walk from the station and fully accessible. Friendly people answer your questions quickly, by phone, chat or email.
Method
Group tickets include a private meeting room for your team. Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships.
Results
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. Workshops are limited to thirty seats, so everyone gets hands-on time. 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-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">Every session is recorded, so you can catch up on anything you missed. We measure success by how many attendees come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Virtual passes let you join the main stage live from anywhere.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">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. The venue is a short walk from the station and fully accessible. Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div id="spy-1158" class="pb-3">
<h3 class="h6">Method</h3>
<p class="small">Group tickets include a private meeting room for your team. Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships.</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. More than eighty speakers share what they have learned the hard way. Workshops are limited to thirty seats, so everyone gets hands-on time. 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
Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive.
Set up your profile
Three days of keynotes, hands-on workshops and evening meetups. Every attendee receives a certificate of participation. Thousands of attendees already trust us, and we work hard to keep it that way.
Invite the team
Virtual passes let you join the main stage live from anywhere. Our team has done this many times, so you never have to guess. Every session is recorded, so you can catch up on anything you missed.
Go live
Every detail is handled by people who care about getting it right. More than eighty speakers share what they have learned the hard way. The venue is a short walk from the station and fully accessible.
<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">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. Every attendee receives a certificate of participation. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Our team has done this many times, so you never have to guess. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</h3>
<p class="small">Every detail is handled by people who care about getting it right. More than eighty speakers share what they have learned the hard way. The venue is a short walk from the station and fully accessible.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
Our favourite tips for busy weeks
The networking app helps you meet the right people before you arrive. 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.
A beginner's guide to getting started
Group tickets include a private meeting room for your team. Friendly people answer your questions quickly, by phone, chat or email. Workshops are limited to thirty seats, so everyone gets hands-on time.
Looking back at a busy season
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. Our evening party is the best place to turn talks into friendships.
Behind the scenes: building the stage
We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.
<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">The networking app helps you meet the right people before you arrive. 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.</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 getting started</h3>
<p class="small mb-0">Group tickets include a private meeting room for your team. Friendly people answer your questions quickly, by phone, chat or email. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
<div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
<span class="badge text-bg-primary mb-2">2025</span>
<h3 class="h6">Looking back at a busy season</h3>
<p class="small mb-0">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. Our evening party is the best place to turn talks into friendships.</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">Behind the scenes: building the stage</h3>
<p class="small mb-0">We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
</div>
</div>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- How to get the most out of a conference?
- Sponsors meet decision-makers in a relaxed, friendly setting.
- What our attendees asked us most?
- The venue is a short walk from the station and fully accessible.
- Joining online: how the virtual pass works?
- Thousands of attendees already trust us, and we work hard to keep it that way.
Shipping
- Ten talks you should not miss this year?
- Every session is recorded, so you can catch up on anything you missed.
- How to choose the right ticket?
- We listen first, then build a plan around what you actually need.
- Highlights from last year's workshops?
- The networking app helps you meet the right people before you arrive.
Returns
- Announcing our first keynote speakers?
- Virtual passes let you join the main stage live from anywhere.
- Five things we learned this year?
- Three days of keynotes, hands-on workshops and evening meetups.
- A guide to the city for visiting attendees?
- Group tickets include a private meeting room for your team.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">How to get the most out of a conference?</dt>
<dd class="small text-body-secondary">Sponsors meet decision-makers in a relaxed, friendly setting.</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>
<dt class="small">Joining online: how the virtual pass works?</dt>
<dd class="small text-body-secondary">Thousands of attendees already trust us, and we work hard to keep it that way.</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">Ten talks you should not miss this year?</dt>
<dd class="small text-body-secondary">Every session is recorded, so you can catch up on anything you missed.</dd>
<dt class="small">How to choose the right ticket?</dt>
<dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
<dt class="small">Highlights from last year's workshops?</dt>
<dd class="small text-body-secondary">The networking app helps you meet the right people before you arrive.</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">Announcing our first keynote speakers?</dt>
<dd class="small text-body-secondary">Virtual passes let you join the main stage live from anywhere.</dd>
<dt class="small">Five things we learned this year?</dt>
<dd class="small text-body-secondary">Three days of keynotes, hands-on workshops and evening meetups.</dd>
<dt class="small">A guide to the city for visiting attendees?</dt>
<dd class="small text-body-secondary">Group tickets include a private meeting room for your team.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Every attendee receives a certificate of participation. More than eighty speakers share what they have learned the hard way. We measure success by how many attendees come back and tell their friends. We keep things simple, so you can focus on what matters to you.
Battery
Friendly people answer your questions quickly, by phone, chat or email. Workshops are limited to thirty seats, so everyone gets hands-on time. Early bird tickets save you up to forty percent until the end of the month. Our evening party is the best place to turn talks into friendships.
Connectivity
Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.
Security
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. Every detail is handled by people who care about getting it right.
<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">Every attendee receives a certificate of participation. More than eighty speakers share what they have learned the hard way. We measure success by how many attendees come back and tell their friends. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. Workshops are limited to thirty seats, so everyone gets hands-on time. Early bird tickets save you up to forty percent until the end of the month. Our evening party is the best place to turn talks into friendships.</p>
</div>
<div id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</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. Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$12.96 / mo
- Networking lounges
- Networking lounges
- Mobile agenda
Team
$39.94 / mo
- World-class speakers
- Mobile agenda
- Hands-on workshops
Business
$52.45 / mo
- Mobile agenda
- Recorded sessions
- 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-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">$12.96<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Networking lounges</li>
<li>Networking lounges</li>
<li>Mobile agenda</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">$39.94<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>World-class speakers</li>
<li>Mobile agenda</li>
<li>Hands-on workshops</li>
</ul>
</div>
</div>
<div id="spy-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$52.45<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Mobile agenda</li>
<li>Recorded sessions</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: What we learned from last year's feedback
Workshops are limited to thirty seats, so everyone gets hands-on time. Virtual passes let you join the main stage live from anywhere. We listen first, then build a plan around what you actually need.
The networking app helps you meet the right people before you arrive. Three days of keynotes, hands-on workshops and evening meetups. Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships.
Chapter 2: What makes a panel worth watching
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. Sponsors meet decision-makers in a relaxed, friendly setting.
We measure success by how many attendees come back and tell their friends. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.
Chapter 3: How to pitch a talk that gets accepted
Our team has done this many times, so you never have to guess. Group tickets include a private meeting room for your team. 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. Our evening party is the best place to turn talks into friendships. We measure success by how many attendees come back and tell their friends. Group tickets include a private meeting room for your team.
Chapter 4: The small habits that make a big difference
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. The networking app helps you meet the right people before you arrive. Every attendee receives a certificate of participation.
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. 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.
<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: What we learned from last year's feedback</h3>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Virtual passes let you join the main stage live from anywhere. We listen first, then build a plan around what you actually need.</p>
<p class="small">The networking app helps you meet the right people before you arrive. Three days of keynotes, hands-on workshops and evening meetups. Every attendee receives a certificate of participation. Our evening party is the best place to turn talks into friendships.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: What makes a panel worth watching</h3>
<p class="small">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. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
<p class="small">We measure success by how many attendees come back and tell their friends. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1186" class="pb-3">
<h3 class="h6">Chapter 3: How to pitch a talk that gets accepted</h3>
<p class="small">Our team has done this many times, so you never have to guess. Group tickets include a private meeting room for your team. Start in minutes and get help from a real person whenever you need it.</p>
<p class="small">Every session is recorded, so you can catch up on anything you missed. Our evening party is the best place to turn talks into friendships. We measure success by how many attendees come back and tell their friends. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: The small habits that make a big difference</h3>
<p class="small">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. The networking app helps you meet the right people before you arrive. Every attendee receives a certificate of participation.</p>
<p class="small">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. 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>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
The venue is a short walk from the station and fully accessible. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Early bird tickets save you up to forty percent until the end of the month.
Notifications
Three days of keynotes, hands-on workshops and evening meetups. More than eighty speakers share what they have learned the hard way. We keep things simple, so you can focus on what matters to you. Sponsors meet decision-makers in a relaxed, friendly setting.
Privacy
Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. Every session is recorded, so you can catch up on anything you missed.
<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="Isla Mensah">
</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="Prague">
</div>
<p class="small">The venue is a short walk from the station and fully accessible. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Early bird tickets save you up to forty percent until the end of the month.</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">Three days of keynotes, hands-on workshops and evening meetups. More than eighty speakers share what they have learned the hard 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 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">Workshops are limited to thirty seats, so everyone gets hands-on time. Clear prices, honest advice and no surprises along the way. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
</div>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Finance
- Maya IbrahimCustomer Success
- Diego PatelData Analyst
- Nora WhitakerContent Writer
Legal
- Freya HughesData Analyst
- Ruby KimData Analyst
- Hana AshfordOperations Manager
Human Resources
- Luna NguyenBackend Engineer
- Sofia HarlowProduct Designer
- Ella RossiProject Manager
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Human Resources</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1198" class="pb-3">
<h3 class="h6">Finance</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Maya Ibrahim"><div><div class="small fw-semibold">Maya Ibrahim</div><div class="small text-body-secondary">Customer Success</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Diego Patel"><div><div class="small fw-semibold">Diego Patel</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Nora Whitaker"><div><div class="small fw-semibold">Nora Whitaker</div><div class="small text-body-secondary">Content Writer</div></div></li>
</ul>
</div>
<div id="spy-1199" 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-8.svg" class="rounded-circle" width="36" height="36" alt="Freya Hughes"><div><div class="small fw-semibold">Freya Hughes</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Ruby Kim"><div><div class="small fw-semibold">Ruby Kim</div><div class="small text-body-secondary">Data Analyst</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Hana Ashford"><div><div class="small fw-semibold">Hana Ashford</div><div class="small text-body-secondary">Operations Manager</div></div></li>
</ul>
</div>
<div id="spy-1200" class="pb-3">
<h3 class="h6">Human Resources</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Luna Nguyen"><div><div class="small fw-semibold">Luna Nguyen</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Sofia Harlow"><div><div class="small fw-semibold">Sofia Harlow</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="Ella Rossi"><div><div class="small fw-semibold">Ella Rossi</div><div class="small text-body-secondary">Project Manager</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Panel
- Speaker dinner$113.99
- Evening meetup$27.00
- VIP pass$988.99
Meetup
- Evening meetup$24.00
- Student pass$151.99
- VIP pass$989.00
Keynote
- Panel day ticket$190.99
- Evening meetup$22.99
- Student pass$149.00
<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
<a class="nav-link" href="#spy-1202">Panel</a><a class="nav-link" href="#spy-1203">Meetup</a><a class="nav-link" href="#spy-1204">Keynote</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">Panel</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">$113.99</span></li>
<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">$988.99</span></li>
</ul>
</div>
<div id="spy-1203" 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">$24.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Student pass</span><span class="fw-semibold">$151.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>VIP pass</span><span class="fw-semibold">$989.00</span></li>
</ul>
</div>
<div id="spy-1204" class="pb-3">
<h3 class="h6">Keynote</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Panel day ticket</span><span class="fw-semibold">$190.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Evening meetup</span><span class="fw-semibold">$22.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Student pass</span><span class="fw-semibold">$149.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
We listen first, then build a plan around what you actually need. Virtual passes let you join the main stage live from anywhere. Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way.
This week
Every attendee receives a certificate of participation. Thousands of attendees already trust us, and we work hard to keep it that way. Early bird tickets save you up to forty percent until the end of the month. Our team has done this many times, so you never have to guess.
Later
Clear prices, honest advice and no surprises along the way. The venue is a short walk from the station and fully accessible. Our evening party is the best place to turn talks into friendships.
<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">We listen first, then build a plan around what you actually need. Virtual passes let you join the main stage live from anywhere. Workshops are limited to thirty seats, so everyone gets hands-on time. More than eighty speakers share what they have learned the hard way.</p>
</div>
<div id="spy-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Every attendee receives a certificate of participation. Thousands of attendees already trust us, and we work hard to keep it that way. Early bird tickets save you up to forty percent until the end of the month. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. The venue is a short walk from the station and fully accessible. Our evening party is the best place to turn talks into friendships.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive. Start in minutes and get help from a real person whenever you need it.
Orbit
Sponsors meet decision-makers in a relaxed, friendly setting. Friendly people answer your questions quickly, by phone, chat or email. Three days of keynotes, hands-on workshops and evening meetups. We measure success by how many attendees come back and tell their friends.
Landing
We keep things simple, so you can focus on what matters to you. Group tickets include a private meeting room for your team. More than eighty speakers share what they have learned the hard 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">Every detail is handled by people who care about getting it right. The networking app helps you meet the right people before you arrive. Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Sponsors meet decision-makers in a relaxed, friendly setting. Friendly people answer your questions quickly, by phone, chat or email. Three days of keynotes, hands-on workshops and evening meetups. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">We keep things simple, so you can focus on what matters to you. Group tickets include a private meeting room for your team. More than eighty speakers share what they have learned the hard way.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Dec 6, 2025
- NewThe venue is a short walk from the station and fully accessible.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedWe measure success by how many attendees come back and tell their friends.
v3.1 Feb 8, 2026
- NewClear prices, honest advice and no surprises along the way.
- ImprovedWe listen first, then build a plan around what you actually need.
- FixedSponsors meet decision-makers in a relaxed, friendly setting.
v3.0 Jun 8, 2026
- NewVirtual passes let you join the main stage live from anywhere.
- ImprovedStart in minutes and get help from a real person whenever you need it.
- FixedWe keep things simple, so you can focus on what matters to you.
v2.9 Feb 10, 2026
- NewOur evening party is the best place to turn talks into friendships.
- ImprovedThe networking app helps you meet the right people before you arrive.
- FixedOur team has done this many times, so you never have to guess.
<div class="row g-3">
<div class="col-3">
<nav id="spy-nav-1213" class="nav nav-pills flex-column small">
<a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
</nav>
</div>
<div class="col-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1214" class="pb-3">
<h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Dec 6, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>The venue is a short walk from the station and fully accessible.</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>We measure success by how many attendees come back and tell their friends.</li>
</ul>
</div>
<div id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Feb 8, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</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">Jun 8, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Virtual passes let you join the main stage live from anywhere.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start in minutes and get help from a real person whenever you need it.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Feb 10, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our evening party is the best place to turn talks into friendships.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The networking app helps you meet the right people before you arrive.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
</ul>
</div>
</div>
</div>
</div>