Section Heading

Basic section heading

Use .kf-section-heading to create a consistent heading block.

<div class="kf-section-heading">
  <div class="kf-eyebrow kf-eyebrow-1">
    Trusted by 500+ Companies
  </div>

  <h2>Build websites faster with KitFront</h2>

  <p>
    Ready-made website sections for modern projects.
  </p>
</div>

Centered section heading

Add .kf-section-heading-center to center all content.

<div class="kf-section-heading kf-section-heading-center">
  ...
</div>

Eyebrow styles

KitFront includes several predefined eyebrow styles.

.kf-eyebrow-1
.kf-eyebrow-2
.kf-eyebrow-3
.kf-eyebrow-4
.kf-eyebrow-5

Choose the style that best matches your design.

Example

<div class="kf-eyebrow kf-eyebrow-2">
  Product Updates
</div>

Best practices

• Use one eyebrow style consistently throughout the website.
• Keep eyebrow text short and descriptive.
• Use centered headings for testimonials, pricing, and FAQs.
• Use left-aligned headings for content-heavy sections.