Editor's Guide

 

URL slugs


/name-of-page-red

Change index section background colour to red, and text white

Screenshot 2018-04-04 09.24.14.png
 

/name-of-page-grey

Change index section background colour to light grey, and text black

Screenshot 2018-04-04 10.02.50.png
 

/name-of-page-black

Change index section background colour to black, and text to white

Screenshot 2018-04-04 10.03.15.png
 

/name-of-page-border

With this slug you can add a blue border to any index section

Screenshot 2018-04-04 09.23.59.png
 

/name-of-page-wide

With this slug you can remove the margin on either side of a section and have items touch the edge (imagery bleeding off the edge)

Screenshot 2018-04-04 09.19.25.png
 

/name-of-page-mobile

In some cases a page design on desktop will not breakdown properly on mobile. Use this slug to create a new section that will replace the original. This allows the desktop version to look correct, but gives you the power to rearrange the mobile alternative page as you see fit.

 ORIGINAL DESKTOP VERSION (IMAGE + TEXT ALTERNATES SIDES)

ORIGINAL DESKTOP VERSION (IMAGE + TEXT ALTERNATES SIDES)

 MOBILE ALTERNATIVE PAGE (IMAGES ARE ALL SET ON THE LEFT, ALL TEXT ON THE RIGHT)

MOBILE ALTERNATIVE PAGE (IMAGES ARE ALL SET ON THE LEFT, ALL TEXT ON THE RIGHT)

 

/name-of-page-desktop

When making a mobile alternative for a section the desktop version that should replace it needs to be labelled as such. As well the desktop version needs to be placed before the [-mobile] page in the index list.

Screenshot 2018-04-04 09.33.47.png
 DESKTOP PAGE COMES FIRST IN LIST

DESKTOP PAGE COMES FIRST IN LIST

 

Code Blocks


Banner red block overlay

This overlay can be used to add headlines, and copy into a red container that can be used over top of photography.

To do so use the homepage banner as a template. Edit the code block and copy the code within. Now you can create a new code block wherever you like! Once you have added that new code block paste the code into it and edit the <h2> (headline), and the <p> (body copy) to what you would like.

Screenshot 2018-04-04 09.41.45.png
 

Simple arrow

This arrow can be used on any page to give the user indication that there is more content to see.

To do so use the homepage banner as a template. Edit the code block and copy the code within. Paste this code into a new code block wherever you want to add an arrow.

Screenshot 2018-04-04 09.51.31.png
 

Tailed Arrow

This arrow can be used on any page to give the user indication that there is more content to see.

To do so use the homepage banner as a template. Edit the code block and copy the code within. Paste this code into a new code block wherever you want to add an arrow.

Screenshot 2018-04-04 09.53.09.png