Templates & Page Types

Templates and Page Types help you standardize page layouts and attach page-level metadata across your site.

Templates

A template is an ordered bundle of sections. It defines "this page layout has these sections in this order."

Instead of manually adding sections to every new page, you create a template once and reuse it.

Creating a Template

1. Go to Editor → Templates
2. Select from existing published sections
3. Reorder sections as needed
4. Publish the template

A template named "Blog Layout" might contain:

1. Hero Section (key: smallHero)
2. Content Section (key: text)
3. Related Posts Section (key: latestNews)

Purpose

Templates solve a common problem: ensuring consistency. When multiple pages share the same structure (e.g., all blog posts have a hero, content area, and related posts), a template guarantees they all use the same sections in the same order.

Page Types

A Page Type combines a Template with Reference fields. Reference fields use the same element types (string, media, link, datetime, etc.) and act as page-level metadata — data that belongs to the page itself rather than to any specific section.

Use Case

A "Blog Post" Page Type could have:

• Template: "Blog Layout" (smallHero + text + latestNews sections)
• Reference fields:
  • author (string) — who wrote it
  • publishDate (datetime) — when it was published
  • featuredImage (media) — for social sharing and listings
  • category (option) — blog category

This is useful for example when you want to create components that uses content from a page without fetching the full content of that page (e.g: Latest News cards from blog post pages)

When you create a page with this Page Type, the template sections are automatically added and the reference fields appear as page-level metadata fields.

Reference Fields vs Section Elements

Recommended Workflow

1. Define Sections in the Editor

Create the individual content blocks your site needs: hero, text, CTA, image grid, testimonials, etc. Each section defines its own elements (fields).

2. Compose Sections into Templates

Group sections into reusable page layouts. A "Landing Page" template might combine hero + features + testimonials + CTA. A "Blog Post" template might combine smallHero + text + relatedPosts.

3. Wrap Templates in Page Types with Reference Fields

Add page-level metadata fields to your templates. A "Blog Post" Page Type adds author, publish date, and category on top of the blog layout template.

4. Create Pages Using Page Types

When creating a new page, select a Page Type. The template sections are pre-populated and reference fields are ready to fill in. Content editors can focus on writing instead of assembling page structure.

On the Frontend

Reference field data arrives in page.references as an array of objects. Access it via the useBrease() hook in client components:

'use client';

import { useBrease } from 'brease-next';

export default function BlogMeta() {
  const { references } = useBrease();

  if (!references || references.length === 0) return null;

  return (
    <div>
      {references.map((ref, index) => (
        <span key={index}>{ref.key}: {String(ref.value)}</span>
      ))}
    </div>
  );
}