Layouts

Layouts are a special type of Astro component useful for creating reusable page templates.

A layout component is conventionally used to provide an .astro or .md page both a page shell (<html>, <head> and <body> tags) and a <slot /> to specify where in the layout page content should be injected.

Layouts often provide common <head> elements and common UI elements for the page such as headers, navigation bars and footers.

Layout components are commonly placed in a src/layouts directory in your project.

Sample Layout

---
---
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Cool Astro Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">Posts</a>
      <a href="#">Contact</a>
    </nav>
    <article>
      <slot /> <!-- your content is injected here -->
    </article>
  </body>
</html>

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>

📚 Learn more about slots.

Markdown Layouts

Page layouts are especially useful for Markdown files. Markdown files can use a special layout property at the top of the frontmatter to specify which .astro component to use as a page layout.

---
layout: ../../layouts/BlogPostLayout.astro
title: Blog Post
description: My first blog post!
---
This is a post written in Markdown.

When a Markdown file includes a layout, it passes a frontmatter property to the .astro component which includes the frontmatter properties and the final HTML output of the page.

---
const {frontmatter} = Astro.props;
---
<html>
   <!-- ... -->
  <h1>{frontmatter.title}</h1>
  <h2>Post author: {frontmatter.author}</h2>
  <slot />
   <!-- ... -->
</html>

📚 Learn more about Astro’s Markdown support in our Markdown guide.

Nesting Layouts

Layout components do not need to contain an entire page worth of HTML. You can break your layouts into smaller components, and then reuse those components to create even more flexible, powerful layouts in your project.

For example, a common layout for blog posts may display a title, date and author. A BlogPostLayout.astro layout component could add this UI to the page and also leverage a larger, site-wide layout to handle the rest of your page.

---
import BaseLayout from './BaseLayout.astro'
const {frontmatter} = Astro.props;
---
<BaseLayout>
  <h1>{frontmatter.title}</h1>
  <h2>Post author: {frontmatter.author}</h2>
  <slot />
</BaseLayout>