CERN Full HTML

CERN Full HTML is an enriched text format included in the CERN Drupal Distribution.

Text Styles

The following styles are made available via the CERN Full HTML module.

Cleaners Styles

The ‘Cleaners Styles’ remove the paragraphs and styles applied to text or images to make sure it sits nicely.

Style	Description
Style	Description
Break columns	If you are building text in columns with aligned images or blockquotes, add break columns to continue working with the text in a single column. This breaks the column structure you have applied to the text.
Clear Paragraphs styles	This removes the styles applied, e.g. columns or blockquotes. You can use it to get text to wrap around an image.
Clear Blockquote styles	Required if the blockquote re-arranges 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.
Hide paragraph in mobile view	In headers, br tags or paragraphs are often used to align the text more centrally. However, this does not translate well to smaller screens. Add this style to the paragraphs so that they look nice in mobile view.

Column Paragraphs

The column paragraph styles are vital for putting the text into the correct width for users to scan it. All text in every Story and Landing Page should have one of these columns applied.

Style	Description
Style	Description
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 CDS images.
Left Col. / Breakout IMG	This puts the text on the left and an image floating on the right. You must also apply the style breakout-right to CDS images.
Right Col. / align IMG	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.
Left Col. / align IMG	This aligns the text on the left, with an image on the right with the CSS class align-right applied.

Block Quotes

These styles align blockquotes into the column structure.

Style	Description
Style	Description
Right BQ / breakout IMG	Places text and blockquote on the right and image on the left.
Left BQ / breakout IMG	Places text and blockquote on the left and image on the right.
Right BQ / align IMG	Places text and blockquote on the right and image on the left, while image and text are aligned.
Left BQ / align IMG	By selecting the text, and applying ‘left BQ/ align IMG’ you can have a blockquote next to an image.

These styles align blockquotes into the column structure.

Style	Description
Style	Description
Small margin left separator columns	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.
hide-inline-text-in-mobile	Like Hide paragraphs, it is used for example in the text of headers, where you add lots of breaklines before the text. Use this style to hide those breaklines in mobile view.
Tags	Adds a highlight effect behind the selected texts, just like tags.
UPPERCASE TAGS	Add the art direction of a tag to a piece of text (use span tag). The highlighted colour is the colour set in the theme settings.
Custom lines	Adds a long line into the text. Most commonly used in the hero header on the homepage to break up the questions.

These add the column style to a bullet point list.

Style	Description
Style	Description
Right UL / breakout IMG	Breaks-out an image on the left when the bullet point list in on the right.
Left UL / breakout IMG	Breaks-out an image on the right when the bullet point list in on the left.
Right UL / align IMG	Breaks-out an image on the left when the bullet point list in on the right and aligns the image with the list.
Left UL / align IMG	Breaks-out an image on the right when the bullet point list in on the left and aligns the image with the list.