Styleguide

This page contains all elements to make it easier to edit the style of the whole site.

Typefaces

Change the "Body(All)" font to the primary typeface.
The secondary has to be applied to specific elements or text blocks.

Open Sans

Body

Centrale Sans

Titles

Colours

To change the colours globally, select one of the colours, open the background colour panel, then click the pencil icon (Edit swatch).
Then change the hex or hsla values for the new colour and save. Make sure you're changing the code, not the name.

#BA9964

Primary

#084736

Secondary

#4B5258

Tertiary

#7D5937

Quaternary

#F7CF9C

Quinary

#F7CF9C

Quinary

Combo classes to quickly change text colour of element

Add more by duplicating one of the elements below. Then remove the class and add your own
‍

text-white

text-champagne

text-camel

text-brown

text-green

text-bold

text-regular

text-open-sans

Text

All text should be inside a div called "title-wrapper" or "text-wrapper".
Colours, spacing, and alignment changes should come from combo classes on the title-wrapper.
Only add combo classes to the text itself if you want to change typeface, font-weight, size, line-height.
You can also create new "wrappers" for more specific content (e.g.: hero-title)

Title 1 (100px)

Title 2 (80px)

Title 3 (60px)

Title 4 (32px)

Title 5 (24px)

Title 6 (18px)

Text 1 (18px)

Text 2 (16px)

Text 3 (12px)

Default Headings (no classes)

These are the default styles applied to "All H1 headings" that have no class and can be different from the titles

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

Buttons

Buttons should always be a link block with a class of button and text inside it (with the class "button-text").
Webflow default buttons do not allow you to add icons into them.

Buttons with unusual hover effects have been made into symbols for easier editing.

Buttons should also be inside a div with the class "cta" to control their spacing.
‍
Tip: if you add the icon using the embed element, open the code, find fill/stroke colour in the "path" and set the colour to "currentColor".
This way the svg will inherit the colour of the text.

Button text - small (16px)

Button text - default (18px)

Button text - large (20px)

Hover to see icon

Hover to see icon

Hover to see icon

Hover to see icon

Hover to see icon

Forms

Buttons should always be a link block with a button class and text inside it.
Webflow default buttons do not allow you to add icons into them.
‍
Tip: if you add the icon using the embed element, open the code, find fill/stroke colour in the "path" and set the colour to "currentColor".
This way the svg will inherit the colour of the text.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Containers

AKA layout grids. Anything smaller than the main container has to be a combo class of the original container

Container (12 col.)

Container (10 col.)

Container (8 col.)

Container (6 col.)

Rich Text

Styling that will apply to Rich Text throughout the website

Membership Terms and Conditions

These terms and conditions apply to all playing members of Bulbury Woods Golf Club. The Club is open to the whole community without discrimination of any kind. We may change these terms and conditions from time to time, but we will always publish these changes on our website, giving at least 14 days’ notice of the change.
Members must also abide by the Club Rules of the Club. These cover such matters as how the Club is run, the responsibilities of members regarding dress code, handicaps, competition rules and etiquette on the course. The Club has differing membership categories detailed on the Club Website and Membership Booklet. The various categories are designed to provide suitable playing options for members’ lifestyles and current situations, as well as making best use of the course.

‍

Heading 2

‍

Heading 3

‍

Heading 4

‍

Heading 5

‍

Heading 6

‍

www.google.com

‍

‍

one
two
three

‍

Alpha
Beta
Gamma

‍

Fancy Block Quote
Even Multi-line with shift+enter/return

‍