Utility Classes

Background helpers

Use these classes to quickly apply global brand, light, dark, and gradient backgrounds.

.kf-bg-brand-1
.kf-bg-brand-2

.kf-bg-light-1
.kf-bg-light-2
.kf-bg-light-3

.kf-bg-dark-1
.kf-bg-dark-2

.kf-bg-gradient-1
.kf-bg-gradient-2

<section class="kf-section kf-bg-light-1">
  ...
</section>

Text helpers

These utilities help improve typography and readability.

.kf-text-muted
.kf-text-balance

.kf-lead-text
.kf-lead-text-first

• .kf-text-muted creates softer text color.
• .kf-text-balance balances long headings across lines.
• .kf-lead-text makes all paragraphs inside larger.
• .kf-lead-text-first enlarges only the first paragraph.

Line clamp utilities

Use line clamp classes to limit text to a fixed number of lines.

.kf-line-clamp
.kf-line-clamp-1
.kf-line-clamp-2
.kf-line-clamp-3
.kf-line-clamp-4
.kf-line-clamp-5
.kf-line-clamp-6

<p class="kf-line-clamp kf-line-clamp-3">
  Long content...
</p>

Font helpers

Apply global font families anywhere in your project.

.kf-font-heading
.kf-font-heading-secondary
.kf-font-body

<h2 class="kf-font-heading-secondary">
  Creative Studio
</h2>

Responsive spacing helpers

Remove unwanted spacing on specific devices without writing custom CSS.

.kf-pt-0-tablet
.kf-pb-0-tablet
.kf-mt-0-tablet
.kf-mb-0-tablet

.kf-pt-0-mobile
.kf-pb-0-mobile
.kf-mt-0-mobile
.kf-mb-0-mobile

<section class="kf-section kf-pt-0-mobile">
  ...
</section>

Transition helper

Apply the global transition token to any element.

.kf-transition

<a href="#" class="kf-transition">
  Learn More
</a>

Pattern utilities

KitFront includes ready-to-use CSS background patterns.

.kf-pattern-01
.kf-pattern-02
.kf-pattern-03
.kf-pattern-04
.kf-pattern-05
.kf-pattern-06
.kf-pattern-07

Add the white class to invert the pattern for dark backgrounds.

<div class="kf-pattern-01 white"></div>

Box shadow utilities

Use predefined shadow helpers throughout your project.

.shadow-sm
.shadow
.shadow-lg

<div class="shadow-lg">
  ...
</div>