data-page-layout

Full-page layouts using data-page-layout on the body element. Semantic children auto-assign to grid areas.

Overview

The data-page-layout attribute goes on the <body> element. Semantic children (header, nav, main, aside, footer) are automatically assigned to named grid areas.

<body data-page-layout="sidebar-left"> <header>Site header...</header> <nav>Sidebar navigation...</nav> <main>Page content...</main> <footer>Site footer...</footer> </body>

Available Page Layouts

Value	Description
`stack`	Single column (mobile-first default)
`sidebar-left`	Two-column with left navigation
`sidebar-right`	Two-column with right sidebar
`holy-grail`	Three-column classic layout
`app-shell`	Vertical nav bar for apps
`dashboard`	Admin panel with sticky nav
`article`	Centered content for reading
`landing`	Marketing page with named sections

Dashboard Layout

<body data-page-layout="dashboard"> <header data-layout-sticky>Dashboard header...</header> <nav data-layout-sticky>Navigation sidebar...</nav> <main data-layout="stack" data-layout-gap="l"> Content area with nested stack layout... </main> </body>

Dashboard Modifiers

Attribute	Values	Description
`data-header-height`	`3rem`, `3.5rem`, `4rem`	Override dashboard header height
`data-nav-open`	boolean	Show mobile nav overlay (toggle on small viewports)

Semantic Grid Identity

Semantic elements automatically register to grid areas:

Element	Grid Area
`<header>`	`body-header`
`<nav>`	`body-nav`
`<main>`	`body-main`
`<aside>`	`body-aside`
`<footer>`	`body-footer`

Content-Aware Adaptation

Layouts automatically adapt when elements are missing:

holy-grail without <aside> becomes two-column
sidebar-left without <nav> becomes single-column
All layouts collapse to stack on mobile (unless data-layout-nowrap is set)

Grid Area Override

Use data-layout-area to explicitly assign elements to named areas:

Value	Use Case
`hero`	Hero section on landing pages
`banner`	Banner or announcement area
`sidebar`	Generic sidebar area
`content`	Main content area
`feature`	Feature section
`cta`	Call-to-action section
`toc`	Table of contents

Named areas are used with the landing page template which defines grid rows for hero, feature, and cta. See the Grid Identity page for details and the landing page demo.

Layout Utilities

Attribute	Description
`data-layout-sticky`	Make header, nav, or aside sticky
`data-layout-bleed`	Span all grid columns (full-width)
`data-layout-nowrap`	Prevent responsive stacking
`data-layout-sidebar="collapsed"`	Use collapsed sidebar width
`data-layout-sidebar="hidden"`	Hide the sidebar nav
`data-layout-order="-1\|1\|99"`	Reorder elements
`data-layout-area`	Explicit grid area assignment
`data-container`	Establish inline-size containment. Presets: `card`, `panel`, `media` (details)