Body Text

Present text without extra visual features

Demo examplesOverviewHow to use itDo's and don'ts

Demo

The Body Text component has lots of options. You can use it for just a few sentences, or a few hundred words. Always build pages with skim readers in mind. Break text up with plenty of subheadings and visual variety.

Here are a couple of examples.  

Tips for a bullet list 

  • Juiciest, most enticing bullet point always goes first
  • Then your second sexiest selling point
  • Keep them as short and punchy as possible
  • Aim for 5-7 bullets (9 is overkill, 10 is too many)
  • Always try and finish on a good one

Four pointers on using a numbered list

  1. When things have a natural sequence or running order, a numbered list will serve you well.
  2. Mentioning a number in the heading is a good way to trick readers into reading your full list, as their brains naturally crave completion. 
  3. If you are going a bit longer with these, make sure to prioritise clarity and readability. Two short sentences are better than one long one.
  4. It's vital to be aware how people skim-read bullets and pulls outs: they scan the first three words, then the last three, then decide if the middle is worth the effort. Choose beginnings and endings wisely, to make maximum impact.

You can also do the same things without the coloured background. Too many pastel colours can quickly reach overkill.

Bullet list

  • If you need two bullet lists near each other, try one with a pastel background...
  • ...followed by one without, in plain black and white

Numbered List

  1. Instead of numbers, you might consider a,b,c, etc.
  2. Use numbered lists sparingly for maximum impact 

Overview

Present text without extra visual features

Body Text is a versatile option for displaying text. It’s simple to use and works for any content type.

How you use it depends on where you place it on the page.
 

Using it as the first component after the hero

Starting the page with a H2 below the hero banner is essential for SEO. The body text component makes this easy as it comes with a built-in H2 text field.

Your heading should be a short phrase or sentence that sets up the rest of your copy. Headings should be less than two full lines and must never run onto a third line. This is important for users viewing the content on mobile. This may be around 12 to 15 words (depending on the words you're using). 

Using it anywhere else

Use the Rich Text Editor to format and style your copy. You have a variety of options, including:

  • H2 heading
  • Bulleted/numbered lists
  • Headings (e.g. H2, H3, H4, etc.)
  • Quotes
  • Hyperlinking
  • Tables

See our guide on how to use the Rich Text Editor.

How to use it

Remove text formatting

The CMS responds best to clean text, free from residual code left by word processing apps such as Microsoft Word and Google Sheets.

Before saving your text in the rich text editor, you must clean it first. There are several ways you can do this.

  • In the CMS, highlight the text and select the ‘remove format’ icon
  • Paste the text into notepad first, then copy and paste from there into the CMS

You can also use the keyboard shortcut to paste without the formatting:

  • CTRL+SHIFT+V (Windows)
  • CMD+SHIFT+V (Apple)

Build pages with skim readers in mind

It’s important to break text up with plenty of paragraphs, subheadings, and visual variety. This reduces cognitive load, making the content easier to skim read.

Tips for writing scannable content

  • Paragraphs should be no longer than five lines.
  • Use a subheading every 400 words or so.
  • Make a list whenever there’s the opportunity to do so.


You should also consider breaking the text up with other components. Section Highlight and Editorial Block with Sidebar are good options for adding variety to your page.

Do's and don'ts

Do

  • Standardise your paragraph breaks

    Creating the paragraph break with SHIFT + RETURN will produce neat and tidy spaces between paragraphs.

  • Break up text with images

    Use an image every 400 words or so. Editorial Block with Sidebar is a good option for breaking up text with an image.

Don't

  • Don’t paste images into body text (unless it's an editorial/opinion piece/article)

    If you want to use an image, Editorial Block with Sidebar is a good option.