Available layouts/styles

The following layouts/styles can be found in "More Text" options under "Paragraph Styles" and "Inline Classes". The difference between these two dropdown is that Paragraph Styles are applied to a block of content, where as Inline Classes will be be applied to only highlighted content. Example:

Paragraph Style (Heading 5): *This is highlighted*. This is some more text.

Inline Classes (Heading 5): *This is highlighted*. This is some more text.

Notes:

  • To remove a layout/style from a section, simply highlight the section(s) that the style was applied to and remove it by clicking on it again from the dropdowns.
  • There is a "quirk" with the editor. Once you apply a style, that style is applied to the next line (created when hitting enter/return on the keyboard), so if you don't want that same style applied, then you will need to remove it by using the method above.
  • If you are in a styled section (eg. A blockquote), and you want to go to a new line without creating a entire new blockquote, you need to use shift-enter or shift-return to create a new line (may vary depending on your setup).

Headers & Display Headers

For SEO and general use, apply headers to the page through the "Paragraph Format" section (the dropdown next to the one in the screenshot above). You can make a heading larger by highlighting it and applying a Display (1-6) style to it through the "Paragraph Styles" dropdown.

If you want to to apply a heading style to some text but don't want it to affect SEO, highlight the text and apply a Header (1-6) for it through the "Paragraph Styles" dropdown.

Body Text Sizing 

Apply through "Paragraph Styles" or "Inline Classes".

Body Text (Large) --- Magna ea laborum ut eu non pariatur voluptate reprehenderit minim commodo amet fugiat labore velit. Non aute magna Lorem deserunt nostrud et aliquip mollit anim esse proident fugiat aute.

Body Text (Small)--- Magna ea laborum ut eu non pariatur voluptate reprehenderit minim commodo amet fugiat labore velit. Non aute magna Lorem deserunt nostrud et aliquip mollit anim esse proident fugiat aute.

Note: It is not recommended to use the "Font Size" or "Font Family" options in the editor as that can break the overall style guide for the site. These options only exist for emergency use cases. 

Block Quote (Border)

Block Quote (Quotes)

Block Quote (Vector)

Lead Text --- Magna ea laborum ut eu non pariatur voluptate reprehenderit minim commodo amet fugiat labore velit. Non aute magna Lorem deserunt nostrud et aliquip mollit anim esse proident fugiat aute.

Icon List

You can apply this by creating a list like so:

Item 1

Item 2

Item 3

Then highlight all the list items and select "+ Icon List" from Paragraph Styles:

Item 1

Item 2

Item 3

Notes:

  • The "+" icon will share the same colour as the text.
  • This style cannot be applied to a formatted list (such as these notes).

Animated Numbers

You can apply an animated counter to any number by highlighting the number (no commas or other) in any richtext field, then select "Animated Counter (*speed*)" from the Inline Class list.

(slow) Counter applied: 1000000
Counter not applied: 1000000

(normal) Counter applied: 100%
Counter not applied: 100%
Note: Only highlight "100" not the "%"

(fast) Counter applied: $150000
Counter not applied: $150000 
Note: Only highlight "150000" not the "$"

Notes:

  • A limitation to Froala stops the content editor from removing the counter once it has been applied to a number. To remove/change the counter effect, you must delete and retype the number.
  • Numbers only begin animating once the user has scrolled to them.

Tables

You can add tables to the editor by clicking on the "More Rich" button in the toolbar and selecting the "Insert Table" button. You will then have the option to select how many rows and columns you want the table to have.

Once the table is created, click on it to bring up the table toolbar. Here you can add/remove columns and rows, add a header/footer, align the content and select the style of the table (both options seen below). 

Note: Tables will look different between the CMS and the actual site. This is because additional styles are applied in the CMS to help the content editor edit the table.

Table (striped-blue)

Table Header
Table Header
Table Header
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table Cell
Table Cell
Table Cell

Table (styled)

Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell

Table (striped)

Table CellTable CellTable Cell
Table CellTable CellTable Cell
Table CellTable CellTable Cell