# Layouts

URL: /code/file-conventions/layouts · Id: `page:code/file-conventions/layouts`

> A layout file wraps every Page in its folder and below with shared Components, such as navigation and a footer.

A `layout.mdx` file wraps every [Page](/business/nouns/page) in its folder and below. It holds the parts every Page shares, such as navigation and a footer.

```text
sites/www/
├── layout.mdx           wraps every Page
└── blog/layout.mdx      wraps the blog Pages, inside the root layout
```

## Reference
MDX with one `<Slot />`, where the Page renders. Layouts nest from the root down.

| Key | Type | Holds |
| --- | --- | --- |
| `theme` | path | A [Theme](/business/nouns/theme) for this subtree |
| `banner` | string | A line shown above every Page below |

## Examples
### Minimal
```mdx title="sites/www/layout.mdx"
<Slot />
```

### Leaseline
```mdx title="sites/www/layout.mdx"
<Navigation />
<Slot />
<CallToAction heading="Start a 14-day trial" action="/checkout/pro" />
<Footer />
```

## What it builds
The [SiteBuilder](/code/builders/site) applies the layout to each Page below at compile time.

- no record of its own; each `Page` carries its resolved layout
- a layout change republishes every Page below it with the next `Site.publish`

## Good to know
- A `(group)` folder holds its own layout without adding a URL segment; see [route segments](/code/file-conventions/route-segments).