Skip to main content

Blocks

Calls to action
Text & structure
Images & media
People & proof
Content tools
Premium blocks

Text 

Words, formatted your way

 

The rich-text workhorse behind most pages — headings, paragraphs, links, lists, inline images — in a familiar what-you-see-is-what-you-get editor. When you just need to write, this is the block.

Use it when: you need prose — an intro, an article body, an explanation, a notice.

Options

  • Content — the full editor: bold/italic, links, bullet and numbered lists, headings, inline images.

Tips

  • Break long passages with headings so readers can scan; 
  • Use new block with different colour to break up text
  • Let other blocks handle layout and Text stays clean and portable.

Pairs with: everything — Divider to separate, Image to illustrate, Text Columns to arrange.

 

Text Columns

Up to four balanced columns

Places content side by side, with the width adjusting automatically to however many of the four you fill — one wide, two halves, three thirds, four quarters. No fiddling with widths. Use it when listing short parallel chunks — features, opening hours, a set of facts.

Options

  • Columns 1–4 (rich text; fill only what you need);
  • Per-column Class (Bootstrap/theme classes like bg-light p-4 border rounded to box or colour a column);
  • Gutter spacing.

Tips

  • Leave a column empty and the rest widen;
  • Use the class field to give one column a coloured, padded "card" look.

Pairs with: Nav Cards, Divider.

Two column

Two columns, your split.

Exactly two rich-text columns with a ratio you choose — even halves, or weighted like 1/3 + 2/3. The block for an intentional, asymmetric side-by-side.

Use it when:

  • pairing main content with a narrower sidebar;
  • you want a specific split the auto-balancing Text Columns won't give.

Pairs with: Text, Image.

Options

  • Layout (the ratio);
  • Left / Right Column (rich text, each with a per-column Class and a Gutter).

Tips

  • lead content in the wider column;
  • the columns stack on mobile, so order them to read top-to-bottom.

Divider

A clean line between sections

 

A simple horizontal rule that adds space and a clear break between stacked blocks. Small, but it does a lot for rhythm.

Use it when: two sections run together and need a visual breath.

Options

  • Style — Colour (theme), Thickness (px), Line Style (solid, dashed…).

Pairs with: Text.

Tips

  • subtle wins — a light colour at 1–2px reads as polish;
  • don't divide every block, reserve it for genuine section changes.