Skip to content

Style Guide

Demonstrating styles available to website editors using the "Styles" and "Normal" dropdown in the Content Block...

H1 Heading

Heading sizes can be selected from the Normal dropdown menu - there should be only one H1 Heading on the page

Other custom style can be added from the Styles dropdown.

This is the "lead-text" paragraph size. Lorem ipsum dolor sit amet, oporteat sententiae at vim.

Sub-Heading (H2)

There are also inline styles available to style paragraphs of text in the "Styles" dropdown:

This is a selection with "Highlight Text" style

This is a selection with "BG Header Teal" style

This is a selection with "BG Header Salmon" style

This is a selection with "BG Header Yellow" style

This is a selection with "Teal Text" style

This is a selection with "Salmon Text" style

This is a selection with "Yellow Text" style

This is a selection with Muted Text style

This is a selection with "Small Text" style

This is a selection with "Small Muted Text" style

Sub-Sub-Heading (H3) - Links

It is also possible to style a link using the "Button" style:

This is a button

or "Green Button" style:

This is a button

 

Sub-Sub-Heading (H3) - Lists

Lists can also be style with the yellow tick box using the "List" style:

  • This is a List
  • This is a List

Tables

This is a default table using the built in Table builder in the content block...

Header Header Header
Content Content Content
Content Content Content
Content Content Content

 

When adding a table in the content block set the columns and rows required and change width to 100%. Set Header to "First Row" if you need column titles. In the Advanced tab add the Stylesheet Classes to change the appearance.

Stylesheet Classes: table-primary

  header header header
Text Text Text Text
Text Text Text Text

Stylesheet Classes: table-secondary

  header header header
Text Text Text Text
Text Text Text Text

Stylesheet Classes: table-highlight

  header header header
Text Text Text Text
Text Text Text Text