Foundations
Backgrounds
Use background helpers to apply KitFront brand, light, dark, and gradient backgrounds. Choose the tab that matches your starter.
Color background classes
Bootstrap color background classes apply the background color and matching text color.
| Background | Class | Default | Text Color |
|---|---|---|---|
| Brand 1 | .kf-bg-brand-1 | #ff2056 | White |
| Brand 2 | .kf-bg-brand-2 | #fe9a00 | White |
| Light 1 | .kf-bg-light-1 | #fff1f5 | Black |
| Light 2 | .kf-bg-light-2 | #fff6e8 | Black |
| Light 3 | .kf-bg-light-3 | #f5f7f9 | Black |
| Dark 1 | .kf-bg-dark-1 | #111827 | White |
| Dark 2 | .kf-bg-dark-2 | #100104 | White |
Color background tokens
These defaults are defined in assets/css/core.css.
| Background | Token | Default |
|---|---|---|
| Brand 1 | --kf-brand-color-1 | #ff2056 |
| Brand 2 | --kf-brand-color-2 | #fe9a00 |
| Light 1 | --kf-bg-light-1 | #fff1f5 |
| Light 2 | --kf-bg-light-2 | #fff6e8 |
| Light 3 | --kf-bg-light-3 | #f5f7f9 |
| Dark 1 | --kf-bg-dark-1 | #111827 |
| Dark 2 | --kf-bg-dark-2 | #100104 |
Use color backgrounds
Add the class to a section or block.
<section class="kf-section kf-bg-light-1">
...
</section>
<section class="kf-section kf-bg-dark-1">
...
</section>Gradient background classes
Gradient background classes apply the gradient background and white text color.
| Background | Class | Default | Text Color |
|---|---|---|---|
| Gradient 1 | .kf-bg-gradient-1 | gradient | White |
| Gradient 2 | .kf-bg-gradient-2 | gradient | White |
Gradient background tokens
These defaults are defined in assets/css/core.css.
| Background | Token | Default |
|---|---|---|
| Gradient 1 | --kf-bg-gradient-1 | linear-gradient(135deg, #ff2056, #c4003a) |
| Gradient 2 | --kf-bg-gradient-2 | linear-gradient(135deg, #fe9a00, #d97706) |
Use gradient backgrounds
Add the gradient class to a section or block.
<section class="kf-section kf-bg-gradient-1">
...
</section>Color background utilities
Tailwind color background utilities use the KitFront theme tokens.
| Background | Classes | Default |
|---|---|---|
| Brand 1 | bg-kf-brand-color-1 text-kf-white | #ff2056 |
| Brand 2 | bg-kf-brand-color-2 text-kf-white | #fe9a00 |
| Light 1 | bg-kf-bg-light-1 text-kf-body-text | #fff1f5 |
| Light 2 | bg-kf-bg-light-2 text-kf-body-text | #fff6e8 |
| Light 3 | bg-kf-bg-light-3 text-kf-body-text | #f5f7f9 |
| Dark 1 | bg-kf-bg-dark-1 text-kf-white | #111827 |
| Dark 2 | bg-kf-bg-dark-2 text-kf-white | #100104 |
Color background tokens
These defaults are defined in src/assets/css/input.css.
| Background | Token | Default |
|---|---|---|
| Brand 1 | --color-kf-brand-color-1 | #ff2056 |
| Brand 2 | --color-kf-brand-color-2 | #fe9a00 |
| Light 1 | --color-kf-bg-light-1 | #fff1f5 |
| Light 2 | --color-kf-bg-light-2 | #fff6e8 |
| Light 3 | --color-kf-bg-light-3 | #f5f7f9 |
| Dark 1 | --color-kf-bg-dark-1 | #111827 |
| Dark 2 | --color-kf-bg-dark-2 | #100104 |
Use color backgrounds
Add the background and text utility classes to a section or block.
<section class="kf-section bg-kf-bg-light-1 text-kf-body-text">
...
</section>
<section class="kf-section bg-kf-bg-dark-1 text-kf-white">
...
</section>Gradient background utilities
Use the KitFront gradient background helper with the matching KitFront text color utility.
| Background | Classes | Default |
|---|---|---|
| Gradient 1 | bg-kf-bg-gradient-1 text-kf-white | gradient |
| Gradient 2 | bg-kf-bg-gradient-2 text-kf-white | gradient |
Gradient background tokens
These defaults are defined in src/assets/css/input.css.
| Background | Token | Default |
|---|---|---|
| Gradient 1 Start | --color-kf-gradient-1-start | #ff2056 |
| Gradient 1 End | --color-kf-gradient-1-end | #c4003a |
| Gradient 2 Start | --color-kf-gradient-2-start | #fe9a00 |
| Gradient 2 End | --color-kf-gradient-2-end | #d97706 |
Use gradient backgrounds
Add the gradient background helper and text color utility to a section or block.
<section class="kf-section bg-kf-bg-gradient-1 text-kf-white">
...
</section>