Demo: Content block

Content block

The content block is the most versatile paragraph type. It renders a rich-text body alongside an optional media item and optional call-to-action buttons.

Fields

  • Body — full HTML rich text
  • Media — optional image or video (renders beside the text)
  • Button group — optional nested button group paragraph
  • Theme colours — background and text colour overrides
  • ID — optional HTML anchor id for in-page links

When to use

Use a content block for any standalone block of editorial text, optionally accompanied by an image and call-to-action buttons. It works in full-width blocks and sidebar blocks, and also serves as the column type inside two column blocks and row blocks.

Example 1 — Plain content block

Everything you see on this page — including this block — is a content block paragraph. The rich text editor supports all standard formatting: headings, paragraphs, bold, italic, lists, tables, and more.

You can embed a blockquote like this to highlight a key statement or pull quote from the text.

  • Bullet list item one
  • Bullet list item two
  • Bullet list item three
  1. Numbered item one
  2. Numbered item two
  3. Numbered item three

Example 2 — Coloured background

A content block can have a background colour applied via the Theme colours field. When using a dark background, set Content colour to white so the text remains legible. This block uses the primary background with white text colour.

All twelve theme colour tokens are available: primary, primary-light, primary-medium, primary-dark, secondary, secondary-light, secondary-medium, secondary-dark, tertiary, tertiary-light, tertiary-medium, tertiary-dark.

Person holding a coffee mug next to a laptop

Example 3 — With media

Add an image or video from the media library via the Media field. The media item renders alongside the body text. This block has a demo image attached from the media library — an engineer working with a circuit board.

Example 4 — With buttons

A button group can be nested inside a content block via the Button group field. Each button in the group has a link URI and label. Buttons can point to internal pages or external URLs. The two buttons below link to the demo overview and an external site.

Back to overview
External link