Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
layout-specimen
Visual specimen of VB layout primitives for design-system docs. Renders each primitive with a labeled mini-example and the canonical HTML snippet.
Overview
<layout-specimen> renders all 14 VB layout primitives at a glance — each with its name, a short description, a live mini-example, and the canonical HTML snippet. Used in design-system docs to give readers a single page that surveys the layout vocabulary.
Primitives shown
14 layout custom-elements:
layout-stacklayout-clusterlayout-gridlayout-centerlayout-coverlayout-imposterlayout-columnslayout-cardlayout-canvaslayout-badgelayout-reellayout-sidebarlayout-switcherlayout-text
Subset to a few
Use data-only to limit which primitives render. The names can be used with or without the layout- prefix.
Show only cluster, grid, stack
<layout-specimen data-only="cluster,grid,stack"></layout-specimen>Design-system family
Pairs with the other specimen primitives to form a complete design-system survey:
<spacing-specimen>— spacing scale tokens<type-specimen>— typography scale<motion-specimen>— easing / duration tokens<breakpoint-specimen>— responsive breakpoints<token-specimen>— arbitrary token-scale display (shadows, radii, borders, colors, sizes)<accessibility-specimen>— contrast ratios + a11y checklist
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
data-only | string | — | Comma-separated subset of primitive names. Default: render all 14. |