> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Content Block section — rich text with optional image

> The Content Block section displays a title, multiple body paragraphs, and an optional image. Use it for About, story, or editorial content pages.

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

<ParamField body="label" type="string">
  An eyebrow label rendered above the section title — for example `"How it works"`. Optional.
</ParamField>

<ParamField body="title" type="string" required>
  The section heading — for example `"One source of truth per relation"`.
</ParamField>

<ParamField body="paragraphs" type="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:

  <ParamField body="id" type="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.
  </ParamField>

  <ParamField body="text" type="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.
  </ParamField>
</ParamField>

<ParamField body="image" type="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.

  <ParamField body="url" type="string" required>
    The fully qualified URL of the image.
  </ParamField>

  <ParamField body="alt" type="string" required>
    Descriptive alt text for screen readers and the HTML `alt` attribute.
  </ParamField>
</ParamField>

***

## Settings fields

<ParamField body="paddingTop" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied above the section.
</ParamField>

<ParamField body="paddingBottom" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied below the section.
</ParamField>

***

## JSON example

The following example is taken from `about.json`:

```json theme={null}
{
  "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": {}
}
```

<Note>
  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.
</Note>

***

## 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`](/reference/sections/page-hero) instead. For a minimal conversion-focused block, use [`cta-banner`](/reference/sections/cta-banner).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.