If you are building text in columns, with aligned images or blockquotes then you need to add in the break columns to be able to continue to work with the text in a single column. This ‘breaks’ the column structure you have applied to text.

It makes sense to have lots of Break columns throughout a large piece of text, breaking it up and it means you can align some text in different ways.

If something isn’t aligning then you can use the break column to make it.

This removes the styles applied e.g. the columns or any blockquote. You can use it to get text to wrap around an image. E.g.

You will require this if the blockquote sends the lines from the quote across the entire page. If you previously added an style to a paragraph or to a blockquote, it remove these styles.

In the headers, often we use a few /br tags or paragraphs to try and align the text more centrally. But when you see this on mobile view it looks odd and aligns the text weirdly. Add this style to the paragraphs so that they look nice in mobile view.

Right Col. / Breakout IMG

This puts the text on the right, with the image on the left breakout out of the margins You need to apply the class ‘breakout-right’ to the CDS image also e.g.

This puts the text on the left and an image floating on the right. You must also apply the style ‘breakout-right to the image on the CDS wizard. 

This positions the text on the right, with an image in a column to the left, aligned with the text. It makes the text column slightly narrower as the image is more central.

This aligns the text on the left, with an image on the right with the CSS class ‘align-right’ applied.

Places text and blockquote on the right and image on the left, while image and text are aligned.

Note: Sometimes when applying the ‘Clear paragraphs’ style it can look weird in the CK editor (see below) but as you can see from the Source code, and the image above it still renders properly.

By selecting the text, and applying ‘left BQ/ align IMG’ you can have a blockquote next to an image. Below I ‘cleared the paragraphs’ of the text below the blockquote, which has made it wrap up next to the image.

Adds a small margin left to the paragraph (more or less 30px wide) if you want to add a margin in a column next to to another column. Useful for lists next to an image.

Like Hide paragraphs, it’s used for example in the text of headers, where you add lots of breaklines before the text, and in mobile devices it looks weird. Use this style to hide those breaklines in mobile view.

Adds a long line into the text. Most commonly used in the hero header on the homepage to break up the questions.

Left UL / breakout IMG