Layouts

Layout components are the foundation of your pages. They provide a consistent structure and share common elements like the head section, navigation, and footers.

The layout components are located in app/src/layouts.

BaseLayout

The BaseLayout component is the root layout for all pages. It handles the <html>, <head>, and <body> tags, along with global styles and scripts (like SEO schema and theme providers).

Props

Prop	Type	Description
`title`	`string`	Required. The title of the page, used in the `<title>` tag and SEO metadata.
`description`	`string`	Required. A brief description of the page for SEO.
`image`	`ImageMetadata`	Optional. An image to be used for social media sharing cards (OG Image).
`schema`	`object`	Optional. Structured data (JSON-LD) for the page.

Slots

Slot	Description
`default`	The main content of the page, rendered inside the `<body>`.
`head`	Content to be injected into the `<head>` tag. Useful for page-specific scripts or styles.

Usage

---
import BaseLayout from '@/layouts/BaseLayout.astro';
---

<BaseLayout title="My Page" description="This is a description of my page.">
  <fragment slot="head">
    <script src="https://example.com/custom-script.js"></script>
  </fragment>

  <h1>Hello World</h1>
</BaseLayout>

Layout

The Layout component is the standard layout for most pages in the application. It wraps BaseLayout and includes the standard application chrome:

Header: Navigation bar.
Footer: Page footer.
BackToTop: A button to scroll back to the top of the page.
Decorative Background Lines: Subtle vertical lines for visual structure.

Props

It inherits all props from BaseLayout.

Prop	Type	Description
`title`	`string`	Required. The title of the page.
`description`	`string`	Required. The description of the page.
`image`	`ImageMetadata`	Optional. Social sharing image.
`schema`	`object`	Optional. Structured data.

Usage

---
import Layout from '@/layouts/Layout.astro';
---

<Layout title="Home" description="Welcome to our homepage">
  <main>
    <h1>Welcome</h1>
    <p>This page has a header and footer.</p>
  </main>
</Layout>

AuthLayout

The AuthLayout is a specialized layout designed for authentication pages like Login and Sign Up. It includes a simplified header (logo only) and a layout structure optimized for forms.

Props

It inherits all props from BaseLayout.

Prop	Type	Description
`title`	`string`	Required. The title of the page (e.g., "Log In").
`description`	`string`	Required. The description.

Usage

---
import AuthLayout from '@/layouts/AuthLayout.astro';
import { LoginForm } from '@/components/core/forms/login-form';
---

<AuthLayout title="Log in" description="Log in to your account">
  <div class="max-w-sm mx-auto">
    <h1>Login</h1>
    <LoginForm client:load />
  </div>
</AuthLayout>

Container

The Container component is a utility component used to center content and apply consistent max-width and padding. It is often used within pages to constrain content width.

Props

It accepts all standard HTML section attributes.

Prop	Type	Default	Description
`class`	`string`	`undefined`	Additional CSS classes to merge with the default container styles.

Usage

---
import Container from '@/layouts/Container.astro';
import Layout from '@/layouts/Layout.astro';
---

<Layout title="Features" description="Our features">
  <Container>
    <h2>Main Features</h2>
    <p>Content constrained to the site's max width.</p>
  </Container>
  
  <Container class="mt-0">
     <p>Another section with modified top margin.</p>
  </Container>
</Layout>

On this page