Templates

What are Templates?

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. They focus on the page’s structure rather than the page’s final content.

Characteristics

Layout-Focused - Define page structure
Content-Agnostic - Work with placeholder content
Reusable - Used by multiple pages
Responsive - Handle different screen sizes
Flexible - Accept various content configurations

Common Templates

Base Layout

---
import { ViewTransitions } from 'astro:transitions';
import Header from '@/components/organisms/Header.astro';
import Footer from '@/components/organisms/Footer.astro';

interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    {description && <meta name="description" content={description} />}
    <ViewTransitions />
  </head>
  <body>
    <Header />
    <main>
      <slot />
    </main>
    <Footer />
  </body>
</html>

Blog Layout

---
import BaseLayout from './BaseLayout.astro';
import Heading from '@/components/atoms/Heading.astro';
import Badge from '@/components/atoms/Badge.astro';

interface Props {
  title: string;
  publishedAt: Date;
  tags?: string[];
}

const { title, publishedAt, tags = [] } = Astro.props;
---

<BaseLayout title={title}>
  <article class="blog-post">
    <header class="post-header">
      <Heading level={1}>{title}</Heading>
      <time datetime={publishedAt.toISOString()}>
        {publishedAt.toLocaleDateString()}
      </time>

      {tags.length > 0 && (
        <div class="tags">
          {tags.map(tag => <Badge>{tag}</Badge>)}
        </div>
      )}
    </header>

    <div class="post-content">
      <slot />
    </div>
  </article>
</BaseLayout>

Dashboard Layout

---
import BaseLayout from './BaseLayout.astro';
import Sidebar from '@/components/organisms/Sidebar.astro';

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<BaseLayout title={title}>
  <div class="dashboard">
    <Sidebar />
    <div class="dashboard-content">
      <slot />
    </div>
  </div>
</BaseLayout>

Product Listing Layout

---
import BaseLayout from './BaseLayout.astro';
import Filters from '@/components/organisms/Filters.astro';
import Heading from '@/components/atoms/Heading.astro';

interface Props {
  title: string;
  category?: string;
}

const { title, category } = Astro.props;
---

<BaseLayout title={title}>
  <div class="product-listing">
    <aside class="filters-sidebar">
      <Filters category={category} />
    </aside>

    <div class="products-content">
      <Heading level={1}>{title}</Heading>
      <div class="products-grid">
        <slot />
      </div>
    </div>
  </div>
</BaseLayout>

Best Practices

Do’s

✅ Define clear content areas with slots ✅ Make templates responsive ✅ Keep templates flexible and reusable ✅ Document template structure ✅ Use semantic HTML structure ✅ Handle SEO meta tags

Don’ts

❌ Include specific content in templates ❌ Make templates too rigid ❌ Forget mobile responsiveness ❌ Skip accessibility considerations ❌ Hardcode values that vary by page