Content pages are where people generally need to go to find out what they're looking for. These are information-rich pages, mostly made up of text, videos, helpful figures, and links to pdfs and other documents.

Introduction

Content pages are typically arranged into sections of text. Breaking pages up into sections makes it easier for people to read and process text.

Subheadings

Where appropriate you can use one level of subheadings.

Images and videos

You can have images and videos on your page.

Generally the images should be something informative, rather than just to make the page seem more visually appealing. But images can be a good way of breaking up long pages of text.

Below is an image with a caption, and also an image attribution button.

An image caption can contain bold text, italics, or links.

Below is an image without a caption or any image attribution. It's fine not to attribute an image, so long as you've checked the copyright status of the image allows that.

a drawer full of pencils

A half-sized, centred image.

a young woman with dark hair looks to camera

A small image floated left.

Images can be full-width, half-width, or small. They can also be set to the left or right with text wrapping around them.

This text will wrap around the images next to it, because we've set the images to float left and right.

You might have to experiment with how you position text blocks to get it to wrap around the images in the way you want.

Don't forget that at different browser sizes the text and images will appear differently anyway.

A young woman with dark hair and a pink t-shirt faces the camera and looks off to the side

A half-sized image floated right.

Below we have an inline video. Note the different aspect ratio of videos (16:9) from images (3:2).

The image placeholder you upload for a video will need to be in 16:9 ratio. If it isn't there will be a 'jump' once the video is played.

Unlike images, videos can't be floated as yet. However having larger videos gives a better user experience because they video will play in-place. Having it slightly larger will make it easier for people to see it.

Woman in front of a brick wall

A caption for the video. A caption can contain bold, italics, and links.

Below is an inline video without a caption.

Some text can be highlighted to draw attention to it. You can use all the standard text items, such as bold, italics, links, lists and subheadings.

Quotes

You can display quotes with an optional image. We also have various options to add a citation and a link to more information about the quote.

a man with arms folded smiling and staring away from the camera

You can have a quote with an image of the person you're quoting.

Quotes without images have a slightly different style, with blue lines above and below the quote.

Quotes without images are a separate block and have a slightly different styling.

Lorem ipsum

Links to other related material can be provided in a special block which automatically gets the title 'See also'.

Alternatively you can provide more information in the form of text, with a button linking to further information. This is more freeform than the 'see also' block.

Document lists are a way of showing lists of PDFs, Word docs, spreadsheets, etc. in a visually clear and appealing way. There's nothing to stop you using a simple list of links, and in some cases that might be preferable. But if you want to draw attention to your non-web documents the document list is useful.

Simple tables

Simple tables allow you to add a few columns and rows. They're ideal if you just want small amounts of data in a very simple format.

Header 1 Header 2 Header 3 Header 4 Header 5
Some tabular data Some tabular data Some tabular data Some tabular data Some tabular data
Some tabular data Some tabular data Some tabular data Some tabular data Some tabular data

CSV tables

CSV tables allow you to upload Excel spreadsheets (saved in CSV format). This is ideal where you have a lot of data, because apart from being convenient you can optionally have a search filter on the table. This makes it much easier for users to find data in a large table.

Last updated