Typography
Iconography
10th april 2024. We are switching from t-icons to Fontawesome 6. The default icon-set is the pro regular sharp. The syntax here is new. All icons should be replaced but the old syntax and variants for t-icons and FA5 will still work.
brand regular regular sharp solid solid sharp light light sharp thin thin sharp
<div class="icon-with-badge mr-3">
<a href="#" class="nav-icon icon-badge">
<i class="fa-light fa-message"></i>
<span class="badge badge-primary p-1">24</span>
</a>
</div>
Fonts
Body text – Open Sans
Open Sans is our primary body font. Use the Storybook link instead of GoogleApi:
<link rel="stylesheet" href="https://static.talentech.io/googlefonts/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap">
For more information, go to Storybook documentation
Headings — Telegraf
Lorem Ipsum<h1> or <class="h1">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Lorem Ipsum <h2> or <class="h2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Lorem Ipsum <h3> or <class="h3">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Lorem Ipsum <h4> or <class="h4">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Lorem Ipsum <h5> or <class="h5">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Lorem Ipsum <h6> or <class="h6">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Font weights
Display fonts
Lorem ipsum class="display-1">
Lorem ipsum class="display-2">
Lorem ipsum class="display-3">
Lorem ipsum class="display-4">
Monospace
Roboto monospaceLead
This is a lead paragraph. It stands out from regular paragraphs.
Contextual
del: this line of text is meant to be treated as deleted text.
ins: this line of text is meant to be treated as an addition to the document.
u: this line of text will render as underlined
Small: this line of text is meant to be treated as fine print.
Strong: this line rendered as bold text.
em: this line rendered as italicized text.
Other fonts
Google fonts
If you need other fonts than our standard fonts you can get Google Fonts via Storybook. Simply find the font at Google fonts and add and modify a link in your header like this:
<link rel="stylesheet" href="https://static.talentech.io/googlefonts/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap">
… and replace family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap with your desired Google font family and weights.
v1.0.841-rev-f8d5cfe+f8d5cfe75d5a52f58b13d21aa1ee045f0808d96d
