Editorial Block with Sidebar
Elegantly present text, images, and supporting information
Demo - Text and associated calls-to-action
Here, you can add anything from a few sentences to a few hundred words. This can be accompanied by calls-to-action directly relevant to this content, such as downloading a report or getting in touch for a quote.
Consider skim readers at all times. This means breaking text up and adding visual variety. Your options include:
- Bulleted lists
- Numbered lists
- Headings (e.g. H3, H4)
- Hyperlinking
See our guide on how to use the Rich Text Editor.
Overview
Elegantly present text, images, and supporting information
Editorial Block with Sidebar is one of your most flexible options for presenting text. As well as being able to neatly deliver up to 200 words, it supports media in the parallel column.
Column one accounts for 33% of the component. You can include one of the following:
- A quote
- Stats and facts
- An image
- Call-to-action buttons
Column two accounts for 66% of the component. You have the option of:
- Body text box – use the Rich Text Editor to format your copy
- Accordion – reduces clutter with a clickable dropdown (see the Accordion guide for more information)
Text and a suitable image
Choose an image that complements your text.
- Use portrait images for text that’s roughly 150 words or more.
- For shorter text (fewer than 100 words), use a landscape image.
- Alternate alignment of columns if using this component more than once, to add balance to the page.
If an image is informative or meaningful in this context, add a text alternative that conveys this. But if an image is decorative in context (such as trees accompanying copy about climate risk) use an empty tag, alt="", which tells assistive technology to ignore it.
Text and a striking quote
Add credibility and reinforce your message with an accompanying quote. This could be from a client or a subject matter expert, for example.
- Aim for no more than 30 words for your quote
- Check on mobile – if you need scroll to read the whole quote, it’s too long
- Quotes are easier to scan when on the right
If this is a pull quote, e.g. in an article where the quote also appears in the body text, it should appear ahead of that.
Go to Quote for more guidance.
Quotes should be brief and sound natural and authentic. They can help you draw the eye to key messages, making content more engaging and memorable.
Text and numbers worth highlighting
Highlight key messages and numbers to bolster your copy.
Using stats can be an effective way to draw the eye to the section, and inspire trust in your content.
Make sure that you:
- Always use a number for the heading (use symbols such as % and + where appropriate)
- Use the smaller copy line to make both lines read like a complete sentence
- Align stats and facts to the right
Make the heading of each fact short (and don't let it run to two lines). Follow this with concise explanatory copy that completes the statement.
1,2,3,
or up to four stats can sit alongside your body text.
100
instead of 'one hundred', with digits and appropriate symbols (e.g. +, %, US$).
How to use it
Editorial Block with Sidebar is suitable for any page type. But there are a few rules to make sure it looks good and functions correctly.
Remove text formatting
The CMS responds best to clean text, free from residual code left by word processing apps. So before pasting your text in the rich text editor, you need to clean it.
There are several ways you can do this:
- In the CMS, highlight your text and press the ‘remove format’ icon
- Paste your text into notepad first, then copy and paste from there into the CMS
You can also use a keyboard shortcut to paste without the formatting:
- CTRL+SHIFT+V (Windows)
- CMD+SHIFT+V (Apple)
Make use of white space
White space, or negative space, is the intentional separation of visual elements to improve user experience.
Effective use of white space can reduce cognitive load, guide the eye, and make content more digestible.
When writing text, appropriate use of white space involves breaking up text to make it clear to read. A paragraph should contain no more than four consecutive sentences. This improves readability by helping to keep each point clearly demarcated, an essential for skim readers.
Alternate the alignment of the columns
When using the component more than once per page, swap the alignment of the columns. Select the ‘right align column 2’ checkbox to alternate the alignment of the columns:
However, the quote and stats and facts options look best on the right. So for the instances immediately preceding and following, align column two on the left.
Do's and don'ts
Do
Balance the length of both columns
The text box or content panels shouldn’t be significantly longer or shorter than the media in the right-hand column.