Foundations
Patterns
KitFront includes ready-made background pattern classes for decorative section layers. Choose the tab that matches your starter.
Available patterns
Bootstrap includes seven ready-made pattern classes in assets/css/core.css.
| Preview | Pattern | Class |
|---|---|---|
| Pattern 01 | .kf-pattern-01 | |
| Pattern 02 | .kf-pattern-02 | |
| Pattern 03 | .kf-pattern-03 | |
| Pattern 04 | .kf-pattern-04 | |
| Pattern 05 | .kf-pattern-05 | |
| Pattern 06 | .kf-pattern-06 | |
| Pattern 07 | .kf-pattern-07 |
Basic usage
Add the pattern element inside a relative section and keep your main content above the pattern layer.
<section class="kf-section kf-bg-light-1 position-relative overflow-hidden">
<div class="kf-pattern-01 opacity-25"></div>
<div class="container position-relative z-1">
...
</div>
</section>White pattern
Add white when using a pattern over a dark or gradient background.
<section class="kf-section kf-bg-dark-1 position-relative overflow-hidden">
<div class="kf-pattern-03 white opacity-25"></div>
<div class="container position-relative z-1">
...
</div>
</section>Available patterns
Tailwind includes seven ready-made pattern classes in src/assets/css/input.css.
| Preview | Pattern | Class |
|---|---|---|
| Pattern 01 | .kf-pattern-01 | |
| Pattern 02 | .kf-pattern-02 | |
| Pattern 03 | .kf-pattern-03 | |
| Pattern 04 | .kf-pattern-04 | |
| Pattern 05 | .kf-pattern-05 | |
| Pattern 06 | .kf-pattern-06 | |
| Pattern 07 | .kf-pattern-07 |
Basic usage
Add the pattern element inside a relative section and keep your main content above the pattern layer.
<section class="kf-section bg-kf-bg-light-1 relative overflow-hidden">
<div class="kf-pattern-01 opacity-25"></div>
<div class="container relative z-1">
...
</div>
</section>White pattern
Add white when using a pattern over a dark or gradient background.
<section class="kf-section bg-kf-bg-dark-1 relative overflow-hidden">
<div class="kf-pattern-03 white opacity-25"></div>
<div class="container relative z-1">
...
</div>
</section>