There are a number of styling choices for text elements. You can use them to apply font faces, increase or decrease
text size, make your text bold, etc.
font-standard represents our standard font size and line height. Note that these are applied by default, so it should generally not be necessary to use this class. You can apply it to reset text elements styled from other sources.
<divstyle="font-size:40px"><pclass="font-standard">
In the middle of Berlin you'll find a unique housing arrangement in the style of New York houses: THE FLATIRON.
</p></div>
<div style="font-size:40px">
<p class="font-standard">
In the middle of Berlin you'll find a unique housing arrangement in the style of New York houses: THE FLATIRON.
</p>
</div>
In the middle of Berlin you'll find a unique housing arrangement in the style of New York houses: THE FLATIRON.
font-tabular is used in description tables which have a small width. It uses a smaller line-height than font-standard.
<divclass="grid gutter"><divclass="grid-item one-half font-tabular">
Building type:
</div><divclass="grid-item one-half font-tabular">
Single-family house
</div></div>
<div class="grid gutter">
<div class="grid-item one-half font-tabular">
Building type:
</div>
<div class="grid-item one-half font-tabular">
Single-family house
</div>
</div>
Building type:
Single-family house
font-hint is used for text that you do not want to draw too much attention to, like legalese.
<pclass="font-hint">
Get a free and non-binding consultation for selling your property. We look forward to your enquiry!
</p>
<p class="font-hint">
Get a free and non-binding consultation for selling your property. We look forward to your enquiry!
</p>
Get a free and non-binding consultation for selling your property. We look forward to your enquiry!
Text Colors
There are a number of colors you can give your text, including signal colors for status information
and others to make the text either more or less visible.
Colors
These are the colors you can use.
Status Information
Confirmation
font-confirm
Information
font-info
Warning
font-warning
Error
font-error
CI Colors
Brand orange
font-brandorange
Line Heights
These classes will change the line height of the element. The line height determines how much whitespace there is
above and below the text within each line.
Cutting Off Text
When you need to make sure that a certain text takes up only one line, regardless of its length, you can use the
font-ellipsis class.
The text will be cut off at the end of the first line, and instead show an ellipsis (…) to indicate that more follows.
Headline Styles
Headlines from H1 to H6 are styled with more or less emphasis to signify their respective place in the
document hierarchy. Depending on the context, you may need to apply those default styles to other elements.
To make an element look like a specific type of headline without actually being one, use the font-hn classes,
where “n” is the desired headline tier (1-6).