Skip to content
Velocity

Layouts Overview

Velocity includes 4 layouts for different page types.

Available Layouts

Section titled “Available Layouts”

BaseLayout

Core HTML wrapper with SEO, fonts, and theme initialization. Other layouts extend this.

PageLayout

Standard content pages with header, footer, and navigation.

BlogLayout

Blog articles with hero, breadcrumbs, and related posts.

LandingLayout

Marketing pages with flexible sections and minimal chrome.

Layout Hierarchy

Section titled “Layout Hierarchy”
BaseLayout (core)
├── PageLayout (extends Base)
├── BlogLayout (extends Base)
└── LandingLayout (extends Base)

All layouts extend BaseLayout, which provides:

  • HTML document structure
  • Google Fonts loading
  • Favicon and manifest
  • SEO component
  • JSON-LD schemas
  • Analytics integration
  • Theme initialization

Quick Usage

Section titled “Quick Usage”

Standard Page

Section titled “Standard Page”
---
import PageLayout from '@/layouts/PageLayout.astro';
---


<PageLayout title="About Us" description="Learn about our team">
  <section class="py-16">
    <h1>About Us</h1>
    <!-- Content -->
  </section>
</PageLayout>

Blog Post

Section titled “Blog Post”
---
import BlogLayout from '@/layouts/BlogLayout.astro';
---


<BlogLayout
  title={post.data.title}
  description={post.data.description}
  publishedAt={post.data.publishedAt}
  author={post.data.author}
>
  <Content />
</BlogLayout>

Landing Page

Section titled “Landing Page”
---
import LandingLayout from '@/layouts/LandingLayout.astro';
---


<LandingLayout title="Welcome" description="Your landing page">
  <Hero />
  <Features />
  <CTA />
</LandingLayout>

Next Steps

Section titled “Next Steps”