Vanilla Breeze

Data Attributes

VB's data-* attributes add layout, formatting, effects, form controls, and infrastructure to any HTML element — some with CSS only, others with progressive JavaScript enhancement.

Data attributes are VB's extension mechanism. They follow a simple convention: data-layout-* for CSS-only structural layout, data-format-* for JS-enhanced display formatting, data-effect for visual effects, and specific names for form controls and infrastructure. All JS-enhanced attributes degrade gracefully — the page works without JavaScript, and the enhancement adds interactivity.

Each attribute page documents all valid values, shows live demos, covers accessibility, and notes whether the attribute is CSS-only or JS-enhanced. Browse by category below or use the attribute index to search.

Layout

data-layout

Apply stack, cluster, grid, center, sidebar, split, cover, and other layouts to any element

data-page-layout

Full-page grid layouts with semantic area assignment

data-layout-density

Compact or spacious spacing modes that cascade to descendants

data-sticky

Sticky positioning for header and footer elements — sticks to top or bottom on scroll

Formatting

data-format-number

Locale-aware number formatting via Intl.NumberFormat

data-format-date

Locale-aware date and relative time formatting

data-format-bytes

Human-readable file size formatting

data-ticker

Animated number count-up on scroll

Math

data-math

Enhance code elements with precompiled MathML rendering, numbering, and copy-to-clipboard

Clipboard & Selection

data-copy

Copy text to clipboard on click with visual feedback

data-select-all

Master checkbox for bulk selection

Visual Effects

data-effect

Unified composable effect system: fade-in, shimmer, neon, reveal, glitch, and 20+ more

data-trigger

Controls when effects activate: scroll, hover, click, or timed delay

data-stagger

Cascades timing to children for choreographed entrance sequences

data-transition

Declarative View Transitions: morph, slide, fade, scale, and stagger for state changes

data-emoji

Replace :shortcode: text with Unicode emoji characters

Interaction

data-hotkey

Platform-aware keyboard shortcut display

data-spoiler

Content concealment with blur, solid, or noise effects

data-animate-image

Play/pause control for animated GIF, WebP, and APNG images

data-splitter

Resizable drag divider between panels with keyboard support

Form Controls

data-switch

Transform a checkbox into a sliding toggle switch with size variants

data-range

Cross-browser styled range slider with value bubble and tick markers

data-stepper

Custom increment and decrement buttons for number inputs

data-color

Styled color swatch with hex display for color inputs

data-mask

Input masking for phone, credit card, date, and custom patterns

data-accept

Character filtering for phone, date, credit card, hex, and custom character classes

data-upload

Drag-and-drop file upload zone with file list display

data-toggle-tags

Checkbox pill chips for tag-based multi-select filtering

data-strength

Real-time password strength meter with configurable rules

Form Behavior

data-count

Live character or word count for textareas with threshold warnings

data-grow

Auto-expanding textarea using CSS field-sizing with JS fallback

data-show-when

Conditionally show or hide form sections based on field values

data-autosave

Persist form drafts to localStorage with auto-restore on reload

data-wizard

Multi-step form wizard with per-step validation and progress tracking

Styling

data-numbered

Auto-number article headings with CSS counters

data-drop-cap

Large decorative first letter for article opening paragraphs

data-prose

Optimized typography for long-form article content

data-ornament

Custom symbol or text ornament for horizontal rules

data-badge

Pill-shaped badge styling for time elements

data-striped

Alternating row backgrounds for definition lists

Shapes

data-shape-start

Clip the top edge of a section with wave, chevron, scallop, or diagonal shapes

data-shape-end

Clip the bottom edge of a section with wave, chevron, scallop, or diagonal shapes

data-clip

Responsive shape masking for images and figures using CSS shape()

data-badge (shape)

Inline shaped labels with clip-path — ribbon, notch, flag, double-arrow, stamp

data-callout

Block callout containers with speech, notched, and tip shape variants

data-bubble

Chat bubble shapes for messaging UIs — incoming, outgoing, assistant, thought, typing

data-cutout

Punch-out shapes using evenodd fill rule — circle, diamond, arch-window, hex

data-border-shape

Two-layer shaped borders for images and containers — hexagon, diamond, arch

data-morph

Shape morphing animations — pulse, breathe, wave with prefers-reduced-motion support

Infrastructure

data-print

Print optimization modes, visibility control, page breaks, and opt-out for printed output

hide-until-ready

Prevent FOUC by hiding elements until custom elements are defined

view-transitions

CSS View Transitions with named groups, shared elements, and presets

data-toc-ignore

Exclude headings or containers from page-toc generation

Related

All Attributes

Complete attribute index

Native Attributes

Standard HTML attributes

Elements

Element reference
↑