Style Guide

Updated on 7 Aug 2023

This is a h1 Title.

This is a h2 Title.

This is a h3 Title.

This is a h4 Title.

This is a h5 Title.
This is a h6 Title.

Paragraph

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.

Block Quote

"Curabitur et condimentum turpis tincidunt sed tellus. Ut maecenas mauris tortor nibh in aliquam pellentesque ac purus."

Unordered List

  • Here is a simple example.
  • Here is a simple example.
  • Here is a simple example.
  • Here is a simple example.

Ordered List

  1. Here is a simple example.
  2. Here is a simple example.
  3. Here is a simple example.
  4. Here is a simple example.

Image with caption

Abstract background teal tint | CROcheck a marketing lead generation landing page Webflow template
Image with a 3:2 aspect ratio

Image aspect ratios

Abstract background teal tint | CROcheck a marketing lead generation landing page Webflow template
Image with a 1:1 aspect ratio
Abstract background teal tint | CROcheck a marketing lead generation landing page Webflow template
Image with a 4:3 aspect ratio
Abstract background teal tint | CROcheck a marketing lead generation landing page Webflow template
Image with a 3:2 aspect ratio
Abstract background teal tint | CROcheck a marketing lead generation landing page Webflow template
Image with a 8:5 aspect ratio
Abstract background teal tint | CROcheck a marketing lead generation landing page Webflow template
Image with a 16:9 aspect ratio
Abstract background teal tint | CROcheck a marketing lead generation landing page Webflow template
Image with a 21:9 aspect ratio

Rich text element h1 Title.

This is a h2 Title.

This is a h3 Title.

This is a h4 Title.

This is a h5 Title.
This is a h6 Title.

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!

"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."
  • Here is a simple example.
  • Here is a simple example.
  • Here is a simple example.
  • Here is a simple example.
  1. Here is a simple example.
  2. Here is a simple example.
  3. Here is a simple example.
  4. Here is a simple example.

This is a link

Colors

The different weights of greys and colours used throughout the website.

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Accent
Yellow
Green
Dark Green
Black
Grey
White
White 50%
White 25%
White 15%

Global Text Styles

Text Centered

Text Centered On Mobile

Text Accent

Text Secondary

No Margin Top

No Margins

No Paddings

No Paddings Top

Text White

Buttons

These are all the buttons that are used in this project. Editing them will reflect the changes on all the other buttons of the project too.

Label
Button Large
Label
Menu CTA

Icons

Youtube icon white | CROcheck a marketing lead generation landing page Webflow templatePlus circle icon white | CROcheck a marketing lead generation landing page Webflow templateStar icon white | CROcheck a marketing lead generation landing page Webflow templateTwitter icon white | CROcheck a marketing lead generation landing page Webflow templateOrdered list icon white | CROcheck a marketing lead generation landing page Webflow templateFile download icon white | CROcheck a marketing lead generation landing page Webflow templateInstagram icon white | CROcheck a marketing lead generation landing page Webflow templateCheck circle icon white | CROcheck a marketing lead generation landing page Webflow templateFacebook icon white | CROcheck a marketing lead generation landing page Webflow templateChart growth icon white | CROcheck a marketing lead generation landing page Webflow templateArrow right icon white | CROcheck a marketing lead generation landing page Webflow templateArrow left icon white | CROcheck a marketing lead generation landing page Webflow template

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.