> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/layout.md).

# Layout

Gravity Web offers four versatile layout options. Layouts contain the common components to be rendered across all views that utilise that layout, for example: **navigation** and **header.**

### Preview

#### Account Layout

<figure><img src="/files/yIxKQjNzonU9eOwdAMCb" alt="Gravity account layout component"><figcaption></figcaption></figure>

#### App Layout

<figure><img src="/files/zDAx0c3hUHOP6Cye0mx4" alt="Gravity app layout component"><figcaption></figcaption></figure>

#### Auth Layout

<figure><img src="/files/8N5fdi0cwrXgoUAtCRXJ" alt="Gravity auth layout component"><figcaption></figcaption></figure>

#### Onboarding Layout

<figure><img src="/files/ukWa2yATRDPjVEYw5yqf" alt="Gravity onboarding layout component"><figcaption></figcaption></figure>

### Props

| Prop     | Description        | Required | Value        |
| -------- | ------------------ | -------- | ------------ |
| children | children to render | required | component(s) |
| title    | view title         | required | string       |

### Usage

You can use a layout by passing its name in the [route object](/gravity-web/routing.md).

```javascript
{
    path: '/dashboard',
    view: Dashboard,
    layout: 'app',
    title: 'account.index.title'
}
```