Text Utility Classes

Kickstand UI's text utility classes can be used to quickly style text throughout your application without custom styles.

Sizes

text-xxl

text-xl

text-lg

text-md

text-sm

text-xs

text-xxs

<div class="text-xxl">text-xxl</div>
<div class="text-xl">text-xl</div>
<div class="text-lg">text-lg</div>
<div class="text-md">text-md</div>
<div class="text-sm">text-sm</div>
<div class="text-xs">text-xs</div>
<div class="text-xxs">text-xxs</div>

Family

text-base

text-accent

text-monospace

<div class="text-base">text-base</div>
<div class="text-accent">text-accent</div>
<div class="text-monospace">text-monospace</div>

Decoration

text-normal

text-bold

text-italic

text-underline

<div class="text-normal">text-normal</div>
<div class="text-bold">text-bold</div>
<div class="text-italic">text-italic</div>
<div class="text-underline">text-underline</div>

Alignment

text-left

text-center

text-right

<div class="text-left">text-left</div>
<div class="text-center">text-center</div>
<div class="text-right">text-right</div>

Transforms

text-uppercase

TEXT-LOWERCASE

text-capitalize

<div class="my-md p-sm bg-light-light text-uppercase">text-uppercase</div>
<div class="my-md p-sm bg-light-light text-lowercase">TEXT-LOWERCASE</div>
<div class="my-md p-sm bg-light-light text-capitalize">text-capitalize</div>