Hub Layout - Organize Collections Beautifully

Quick Start

Hub layout is for collection pages - blog category pages, service collections, documentation hubs. It displays child pages in an attractive card grid.

1. Create a Hub Page

---
// src/pages/services.astro
import Layout from '@theme/layouts/Layout.astro';
import Hero from '@theme/components/sections/Hero.astro';
import CardGrid from '@theme/components/ui/CardGrid.astro';
import IconCard from '@theme/components/ui/IconCard.astro';
import { getCollection } from 'astro:content';

const title = 'Our Services';
const description = 'Professional services for your business';

// Fetch all services from content collection
const services = await getCollection('services');
---

<Layout title={title} description={description}>
  <Hero
    variant="centered"
    heading="Our Services"
    description="Quality solutions for every business need"
  />

  <section class="py-16 bg-white dark:bg-slate-950">
    <div class="container mx-auto px-4">
      <CardGrid columns={3}>
        {services.map((service) => (
          <IconCard
            icon={service.data.icon}
            title={service.data.title}
            description={service.data.description}
            href={`/services/${service.slug}/`}
            ctaText="Learn more"
          />
        ))}
      </CardGrid>
    </div>
  </section>
</Layout>

2. Hub Page with Categories

---
// src/pages/blog/index.astro
import Layout from '@theme/layouts/Layout.astro';
import Hero from '@theme/components/sections/Hero.astro';
import CardGrid from '@theme/components/ui/CardGrid.astro';
import BlogCard from '@theme/components/ui/BlogCard.astro';
import { getCollection } from 'astro:content';

const title = 'Blog - Latest Articles';
const description = 'Tips, guides, and insights';

// Fetch all blog posts
const allPosts = await getCollection('blog');

// Sort by publish date (newest first)
const posts = allPosts.sort(
  (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf()
);
---

<Layout title={title} description={description}>
  <Hero
    variant="centered"
    heading="Latest Articles"
    description="Tips and insights for growing your business"
  />

  <section class="py-16 bg-white dark:bg-slate-950">
    <div class="container mx-auto px-4">
      <CardGrid columns={3}>
        {posts.map((post) => (
          <BlogCard
            title={post.data.title}
            description={post.data.description}
            publishDate={post.data.publishDate}
            category={post.data.category}
            thumbnail={post.data.thumbnail}
            href={`/blog/${post.slug}/`}
          />
        ))}
      </CardGrid>
    </div>
  </section>
</Layout>

3. What You Get

• Responsive card grid (1/2/3 columns)
• Automatic CollectionPage schema markup
• Featured content badges (optional)
• Thumbnail images with lazy loading
• Category filtering (optional)
• Pagination for large collections (optional)