Element Types Reference

Brease supports 14+ element types for defining content fields in sections and collections. This reference covers each type, its frontend value, configuration options, and rendering guidance.

Type Reference

String

Plain text, single line. Render directly.

<h1>{elements.title as string}</h1>

Long Text

Multi-line plain text. May contain newlines. Use white-space: pre-line in CSS or split on \n:

<p style={{ whiteSpace: 'pre-line' }}>{elements.description as string}</p>

Rich Text

HTML string from CKEditor. Render with dangerouslySetInnerHTML:

<div
  className="prose"
  dangerouslySetInnerHTML={{ __html: elements.body as string }}
/>

Integer

Whole number. Render directly.

<span>{elements.count as number} items</span>

Decimal

Floating-point number.

<span>${(elements.price as number).toFixed(2)}</span>

Boolean

Toggle/switch value. Use for conditional rendering:

{(elements.showBanner as boolean) && <Banner />}

DateTime

ISO 8601 date string. Parse with new Date() or a date library:

const date = new Date(elements.publishDate as string);
<time dateTime={elements.publishDate as string}>
  {date.toLocaleDateString()}
</time>

Media

Uploaded file with metadata and responsive variants. Check the multiple config to know if the value is an array.

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

// Single media
<BreaseImage breaseImage={elements.heroImage as BreaseMedia} />

// Multiple media
{(elements.gallery as BreaseMedia[]).map((img, i) => (
  <BreaseImage key={i} breaseImage={img} />
))}

The BreaseMedia object includes:

{
  path: string;       // Full URL to original file
  alt: string;        // Alt text
  name: string;       // File name
  width: number;      // Original width
  height: number;     // Original height
  mimeType: string;   // e.g., "image/jpeg"
  mimeGroup: string;  // "image", "video", "audio", "document"
  variants: BreaseMediaVariant[]; // Responsive variants (sm, md, lg, xl, 2xl, hd)
}

Link

Use the BreaseLink component — it handles internal vs external links automatically:

import { BreaseLink, type BreaseLinkData } from 'brease-next'

const link = elements.cta as BreaseLinkData

<BreaseLink linkData={link} className="text-blue-600 hover:underline">
  {link.label}
</BreaseLink>

BreaseLink renders a Next.js Link for internal URLs and a native <a> with rel="noopener noreferrer" for external ones. It respects the target property from the CMS.

Collection

Contains the linked collection's entries inline within the section:

import type { BreaseCollection } from 'brease-next'

const testimonials = elements.testimonials as BreaseCollection

{testimonials.entries.map(entry => (
  <blockquote key={entry.uuid}>
    <p>{entry.elements.quote as string}</p>
    <cite>{entry.elements.author as string}</cite>
  </blockquote>
))}

Reference

Used in Page Types for page-level metadata. The value shape depends on the element configuration within the Page Type definition.

Option

Single value for select/radio, array for checkbox:

// Select or radio — single value
const color = elements.theme as string; // "dark"

// Checkbox — array of values
const tags = elements.categories as string[]; // ["news", "featured"]

{tags.map(tag => (
  <span key={tag} className="badge">{tag}</span>
))}

List

Repeater field. An array of items:

const items = elements.features as string[];

<ul>
  {items.map((item, i) => (
    <li key={i}>{item}</li>
  ))}
</ul>

JSON

Raw JSON data. Parse and use as needed:

const config = elements.settings as { color: string; size: number };

<div style={{ color: config.color, fontSize: config.size }}>
  Custom styled content
</div>

Location

Geographic coordinates. Use with map libraries:

const location = elements.officeLocation as { lat: number; lng: number };

// Use with Google Maps, Mapbox, Leaflet, etc.
<Map center={[location.lat, location.lng]} zoom={15} />

Quick Reference Table