---
url: /api/css/page-layout.md
---
# CSS: page-layout

`div[class~="instui-page-layout"]` — Standard three-column page layout with header, sidebar, and main content.

✅ Use Page-Layout when:

* You need a classic page structure with navigation and content areas

* The page has a clear main content area flanked by complementary regions

* You want consistent spacing and alignment across the layout
  🚫 Don't use Page-Layout when:

* Building a single-column page — use a simpler layout instead

* The sidebar competes with main content for importance

## Accessibility

* Map the main content area to a `<main>` landmark
* Give the sidebar `role="navigation"` or `role="complementary"` as appropriate
* Ensure landmark regions have distinct aria-labels

## Usage

```css
@import "@pantoken/plugin-layouts/layouts.css";
```

## Examples

-automatica11y -nocard

```html
<div class="instui-page-layout" data-a11y-root>
  <header class="instui-header"><h1>Course overview</h1></header>
  <div class="instui-body">
    <nav class="instui-sidebar" aria-label="Course navigation"><a href="#assignments" data-a11y-trigger>Assignments</a></nav>
    <main class="instui-main" slot="content"><h2 id="assignments">Assignments</h2><p>Upcoming work appears here.</p></main>
  </div>
  <footer class="instui-footer">Course resources</footer>
</div>
```

## Parts

| Part | Description |
| --- | --- |
| `.instui-body` | Main body containing sidebar and content. |
| `.instui-footer` | Bottom footer region. |
| `.instui-header` | Top header region. |
| `.instui-main` | Central content area. |
| `.instui-sidebar` | Left navigation or auxiliary column. |

## States

| State | Description |
| --- | --- |
| `:optional` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-color-border` | — | — |
| `--instui-color-footer-background` | — | — |
| `--instui-color-footer-text` | — | — |
| `--instui-color-header-background` | — | — |
| `--instui-color-sidebar-background` | — | — |
| `--instui-font-size-small` | `<length>` | — |
| `--instui-space-medium` | — | — |

## Related

* [wrapper](/api/css/wrapper.md)