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: Astro in brief
author: Himanshu
description: Find out what makes Astro awesome!
--- 
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>
  <p>{frontmatter.description}</p>
  <slot /> <!-- Markdown content is injected here -->
   <!-- ... -->
</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>