Layout Attributes

Use data-layout on semantic HTML elements for all VB layouts. No wrapper elements needed.

Stack Layout

Vertical rhythm with consistent spacing between child elements.

Custom Element

<layout-stack data-layout-gap="m">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</layout-stack>

Data Attribute

<article data-layout="stack" data-layout-gap="m">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</article>

Cluster Layout

Horizontal grouping with wrapping. Perfect for tags, buttons, and navigation.

Custom Element

<layout-cluster data-layout-gap="s">
  <span class="tag">HTML</span>
  <span class="tag">CSS</span>
  ...
</layout-cluster>

Data Attribute

<nav data-layout="cluster" data-layout-gap="s">
  <span class="tag">HTML</span>
  <span class="tag">CSS</span>
  ...
</nav>

Cluster with justify-between

Header with Navigation

<header data-layout="cluster" data-layout-justify="between">
  <strong>Site Name</strong>
  <nav data-layout="cluster" data-layout-gap="m">
    <a href="#">About</a>
    ...
  </nav>
</header>

Grid Layout

Responsive auto-fit grid. Resize the browser to see columns adapt.

Custom Element

<layout-grid data-layout-min="10rem" data-layout-gap="m">
  <article class="card">Card 1</article>
  ...
</layout-grid>

Data Attribute

<ul data-layout="grid" data-layout-min="10rem" data-layout-gap="m">
  <li class="card">Card 1</li>
  ...
</ul>

Center Layout

Max-width container with auto margins. Great for readable content.

Centered Content

<main data-layout="center" data-layout-max="narrow">
  <p>Centered content...</p>
</main>

Page Stack Layout

Header/Main/Footer with sticky footer. Main expands to fill available space.

Sticky Footer Pattern

<body data-layout="page-stack">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</body>

Split Layout

Two-column ratio grid. Stacks on mobile.

2:1 Ratio Split

<section data-layout="split" data-layout-ratio="2:1" data-layout-gap="l">
  <article>Main content (2fr)</article>
  <aside>Sidebar (1fr)</aside>
</section>

Golden Ratio Split

Golden Ratio (1.618:1)

<section data-layout="split" data-layout-ratio="golden">
  <div>Primary (1.618fr)</div>
  <div>Secondary (1fr)</div>
</section>

Sidebar Layout

Two-column flexbox that wraps responsively. Try resizing the browser.

Custom Element

<layout-sidebar data-layout-gap="m">
  <nav>Sidebar</nav>
  <main>Main content...</main>
</layout-sidebar>

Data Attribute

<section data-layout="sidebar" data-layout-gap="m">
  <nav>Sidebar</nav>
  <main>Main content...</main>
</section>

Holy Grail Layout

Classic 3-column layout with header/footer. Uses CSS Grid named areas targeting semantic elements.

Full Holy Grail

<body data-layout="holy-grail">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Holy Grail without Aside

The layout automatically adapts when semantic elements are missing.

Two-Column (no aside)

<body data-layout="holy-grail">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main Content</main>
  <!-- No aside - layout adapts automatically -->
  <footer>Footer</footer>
</body>

Dashboard Layout

App shell with sticky header and sidebar. Nav slides in on mobile (toggle with data-nav-open).

Dashboard App Shell

<body data-layout="dashboard">
  <header>Dashboard Header</header>
  <nav>Navigation</nav>
  <main>Dashboard Content</main>
</body>

<!-- Mobile: add data-nav-open to show nav -->

Cover Layout

Full-height container with vertically centered principal element. Use data-layout-principal on the centered child.

Hero Section

<section data-layout="cover" data-layout-centered>
  <header>Top content</header>
  <div data-layout-principal>
    <h1>Hero Headline</h1>
    <p>Vertically centered content</p>
  </div>
  <footer>Bottom content</footer>
</section>

Switcher Layout

Flexbox that switches from horizontal to vertical based on container width. No media queries needed.

Responsive Switcher

<section data-layout="switcher" data-layout-threshold="30rem">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</section>

<!-- Stacks when container < 30rem -->

Prose Layout

Utility for readable text content. Sets max-width in character units (ch).

Readable Text Width

<article data-layout="prose" data-layout-centered>
  <p>This text is constrained to a readable width...</p>
</article>

Composed Layouts

Real-world example: A blog card using nested layouts on semantic elements.

Blog Card

<article class="card" data-layout="stack" data-layout-gap="s">
  <header data-layout="cluster" data-layout-justify="between">
    <span class="tag">Tutorial</span>
    <time>Jan 18, 2026</time>
  </header>
  <h3>Building Semantic Layouts</h3>
  <p>Learn how to build...</p>
  <footer data-layout="cluster" data-layout-justify="between">
    <span>5 min read</span>
    <a href="#">Read more</a>
  </footer>
</article>

Summary

Layout	Child Attrs?	Use Case
`stack`	No	Vertical rhythm, forms, cards
`cluster`	No	Tags, buttons, nav links
`grid`	No	Card grids, galleries
`center`	No	Max-width containers
`page-stack`	No	Sticky footer pages
`split`	No	Two-column ratio layouts
`sidebar`	No	Responsive two-column
`holy-grail`	No	Classic 3-column pages
`dashboard`	No*	App shells (* data-nav-open toggle)
`cover`	Yes	Hero sections (data-layout-principal)
`switcher`	No	Container-query-like responsive
`prose`	No	Readable text width