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).

Useful links

Colours

Using Webflow swatches, you can change these colours globally

Headings

Use the ‘All’ tag to edit these heading styles

Typography

These classes allow you to edit all of the typography across the site

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:
starapartmentlocation_city
And they can be used  arrow_forwardinline using the Inline combo class on a spanmagic_button

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

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

Image with a rollover link (Rollover Wrapper)

Image with a fade-in transition to denote a link. Good for a project thumbnail.