Jump to Content

Content and content box

Content versus content boxes

This text was inserted into the page via a 'Content (Rich Text)' content type. This content type will expand to the available width of the page layout. If the page layout leaves room for a right bar, this content type is a certain width, whereas if it is a full-width page layout, the text will go all the way to the right hand side of the page. This content should only be used if you need to add content and a Title.

If you need to have multiple blocks of 'Content' in a page, each within their own content types, but only want one headline to appear, use 'Content (Rich Text)' for the first one, specifying your headline text in its 'Title' field. Then use 'Content (no title)' for every other block of text you wish to add.

The practice of leaving a 'Title' field blank (by entering ' ' instead of some text) is strongly discouraged - it creates unwanted vertical whitespace and, more importantly, hinders people who rely on accessibility tools such as Screen Readers.

Colours

Content boxes are an older content type. They were accommodated by the 2015 design but the colour options were ignored - instead of the original colour choices (light green, green, grey, purple, or white), you always had a green header and grey text.
In 2024, the colour options were re-enabled (using the 2022 design's colour palette)

Box Sizes

Content boxes allow you to select the box size (1-4). 1 is equivalent to the width of a left- or right-bar (about a quarter of the page width). If you're page has a left navigation bar, there's only room for a width 3 content box.
If the page has both a left and right bar, there's only room for a width 2 content box, between them.

This content box is size 3 with an ash grey header.

You might be tempted to try to float a small sized box to the right to make a data island but this is not supported (you should use a '3D Content Panel' for this instead).

These sized boxes are designed to fill up available space from the left and are sometimes useful if you already have an image in the body area of the page that is aligned right or left.

This content box has a purple header and a box size of two

This content box has a box size of one and a light grey header.

Notice how the header wrapped onto a second line rather than expand wider than the box size allows.

We are using a teal header and a box size of 4 here.
It only appears as wide as the size 3 box because there's a hard limit on the width a University web page can be.

Note: Don't use this size if your page is going to have a right bar (because there wouldn't be room for it).

Large Content Box with Image

This is the 'Large content box with image' content type.
You can use any 'Background image / Image Path (CSS)' - in the media library.

The image is always to the left and you need to remember what this will look like on mobile devices (in portrait orientation), so ideally your image shouldn't be greater than 176px wide.