Components and layouts
Build a page layout
Share the complete document structure and page metadata while keeping each route responsible for its own content.
8 minute lesson
~~~
A layout is an Astro component that owns shared page structure while a route supplies the unique content.
---
interface Props {
title: string
description: string
}
const { title, description } = Astro.props
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content={description} />
<title>{title}</title>
</head>
<body>
<nav><a href="/">Home</a></nav>
<main><slot /></main>
<footer>Built with Astro</footer>
</body>
</html>A page imports and uses it like any other component:
---
import Layout from "../layouts/Layout.astro"
---
<Layout title="About" description="Learn who built this site">
<h1>About</h1>
<p>This content fills the layout's slot.</p>
</Layout>The page remains responsible for accurate metadata. The layout remains responsible for emitting a valid, consistent document.
Like other Astro components, the layout runs while rendering. It does not stay alive in the browser. View two generated pages and verify that their shell is shared but their title, description, and main content differ.
Lesson completed