Typography

Iconography

10th april 2024. We are switching from t-icons to Fontawesome 6. The default icon-set is the pro light 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.

Custom icons

Icon with badge.

24 

                    <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

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

Display fonts

Lorem ipsum class="display-1">

Lorem ipsum class="display-2">

Lorem ipsum class="display-3">

Lorem ipsum class="display-4">

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.

v1.0.811-rev-07dbbad