Editorial Suite Helpers

A selection of styles to help format your content used in conjuction with the Content Guides section.

Floating images

When floating images within an article you must use a helper div to wrap the image and all the content it floats with. Add the class content-float to your wrapper div.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Article content feature image

Larger content images can be made into a feature image. Add the class feature-img to the wrapper div as shown below. The image will then display wider than the content.

Always add the URL for the desktop image in srcset="..." and the mobile image in src="...".

Editorial Suite pro tip: Create article images no wider than 750px. For feature images it is recommended to use the <picture> tag and make the desktop version no wider than 1110px. See the Images, Picture & Figures article on how to use the picture tag.

Feature grid

To display a grid wider than the content add the class feature-grid as shown below.

Column

Our store

Editorial Suite Helpers

Floating images

Article content feature image

Feature grid