# Layout

[component-header:sl-layout]

Layouts are used to easily lay out components in generic views.

```html preview
<sl-layout bordered>
    This is the main content of the layout.
</sl-layout>
```

## Fits with page header

```html preview
<sl-page-header header="Test">
</sl-page-header>
<sl-layout class="mt-4">
    <sl-alert open>This is a test</sl-alert>
</sl-layout>
```

[component-metadata:sl-layout]