Media

Media combines visual elements with text to give context and alignment within content.

Guidance
Demo & Code

Usage

Use media to add an image or video that supports and reinforces the content. Ensure media used is relevant and impactful.

Each media component needs to be allocated a width and position. We recommend using width percentages in increments of ten at the positions below:

Widths of 30%, 40% and 50% should have a position of left or right.
Widths of 60%, 70%, 80%, 90% and 100% should have a position of centre

Captions

Captions by default contain a coloured background to visually connect the text to the image or video. If your caption text would be better placed without a background, this option is also available.

Full width

A picture of a black dog — A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.

Full width with Brand Dark background

Full width with Brand Light background

Full width without background

Full width video

A long caption, ee mei labores adipiscing, nonumy reprehendunt ex mea umo tota has at, clita bonorum erroribus vis ne.

Media

Usage

Captions

Full width

Full width with Brand Dark background

Full width with Brand Light background

Full width without background

Full width video

Centre 90%

Centre 80%

Centre 70%

Centre 60%

Left 50%

Right 50%

Left 40%

Right 40%

Left 30%

Right 30%