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.

Icons and documentation at Fontawesome

brand
regular
regular sharp
solid
solid sharp
light
light sharp
thin
thin sharp

Custom icons

Icon with badge.


                    <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

Telegraf-UltraLight
Telegraf-Light
Telegraf-Regular
Telegraf-Medium
Telegraf-SemiBold
Telegraf-Bold
Telegraf-UltraBold
Telegraf-Black
Telegraf-Variable
Variable

Display fonts

Lorem ipsum class="display-1">

Lorem ipsum class="display-2">

Lorem ipsum class="display-3">

Lorem ipsum class="display-4">

Monospace

Roboto monospace
Variable

Lead

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


v1.0.841-rev-f8d5cfe+f8d5cfe75d5a52f58b13d21aa1ee045f0808d96d