A selection of useful styles to format your content.

Constrain content

A single page (without sidebar) can sometimes be too wide for the content it’s displaying. Wrap the whole page within the following helper div to constrain the content when viewed on desktop. This is not recommended for use within the Editorial Suite.

Constrain content

Image circle

You can make a square image appear as a circle by adding the following class to the <img> tag.

image description.

SVG image

Sometimes you need to set a width for SVG images so they display correctly. Add the style as shown below and change the width accordingly.

image description.

Full width

Make a figure display full width. Do not use when floating.

example image.
Lorem ipsum dolor sit amet

Make an image display full width. Do not use when floating.

image description.

Text centre

To centre text use the following class.

This is some text centred in a paragraph.

Horizontal rule

Use the horizontal rule tag to separate content.

End of a paragraph/section.


Start of a new paragraph/section.