<layout-specimen>
Visual specimen web component for VB layout primitives. Renders each layout-* element with a labeled mini-example and the canonical HTML snippet.
Overview
The <layout-specimen> component documents Vanilla Breeze's layout primitives — <layout-stack>, <layout-cluster>, <layout-grid>, and eleven more — by rendering each one as a labeled live example next to its canonical HTML snippet. The primitives themselves are VB core elements; this component only visualizes them for docs pages, so it has no dependency beyond what vanilla-breeze already provides.
<layout-specimen data-only="stack,cluster,grid"></layout-specimen>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-only |
string | - | Comma-separated subset of primitive names to render (e.g. "cluster,grid,stack"; with or without the layout- prefix). Defaults to all 14 primitives. |
All Primitives
Omit data-only to render every VB layout primitive: stack, cluster, grid, center, cover, imposter, columns, card, canvas, badge, reel, sidebar, switcher, and text.
<layout-specimen></layout-specimen>Custom Subset
Pick just the primitives relevant to the page you're documenting.
<layout-specimen data-only="center,cover,sidebar"></layout-specimen>Theme-Aware
Each mini-example is built from the real layout-* custom elements, so it inherits whatever theme is active on the page — spacing tokens, surface colors, and radii all update live. Pair with <spacing-specimen> and <breakpoint-specimen> for complete design-system documentation pages.