Foundations
Text Utilities
Use text helpers for KitFront text colors, gradient text, balanced wrapping, and lead paragraphs. Choose the tab that matches your starter.
Color text classes
Bootstrap color text classes apply KitFront text colors.
| Text | Class | Use | Preview |
|---|---|---|---|
| Brand 1 | .kf-text-brand-1 | Brand color 1 text | Sample text |
| Brand 2 | .kf-text-brand-2 | Brand color 2 text | Sample text |
| Body | .kf-text-body | Body text color | Sample text |
| Black | .kf-text-black | Black text | Sample text |
| White | .kf-text-white | White text | Sample text |
| Muted | .kf-text-muted | Muted current color | Sample text |
Use color text classes
Add the class to the text element.
<p class="kf-text-brand-1">Brand text</p>
<p class="kf-text-muted">Muted text</p>Gradient text
Gradient text classes apply the KitFront gradient to the text fill.
| Text | Class | Use | Preview |
|---|---|---|---|
| Gradient 1 | .kf-text-gradient-1 | Gradient text 1 | Sample text |
| Gradient 2 | .kf-text-gradient-2 | Gradient text 2 | Sample text |
<h2 class="kf-text-gradient-1">Gradient heading</h2>Text balance
Text balance adjusts short headings so the lines wrap more evenly.
| Text | Class | Use | Preview |
|---|---|---|---|
| Text Balance | .kf-text-balance | Balances heading or short text lines | Sample text |
<h2 class="kf-text-balance">
Build cleaner section headings with balanced wrapping
</h2>Lead paragraph
Lead text classes make paragraph text larger inside the wrapper.
| Text | Class | Use | Preview |
|---|---|---|---|
| Lead Text | .kf-lead-text | Makes all direct paragraphs larger | Sample text |
| First Lead Text | .kf-lead-text-first | Makes the first direct paragraph larger | Sample text |
<div class="kf-lead-text">
<p>This paragraph uses lead text styling.</p>
<p>This paragraph also uses lead text styling.</p>
</div>Color text utilities
Tailwind color text utilities use the KitFront theme tokens.
| Text | Class | Use | Preview |
|---|---|---|---|
| Brand 1 | text-kf-brand-color-1 | Brand color 1 text | Sample text |
| Brand 2 | text-kf-brand-color-2 | Brand color 2 text | Sample text |
| Body | text-kf-body-text | Body text color | Sample text |
| Black | text-kf-black | Black text | Sample text |
| White | text-kf-white | White text | Sample text |
| Muted | text-current/65 | Muted current color | Sample text |
Use color text utilities
Add the utility class to the text element.
<p class="text-kf-brand-color-1">Brand text</p>
<p class="text-current/65">Muted text</p>Gradient text
Use gradient, clipping, and transparent text utilities together.
| Text | Class | Use | Preview |
|---|---|---|---|
| Gradient 1 | bg-linear-to-r from-kf-gradient-1-start to-kf-gradient-1-end bg-clip-text text-transparent | Gradient text 1 | Sample text |
| Gradient 2 | bg-linear-to-r from-kf-gradient-2-start to-kf-gradient-2-end bg-clip-text text-transparent | Gradient text 2 | Sample text |
<h2 class="bg-linear-to-r from-kf-gradient-1-start to-kf-gradient-1-end bg-clip-text text-transparent">
Gradient heading
</h2>Text balance
Text balance adjusts short headings so the lines wrap more evenly.
| Text | Class | Use | Preview |
|---|---|---|---|
| Text Balance | text-balance | Balances heading or short text lines | Sample text |
<h2 class="text-balance">
Build cleaner section headings with balanced wrapping
</h2>Lead paragraph
Lead text classes make paragraph text larger inside the wrapper.
| Text | Class | Use | Preview |
|---|---|---|---|
| Lead Text | kf-lead-text | Makes all direct paragraphs larger | Sample text |
| First Lead Text | kf-lead-text-first | Makes the first direct paragraph larger | Sample text |
<div class="kf-lead-text">
<p>This paragraph uses lead text styling.</p>
<p>This paragraph also uses lead text styling.</p>
</div>