Style Guide

Headings and Titles

Headings use the Heading block type. Select to relevant level from H1 to H6.

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. Use a Heading block type as above, but in the Advanced tab add the Additional CSS Class display-1 to display-4.

Display title 1

Display title 2

Display title 3

Display title 4

Paragraphs

This is a paragraph. Use the Paragraph block type. Curabitur arcu erataccumsan id imperdiet etporttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.

This is a centred paragraph. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.This is a centred paragraph. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.

Lead Paragraph

For a lead paragraph select Medium Font Size from the Text Settings. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta.

Columns

Use the Columns block type for creating more than one column.

Each column is just a container and can contain other blocks.

Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Quotes

Use the Quote block type. You can then select the style to be either Default or Large.

“This is a default quote. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat.”

Mauris Blandit, CBN Europe

“This is a Large quote. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat.”

Mauris Blandit, CBN Europe

CSS Classes for Quotes

You can add these class names to Advanced > Additional CSS Class(es).

bg-light

“Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat.”

Mauris Blandit, CBN Europe

bg-secondary text-white

“Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat.”

Mauris Blandit, CBN Europe

bg-danger text-white

“Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat.”

Mauris Blandit, CBN Europe

bg-primary text-white

“Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat.”

Mauris Blandit, CBN Europe

bg-dark text-white

“Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat.”

Mauris Blandit, CBN Europe

bg-success text-white

“Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat.”

Mauris Blandit, CBN Europe

Buttons

Use the Button block type for buttons. You can select the Style as Default, Squared or Outline. The default colour is orange but this can be customised.

CSS Classes for Buttons

You can add these class names to Advanced > Additional CSS Class(es).

btn-small

btn-block

btn-lg

Group blocks and Backgrounds

A Group block is just a container that can contain other blocks. You can select a background colour for the group in the settings.

A group block with background colour set to Light Grey containing a paragraph block.

A Wide width group block with background colour set to Light Grey containing a paragraph block.

A Full width group block with background colour set to Light Grey containing a paragraph block.

A Full width group block with background colour set to Light Blue containing a paragraph block.

A Full width group block with background colour set to Navy and class set to text-white.