Section Component

Rich Text

A section for displaying text content with optional CTAs. Essentially a section wrapper for the text partial. Supports lead-in text, titles, subtitles, markdown-formatted prose, and flexible background options.

This component was previously named Text Only. It was renamed to Rich Text to reflect its expanded capabilities with extended Markdown syntax. Read Beyond the Black Box for the full story.

Examples

Introduction

Welcome to Our Platform

Everything you need to know

This is an example of a rich-text section with all text elements populated. Notice how the lead-in text appears above the title, providing context for what follows.

The prose content supports markdown formatting, allowing you to create emphasized text, hyperlinks, and structured content with ease.

Key Features

Clean, semantic HTML output
Full markdown support in prose content
Flexible heading hierarchy
Optional CTAs for user engagement

This section type is ideal for documentation, blog posts, or any content-heavy pages where text is the primary focus.

Read Documentation View Tutorial

Styled Background Example

With a subtle background color

This rich-text section demonstrates how background colors can be used to create visual separation between content blocks. The light gray background helps this section stand out from the surrounding content.

Background options include solid colors or images with optional screening effects for better text readability.

Styled Background Example

With an image, dark screen and full screen width

This rich-text section demonstrates how background images with screens can be used. The screen is used so text above the image has enough contrast to be readable. containerFields.inContainer: false will render the background accross the whole screen width.

Configuration

- sectionType: rich-text
  containerTag: article
  # container settings

  text:
    leadIn: 'Introduction'
    title: 'Welcome to Our Platform'
    titleTag: 'h2'
    subTitle: 'Everything you need to know'
    prose: |-
      This is an example of a rich-text section with all text elements populated.
      The prose content supports **markdown formatting**.
  ctas:
    - url: 'https://example.com/docs'
      label: 'Read Documentation'
      isButton: true
      buttonStyle: 'primary'

Configuration Options

Property	Type	Required	Description
`text.leadIn`	string	No	Optional introductory text above the title
`text.title`	string	No	Main heading text
`text.titleTag`	string	No	HTML heading tag (h1-h6)
`text.subTitle`	string	No	Optional subtitle below the main title
`text.prose`	string	No	Markdown-formatted body content
`ctas`	array	No	Optional arrayof call-to-action buttons or links