The purpose of this page is to display styled components and sections in one place, so that changes to global styling can be seen and reviewed on here and then the site can be built by coping the sections from here.
Typography
This is the Title 1 font and font size.
This is the Title 2 font and font size.
This is the Title 3 font and font size.
This is the Title 4 font and font size.
This is the Title 5 font and font size.
This is the Title 6 font and font size.
This is the Title 7 font and font size.
This is the Subheading font and font size.
This is the Accent font and font size.
This is the Body font and font size.
This is the Body Bold font and font size.
This is the Body Big font and font size.
This is the Body Small font and font size.
Colours
Branding Colours
The colours provided by the client.
Primary
Notes
Notes
Secondary
Notes
Notes
Tertiary
Notes
Notes
Utility Colours
These are commoly used colour options that have been set up in the global settings.
Accent
Notes
Notes
Section Background 1
Notes
Notes
Section Background 2
Notes
Notes
Text - Dark Background
Notes
Notes
Text - Light Background
Notes
Notes
White
Notes
Notes
Black
Notes
Notes
Transparent
Notes
Notes
Image Overlay - Neutral
Notes
Notes
Image Overlay - Colour
Notes
Notes
Derived Colours
Complementary
Notes
Notes
Triadic 1
Notes
Notes
Triadic 2
Notes
Notes
Shades
Primary Dark 1
Notes
Notes
Primary Dark 2
Notes
Currently used for Button 1, 3 and 5 hover colour.
Below are some examples of images which have been added as global widgets
On the left the images have a ratio of 3:4 and on the right they are 4:3. This is not enforced in the global widgets but it is used as a default for most images.
Image size: Images are being sized by putting a limit on their height. The width is left as auto and is determined by the aspect ratio of the image. If you prefer a different height for most images across the site, create a new global widget.