Content Blocks

Skip to...

Image Blocks

layout_image_blocks

Headline

Image Panels

layout_image_panels

Headline

Image Cards

layout_image_cards

Headline

Horizontal Image Blocks/Panels/Cards

layout_image_blocks_horizontal

layout_image_panels_horizontal

layout_image_cards_horizontal

Headline

Skip to...

Add Icons

Go to fontawesome.com and search for the icon of your choice. (ALL font awesome icons are available for use)

Click the name of the icon to copy it and paste it after "Icon:" as a tag of the page. Example:

icon: fontawesome-icon-name

Icon Blocks

layout_icon_blocks

Headline

Icon Panels

layout_icon_panels

Headline

Icon Cards

layout_icon_cards

Headline

Horizontal Icon Blocks/Panels/Cards

layout_icon_blocks_horizontal

layout_icon_panels_horizontal

layout_icon_cards_horizontal

Headline

Skip to...

Custom Numbers

By default, number blocks will count up by 1 increment (1, 2, 3,...)

You can customize the number, which is useful for displaying stats, by adding the following tag:

number: ##

Pro Tip: for large numbers like 1000 use "number: 1k" instead.

Number Blocks

layout_number_blocks

Headline

Number Panels

layout_number_panels

Headline

Number Cards

layout_number_cards

Headline

Horizontal Number Blocks/Panels/Cards

layout_number_blocks_horizontal

layout_number_panels_horizontal

layout_number_cards_horizontal

Headline

Skip to...

Text Blocks

layout_text_blocks

Headline

Text Panels

layout_text_panels

Headline

Horizontal Text Blocks/Panels

layout_text_blocks_horizontal

layout_text_panels_horizontal

Headline

Hover

item style: hover

Headline

Alternate

item style: alternate

Headline

Combined

item style: combined

Headline

Reversed

This displays the headline and "learn more" button above the image/icon.

item style: reversed

Headline

width: 1up

width: 2up

width: 3up

width: 4up

width: 5up

With each of the width tags you can also append _slider to create a slider.

width: 3up_slider

Add one of the following tags to the page to change the background:

Find your brand theme colours by logging in to your nation, on the front-end of your website click the gear icon, and then click Branding.

theme: default

Primarily used for excerpts, this changes the colour to white

theme: alternate

Primarily used for excerpts, this changes the colour to light grey

theme: primary

Changes the colour to use your Primary colour

theme: secondary

Changes the colour to use your Secondary colour

theme: tertiary

Changes the colour to use your Tertiary colour (if applicable)

theme: info

Changes the colour to light blue

theme: success

Changes the colour to green

theme: warning

Changes the colour to yellow

theme: danger

Changes the colour to red