Example Page

Onetime Secret Layout Structure

This page demonstrates how to use the new Astro layout components for consistent design across the site.

Layout Features

Modular Components

The layout is divided into modular components: LayoutHead, LayoutHeader, and LayoutFooter, all assembled by LayoutBase.

Customizable Slots

Use slots to customize header and footer content for specific pages while maintaining consistent structure.

Internationalization Support

Built-in support for multiple languages with automatic locale detection and text direction handling.

Theme Management

Centralized theme management with support for light, dark, high-contrast, and dyslexic themes.

Using the Layout

Import the Layout component and use it as a wrapper for your page content:

<Layout
  title="Page Title"
  description="Page description"
  htmlLang="en">

  <!-- Main content -->
  <div>Your page content here</div>

  <!-- Optional footer slot -->
  <div slot="footer">Custom footer content</div>
</Layout>