Content Block section — rich text with optional image

The content-block section is the primary rich-text component in OlonJS. It renders a section title followed by an ordered array of paragraphs, with an optional image displayed alongside the copy. Use content-block for long-form prose sections: the About page story, a product explainer, an editorial note, or any section that requires more than one paragraph of connected copy. Because paragraphs are stored as a typed array — not a monolithic markdown blob — each one is individually editable in OlonJS Studio.

Data fields

string

An eyebrow label rendered above the section title — for example "How it works". Optional.

string

required

The section heading — for example "One source of truth per relation".

ParagraphSchema[]

required

An ordered array of paragraph objects. Each item in the array is rendered as a separate paragraph in the section body. The array must contain at least one item.Each paragraph object has the following fields:

string

required

A unique identifier for this paragraph — for example "about-p1". Used as the React key. Choose a stable, human-readable slug; changing this ID after publication has no visible effect but may affect CMS history.

string

required

The full text of the paragraph. Plain text only — no markdown or HTML. For emphasis or links within body copy, use the theme’s typography styles rather than inline markup.

ImageSelectionSchema

An optional image rendered beside or below the paragraph block, depending on your theme layout. Follows the same shape as the Hero section image.

string

required

The fully qualified URL of the image.

string

required

Descriptive alt text for screen readers and the HTML alt attribute.

Settings fields

"none" | "sm" | "md" | "lg" | "xl"

Vertical padding applied above the section.

"none" | "sm" | "md" | "lg" | "xl"

Vertical padding applied below the section.

JSON example

The following example is taken from about.json:

{
  "id": "about-story",
  "type": "content-block",
  "data": {
    "label": "How it works",
    "title": "One source of truth per relation",
    "paragraphs": [
      {
        "id": "about-p1",
        "text": "Every essay in this journal is an entry in the posts collection, and every topic is an entry in the tags collection. A post declares its topics as an array of tag keys — that array is the only place the relation is stored."
      },
      {
        "id": "about-p2",
        "text": "The post page resolves those keys against the tags collection to render its topic chips. The tag page runs the relation in reverse: it filters the whole posts collection for entries carrying its key. Nothing is denormalized, so nothing can drift."
      },
      {
        "id": "about-p3",
        "text": "Everything you see — copy, images, colors, even this paragraph — is schema-driven data, editable in the OlonJS Studio without touching a line of component code."
      }
    ],
    "image": {
      "url": "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=1600&q=80",
      "alt": "Tall library shelves filled with books seen from below"
    }
  },
  "settings": {}
}

Paragraph id values should be stable across edits. OlonJS Studio uses them as keys for collaborative editing and revision history. If you reorder paragraphs, keep their IDs the same rather than re-numbering them.

Used on pages

content-block is used on any page that requires multi-paragraph prose:

Page	Purpose
About (`about.json`)	Brand story and architecture explanation
Any static content page	Product explainer, editorial, team bio, FAQ body

For single-sentence supporting copy inside a header band, use page-hero instead. For a minimal conversion-focused block, use cta-banner.

Section Components

APIs & Routes

Content Block section — rich text with optional image

Data fields

Settings fields

JSON example

Used on pages

​Data fields

​Settings fields

​JSON example

​Used on pages

Data fields

Settings fields

JSON example

Used on pages