Sections & Elements

Sections and elements are the building blocks of all page content in Brease. A section defines the structure; elements define the fields within that structure.

What is a Section?

A section is a reusable content structure — like a database table definition. It specifies what fields (elements) exist and their types, but contains no data itself. Data is filled in per page via the Builder.

For example, a "Hero" section might define: a title (string), a subtitle (long text), and an image (media). Every page that uses this section gets its own copy of those fields to fill in.

Section Layout

Sections use a matrix layout of rows and slots:

• Rows are horizontal containers stacked vertically
• Each row can have multiple slots side by side
• Each slot holds one Element

This matrix is a visual organizing tool in the CMS Editor — it does not affect frontend rendering. On the frontend, you receive a flat elements object keyed by element keys.

Section Properties

The key Property

The section key is critical — it maps a section to a React component in brease-next's sectionMap.

// CMS: Section with key "hero"
// Frontend: maps to HeroSection component

export const sectionMap = {
  hero: HeroSection, // key "hero" → HeroSection
  features: FeaturesSection, // key "features" → FeaturesSection
  cta: CtaSection, // key "cta" → CtaSection
}

If a section's key doesn't exist in the sectionMap, it is skipped during rendering.

Elements

Elements are typed content fields within a section. Each element has:

Element keys become property names when accessing content on the frontend. A section with elements title, subtitle, and heroImage produces:

{
  title: "Welcome to our site",
  subtitle: "We build great things",
  heroImage: { path: "https://...", alt: "Hero", width: 1920, height: 1080, ... }
}

See Element Types Reference for the full list of types and their frontend values.

Global Sections

Sections can be created as global in the Editor. A global section's content is shared across every page that uses it — editing it on one page updates it everywhere. Use cases: site-wide banners, shared CTAs, footer content blocks.

How It Maps to the Frontend

CMS Editor: Section "hero" with elements: title (string), subtitle (long-text), image (media)
    ↓
Frontend sectionMap: { hero: HeroSection }
    ↓
HeroSection component receives: { title: "Welcome", subtitle: "...", image: { path: "...", variants: [...] } }

A complete example:

// 1. Define the component (must be a client component)
'use client'

import { BreaseImage, type BreaseMedia } from 'brease-next'

interface HeroSectionProps {
  title: string;
  subtitle: string;
  image: BreaseMedia;
}

export default function HeroSection({ title, subtitle, image }: HeroSectionProps) {
  return (
    <section>
      <h1>{title}</h1>
      <p>{subtitle}</p>
      <BreaseImage breaseImage={image} />
    </section>
  );
}

// 2. Register in sectionMap
export const sectionMap = {
  hero: HeroSection,
};

// 3. BreasePage renders it automatically
<BreasePage page={pageData} sectionMap={sectionMap} />