# Building composable layouts in Astro
> Learn how to build composable layouts in Astro, extracting shared HTML like the header and footer into a src/layouts file that wraps pages with a slot.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-11-17 | Topics: [Astro](https://flaviocopes.com/tags/astro/) | Canonical: https://flaviocopes.com/astro-layouts/
One of the things I like when working on a website is to be able to fragment all the layouts in different files.
Let's say I want to create a landing page.
The last one I did was in plain HTML. Which is nice, can't get simpler and more minimal than that.
But then I start to realize I also want a different page on the website, which looks similar, but has the same styling and structure.
Duplication starts to happen. Then I want another page, and finally I decide to change something in the header for all pages, and it's frustrating.
Here's when static site builders help.
In many tools, like Hugo, you use partials.
In [Astro](https://flaviocopes.com/astro-introduction/), it's all based on components, so we import and embed components in JSX:
```js
---
import Header from ../components/Header.astro
import Footer from ../components/Footer.astro
---
A page
```
Then we can copy/paste this structure in our components.
Notice that there's still some HTML that we can extract, to avoid copy/pasting it.
We do this using **layouts**.
You create layouts in the `src/layouts` folder:
> `src/layouts/MyLayout.astro`
```js
---
import Header from ../components/Header.astro
import Footer from ../components/Footer.astro
---
```
Notice the use of ``.
This is the way we can embed anything in there, from another component.
We use the layout in this way:
> `src/pages/index.astro`
```js
---
import MyLayout from '../layouts/MyLayout.astro'
---
Homepage!
```