Islands First

Layouts & slots

Lesson 5 of 5

What you'll learn

Use a layout component to wrap page content
Understand <slot/> as the hole where children render
Nest layouts so shared chrome composes outermost-first

A layout is an ordinary .astro component that holds the parts every page shares — <head>, header, footer — and leaves a <slot/> where the page's own content goes. The <slot/> is the hole; whatever you nest inside the layout fills it.

---
// src/layouts/Base.astro
const { title } = Astro.props;
---
<html>
  <head><title>{title}</title></head>
  <body>
    <header>My Site</header>
    <slot />
    <footer>© 2026</footer>
  </body>
</html>

A page uses it by importing the layout and putting its content between the tags:

---
import Base from "../layouts/Base.astro";
---
<Base title="Home">
  <h1>Welcome</h1>
  <p>This fills the slot.</p>
</Base>

Layouts nest, outermost first

Layouts compose. A BlogPost layout can itself render inside Base, so the page content sits in the innermost slot while each wrapper adds its own chrome around it. The outermost layout renders first and wraps everything within.

Named slots for multiple holes

One <slot/> is the default. Add <slot name="sidebar" /> and fill it from the page with <div slot="sidebar">…</div> when a layout needs more than one insertion point.

Wrapping is just nesting strings: each layout puts the accumulated content into its slot. The challenge models that fold, applying layouts outermost-first.

Wrap content in nested layouts

Run it. Each layout is a function placing inner content into its slot; applying them outermost-first nests the page inside every layout.

Loading editor…

That is Astro's core: file routes, server-rendered components, opt-in islands, validated content, and composable layouts.

PreviousContent collections