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.
Page layout with sidebar
<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
Dashboard page 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-grailwithout<aside>becomes two-columnsidebar-leftwithout<nav>becomes single-column- All layouts collapse to stack on mobile (unless
data-layout-nowrapis 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) |