---
title: Layout
description: Pages, page headers, section titles, stacks, rows and grids.
---

## Page header and section title

<Demo id="page-header" layout="stack">
  <gw-page-header heading="Desktop" description="Arch Linux, last seen just now" icon="M4,1H20A1,1 0 0,1 21,2V6A1,1 0 0,1 20,7H4A1,1 0 0,1 3,6V2A1,1 0 0,1 4,1M4,9H20A1,1 0 0,1 21,10V14A1,1 0 0,1 20,15H4A1,1 0 0,1 3,14V10A1,1 0 0,1 4,9M4,17H20A1,1 0 0,1 21,18V22A1,1 0 0,1 20,23H4A1,1 0 0,1 3,22V18A1,1 0 0,1 4,17M9,5H10V3H9V5M9,13H10V11H9V13M9,21H10V19H9V21M5,3V5H7V3H5M5,11V13H7V11H5M5,19V21H7V19H5Z">
    <gw-button slot="actions">Connect</gw-button>
  </gw-page-header>
  <gw-section-title>Sensors<gw-button slot="actions" size="small" variant="neutral" appearance="outlined" icon="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z">Refresh</gw-button></gw-section-title>
</Demo>

The page header holds the page's `<h1>`, with an optional `icon` tile and `description`, and its controls at the top right in the `actions` slot. A section title is an `<h2>` by default; set `level` for another.

## Stack, row and grid

<Demo id="grid" layout="stack">
  <gw-grid style="--gw-grid-min: 10rem">
    <gw-card heading="CPU"><gw-meter label="Load" value="23"></gw-meter></gw-card>
    <gw-card heading="Memory"><gw-meter label="Used" value="61"></gw-meter></gw-card>
    <gw-card heading="Disk"><gw-meter label="Used" value="88" high="80"></gw-meter></gw-card>
  </gw-grid>
  <gw-row><gw-chip>One</gw-chip><gw-chip>Two</gw-chip><gw-chip>Three</gw-chip></gw-row>
</Demo>

| Element | What it does |
| --- | --- |
| `gw-page` | Centers a page's content at `--gw-content-width`, or the narrow width with `narrow` |
| `gw-stack` | Stacks its children with the theme's gap |
| `gw-row` | Lines its children up and wraps them; `nowrap` stops that |
| `gw-grid` | Fills columns at least `--gw-grid-min` (18rem) wide |

`gap="s"` or `gap="l"` changes the gap of a stack, row or grid.