VB Design System

<breakpoint-specimen>

Responsive breakpoint visualization web component. Renders a ruler of viewport breakpoints with a live width readout and a moving cursor for the active breakpoint.

Overview

The <breakpoint-specimen> component reads --bp-* breakpoint tokens from computed styles and renders a ruler of viewport breakpoints, a live numeric width readout, and a moving cursor marking the current position. The active breakpoint is called out both on the ruler and in the readout.

Resize the browser window to see the width readout, cursor, and active-breakpoint highlight update live.

Attributes

Attribute Type Default Description
tokens string sm,md,lg,xl Comma-separated breakpoint names to display
prefix string --bp- CSS custom property prefix for token lookup
label string - Optional heading label above the ruler
data-observe string - CSS selector of a container to track instead of the viewport (container-query mode, JS-only)

Custom Subset

Show only the breakpoints you need, and add a heading label.

Container Mode

Set data-observe to a CSS selector to track a specific element's width (via ResizeObserver) instead of the viewport — useful for documenting a breakpoint scheme that applies to a resizable panel or preview frame rather than the whole window.

Progressive Enhancement

The component follows three layers of enhancement:

  1. HTML — a semantic <dl> of breakpoint name → value remains readable without JS or CSS.
  2. CSS — pure-CSS active-row highlighting via @media rules pulls the matching token into a callout, no JS required for the "which breakpoint is active" cue (viewport mode only).
  3. JS — adds the live numeric width readout and the moving cursor on the ruler, plus container-query mode (data-observe).

Theme-Aware

The component reads live computed --bp-* values, so a theme that redefines breakpoint tokens updates the ruler automatically. Pair with <spacing-specimen> and <type-specimen> for complete design system documentation pages.
↑