Joining online: how the virtual pass works
Oct 21, 2025 in Workshop
Colored Links
Colored link helpers tint a link with a theme colour, including hover and focus states, while the link opacity, offset and underline helpers fine-tune how the text and its underline look. Combine them for footers, inline copy, navigation and table actions.
1All link colours
link-* classes for every theme colour, plus link-body-emphasis for high contrast text.
<div class="flex flex-wrap gap-4">
<a href="#" class="link-primary">Primary link</a><a href="#" class="link-secondary">Secondary link</a><a href="#" class="link-success">Success link</a><a href="#" class="link-danger">Danger link</a><a href="#" class="link-warning">Warning link</a><a href="#" class="link-info">Info link</a><a href="#" class="link-light bg-dark px-1 rounded-md">Light link</a><a href="#" class="link-dark">Dark link</a><a href="#" class="link-body-emphasis">Body emphasis link</a>
</div>2Inline links in copy
Links inside a paragraph in the primary colour with an offset, softened underline.
Group tickets include a private meeting room for your team. Read the setup guide or browse the panel section.
<p class="mb-0">Group tickets include a private meeting room for your team. Read the <a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">setup guide</a> or browse the <a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">panel</a> section.</p>3Footer columns
Muted footer links with link-secondary that turn darker with link-body-emphasis on the heading.
<div class="row g-3 small">
<div class="col-6 col-md-3">
<a href="#" class="link-body-emphasis font-semibold no-underline block mb-2">Product</a> <a href="#" class="link-secondary block">Features</a><a href="#" class="link-secondary block">Pricing</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="link-body-emphasis font-semibold no-underline block mb-2">Company</a> <a href="#" class="link-secondary block">About</a><a href="#" class="link-secondary block">Jobs</a>
</div>
</div>4Sidebar navigation
link-body-emphasis for menu items and link-primary for the current page.
<nav aria-label="Account">
<ul class="list-unstyled mb-0 vstack gap-2">
<li><a href="#" class="link-primary font-semibold" aria-current="page" style="text-decoration:none"><i class="bi bi-speedometer2" aria-hidden="true"></i> Dashboard</a></li>
<li><a href="#" class="link-body-emphasis" style="text-decoration:none"><i class="bi bi-receipt" aria-hidden="true"></i> Orders</a></li>
<li><a href="#" class="link-body-emphasis" style="text-decoration:none"><i class="bi bi-people" aria-hidden="true"></i> Customers</a></li>
<li><a href="#" class="link-body-emphasis" style="text-decoration:none"><i class="bi bi-gear" aria-hidden="true"></i> Settings</a></li>
</ul>
</nav>5Danger zone link
link-danger marks destructive actions in a settings panel.
<div class="border border-danger/30 rounded-md p-4">
<h3 class="h6">Danger zone</h3>
<p class="small mb-2">Closing your account removes all Zeni Studio data after 30 days.</p>
<a href="#" class="link-danger link-offset-1 font-semibold"><i class="bi bi-trash" aria-hidden="true"></i> Close account</a>
</div>6Link opacity scale
link-opacity-10 to link-opacity-100 fade the link colour.
<figure class="mb-0">
<div inert>
<div class="vstack gap-1">
<a class="link-opacity-10" href="#">Link opacity 10</a><a class="link-opacity-25" href="#">Link opacity 25</a><a class="link-opacity-50" href="#">Link opacity 50</a><a class="link-opacity-75" href="#">Link opacity 75</a><a class="link-opacity-100" href="#">Link opacity 100</a>
</div>
</div>
<figcaption class="small text-muted mt-2 mb-0">Below 100 the link text no longer reaches 4.5:1 - use the faded steps for hover states and decoration, not for links people must read.</figcaption>
</figure>7Tag cloud
Popular tags larger in the brand colour, less used tags smaller in grey; the underline shows on hover.
<div class="flex flex-wrap gap-4 items-baseline">
<a href="#" class="text-xl link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#update</a><a href="#" class="text-base link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">#insights</a><a href="#" class="text-lg link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#community</a><a href="#" class="small link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">#guide</a><a href="#" class="text-lg link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#release</a><a href="#" class="text-base link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">#tutorial</a>
</div>8Hover reveals the underline
link-underline-opacity-0 hides the underline until link-underline-opacity-75-hover shows it.
<p class="mb-0"> <a href="#" class="link-dark link-underline-dark link-underline-opacity-0 link-underline-opacity-75-hover">Ten talks you should not miss this year</a> · <a href="#" class="link-success link-underline-success link-underline-opacity-0 link-underline-opacity-75-hover">How to get the most out of a conference</a> </p>9Underline offsets
link-offset-1 to 3 move the underline away from the text; the -hover variant animates it.
<div class="vstack gap-2">
<a class="link-offset-1" href="#">Underline offset 1</a><a class="link-offset-2" href="#">Underline offset 2</a><a class="link-offset-3" href="#">Underline offset 3</a><a class="link-offset-1 link-offset-3-hover link-underline link-underline-opacity-50" href="#">Offset grows on hover</a>
</div>10Coloured underlines
Neutral text with a theme coloured underline using link-underline-*.
<div class="flex flex-wrap gap-4">
<a href="#" class="link-body-emphasis link-offset-2 link-underline-primary">Primary underline</a><a href="#" class="link-body-emphasis link-offset-2 link-underline-success">Success underline</a><a href="#" class="link-body-emphasis link-offset-2 link-underline-warning">Warning underline</a><a href="#" class="link-body-emphasis link-offset-2 link-underline-danger">Danger underline</a>
</div>11Table row actions
Edit and delete links coloured by intent in the last column.
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Date</th>
<th scope="col" class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" class="link-body-emphasis font-semibold no-underline">#TX-9044</a></td>
<td>Nov 10, 2025</td>
<td class="text-end whitespace-nowrap"><a href="#" class="link-primary me-2">Edit</a><a href="#" class="link-danger">Delete</a></td>
</tr>
<tr>
<td><a href="#" class="link-body-emphasis font-semibold no-underline">#TX-8526</a></td>
<td>May 15, 2026</td>
<td class="text-end whitespace-nowrap"><a href="#" class="link-primary me-2">Edit</a><a href="#" class="link-danger">Delete</a></td>
</tr>
<tr>
<td><a href="#" class="link-body-emphasis font-semibold no-underline">#INV-5626</a></td>
<td>Jul 3, 2026</td>
<td class="text-end whitespace-nowrap"><a href="#" class="link-primary me-2">Edit</a><a href="#" class="link-danger">Delete</a></td>
</tr>
</tbody>
</table>
</div>12Post titles
Headline links in body colour that only underline on hover, with a secondary category link.
What our attendees asked us most
Apr 5, 2026 in Webinar
Behind the scenes: building the stage
Feb 13, 2026 in Panel
<div class="vstack gap-4">
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">Joining online: how the virtual pass works</a></h3>
<p class="small text-muted mb-0">Oct 21, 2025 in <a href="#" class="link-secondary">Workshop</a></p>
</article>
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">What our attendees asked us most</a></h3>
<p class="small text-muted mb-0">Apr 5, 2026 in <a href="#" class="link-secondary">Webinar</a></p>
</article>
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">Behind the scenes: building the stage</a></h3>
<p class="small text-muted mb-0">Feb 13, 2026 in <a href="#" class="link-secondary">Panel</a></p>
</article>
</div>13Contact list
Email and phone links with an icon and the info colour.
<ul class="list-unstyled vstack gap-2 mb-0">
<li><i class="bi bi-envelope" aria-hidden="true"></i> <a href="mailto:hello@example.com" class="link-info link-offset-1">hello@example.com</a></li>
<li><i class="bi bi-telephone" aria-hidden="true"></i> <a href="tel:+15550100" class="link-info link-offset-1">+1 (555) 529-1409</a></li>
<li><i class="bi bi-geo-alt" aria-hidden="true"></i> <a href="#" class="link-info link-offset-1">55 Willow Way, Prague</a></li>
</ul>14Links on dark backgrounds
link-light and link-warning stay readable on a dark panel marked data-ui-theme="dark" (status links then use their light shade).
<div class="text-bg-dark rounded-md p-4" data-ui-theme="dark">
<p class="mb-2">Every session is recorded, so you can catch up on anything you missed.</p>
<a href="#" class="link-light link-offset-2 me-4">Learn more</a> <a href="#" class="link-warning link-offset-2">Upgrade now</a>
</div>15Legal links
Small link-secondary links with faint underlines for the fine print.
By continuing you agree to the Terms of Service and Privacy Policy.
<p class="small text-muted mb-0">By continuing you agree to the <a href="#" class="link-secondary link-underline-opacity-25">Terms of Service</a> and <a href="#" class="link-secondary link-underline-opacity-25">Privacy Policy</a>.</p>16Icon links
Icon-only links that brighten on hover with link-opacity-*-hover.
<div class="flex gap-4 text-xl">
<a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="Community chat"><i class="bi bi-chat-dots" aria-hidden="true"></i></a><a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="Newsletter"><i class="bi bi-envelope" aria-hidden="true"></i></a><a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="RSS feed"><i class="bi bi-rss" aria-hidden="true"></i></a><a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="Photo stream"><i class="bi bi-camera" aria-hidden="true"></i></a>
</div>17Notification with a link
A coloured link inside an alert-style message.
Ivy Delgado commented on Announcing our first keynote speakers just now.
<div class="alert alert-light border flex gap-2 mb-0">
<span class="text-primary-ink"><i class="bi bi-chat-left-text" aria-hidden="true"></i></span>
<div class="small">
Ivy Delgado commented on <a href="#" class="link-primary font-semibold">Announcing our first keynote speakers</a> just now.
</div>
</div>18Previous and next text links
Article pagination with link-body-emphasis and an arrow.
<nav class="flex justify-between small" aria-label="Article pages">
<a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25">← Looking back at a busy season</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 text-end">Our favourite tips for busy weeks →</a>
</nav>19Status links
Each status filter uses its matching link colour.
<div class="flex flex-wrap gap-4 small">
<a href="#" class="link-success">Completed (24)</a> <a href="#" class="link-warning">In review (18)</a> <a href="#" class="link-danger">Overdue (0)</a> <a href="#" class="link-secondary">Archived (81)</a>
</div>20Breadcrumb with coloured links
link-secondary breadcrumb links leading to the current page.
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">Workshop</a></li>
<li class="breadcrumb-item active" aria-current="page">Panel day ticket</li>
</ol>
</nav>