Documentation

Components and Layouts

Learn how components and layouts are structured and reused.

Layouts

Layouts live in src/layouts/. Use them to wrap pages with consistent header, footer, and SEO tags.

Example usage:

---
import MarketingLayout from '../layouts/MarketingLayout.astro';
---

<MarketingLayout title="Page title" description="Page description">
  <main>Content</main>
</MarketingLayout>

Components

Reusable UI blocks live in src/components/.

  • src/components/layout/ for header, footer, and shared layout pieces.
  • src/components/sections/ for page sections.
  • src/components/common/ for buttons and small UI parts.

Best practice

Keep components focused. If a component grows large, split it into smaller pieces and compose them.