Style Guide

Heroes

Hero – Default

Options:

  • theme
  • has icon
  • has CTA
  • is large (with BG Image)

Hero Default

Hero Default

Hero Post

Options:

  • theme
  • read time

(author image and name will be populated automatically from blog post)

Hero Post

Hero Post

Hero – Case Study

Options:

  • theme
  • BG Image
  • BG Video (play behind hero)
  • Full Video (opens in Modal from CTA in Hero)

Hero – Case Study

Hero – Case Study

Hero – Case Study

Hero – Case Study

Hero – Case Study

Hero – Case Study

Content Blocks

All Content Blocks consist of a block of default content options along with another element (image, cards, testimonial) depending on the block you pick.

Each content block contains the following options as standard

  • theme
  • label
  • heading
  • WYSIWYG Content
  • CTA (choice of Button or Text/Arrow option)
  • icon
  • internal Link (displays as mini card)
  • has border left (border strip appears on left side of block)
  • heading size

Content blocks available are as follows:

Content Block

Single content block centred on page

Options

  • is left aligned

I’m a content block

Add all your text here…..

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Content Block – Repeated 50%

Content block at 50% width, can add as may as you like to create columns.

Options

 

Block

Content Block 1

Some text can go here

CTA Link

Block

Content Block 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • list item
  • list item

Content Block – with Image

Content block with image in second column.

The image appears in the right column and stays within the site container by default, there is also the ability to add a block heading that appears above the 2 columns.

Options

  • image left
  • image to edge of page

Block Heading

Content Block Heading

Add some text here…

CTA Link

Full Width CTA Block

A Full Width content block used to direct users

Full Width CTA Block

Full Width CTA Block

Full Width CTA Block with Image

A Full Width content block, mostly for use on blog posts, with a team member’s image to the left of the content.

Options

  • Person Image (staff dropdown)

Full Width CTA Block

Text about where you are taking the user to with the CTA goes here

Get in touch

Blocks

There are other non-content blocks available to populate the pages, mostly for use on Blogs and Case Studies.

Meta Block

Used at the top of a case study to display project details.

Can display a list of services, and award image and up to 2 statistics.

Services

Stats

XX million
Description of stat
XX million
Description of stat

Testimonial

Full width Testimonial

Options:

  • theme

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Testimonial – with Image

Testimonial in 50% column, with image in the other column

Options:

  • theme
  • image left
  • image to edge of page

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Media Block

3 different ways to display uploaded videos/images…

Display options:

  • Narrow (50% width, centred)
  • full width to edge of container
  • full width to edge of page

Background Options :

  • theme
  • BG Half (only top half of block background is theme colour)
  • BG Half Reversed (only bottom half of block background is theme colour)

 

 

Video Embed – with background image

Embed a vimeo video with a chosen image displayed behind it

Options:

  • theme
  • BG Image

Colour Swatches

Add between 3 and 4 colour swatches. Staggered down (left to right), by default.

Options:

  • theme
  • stagger up (left to right)
Red #FF0000
Green #00FF00
Blue #0000FF

Statistics Block

Add 2 statistic columns in a block, pick the statistic operator from dropdown

Options:

  • theme

40%

Description of stat

+XX Million

Description of stat