Body font size
The default font size is 16px. This font size will automatically be applied to the text. However, in certain cases where you want to change the default size, the class .text-small should be added to the HTML elements directly, which will give you a 14px text.
For even smaller text, for example asterisk notes, add the class .text-smaller – resulting in 12px text size.
Font Type Sans
The default style uses the TheSans font and will automatically be applied to the text. However, in certain cases where TheSans must be explicitly applied then the font--sans class should be added to the HTML elements directly.
Font weight
Gradient texts
Two gradient types are available to B2C facing applications, which can be applied to text via the following classes:
.b2c-gradient-stroke-light and .b2c-gradient-stroke-dark.
The two gradients are similar in appearance although the dark variant has stronger contrasts between the colours than the light variant.
There is one further gradient class exclusively for B2B applications. This is .b2b-gradient-stroke.
Headings
All HTML headings, from <h1> to <h6>, should be used to structure the page semantically correct. Make sure to use just a single one <h1 class="h1"> on the entire page and do not skip a heading only for design matters. Instead, use classes like class="h1" to make your heading look the way you want it.
Display Styles
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading, a larger slightly more opinionated heading style.
To add a display heading add one of the following classes hero, d1, d2 or d3 to the element.
Headline with Icon
We recommend limiting gradient icon usage only to headlines, and not in general paragraph content. hero, d1, d2, d3.