Badge typography

Text88 Text88 Textinfo

Text<span class="badge bg-blue600 t-gray100 t80">88</span>
Text<span class="badge bg-red400 t-red100 t80 bor-orange">88</span>
Text<span class="badge t-red500 t90 bor-none">info</span>

Text 8 Text 888 Text 88888

Text <span class="badge">8</span>

Text 8 Text 888 Text 88888

Text <span class="badge t90">8</span>

Text 8 Text 888 Text 88888 Text 88888

Text <span class="badge t90 bg-gray100">8</span>
Text <span class="badge t90 bg-gray100 bor-gray">888</span>
Text <span class="badge t90 bg-gray100 bor-gray t-gray700">88888</span>
Text <span class="badge t90 bg-gray100 bor-none t-gray700">88888</span>

Text88 Text88 Text88 Text 88

Text<span class="badge bg-blue600 t-gray100 t80" style="--badge-bor-style: dotted">88</span>

Text<span class="badge bg-blue600 t-gray100 t80" style="--badge-bor-width: 5px">88</span>

Text<span class="badge bg-blue600 t-gray100 t80" style="--badge-bor-width: 3px; --badge-bor-style: double">88</span>

Text <span class="badge bg-blue600 t-gray100 t80 bor-none" style="--badge-radius: 5px">88</span>

Header 88

<h2 class="t-pink600">Header <span class="badge bg-pink100 t-pink700 t90">88</span></h2>

Header 88

<h2>Header <span class="badge bg-blue100 t-blue700 t90" style="--badge-top: -100%;">88</span></h2>
<h2>Header <span class="badge bg-green100 t-green700 t90" style="--badge-top: 20%;">88</span></h2>

<button class="button button1 pos-relative">Button <span class="badge-button bg-red600 t-white t80">88</span></button>

<button class="button button2 pos-relative">Button <span class="badge-button bg-orange500 pad3"></span></button>

Text 88

<style>
    .my-badge {
        --badge-top: -70%;
        --badge-radius: 3px;
        --badge-bor-width: 3px;
        --badge-bor-style: ridge;
        --badge-padding: 1px 7px;
    }
</style>

Text <span class="badge my-badge bor-blue t-blue700 bg-blue100 t80">88</span>