Layouts are a special type of Astro component useful for creating reusable page templates.
A layout component is conventionally used to provide an
.md page both a page shell (
<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 LayoutSection titled Sample Layout
📚 Learn more about slots.
Markdown LayoutsSection titled 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.
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.
📚 Learn more about Astro’s Markdown support in our Markdown guide.
Nesting LayoutsSection titled 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.