Vanilla Breeze

Custom Elements

CSS-only layout primitives that work without JavaScript. These elements use pure CSS for layout and styling.

Custom elements in VB are CSS-only — zero JavaScript, no call to customElements.define(). The browser treats unknown tags as inline elements by default; VB's CSS gives them layout superpowers. This means they work in HTML emails, server-rendered pages, and anywhere CSS loads.

The layout primitives (<layout-stack>, <layout-grid>, <layout-sidebar>, etc.) are composable building blocks inspired by Every Layout. Nest them freely to build complex layouts from simple parts. For one-off layout adjustments, the data-layout attribute on native elements achieves the same effect — see the Semantic Layouts guide for when to use each approach.

The remaining custom elements (<form-field>, <status-message>, <user-avatar>, etc.) are UI primitives that solve common patterns with pure CSS. No JavaScript means no hydration cost and no render-blocking scripts.

Layout Primitives

Composable layout elements inspired by Every Layout principles.

<layout-badge>

Badge/tag component

<layout-canvas>

Free-form positioning canvas

<layout-card>

Card component with optional header/content/footer grid

<layout-center>

Horizontally centers content with max-width

<layout-columns>

Multi-column text flow with measure constraints

<layout-cluster>

Flexible inline grouping of items

<layout-cover>

Vertically centers primary content

<layout-grid>

Responsive auto-fit grid layout

<layout-imposter>

Overlay positioned content

<layout-reel>

Horizontal scrolling container

<layout-sidebar>

Two-column sidebar layout

<layout-stack>

Vertical stacking with consistent spacing

<layout-switcher>

Responsive row/column switching

<layout-text>

Readable text measure container

Form & UI Elements

Components for forms and user interface patterns.

<brand-mark>

Brand/logo display element

<chat-bubble>

Chat bubble speech container

<chat-message>

Individual chat message wrapper

<chat-thread>

Threaded chat conversation container

<dl-item>

Groups a dt/dd pair within a description list

<form-field>

Form field wrapper with label and errors

<loading-spinner>

CSS-only loading spinner for async operations

<progress-ring>

CSS-only circular progress indicator

<status-message>

Status feedback messages

<text-divider>

Horizontal divider with centered text

<user-avatar>

User avatar display

Related

All Elements

Complete element index

Native Elements

Standard HTML5 elements

Web Components

JavaScript-enhanced components
↑