Components
Eyebrow
An eyebrow is a short pre-heading label shown above a title. It introduces the section topic, category, or context before the main heading.
Basic usage
Bootstrap eyebrow classes are defined in assets/css/core.css. The base class uses the body font, uppercase text, bold weight, letter spacing, and the primary brand color.
| Type | Class | Use |
|---|---|---|
| Base eyebrow | .kf-eyebrow | Creates the small uppercase pre-heading label. |
<div class="kf-eyebrow">Our Services</div>Color variants
Add a color class with .kf-eyebrow to change the eyebrow color.
| Variant | Class | Use |
|---|---|---|
| Brand color 1 | .kf-brand-color-1 | Uses the primary brand color. |
| Brand color 2 | .kf-brand-color-2 | Uses the secondary brand color. |
| White | .kf-white | Uses white text. |
| Black | .kf-black | Uses black text. |
<div class="kf-eyebrow">Our Services</div>
<div class="kf-eyebrow kf-brand-color-2">Our Services</div>
<div class="kf-eyebrow kf-white">Our Services</div>
<div class="kf-eyebrow kf-black">Our Services</div>Inside section headings
Place the eyebrow inside .kf-section-heading-main, before the heading.
<div class="kf-section-heading-main">
<div class="kf-eyebrow">Why Choose Us</div>
<h2>Premium sections for client websites</h2>
</div>Custom color
Add a custom modifier class when you need one extra eyebrow color.
.kf-eyebrow.kf-success {
color: #16a34a;
}Basic usage
Tailwind eyebrow classes are defined in src/assets/css/input.css. The base class uses the body font, uppercase text, bold weight, letter spacing, and the primary brand color.
| Type | Class | Use |
|---|---|---|
| Base eyebrow | .kf-eyebrow | Creates the small uppercase pre-heading label. |
<div class="kf-eyebrow">Our Services</div>Color variants
Add a color class with .kf-eyebrow to change the eyebrow color.
| Variant | Class | Use |
|---|---|---|
| Brand color 1 | .kf-brand-color-1 | Uses the primary brand color. |
| Brand color 2 | .kf-brand-color-2 | Uses the secondary brand color. |
| White | .kf-white | Uses white text. |
| Black | .kf-black | Uses black text. |
<div class="kf-eyebrow">Our Services</div>
<div class="kf-eyebrow kf-brand-color-2">Our Services</div>
<div class="kf-eyebrow kf-white">Our Services</div>
<div class="kf-eyebrow kf-black">Our Services</div>Inside section headings
Place the eyebrow inside .kf-section-heading-main, before the heading.
<div class="kf-section-heading-main">
<div class="kf-eyebrow">Why Choose Us</div>
<h2>Premium sections for client websites</h2>
</div>Custom color
Add a custom modifier class inside src/assets/css/input.css when you need one extra eyebrow color.
.kf-eyebrow.kf-success {
@apply text-emerald-600;
}