Style Guide

This document has been crafted with the intent of providing guidance for the creation of various elements and components in Webflow. Its primary objective is to uphold consistency and prevent conflicts between classes during the seamless transition of design from Figma to Webflow.

Structure Classes

Defined and flexible core structure we can use on all or most pages. After this structure you will find the specific elements that are adapted to each content.

Body
Structure: Body
Characteristics: Full width, Full high.
Aligning: N/A
Info: To avoid directly assigning classes and distinct styles to the HTML <body> tag, it is recommended to restrict the styles applied to the <body> tag to typography and background-color properties only. Custom styles can be implemented on the 'page-wrapper,' which encompasses the entire page. By doing so, we ensure that styles directly applied to the <body> tag are confined to typography and background-color.
page-wrapper
Structure: Div Block
Characteristics: Full width, Full high.
Info: Styles for page-wrapper are optional. Styles can be applied if needed. However, this element should not be heavily styled.
main-wrapper
Structure: Div Block
Characteristics: Full width, Full high.
Aligning: N/A
Info: The main content of the page. Use a <main> HTML tag that wraps all or most of our website content sections.The nav and footer should not be inside this <main> tag.
Section
Structure: Div Block
Characteristics: Full width, Full high.
Padding: Apply the specific top and bottom padding in this element.
Aligning: N/A
Info: It is recommended to set the HTML tag of this element to <section> on the Settings panel of section element. The background colour for the different section should be settled on this element.
Lateral-padding
Structure: Div Block
Display: Flex
Align: X Center; Y Stretch
Characteristics: Full width, Full high.
Padding: Apply the specific top and bottom padding in this element.
Container
Structure: Div Block
Display: Flex
Align: X. Left / Y. Center
Characteristics:
Layout: 4.5rem
Size: Apply the specific Max W the different values for each breakpoint
Overflow: Hidden
[subsection name]
Structure: Div Block
Characteristics:
Aligning: N/A

Headings

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

Heading 1

Heading 1

Heading 2

Headin 2

Heading 2
Regular

Headin 2

Heading 3

Hading 3

Heading 4

Heading 4

Heading 3
Regular

Hading 3

Heading 4

Heading 4

Heading 4

Hading 3

Heading 4

Heading 4

Subtitle

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

Heading 1
dark-background

Heading 1

Heading 2
dark-background

Heading 2

Heading 3
dark-background

Heading 3

Heading 4
dark-background

Heading 4

Subtitle
dark-background

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

Headings

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

In accordance with WCAG recommendations for accessibility, each page of the webpage should feature a single H1 element, serving as the primary title of the page, followed by a sequential hierarchy of content using H2, H3, and so forth. However, there are instances where design requirements necessitate the use of a visually similar title to an H1. In such cases, a style resembling H1 characteristics may be employed while maintaining a structural hierarchy of H2 to adhere to accessibility guidelines.

heading-style-h1

H2 with H1 style

heading-style-Featured
Text-Block with featured style
Subtitle-style
Text-Block with Subtitle style

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Caption
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Quotation
‍
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Text Classes

body-text
Sample text is being used as a placeholder for real text that is normally present.
body-text-2
Sample text is being used as a placeholder for real text that is normally present.
Featured-text
Sample text is being used as a placeholder for real text that is normally present.
Featured-text
Dark-background
Sample text is being used as a placeholder for real text that is normally present.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines
This CSS style is not supported for Rich Texts on iOS.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines
This CSS style is not supported for Rich Texts on iOS.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Buttons

Button combo class system.

button
Button Text
button-secondary
Button Text
button-underline
Button Text

Colors

Manage recurring text and background colors.

Text Colors

text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternate
text-color-alternate

Background Colors

background-coluor-primary
background-colour-secondary
background-colour-dark
background-colour-dark2
background-featured

Rich Text Elements

The Rich Text elements exhibit distinct styling characteristics tailored for various uses such as Case Studies (involving light and dark sections) and Blog Posts.

Case Study

These are specific styles used for the case study in all its variants.
Rich-text-element

‍

Heading 2

Heading 3

Heading 4

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Example
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Heading 2

Heading 3

Heading 4

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Example
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Rich-text-element-dark

Heading 2

Heading 3

Heading 4

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Example
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
Rich-text-element_blog

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

‍

Example
Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

aaaa

aaa