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.
data-layout
Component-level layout primitive. Drop on any element to apply a named layout (stack, cluster, grid, center, cover, sidebar, columns…) without wrapping in a custom element. Same surface as the layout-* custom elements; better semantics.
Overview
The data-layout attribute applies one of VB's named layout primitives to any element. It's the attribute form of the <layout-*> custom-element family — same engine, better semantics. Use <article data-layout="stack"> when the element you already have is the right semantic container; use <layout-stack> when you need a generic wrapper.
This is the same element-and-attribute symmetry the framework uses across the layout surface (and that data-paged + <pager-wc> mirror for pagination): pick the surface that fits the markup you already have.
Component layouts
Drop on any element you want to lay out. Modifiers (data-layout-gap, data-layout-align) tune the layout without changing its kind.
HTML
<article data-layout="stack" data-layout-gap="m"> <h2>Title</h2> <p>Body</p></article> <nav data-layout="cluster" data-layout-gap="s"> <a href="/">Home</a> <a href="/docs/">Docs</a> <a href="/blog/">Blog</a></nav> <section data-layout="grid" data-layout-gap="m"> <article>...</article> <article>...</article> <article>...</article></section>Layout values
| Value | Pattern | Notes |
|---|---|---|
stack | Vertical flex with gap | Default for vertical rhythm. |
cluster | Horizontal flex, wraps | Tag rows, button groups, filter chips. |
grid | Auto-fit grid by min column width | Card grids; pair with data-min on the host. |
center | Centered intrinsic / max-width box | Article column; pair with data-max. |
cover | Header-content-footer in a min-block area | Hero sections. |
columns | CSS multicolumn | Reading-flow columns. |
sidebar | Two-column sidebar with content | Use sidebar-left / sidebar-right for explicit placement. |
holy-grail | Header / sidebar / main / sidebar / footer | Classic three-column page. |
dashboard | Header + sidebar + main app shell | Application chrome. |
switcher | Switcher (flex, swaps to wrap by threshold) | Layout-switcher pattern from Every Layout. |
prose | Article reading column with vertical rhythm | Mirrors article.blog. |
media | Media-object: figure beside body | Avatar + comment, icon + label. |
split | Resizable two-pane split | Pairs with <split-surface> behaviour. |
regions | Free-form named-grid regions | For ad-hoc grid-area layouts. |
The body-* variants (body-stack, body-sidebar-left, etc.) are page-shape templates — use them on <body> via data-page-layout instead, which adds semantic-element grid-area wiring.
Modifiers
| Attribute | Values | Default | Notes |
|---|---|---|---|
data-layout-gap | none · 3xs · 2xs · xs · s · m · l · xl · 2xl · 3xl | m (or s for cluster) | Maps to the --size-* token scale. |
data-layout-align | start · center · end · stretch | stretch (stack) / center (cluster) | Cross-axis alignment. |
data-min | any CSS length | varies | Per-layout: minimum column width for grid, or threshold for switcher. |
Element vs attribute — pick what fits
Both forms feed the same engine. Pick by which surface fits the existing markup:
- Use
data-layoutwhen you already have a semantic element that should also be the layout container (<article>,<section>,<nav>,<form>). - Use
<layout-stack>/<layout-grid>/ etc. when you need a generic wrapper purely for layout. See<layout-specimen>for the full element family.
Composition with other VB primitives
data-page-layout— the<body>-level sibling that wires semantic regions (header / nav / main / aside / footer) to grid areas.data-layout-density— root-level density variant (compact/spacious) that re-tokens the spacing scale;data-layout-gapvalues cascade.data-paged— pagination on any list-shaped container, includingdata-layout="grid".