Styleguide
Columns Guide
All "Columns" elements should contain the "Columns" class on the parent element, not on the inner "Column" elements. Without combining other classes this will give you the default "Columns" behaviour explained in the next column.
These columns have the default layout which splits the content in a number of columns chosen from the column settings menu.
Stretched columns should contain the combination of "Columns Stretched" classes.
The "Stretched" columns, will always be 100% in height, no matter if one column has fewer or smaller content than the other. As you can see in this column we have an image below, the previous column stretches down to match the height of this column. Which allows you to align the inner content vertically to meet your needs based on the height of the higher column.
01 - Column (Desktop)
Reversed columns should contain the combination of "Columns Reversed" classes.
01 - Column (Mobile)
The "Reversed" type of columns are used in case the second column needs to be first in order on mobile devices. Resize the viewport if you're on a Desktop device to see the effect of this combination.
Colors
Black
#000000
White
#FFFFFF
Green
#C4F163
Light Grey
#EAEAEA
Dark Grey
#CCCCCC
For font colors, you can use the name of the color as the class e.g. the "Green" class will give you a green color font.
Also, you can use the combination of the color name class with the "Background" class combination to change the background color of an element e.g. "Green Background" will give you a green background on the element with that class.
Or you can combine both classes if you want to define a font-color and a background color for some elements e.g. "Black Green Background" will give you a black font color with green blackground
Typography: TeX Gyre Heros
Property: Desktop/Mobile
Left side is the property, Right side is the value.
Size: 260px / 60px
Weight: Bold
Kerning: -6% / -5%
Leading: 100%
Display h1
Size: 60px / 30px
Weight: Regular
Kerning: -3%
Leading: 110%
H1 Headline
Size: 60px / 30px
Weight: Bold
Kerning: -3%
Leading: 110%
H2 Headline
Size: 60px / 30px
Weight: 400
Kerning: -3%
Leading: 110%
Regular weight H2 Headline
If you wish to change the default bold weight elements to "Regular" weight, just add the class "Regular" to any default bold element.
Note: This will work on any text element across the website, not only on headlines.
Size: 50px / 26px
Weight: Regular
Kerning: -3%
Leading: 110% / 120%
H3 Headline
Size: 50px / 26px
Weight: Bold
Kerning: -3%
Leading: 110%
H4 Headline
Size: 40px / 22px
Weight: Bold
Kerning: -3%
Leading: 110%
H5 Headline
Size: 20px / 16px
Weight: Regular-Bold
Kerning: -2%
Leading: 130%
B1 Body — To use the bold weight on any text just add the "Bold" class.
Size: 20px / 16px
Weight: Regular-Bold
Kerning: -2%
Leading: 140%
Underlined
Size: 16px / 12px
Weight: Regular-Bold
Kerning: -2%
Leading: 120%
B2 Body — To use the bold weight on any text just add the "Bold" class.
Size: 16px / 12px
Weight: Regular-Bold
Kerning: -2%
Leading: 140%
Underlined
Buttons
Important Note!
Some of the buttons below, contain HTML Embed elements, which contain some custom SVG code,
although there is no need to edit the Embed code except if you want to change the icons, all changes related to
styling can be done from the webflow designer with styling the parent element of the SVG code.
It it not recommended to try and change the SVG code if you have no experience with SVG's or coding.
The Icon Buttons also have a white design, just add the class "White" to the "Icon Button" element.
Icon Buttons
Width: 34px
Height: 34px
Icon Buttons Small
Width: 18px
Height: 18px