4 • Save time and energy with reusable page layouts

Check in: Unit 4 ⁠-⁠ Layouts

Now that you can build with components, let’s create some custom layouts!

You can find the code at this point in the tutorial on GitHub or StackBlitz.

Check your code against this example, or if you've just joined us, fork on StackBlitz to start coding along in your browser from here.

In this unit, you’ll build layouts to share common elements and styles across your pages and blog posts.

To do this, you will:

  • Create reusable layout components
  • Pass content to your layouts with <slot />
  • Pass data from Markdown frontmatter to your layouts
  • Nest multiple layouts