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
Thousands of attendees already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Sponsors meet decision-makers in a relaxed, friendly setting.
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. Clear prices, honest advice and no surprises along the way.
Details
We measure success by how many attendees come back and tell their friends. Group tickets include a private meeting room for your team. Every detail is handled by people who care about getting it right. Early bird tickets save you up to forty percent until the end of the month.
More than eighty speakers share what they have learned the hard way. Our evening party is the best place to turn talks into friendships. The venue is a short walk from the station and fully accessible. We listen first, then build a plan around what you actually need.
Pricing
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. We keep things simple, so you can focus on what matters to you.
Workshops are limited to thirty seats, so everyone gets hands-on time. Every session is recorded, so you can catch up on anything you missed. Three days of keynotes, hands-on workshops and evening meetups. Every attendee receives a certificate of participation.
<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
<a class="navbar-brand" href="#">Xenoara</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">Thousands of attendees already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
<p class="small">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. Clear prices, honest advice and no surprises along the way.</p>
</div>
<div id="spy-1123" class="pb-3">
<h3 class="h6">Details</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. Every detail is handled by people who care about getting it right. Early bird tickets save you up to forty percent until the end of the month.</p>
<p class="small">More than eighty speakers share what they have learned the hard way. Our evening party is the best place to turn talks into friendships. The venue is a short walk from the station and fully accessible. We listen first, then build a plan around what you actually need.</p>
</div>
<div id="spy-1124" class="pb-3">
<h3 class="h6">Pricing</h3>
<p class="small">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. We keep things simple, so you can focus on what matters to you.</p>
<p class="small">Workshops are limited to thirty seats, so everyone gets hands-on time. Every session is recorded, so you can catch up on anything you missed. Three days of keynotes, hands-on workshops and evening meetups. Every attendee receives a certificate of participation.</p>
</div>
</div>2Horizontal pills
A row of pills above the box tracks the four steps.
Step one
Virtual passes let you join the main stage live from anywhere. 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.
Step two
Thousands of attendees already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Early bird tickets save you up to forty percent until the end of the month. Three days of keynotes, hands-on workshops and evening meetups.
Step three
Every attendee receives a certificate of participation. Every detail is handled by people who care about getting it right. Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time.
Step four
Every session is recorded, so you can catch up on anything you missed. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many attendees come back and tell their friends.
<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
<a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1126" class="pb-3">
<h3 class="h6">Step one</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. 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.</p>
</div>
<div id="spy-1127" class="pb-3">
<h3 class="h6">Step two</h3>
<p class="small">Thousands of attendees already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Early bird tickets save you up to forty percent until the end of the month. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1128" class="pb-3">
<h3 class="h6">Step three</h3>
<p class="small">Every attendee receives a certificate of participation. Every detail is handled by people who care about getting it right. Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
<div id="spy-1129" class="pb-3">
<h3 class="h6">Step four</h3>
<p class="small">Every session is recorded, so you can catch up on anything you missed. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many attendees come back and tell their friends.</p>
</div>
</div>3Vertical pills
A column of pills beside the content; on phones the menu sits above.
Sponsorship
We listen first, then build a plan around what you actually need. Our evening party is the best place to turn talks into friendships. Clear prices, honest advice and no surprises along the way. Sponsors meet decision-makers in a relaxed, friendly setting.
Speaker management
The networking app helps you meet the right people before you arrive. 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. Virtual passes let you join the main stage live from anywhere.
Venue booking
Sponsors meet decision-makers in a relaxed, friendly setting. Start in minutes and get help from a real person whenever you need it. The networking app helps you meet the right people before you arrive.
Questions
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. More than eighty speakers share what they have learned the hard way.
<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">Sponsorship</a><a class="nav-link" href="#spy-1132">Speaker management</a><a class="nav-link" href="#spy-1133">Venue booking</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">Sponsorship</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. Clear prices, honest advice and no surprises along the way. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
<div id="spy-1132" class="pb-3">
<h3 class="h6">Speaker management</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. We keep things simple, so you can focus on what matters to you. Virtual passes let you join the main stage live from anywhere.</p>
</div>
<div id="spy-1133" class="pb-3">
<h3 class="h6">Venue booking</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. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1134" class="pb-3">
<h3 class="h6">Questions</h3>
<p class="small">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. More than eighty speakers share what they have learned the hard way.</p>
</div>
</div>
</div>
</div>4Nested navigation
Sub-items are indented under their parent and both highlight while you scroll.
Getting started
Every detail is handled by people who care about getting it right. Workshops are limited to thirty seats, so everyone gets hands-on time. 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.
Install
Three days of keynotes, hands-on workshops and evening meetups. Our evening party is the best place to turn talks into friendships. Every attendee receives a certificate of participation.
Configure
Group tickets include a private meeting room for your team. Thousands of attendees already trust us, and we work hard to keep it that way. 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.
Usage
The venue is a short walk from the station and fully accessible. Clear prices, honest advice and no surprises along the way. Every session is recorded, so you can catch up on anything you missed.
Examples
Friendly people answer your questions quickly, by phone, chat or email. 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">Every detail is handled by people who care about getting it right. Workshops are limited to thirty seats, so everyone gets hands-on time. 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.</p>
</div>
<div id="spy-1137" class="pb-3">
<h3 class="h6">Install</h3>
<p class="small">Three days of keynotes, hands-on workshops and evening meetups. Our evening party is the best place to turn talks into friendships. Every attendee receives a certificate of participation.</p>
</div>
<div id="spy-1138" class="pb-3">
<h3 class="h6">Configure</h3>
<p class="small">Group tickets include a private meeting room for your team. Thousands of attendees already trust us, and we work hard to keep it that way. 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-1139" class="pb-3">
<h3 class="h6">Usage</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. Every session is recorded, so you can catch up on anything you missed.</p>
</div>
<div id="spy-1140" class="pb-3">
<h3 class="h6">Examples</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. 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
We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. The venue is a short walk from the station and fully accessible. Three days of keynotes, hands-on workshops and evening meetups.
Midday
The networking app helps you meet the right people before you arrive. Sponsors meet decision-makers in a relaxed, friendly setting. More than eighty speakers share what they have learned the hard way.
Afternoon
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. 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.
Evening
Group tickets include a private meeting room for your team. 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.
<div class="row g-3">
<div class="col-sm-4">
<div id="spy-nav-1141" class="list-group">
<a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
</div>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1142" class="pb-3">
<h3 class="h6">Morning</h3>
<p class="small">We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. The venue is a short walk from the station and fully accessible. 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">The networking app helps you meet the right people before you arrive. Sponsors meet decision-makers in a relaxed, friendly setting. More than eighty speakers share what they have learned the hard way.</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. 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. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1145" class="pb-3">
<h3 class="h6">Evening</h3>
<p class="small">Group tickets include a private meeting room for your team. 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.</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. Virtual passes let you join the main stage live from anywhere. Every detail is handled by people who care about getting it right. We measure success by how many attendees come back and tell their friends.
Beta
Every attendee receives a certificate of participation. Clear prices, honest advice and no surprises along the way. Workshops are limited to thirty seats, so everyone gets hands-on time.
Gamma
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. Start in minutes and get help from a real person whenever you need it. Three days of keynotes, hands-on workshops and evening meetups.
<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. Virtual passes let you join the main stage live from anywhere. Every detail is handled by people who care about getting it right. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1148" class="pb-3">
<h3 class="h6">Beta</h3>
<p class="small">Every attendee receives a certificate of participation. Clear prices, honest advice and no surprises along the way. Workshops are limited to thirty seats, so everyone gets hands-on time.</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. Every session is recorded, so you can catch up on anything you missed. Start in minutes and get help from a real person whenever you need it. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
</div>
</div>
</div>7Underline tabs
An underline nav as a sticky-looking section switcher above a product page.
Overview
We keep things simple, so you can focus on what matters to you. Every attendee receives a certificate of participation. Virtual passes let you join the main stage live from anywhere.
Features
Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive. Thousands of attendees already trust us, and we work hard to keep it that way. We measure success by how many attendees come back and tell their friends.
Reviews
Group tickets include a private meeting room for your team. We listen first, then build a plan around what you actually need. The venue is a short walk from the station and fully accessible. More than eighty speakers share what they have learned the hard way.
FAQ
Early bird tickets save you up to forty percent until the end of the month. Every detail is handled by people who care about getting it right. Sponsors meet decision-makers in a relaxed, friendly setting.
<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 keep things simple, so you can focus on what matters to you. Every attendee receives a certificate of participation. Virtual passes let you join the main stage live from anywhere.</p>
</div>
<div id="spy-1152" class="pb-3">
<h3 class="h6">Features</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. Thousands of attendees already trust us, and we work hard to keep it that way. We measure success by how many attendees come back and tell their friends.</p>
</div>
<div id="spy-1153" class="pb-3">
<h3 class="h6">Reviews</h3>
<p class="small">Group tickets include a private meeting room for your team. We listen first, then build a plan around what you actually need. 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-1154" class="pb-3">
<h3 class="h6">FAQ</h3>
<p class="small">Early bird tickets save you up to forty percent until the end of the month. Every detail is handled by people who care about getting it right. Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
</div>8Table of contents on the right
Documentation layout: content first, a small contents list on the right on larger screens.
Summary
Our evening party is the best place to turn talks into friendships. Virtual passes let you join the main stage live from anywhere. Our team has done this many times, so you never have to guess.
Background
Clear prices, honest advice and no surprises along the 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.
Method
Sponsors meet decision-makers in a relaxed, friendly setting. 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.
Results
We listen first, then build a plan around what you actually need. Thousands of attendees already trust us, and we work hard to keep it that way. The venue is a short walk from the station and fully accessible.
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">Our evening party is the best place to turn talks into friendships. Virtual passes let you join the main stage live from anywhere. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1157" class="pb-3">
<h3 class="h6">Background</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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-1158" class="pb-3">
<h3 class="h6">Method</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. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
<div id="spy-1159" class="pb-3">
<h3 class="h6">Results</h3>
<p class="small">We listen first, then build a plan around what you actually need. Thousands of attendees already trust us, and we work hard to keep it that way. The venue is a short walk from the station and fully accessible.</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
Every session is recorded, so you can catch up on anything you missed. We keep things simple, so you can focus on what matters to you. Every attendee receives a certificate of participation.
Set up your profile
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. Three days of keynotes, hands-on workshops and evening meetups.
Invite the team
We measure success by how many attendees come back and tell their friends. Our evening party is the best place to turn talks into friendships. Group tickets include a private meeting room for your team.
Go live
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. Virtual passes let you join the main stage live from anywhere. Start in minutes and get help from a real person whenever you need it.
<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">Every session is recorded, so you can catch up on anything you missed. We keep things simple, so you can focus on what matters to you. Every attendee receives a certificate of participation.</p>
</div>
<div id="spy-1162" class="pb-3">
<h3 class="h6">Set up your profile</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. Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
<div id="spy-1163" class="pb-3">
<h3 class="h6">Invite the team</h3>
<p class="small">We measure success by how many attendees come back and tell their friends. Our evening party is the best place to turn talks into friendships. Group tickets include a private meeting room for your team.</p>
</div>
<div id="spy-1164" class="pb-3">
<h3 class="h6">Go live</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. Virtual passes let you join the main stage live from anywhere. Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
</div>
</div>10Timeline by year
Year buttons follow a scrolling company timeline.
A beginner's guide to getting started
Thousands of attendees already trust us, and we work hard to keep it that way. Group tickets include a private meeting room for your team. Three days of keynotes, hands-on workshops and evening meetups.
Looking back at a busy season
Friendly people answer your questions quickly, by phone, chat or email. Every attendee receives a certificate of participation. More than eighty speakers share what they have learned the hard way. The venue is a short walk from the station and fully accessible.
What makes a panel worth watching
The networking app helps you meet the right people before you arrive. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.
Five things we learned this year
Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Every session is recorded, so you can catch up on anything you missed.
<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">A beginner's guide to getting started</h3>
<p class="small mb-0">Thousands of attendees already trust us, and we work hard to keep it that way. 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-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">Looking back at a busy season</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Every attendee receives a certificate of participation. 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 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">What makes a panel worth watching</h3>
<p class="small mb-0">The networking app helps you meet the right people before you arrive. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
</div>
<div id="spy-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">Five things we learned this year</h3>
<p class="small mb-0">Our team has done this many times, so you never have to guess. 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>11FAQ sections
Question groups in a scrollable panel with topic links.
Orders
- How to get the most out of a conference?
- Workshops are limited to thirty seats, so everyone gets hands-on time.
- Joining online: how the virtual pass works?
- Our evening party is the best place to turn talks into friendships.
- A guide to the city for visiting attendees?
- Early bird tickets save you up to forty percent until the end of the month.
Shipping
- Our favourite tips for busy weeks?
- Sponsors meet decision-makers in a relaxed, friendly setting.
- Announcing our first keynote speakers?
- Workshops are limited to thirty seats, so everyone gets hands-on time.
- How to choose the right ticket?
- The networking app helps you meet the right people before you arrive.
Returns
- Highlights from last year's workshops?
- More than eighty speakers share what they have learned the hard way.
- Ten talks you should not miss this year?
- We measure success by how many attendees come back and tell their friends.
- The small habits that make a big difference?
- Every attendee receives a certificate of participation.
<div class="row g-3">
<div class="col-sm-3">
<nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
<a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
</nav>
</div>
<div class="col-sm-9">
<div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1171" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
<dl>
<dt class="small">How to get the most out of a conference?</dt>
<dd class="small text-body-secondary">Workshops are limited to thirty seats, so everyone gets hands-on time.</dd>
<dt class="small">Joining online: how the virtual pass works?</dt>
<dd class="small text-body-secondary">Our evening party is the best place to turn talks into friendships.</dd>
<dt class="small">A guide to the city for visiting attendees?</dt>
<dd class="small text-body-secondary">Early bird tickets save you up to forty percent until the end of the month.</dd>
</dl>
</div>
<div id="spy-1172" class="pb-3">
<h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
<dl>
<dt class="small">Our favourite tips for busy weeks?</dt>
<dd class="small text-body-secondary">Sponsors meet decision-makers in a relaxed, friendly setting.</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>
<dt class="small">How to choose the right ticket?</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" aria-hidden="true"></i> Returns</h3>
<dl>
<dt class="small">Highlights from last year's workshops?</dt>
<dd class="small text-body-secondary">More than eighty speakers share what they have learned the hard way.</dd>
<dt class="small">Ten talks you should not miss this year?</dt>
<dd class="small text-body-secondary">We measure success by how many attendees come back and tell their friends.</dd>
<dt class="small">The small habits that make a big difference?</dt>
<dd class="small text-body-secondary">Every attendee receives a certificate of participation.</dd>
</dl>
</div>
</div>
</div>
</div>12Icon menu
Each spy link starts with an icon - nice for spec sheets.
Performance
Our team has done this many times, so you never have to guess. Virtual passes let you join the main stage live from anywhere. Group tickets include a private meeting room for your team. Thousands of attendees already trust us, and we work hard to keep it that way.
Battery
We listen first, then build a plan around what you actually need. 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.
Connectivity
Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. The venue is a short walk from the station and fully accessible. Early bird tickets save you up to forty percent until the end of the month.
Security
Clear prices, honest advice and no surprises along the way. 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.
<div class="row g-3">
<div class="col-sm-4">
<nav id="spy-nav-1174" class="nav nav-pills flex-column">
<a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
</nav>
</div>
<div class="col-sm-8">
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1175" class="pb-3">
<h3 class="h6">Performance</h3>
<p class="small">Our team has done this many times, so you never have to guess. Virtual passes let you join the main stage live from anywhere. Group tickets include a private meeting room for your team. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1176" class="pb-3">
<h3 class="h6">Battery</h3>
<p class="small">We listen first, then build a plan around what you actually need. 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 id="spy-1177" class="pb-3">
<h3 class="h6">Connectivity</h3>
<p class="small">Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email. The venue is a short walk from the station and fully accessible. Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
<div id="spy-1178" class="pb-3">
<h3 class="h6">Security</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. 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>
</div>
</div>13Pricing plans
Spy over a stack of plan cards; the pill row shows which plan is in view.
Starter
$11.37 / mo
- Recorded sessions
- World-class speakers
- Recorded sessions
Team
$49.47 / mo
- Networking lounges
- Networking lounges
- Mobile agenda
Business
$58.30 / mo
- Hands-on workshops
- Recorded sessions
- Networking lounges
<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">$11.37<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Recorded sessions</li>
<li>World-class speakers</li>
<li>Recorded sessions</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">$49.47<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-1182" class="card mb-3">
<div class="card-body">
<h3 class="h6 card-title">Business</h3>
<p class="fs-4 fw-bold mb-1">$58.30<small class="fs-6 text-body-secondary"> / mo</small></p>
<ul class="small mb-0">
<li>Hands-on workshops</li>
<li>Recorded sessions</li>
<li>Networking lounges</li>
</ul>
</div>
</div>
</div>14Chapter reader
A reading pane with chapter links in a small dropdown-free list above.
Chapter 1: How to pitch a talk that gets accepted
Our evening party is the best place to turn talks into friendships. Early bird tickets save you up to forty percent until the end of the month. We measure success by how many attendees come back and tell their friends. Every session is recorded, so you can catch up on anything you missed.
Workshops are limited to thirty seats, so everyone gets hands-on time. Virtual passes let you join the main stage live from anywhere. Our evening party is the best place to turn talks into friendships. The networking app helps you meet the right people before you arrive.
Chapter 2: Behind the scenes: building the stage
Start in minutes and get help from a real person whenever you need it. Thousands of attendees already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Three days of keynotes, hands-on workshops and evening meetups.
Friendly people answer your questions quickly, by phone, chat or email. Sponsors meet decision-makers in a relaxed, friendly setting. Every detail is handled by people who care about getting it right.
Chapter 3: What we learned from last year's feedback
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.
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. Every attendee receives a certificate of participation.
Chapter 4: What our attendees asked us most
Clear prices, honest advice and no surprises along the way. Every attendee receives a certificate of participation. The venue is a short walk from the station and fully accessible.
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. Group tickets include a private meeting room for your team.
<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
<a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
<div id="spy-1184" class="pb-3">
<h3 class="h6">Chapter 1: How to pitch a talk that gets accepted</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. Early bird tickets save you up to forty percent until the end of the month. We measure success by how many attendees come back and tell their friends. Every session is recorded, so you can catch up on anything you missed.</p>
<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. Our evening party is the best place to turn talks into friendships. The networking app helps you meet the right people before you arrive.</p>
</div>
<div id="spy-1185" class="pb-3">
<h3 class="h6">Chapter 2: Behind the scenes: building the stage</h3>
<p class="small">Start in minutes and get help from a real person whenever you need it. Thousands of attendees already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Three days of keynotes, hands-on workshops and evening meetups.</p>
<p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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-1186" class="pb-3">
<h3 class="h6">Chapter 3: What we learned from last year's feedback</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>
<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. Every attendee receives a certificate of participation.</p>
</div>
<div id="spy-1187" class="pb-3">
<h3 class="h6">Chapter 4: What our attendees asked us most</h3>
<p class="small">Clear prices, honest advice and no surprises along the way. Every attendee receives a certificate of participation. The venue is a short walk from the station and fully accessible.</p>
<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. Group tickets include a private meeting room for your team.</p>
</div>
</div>15Settings form
A long settings form split into sections with a side menu that follows along.
Profile
Clear prices, honest advice and no surprises along the way. Our evening party is the best place to turn talks into friendships. The networking app helps you meet the right people before you arrive. Workshops are limited to thirty seats, so everyone gets hands-on time.
Notifications
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. Every session is recorded, so you can catch up on anything you missed.
Privacy
We measure success by how many attendees come back and tell their friends. Thousands of attendees already trust us, and we work hard to keep it that way. 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.
<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="Leo Kowalski">
</div>
<div class="mb-2">
<label for="spy-in-1193" class="form-label small">City</label>
<input class="form-control form-control-sm" id="spy-in-1193" value="Dublin">
</div>
<p class="small">Clear prices, honest advice and no surprises along the way. Our evening party is the best place to turn talks into friendships. The networking app helps you meet the right people before you arrive. Workshops are limited to thirty seats, so everyone gets hands-on time.</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">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. Every session is recorded, so you can catch up on anything you missed.</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 measure success by how many attendees come back and tell their friends. Thousands of attendees already trust us, and we work hard to keep it that way. 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>
</div>
</div>16Team directory
Department links track a scrolling list of people.
Design
- Zoe DelgadoHR Partner
- Freya MorganOperations Manager
- Chloe AlvarezMarketing Lead
Legal
- Ivy LindqvistArt Director
- Nora OrtegaHR Partner
- Omar MensahArt Director
Sales
- Lucas KowalskiArt Director
- Theo OkaforFinance Lead
- Zoe QuinnBackend Engineer
<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
<a class="nav-link" href="#spy-1198">Design</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Sales</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">Design</h3>
<ul class="list-unstyled">
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Zoe Delgado"><div><div class="small fw-semibold">Zoe Delgado</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-8.svg" class="rounded-circle" width="36" height="36" alt="Freya Morgan"><div><div class="small fw-semibold">Freya Morgan</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-8.svg" class="rounded-circle" width="36" height="36" alt="Chloe Alvarez"><div><div class="small fw-semibold">Chloe Alvarez</div><div class="small text-body-secondary">Marketing Lead</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-5.svg" class="rounded-circle" width="36" height="36" alt="Ivy Lindqvist"><div><div class="small fw-semibold">Ivy Lindqvist</div><div class="small text-body-secondary">Art Director</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Nora Ortega"><div><div class="small fw-semibold">Nora Ortega</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-12.svg" class="rounded-circle" width="36" height="36" alt="Omar Mensah"><div><div class="small fw-semibold">Omar Mensah</div><div class="small text-body-secondary">Art Director</div></div></li>
</ul>
</div>
<div id="spy-1200" 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-4.svg" class="rounded-circle" width="36" height="36" alt="Lucas Kowalski"><div><div class="small fw-semibold">Lucas Kowalski</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-11.svg" class="rounded-circle" width="36" height="36" alt="Theo Okafor"><div><div class="small fw-semibold">Theo Okafor</div><div class="small text-body-secondary">Finance Lead</div></div></li>
<li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Zoe Quinn"><div><div class="small fw-semibold">Zoe Quinn</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
</ul>
</div>
</div>17Catalogue categories
Category pills over a scrolling price list.
Meetup
- Evening meetup$25.00
- Recording pass$57.00
- Virtual pass$105.00
Webinar
- Virtual pass$101.00
- VIP pass$853.99
- Early bird pass$268.99
Workshop
- Full access pass$529.00
- Evening meetup$26.00
- Speaker dinner$112.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">Webinar</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-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">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">$25.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Recording pass</span><span class="fw-semibold">$57.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Virtual pass</span><span class="fw-semibold">$105.00</span></li>
</ul>
</div>
<div id="spy-1203" class="pb-3">
<h3 class="h6">Webinar</h3>
<ul class="list-unstyled">
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Virtual pass</span><span class="fw-semibold">$101.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>VIP pass</span><span class="fw-semibold">$853.99</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Early bird pass</span><span class="fw-semibold">$268.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>Full access pass</span><span class="fw-semibold">$529.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Evening meetup</span><span class="fw-semibold">$26.00</span></li>
<li class="d-flex justify-content-between border-bottom py-2 small"><span>Speaker dinner</span><span class="fw-semibold">$112.00</span></li>
</ul>
</div>
</div>18Inside a card
Card header pills spy on the scrolling card body.
Today
Three days of keynotes, hands-on workshops and evening meetups. Sponsors meet decision-makers in a relaxed, friendly setting. 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.
This week
Virtual passes let you join the main stage live from anywhere. Clear prices, honest advice and no surprises along the way. Every attendee receives a certificate of participation.
Later
Friendly people answer your questions quickly, by phone, chat or email. The networking app helps you meet the right people before you arrive. 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.
<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">Three days of keynotes, hands-on workshops and evening meetups. Sponsors meet decision-makers in a relaxed, friendly setting. 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-1207" class="pb-3">
<h3 class="h6">This week</h3>
<p class="small">Virtual passes let you join the main stage live from anywhere. Clear prices, honest advice and no surprises along the way. Every attendee receives a certificate of participation.</p>
</div>
<div id="spy-1208" class="pb-3">
<h3 class="h6">Later</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. 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.</p>
</div>
</div>
</div>
</div>19Dark theme
The whole widget inside <code>data-ui-theme="dark"</code>.
Launch
Three days of keynotes, hands-on workshops and evening meetups. Group tickets include a private meeting room for your team. Thousands of attendees already trust us, and we work hard to keep it that way.
Orbit
Our evening party is the best place to turn talks into friendships. 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. Our team has done this many times, so you never have to guess.
Landing
Every detail is handled by people who care about getting it right. Workshops are limited to thirty seats, so everyone gets hands-on time. 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.
<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">Three days of keynotes, hands-on workshops and evening meetups. Group tickets include a private meeting room for your team. Thousands of attendees already trust us, and we work hard to keep it that way.</p>
</div>
<div id="spy-1211" class="pb-3">
<h3 class="h6">Orbit</h3>
<p class="small">Our evening party is the best place to turn talks into friendships. 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. Our team has done this many times, so you never have to guess.</p>
</div>
<div id="spy-1212" class="pb-3">
<h3 class="h6">Landing</h3>
<p class="small">Every detail is handled by people who care about getting it right. Workshops are limited to thirty seats, so everyone gets hands-on time. 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.</p>
</div>
</div>
</div>20Changelog
Version links on the left follow release notes with coloured change badges.
v3.2 Feb 10, 2026
- NewWe measure success by how many attendees come back and tell their friends.
- ImprovedMore than eighty speakers share what they have learned the hard way.
- FixedThe venue is a short walk from the station and fully accessible.
v3.1 May 30, 2026
- NewSponsors meet decision-makers in a relaxed, friendly setting.
- ImprovedEvery detail is handled by people who care about getting it right.
- FixedThree days of keynotes, hands-on workshops and evening meetups.
v3.0 Jan 22, 2026
- NewFriendly people answer your questions quickly, by phone, chat or email.
- ImprovedEvery attendee receives a certificate of participation.
- FixedGroup tickets include a private meeting room for your team.
v2.9 Dec 20, 2025
- NewWorkshops are limited to thirty seats, so everyone gets hands-on time.
- ImprovedOur team has done this many times, so you never have to guess.
- FixedMore than eighty speakers share what they have learned the hard way.
<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">Feb 10, 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>More than eighty speakers share what they have learned the hard way.</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 id="spy-1215" class="pb-3">
<h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">May 30, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Sponsors meet decision-makers in a relaxed, friendly setting.</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>Three days of keynotes, hands-on workshops and evening meetups.</li>
</ul>
</div>
<div id="spy-1216" class="pb-3">
<h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jan 22, 2026</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every attendee receives a certificate of participation.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Group tickets include a private meeting room for your team.</li>
</ul>
</div>
<div id="spy-1217" class="pb-3">
<h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Dec 20, 2025</small></h3>
<ul class="list-unstyled small">
<li class="mb-1"><span class="badge text-bg-success me-1">New</span>Workshops are limited to thirty seats, so everyone gets hands-on time.</li>
<li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our team has done this many times, so you never have to guess.</li>
<li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>More than eighty speakers share what they have learned the hard way.</li>
</ul>
</div>
</div>
</div>
</div>