button
Turns a hyperlinked paragraph text into a call-to-action button. The width of the button depends on the length of copy. On mouseover, the button goes from transparent with a red border to solid red. On red block the button is transparent with a white border and turns solid white on hover. 

button alt
Turns a hyperlinked paragraph text into a secondary call-to-action button. The width of the button depends on the length of copy. On mouseover, the button goes from solid red to transparent with a red border. On red block the button is solid white and turns trasparent with a white border on hover. 

button-full
Turns a hyperlinked paragraph text into a call-to-action button that stretches to the full width of the column. On mouseover, the button goes from transparent with a red border to solid red. On red block the button is transparent with a white border and turns solid white on hover. 

button-full alt
Turns a hyperlinked paragraph text into a secondary call-to-action button that stretches to the full width of the column. On mouseover, the button goes from solid red to transparent with a red border. On red block the button is solid white and turns trasparent with a white border on hover.

footnote
Reduces the font size to 12px and adds a dividing horizontal line above.

graphics
Displays text in light red brand colour #CC0633. Can be used with 1, 2 or 3 paragraphs:

• First paragraph uses a large infographics font.
• Second paragraph uses the H3 style.
• Third paragraph uses the H3 style and is separated from the second paragraph by a line.²

graphics-red
Same as graphics but displays all fonts using dark red brand colour.²

graphics-mid
Displays text in light red brand colour #CC0633. Can be used with 2 or 3 paragraphs:

• First paragraph uses the H3 style.
• Second paragraph uses a large infographics font.
• Third paragraph uses the H3 style.²

graphics-mid-red
Same as graphics-mid but displays all fonts using dark red brand colour.²

graphics-left 
Displays text in light red brand colour #CC0633. To be used with 2 paragraphs only:

• First paragraph uses a large infographics font and displays on the left.
• Second paragraph uses the H3 style and displays to the right of the first paragraph.
• If the text can't fit side-by-side, it will stack.²

graphics-left-red
Same as graphics-left but displays all fonts using dark red brand colour.²

graphics-right 
Displays text in light red brand colour #CC0633. To be used with 2 paragraphs only:

• First paragraph uses the H3 style and displays on the left.
• Second paragraph uses a large infographics font and displays to the right of the first paragraph.
• If the text can't fit side-by-side, it will stack.²

graphics-right-red 
Same as graphics-left but displays all fonts using dark red brand colour.²

hasFootnote
If added to a text component preceding the text component with a footnote, it will close the gap in the left vertical line when both of these components acts as toggleContent.

header-l
Increases the size of an H2 to 48px on a page using a home page template only.

header-xl
Increases the size of an H2 to 60px on a page using a home page template only.

intro
Increases the font size to 24px with a line-height of 36px. An ideal line length is less than 54 characters.

more
Decreases the font size of the last hyperlinked text that's in an individual paragraph, transforms it to upper case, turns it red and adds an arrow (→). ¹

more-all
Decreases the font size of all hyperlinks that are in individual paragraphs, transforms it to upper case, turns it red and adds an arrow (→). ¹

outline
Adds a thin border/frame around your copy.

quote
Adds a pull quote with a red background to your pages or news stories. Use paragraph text for the body of the quote and "Heading 5" for the name attribute, and apply bold treatment to the name. The pull quote can also be used with a red or grey block in a Column Control component.

quote-grey
Adds a pull quote with a grey background to your pages or news stories. Use paragraph text for the body of the quote and "Heading 5" for the name attribute, and apply bold treatment to the name. The pull quote can also be used with a red or grey block in a Column Control component.

relatedTopics
Can be applied to an unordered list within a Text component. Creates a list of items separated by a dividing line with a grey bar on the left side to separate it from the main content area.

col-2, col-3, col-4
Splits a bulleted /unordered list into columns on large screens. On small screens the list will be shown in one column by default. In addition, the following prefixes are available:
md, mds, sm - these must be used with one of the above classes, eg:
col-4 md-col-2 - will display 4 columns on large, 2 on medium, 1 on small

¹ Also works in a Text & Image component.

² If you're using any of the graphics CSS Classes, you can add align-bottom CSS Class to the Column Control component to bottom align your infographics in multiple columns.

Tip:  Within a text component, you can apply styles to individual elements such as headings, links and paragraphs. These styles can be applied by switching to HTML mode in the Text component box and adding a class attribute (e.g., <p class="intro">).

col-2
Splits the list into two columns on large screens.

col-3
Splits the list into three columns on large screens.

col-4
Splits the list into four columns on large screens.