Components

Section Heading

A section heading is the reusable title block used at the top of KitFront sections. It includes default spacing, alignment variants, split layout, description styling, and highlighted heading text.

Section headings use the h2 tag by default for SEO-friendly page structure. To change the visual size without changing the heading tag, add a heading size class such as .h1, .h2, .h3, .h4, .h5, or .h6.

Basic structure

Use the wrapper for the full title block, the main area for eyebrow and heading content, and the description area for supporting copy.

Part	Class	Use
Wrapper	`.kf-section-heading`	Creates the reusable title block with default spacing.
Main area	`.kf-section-heading-main`	Holds the eyebrow and heading.
Description area	`.kf-section-heading-description`	Holds supporting copy below or beside the heading.

<div class="kf-section-heading">
  <div class="kf-section-heading-main">
    <div class="kf-eyebrow">Our Services</div>
    <h2>Build websites faster with KitFront</h2>
  </div>

  <div class="kf-section-heading-description">
    <p>Ready-made website sections for modern projects.</p>
  </div>
</div>

Layout variants

Add one layout class to the outer .kf-section-heading wrapper. The inner HTML stays the same.

Variant	Class	Use
Left	`.kf-section-heading-left`	Left-aligns the heading block.
Center	`.kf-section-heading-center`	Centers the heading block.
Split	`.kf-section-heading-split`	Places the heading and description side by side on desktop.

<!-- Left aligned -->
<div class="kf-section-heading kf-section-heading-left">
  ...
</div>

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

<!-- Split layout -->
<div class="kf-section-heading kf-section-heading-split">
  ...
</div>

Compact spacing variant

Add .less-margin when a section needs tighter spacing between the heading and the content below it.

Variant	Class	Use
Less margin	`.less-margin`	Use when the content below the heading should sit closer to the title block.

<!-- Use less-margin for tighter spacing below the heading -->
<div class="kf-section-heading kf-section-heading-center less-margin">
  <div class="kf-section-heading-main">
    <h2>Frequently asked questions</h2>
  </div>
</div>

Highlighted heading text

Wrap a word or short phrase in a span to use the default italic brand highlight style.

Variant	Markup	Use
Highlighted text	`h2 span`	Use inside a section heading when one word or phrase needs the secondary heading style.

<!-- Wrap text in span to apply the highlight style -->
<div class="kf-section-heading kf-section-heading-center">
  <div class="kf-section-heading-main">
    <h2>
      Build websites <span>faster</span> with KitFront
    </h2>
  </div>
</div>

Eyebrow customization

Looking for eyebrow color and style customization? See the Eyebrow documentation.