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. 

An important distinction to note is that the highlight box is the 'container' where the items sit, and does not refer to any of the items themselves.  Thus, the blue square which says Colour block is not the highlight box itself, but an item that sits within it. If a highlight box has no items in it, it will just show a blank space.

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;
  • calls to action; and
  • important notices.

Find out how to create a highlight box and add items to it using the guidance below.

How to add a highlight box to your page

Add a widget to your page

The t4 'highlight box widget' is programmed to create a space in a prominent place on your page and pull content items from elsewhere. Add a 'highlight box widget' to your page to begin:

  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.

Add a hidden subsection 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

Add items to your highlight box

The highlight box widget you created in stage one is programmed to find a hidden sub-page called 'HighlightBox'. You have now created this.  Next, add items to it.

Find out how to add the following content to your highlight box:

See the top of this page for examples of these items.

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.

Position your highlight box

Once you have added items to your highlight box, preview your page and you will now see the highlight box with content in it. Notice how your highlight box is right-aligned. You can not change this. However, you can move the highlight box up or down your page.

For example, if you have 'general content' on your page, you can choose whether you want the highlight box to appear in line with the top of the general content, or if you want it to appear underneath it.  The highlight box is best placed at the top of your page.  Follow these instructions to move it:

  1. Go to your site structure and find the page where you placed your 'Highlight box widget';
  2. Hover over the yellow drop down menu and click 'Modify content';
  3. A list of all the different content you have placed on your page will appear. If you hover over each piece of content, you can see what content type they are. Note the column named 'Move'.  Use the up and down buttons to move your highlight box widget up or down and then click 'Save changes'.  Preview the results on your page until you have your desired layout.

The screenshot below shows the list of content on a page. The highlight box widget has been moved to the top.

Screenshot of content items on a page