Dialog Box

Style Guide

This page is provided as a guide to assist with managing your website, as well as ensuring brand consistency with offline and other digital assets.

Colours   |   Image sizes   |   Text styles   |   Content templates   |   Buttons   |   Alternate styles



Colours

These are the main colours we have used around your website:

COLOURNAME: #XXXXXX

COLOURNAME: #XXXXXX

COLOURNAME: #XXXXXX



Image Sizes

Below are our recommended image sizes for the various images you may use around your website.

We suggest saving most images as jpgs, and compress them if possible to reduce the loading time of your website.

Content

Homepage carousel: 1920 x 700

Content pages: Maximum width 790px

News thumbnail: 500 x 300

Splashpage image: 900 x 1020

Events

Thumbnail: 580 x 370

Hero image: 1920 x 500

Fundraising

Default fundraiser image: 300 x 300

Badges: 200 x 200 (requires both 'active' and 'inactive' versions)

Merchandise

Product thumbnail: 360 x 360



Text styles

Below are the text styles available for use around your website.

Headings: FONTNAME, #XXXXXX

Paragraph text: FONTNAME, #XXXXXX

Heading 1

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

Heading 2

Unordered list:

  • Ut enim ad minim veniam
  • Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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

Heading 3

Ordered List:

  1. Ut enim ad minim veniam
  2. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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

Heading 4

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

Heading 5

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

Heading 6

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



Content templates

The below are templates that can be placed within the content areas of your website

FAQ

Question example

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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Question lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor?

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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Last question?

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.



Buttons

Default: Used for general buttons, such as 'Find out more'



Primary: Used for main call-to-action buttons, such as 'Register'



Secondary: Used for secondary actions with less importance, such as 'Show more'


Style 2 section

We have alternative coloured panels that are used around your website. This is an example of how a 'style 2' section appears.

Headings: Same as default section

Paragraph text: Same as default section

Heading 1

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

Heading 2

Unordered list:

  • Ut enim ad minim veniam
  • Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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

Heading 3

Ordered List:

  1. Ut enim ad minim veniam
  2. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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

Heading 4

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

Heading 5

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

Heading 6

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



Buttons

Default: Used for general buttons, such as 'Find out more'



Primary: Used for main call-to-action buttons, such as 'Register'



Secondary: Used for secondary actions with less importance, such as 'Show more'


Style 3 section

We have alternative coloured panels that are used around your website. This is an example of how a 'style 2' section appears.

Headings: #XXXXXX

Paragraph text: #XXXXXX

Heading 1

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

Heading 2

Unordered list:

  • Ut enim ad minim veniam
  • Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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

Heading 3

Ordered List:

  1. Ut enim ad minim veniam
  2. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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

Heading 4

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

Heading 5

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

Heading 6

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



Buttons

Default: Used for general buttons, such as 'Find out more'



Primary: Used for main call-to-action buttons, such as 'Register'



Secondary: Used for secondary actions with less importance, such as 'Show more'


Donate