Colour block

Use this content type to highlight important information. Short notices, top-line statistics and key details about your service work well here.

This is a Call to action buttonThis is a Download button

Video - highlight box

Add videos to provide a preview of your services or work

Sometimes, you need to highlight content so that it stands out. Your page may have paragraphs of text but you want to make your user aware of core information. You can achieve this using a highlight box.

A highlight box works by apportioning a section of your page to important information so that the user can't miss it. On a monitor, the highlight box will appear on the right of the page and on a smaller display the highlight box appears at the top of the page under the navigation.

See the Colour block, Call to action button, Document download button and Video on this page. These four content types sit in the highlight box space or container. 

You can only have one highlight box on a page and it will resize depending on the number of items in it. Text flows around the highlight box as you resize the screen. 

Good examples of content for a highlight box include: reminders, opening hours, course details and announcements.

Give it a try

Add a widget to your page

  1. Go to your site structure and find the page where you want the highlight box to appear
  2. Hover over the yellow drop down button and click 'Add content'
  3. Select Highlight box widget from the list
  4. A form appears. Give the piece of content a name, e.g. 'HB widget'
  5. Click 'Add and approve'. Your 'Highlight box widget' will be listed as a piece of content on your page

All new pieces of content are added to the bottom of the list. Use the Move up arrows to move the widget above the General content content type it is to sit beside on the page.

Add a hidden sub section to your page

You have added a widget to your page. This widget is programmed to pull content in from a special page that you must create. Follow these steps:

  1. Go to your site structure and find the page you are working on;
  2. Hover over the yellow drop down button and click 'Add section';
  3. The form will appear for creating a new page. Fill in the form with the following details:
&Name HighlightBox You must enter HighlightBox exactly as it appears in the cell to the left. No spaces, a capital H and a capital B with the rest lower case.
Show in navigation? Untick  
Summary of the table's contents
  1. Leave the remaining fields blank and click 'Add and Approve'. A new page will appear and it will look something like this:

Screenshot of t4 structure for setting up a highlight box

Put content into your HighlightBox

You've put the widget on the page and created the sub folder into which you can now add the content you want to appear in the HighlightBox on the page.

These are the four content types that work with highlight boxes:

See the top of this page for examples in a HiglightBox.

Note: If you want a combination of these items, add them all to the one 'HighlightBox' folder. Do not create additional 'HighlightBox' folders and do not more than one highlight box widget to your page.