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>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

<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 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 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

<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 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

<button> <icon-wc name="x"></icon-wc> <span class="visually-hidden">Close dialog</span> </button>  <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.