Place your Typekit or web fonts here.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? & @ % $ , " '
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? & @ % $ , " '
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? & @ % $ , " '
General rules and style to be applied to text and containers that will give them consistent representation on the site.
By default, the font size is set to 100%, which in most browsers is 16px. This is also the baseline for your rem units - which are used for headings. If you set the base font size on the <body> to 18px, then your headings will increase in size as well.</body>
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
We have created some utility classes to quickly and consistently scale the size of text throughout the site. These classes may be applied to any text component.
For paragraphs, these classes will adjust the font size to the exact percentage of the base font size (typically 16px - so 100% = 16px).
.text-xsmall - 60%
.text-small - 80%
.text-medium - 100% // normal
.text-large - 120%
.text-xlarge - 140%
For simplicity, if you want to make one type of header the same size as a different one, simply apply the .h1, .h2, .h3, etc. class. This is convenient because you can use appropriate headings semantically, but adjust sizes consistently.
We already have a way to make large headings smaller (using the .h3, .h4, etc. classes). Here we have a couple class combinations that give even larger headings - it makes sense to only apply these to the .h1 class as it is the largest.
To make icon fonts easy to work with in Webflow, we use ligatures to replace text in an .icon container with the appropriate icon. Simply type out the corresponding word for the icon, select it and 'wrap it with a span', then add the .icon class.
The icon set can be generated using IcoMoon.
<span class="icon">search</span>
search
search
search
check
check
times
times
home
home
chevron_up
chevron_up
chevron_down
chevron_down
chevron_left
chevron_left
chevron_right
chevron_right
facebook_square
facebook_square
twitter_square
twitter_square
linkedin_square
linkedin_square
snapchat_square
snapchat_square
cloud_download
cloud_download
donate_button
donate_button
left_quote
left_quote
map_marker
map_marker
tro_team
tro_team
right_quote
right_quote
diamond
diamond
phone
phone
apply_button
apply_button
envelope
envelope
transocean_logo
transocean_logo