Highlight box

What is it?

The highlight box is a shaded box. It can be applied to paragraphs, headings, images, tables, layouts or a combination of more than one of these elements. It can only be inserted in the body of a page.

There are currently two options for the style of highlight box:

  • a complementary colour highlight box which is based on the colour of the global section you are in - for example, blue for this page which is within the Departments & Services section
  • a neutral colour highlight box which is a shade of grey designed to complement all pages of the website, regardless of the section you are in

This is an example of a neutral highlight box with some text inside it.

Read the guidance below for more examples of how to use the highlight box.

What should it be used for?

The highlight box is designed to draw attention to content on your page. Use it with layout tables to give definition to a specific area of the page in contrast to the default white background of a CMS page.

Here are some example ways you can use the highlight box:

Experiment with the complementary and neutral colours of highlight box. A complementary colour box is good for making content stand out on the page. A neutral colour box is perhaps less prominent but can be an effective way of grouping elements to help the user make sense of content as they scan the page.

Things to consider

A few things to consider when you are thinking about inserting a highlight box:

  • Avoid applying the highlight box style to a whole page, so all the content sits in it, as this neutralises the impact of the box. The primary background colour of your pages should still be white
  • Don't insert too many boxes on one page, as again the impact of them will be reduced
  • Try to avoid using a lot of coloured header text in highlight boxes, as the contrast in colours is not as strong compared to when coloured text is used against a white background
  • It is not possible to nest styled boxes within styled boxes, as can create complicated layouts with unclear colour arrangements
  • Our image style is to present images without borders, so don't just place an image in a styled box on its own

How to insert a highlight box

  1. Use your mouse to select and highlight the content you want to appear inside the highlight box
  2. Click the styled box icon, which can be found on the bottom row of the toolbar to the left of the bold icon
  3. Choose highlight box (complementary) or highlight box (contrasting) from the dropdown
  4. Click OK

You can remove a highlight box by right-clicking on the box and selecting remove styled box.