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.
Aa
Open Sans
Body
Aa
Lora
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.
#f2757a
Primary
#12284b
Secondary
#F8F8F8
Light Grey
#F09599
Light Pink
#e0e0e0
Dark Grey

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.
If you're viewing the published version of the site, you can click on any of the elements to copy its name

text-white

text-pink

text-navy

text-bold

text-regular

text-capitalise

text-open-sans

text-lora

margin-top-40px

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 (75px)

Title 2 (50px)

Title 3 (32px)

Title 4 (25px)

Text 1 (25px)
Text 2 (20px)
Text 3 (18px)

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.

The Button element has been made into a Symbol to make adding it with the adjusted icon easier.

Buttons MUST also be inside a div with the class "cta" to control their spacing.
⚠️⚠️⚠️ Do not add top margin to the button itself ⚠️⚠️⚠️

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. The icons below are already adjusted so feel free to copy them.
Button text - small (16px)
Button text - default (18px)
Button text - large (20px)
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.)

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

Bold text

Italics

TextSuperscript

TextSubscript

Text Links

Block Quote elements
to recite a quote, testimonial,
known saying, etc

  • List items
  • List items

  1. Numbered lists
  2. Numbered Lists