These colours can used as background colours throughout the site being applied with the class: .pink-bg / .beige-bg / .plum-bg etc. Or to apply these colours to text, use the class: .pink / .beige / .plum etc.
There is consistent hierarchy in the way text is displayed across the website for SEO reasons. H1 must always be used in the top hero section of any page. Underneath the h1, there must be H2 (subheading). this is been specifically styled to be smaller than the H2s that are featured in the body of the page. You can float any heading by using the classes .left / .centre. / .right. If you need to have white text use the class .white, if you need to show black text use the class .black - see examples below:
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890[.,’”-;:!]?&£
This padding style is used between sections on any page. For consistency padding is usually 60px top and 60px bottom. Sometimes sections may need custom adjusting. For example: 40px top and 60px bottom if the elements inside the section vary in margins.
Large section padding 60px by 60px
This padding style is used on small styles boxes like these. It can be customised depending on the content inside, but generally the padding will be between 20px to 30px all sides.
Padding inner box 35px top / bottom by 25 px left / right
Flex layout is used on any parts of the site that require to be laid out on a horizontal or vertical axis. All content boxes and sections that feature text and images side by side use the flex layout. Some examples are below:
2 column flex box
2 column flex box
3 column flex box
3 column flex box
3 column flex box
4 col flex box
4 col flex box
4 col flex box
4 col flex box
Throughout the site there are box shadows used to give elements and pages more depth. They can be used statically or combined with animations and transitions. However, the same style settings should be used each time for consistency. Example below:
Accordions are used throughout the site to organise large sections of information. This is mostly pertaining to disclaimers, terms and conditions or frequently asked questions. Colour variations exist to cater for different page colour themes. See exmaples below:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis placerat nibh. Vestibulum placerat sed erat sit amet fermentum. Aliquam et pulvinar ante, sit amet congue risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis placerat nibh. Vestibulum placerat sed erat sit amet fermentum. Aliquam et pulvinar ante, sit amet congue risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis placerat nibh. Vestibulum placerat sed erat sit amet fermentum. Aliquam et pulvinar ante, sit amet congue risus.
We use a consistent form across the site for email capture leading pages. This is a native Webflow form with minimal styling. To change the colour of the text, simple use the .black or .white classes. Please see example below:
We use tables across the site to display comparison information. You can see and example here. Generally we keep the styling the same across the site, as the table is white, it can go on top of any coloured background. Sometimes the height does need to be adjusted. You may use an additional combo class for this purpose. But use the class .p table div as a base and build on from there. Example below:
We use the native Webflow tabs across the site to showcase different screens/flows on the app. you can find an example here. You can customise the colour and appearance of the horizontal nav by adding an additional combo class. For example, the version below uses an additional class of .general-account to change the colour to purple without effecting any other tab styling across the site.
Most text content sections on the site sit within a flex box div and feature one div with text and one div with an image. When the breakpoints get smaller, the boxes stack on one another. Below are reusable responsive content sections with an example of how to layout headings, paragraphs and images:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a laoreet sem, eu tristique ante. Donec ultricies vel sapien eget scelerisque. Vivamus dignissim dui sem, sed convallis ante sodales vitae. Pellentesque posuere lacus arcu, sit amet ornare mauris dapibus et. Vivamus porta aliquet libero, vitae iaculis justo eleifend nec.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a laoreet sem, eu tristique ante. Donec ultricies vel sapien eget scelerisque. Vivamus dignissim dui sem, sed convallis ante sodales vitae. Pellentesque posuere lacus arcu, sit amet ornare mauris dapibus et. Vivamus porta aliquet libero, vitae iaculis justo eleifend nec.
