Styleguide
This is a comprehensive Styleguide which contains the basic styling and small elements (Atoms), as well as larger structures combining several nested elements (Molecules).
Atoms
Basic styling and elements
Colours
Using Webflow swatches, you can change these colours globally
#FFFFFF
#1C1B1F
#FFFFFF
#757574
#B5B5B3
#F5F5F3
#d0d7d9
Headings
Use the ‘All’ tag to edit these heading styles
Heading
Heading
Heading
Heading
Heading
Heading
Typography
These classes allow you to edit all of the typography across the site
Paragraph XL Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph Large Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph Small Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
- Unordered List item
- Unordered List item
- Unordered List item
- Ordered List item
- Ordered List item
- Ordered List item
Block Quote
“Statement with an indent that is used as a testimonial.”
100%
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- This is a List Item
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Block Quote
Buttons
Link and button styles
Forms
Basic enquiry form
SVG Icons
Use Icon Wrapper to make icons consistently sized.
Add an image with no class inside an Icon Wrapper and use a combo class to set the size of the icon
Google Material Symbols
Google Material Symbols are a font which works by consolidating specific text strings into symbols. Be aware that they still behave as a long piece of text.
You can use the Material Symbols and Icons site to find an icon you want to use. All you need to do is set the styling of a text block to Material Icon , click the icon you want to use and change the tab to android. Then you can simple copy the name, and paste it into your text block.
You can also use a span, like this:
And they can be used inline using the Inline combo class on a span
Note: These are Material Symbols and not Material Icons. Symbols are Google's newer version of Icons which is font-based. Icons are older and use individual vector graphics which cannot be used the same way.
Note: With the implementation in this template, the symbols cannot be customised using the interface on the Google Fonts page.
Use Icon Wrapper to make icons consistently sized.
You can use the Material Icon nested inside an Icon Wrapper
Molecules
Subsections for more complex component chunks
Wrapped Image (Ratio Wrapper)
We use Ratio Wrapper with combo classes and nest an image with theImage class applied to make sure images are locked to a certain ratio eg. 16:9 or 3:2
The default ratio with no combo class is 1:1
Create an image with a locked ratio by nesting an Image inside a Ratio Wrapperand combo class variations
Horizontal Scroll Section
Copy the Section with the Horizontal Scroll combo class. It is set up to use four (4) images.
To add or remove images to the section, you'll want to change the Height of the Section Horizontal Scroll to image count * 100vh, and change the Horizontal Scroll Section scroll animation to end at ((image count-1) * -100)vh
