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

Atoms

Basic styling and elements

Colours

Using Webflow swatches, you can change these colours globally

Background
#001736

Body
#FFFFFF

Background Dark
#01142E

Background Black
#000000

Body Dark
#001736

Background Mid
#001B3F

Body Light
#FFFFFF [80%]

Background Light
#4D5D72

Background Border
#1a3457

Highlight
#8B6F4A

Background Xtra Light
#ECF0F6

Headings

Use the ‘All’ tag to edit these heading styles

Heading

Typography

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

Paragraph XL

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

Paragraph Large Bold

Paragraph

Paragraph Bold

Paragraph Small

Paragraph Small Bold

Subheading

Statement

“Statement with an indent that is used as a testimonial.”

Statistic + Statistic Small

100%

Rich Text Block + Block Quote

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

Button

Arrow Link

arrow_forward

Arrow Link

Forms

Basic enquiry form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the 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

Icon Wrapper Tiny

Icon Wrapper Small

Icon Wrapper

Icon Wrapper Large

Icon Wrapper XL

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

Icon Wrapper Tiny

public

Icon Wrapper Small

public

Icon Wrapper

public

Icon Wrapper Large

public

Icon Wrapper XL

public

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

2:1 Ratio (50%)

3:2 Ratio (66.6%)

4:3 Ratio (75%)

1:1 Ratio (100%)

Image with a rollover link (Rollover Wrapper)

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

Rollover Wrapper

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