class
CSS class variants available across VB elements — buttons, navigation, forms, tables, lists, headers, and footers.
Overview
The class attribute is how you opt in to VB's element-scoped style variants. Rather than utility classes that describe appearance (.text-center, .mt-4), VB classes describe what the element is or how it behaves within its context.
Each class is scoped to the element it applies to. .striped only works on <table>, .pills only works on <nav>. This keeps the API small and predictable.
Button
Style variants for <button> and button-like <a> elements.
| Class | Effect |
|---|---|
.secondary | Bordered outline style with transparent background |
.ghost | Text-only, background appears on hover |
.small | Smaller padding and font size |
.large | Larger padding and font size |
.full-width | 100% width, block-level button |
Button variants
<button>Default</button><button class="secondary">Secondary</button><button class="ghost">Ghost</button><button class="small">Small</button><button class="large">Large</button><button class="full-width">Full Width</button>Navigation
Style variants for <nav> elements.
| Class | Effect |
|---|---|
.horizontal | Flex layout with wrapping for inline link lists |
.vertical | Flex column layout for sidebar-style navigation |
.pills | Rounded background highlighting on active items |
.tabs | Border-bottom indicator, tab-bar style |
.breadcrumb | Horizontal chain with separator characters |
.minimal | Text-only links, no background or border |
.pagination | Centered numbered page buttons |
.tree | Hierarchical disclosure tree with indentation |
.steps | Multi-step progress indicator with numbered circles |
Navigation variants
<nav class="horizontal"> <a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a></nav> <nav class="pills"> <a href="/all" aria-current="page">All</a> <a href="/active">Active</a> <a href="/archived">Archived</a></nav> <nav class="tabs"> <a href="#overview" aria-current="page">Overview</a> <a href="#details">Details</a> <a href="#reviews">Reviews</a></nav> <nav class="breadcrumb" aria-label="Breadcrumb"> <ol> <li><a href="/">Home</a></li> <li><a href="/docs/">Docs</a></li> <li><span aria-current="page">Attributes</span></li> </ol></nav> <nav class="tree" aria-label="File browser"> <details> <summary>src</summary> <ul> <li><a href="#">index.js</a></li> <li><a href="#">styles.css</a></li> </ul> </details></nav>Form
Layout variants for <form> and form-related elements.
| Class | Element | Effect |
|---|---|---|
.stacked | form | Vertical layout with labels above inputs |
.inline | form | Horizontal layout with wrapping |
.grid | form | Two-column grid layout |
.actions | footer | Button row container inside a form |
.actions.end | footer | Right-aligned button row |
.actions.between | footer | Space-between button row |
.group | fieldset | Field grouping with visual container |
.minimal | fieldset | Fieldset with no border |
.help | small | Helper text styling beneath inputs |
.error | small | Error message styling |
Form variants
<form class="stacked"> <label for="name">Name</label> <input type="text" id="name" /> <label for="email">Email</label> <input type="email" id="email" /> <footer class="actions end"> <button type="submit">Submit</button> </footer></form> <form class="inline"> <label for="search">Search</label> <input type="search" id="search" /> <button type="submit">Go</button></form>Table
Style variants for <table> elements. Classes can be combined.
| Class | Effect |
|---|---|
.striped | Alternating row background colors |
.compact | Reduced cell padding for dense data |
.bordered | Borders on all cells |
Table variants
<table class="striped"> <thead> <tr><th>Name</th><th>Role</th></tr> </thead> <tbody> <tr><td>Alice</td><td>Engineer</td></tr> <tr><td>Bob</td><td>Designer</td></tr> <tr><td>Carol</td><td>Manager</td></tr> </tbody></table> <table class="compact bordered"> <thead> <tr><th>Key</th><th>Value</th></tr> </thead> <tbody> <tr><td>Version</td><td>2.1.0</td></tr> <tr><td>License</td><td>MIT</td></tr> </tbody></table>Lists
Style variants for <ul> and <ol> elements.
| Class | Effect |
|---|---|
.inline | Flex layout with wrapping, no bullets |
.unstyled | No bullets, no padding |
List variants
<ul class="inline"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li></ul> <ul class="unstyled"> <li>No bullets here</li> <li>Clean and simple</li></ul>Header & Footer
Style variants for <header> and <footer> elements.
Header
| Class | Effect |
|---|---|
.site | Full-width header with flex layout and bottom border |
.page | Page-level header with bottom border |
.card | Card header with bottom border |
.sticky | Sticks to top on scroll |
.transparent | Positioned over content (hero overlays) |
.centered | Text-centered with auto margins |
.compact | Reduced padding and font size |
Footer
| Class | Effect |
|---|---|
.site | Full-width site footer with top border |
.article | Article footer with top border |
.card | Card footer with top border |
.minimal | Centered, small text |
.columns | Multi-column grid layout |
.sticky | Sticks to bottom |
Header and footer variants
<header class="site sticky"> <a href="/">Logo</a> <nav class="horizontal"> <a href="/docs">Docs</a> <a href="/about">About</a> </nav></header> <header class="page"> <h1>Page Title</h1></header> <footer class="site columns"> <div> <h3>Product</h3> <ul><li><a href="#">Features</a></li></ul> </div> <div> <h3>Company</h3> <ul><li><a href="#">About</a></li></ul> </div></footer>Utility Classes
A small set of global helpers available on any element.
| Class | Effect |
|---|---|
.visually-hidden | Hidden visually but accessible to screen readers |
.flow | Vertical rhythm spacing between child elements |
.lead | Larger introductory paragraph text |
Utility classes
<!-- Screen-reader-only text --><button> <icon-wc name="x"></icon-wc> <span class="visually-hidden">Close dialog</span></button> <!-- Vertical rhythm between children --><article class="flow"> <h2>Article Title</h2> <p>Paragraph one.</p> <p>Paragraph two.</p></article>Design Philosophy
VB classes are element-scoped, not generic utilities. .compact on a <table> reduces cell padding. .compact on a <header> reduces header padding. Same word, appropriate behavior for each context.
This means you can read the HTML and understand the intent: <nav class="pills"> is a pill navigation. No need to decode a chain of utility classes.