Getting Started
Preview
Use Preview to view any KitFront section, choose an available background option, and copy the updated code before adding it to your project.
What preview does
Preview lets you check how a section looks in Bootstrap and Tailwind before you choose it. You can also test responsive views and try available background options before copying the section code.
Preview workflow
Use the preview screen before moving a section into your starter project.
| Step | Action |
|---|---|
| 1 | Open any section from the KitFront section library. |
| 2 | View the section in Bootstrap or Tailwind version. |
| 3 | Try the available background options to find the version that fits your page. |
| 4 | Test the updated section in Desktop, Tablet, and Mobile views. |
| 5 | Open HTML, CSS, or JS and copy the updated code into your project. |
Background options
Most content sections include background controls in the editor. These controls update the preview and the source code together, so you can decide which background works best before copying it. Header, footer, and home hero sections do not use this option.
| Option | Use |
|---|---|
| Background | Preview the section with different background styles. The copied code includes the selected background classes. |
Device preview
Use Desktop, Tablet, and Mobile buttons to test how the section looks at different screen sizes.
| Mode | Use |
|---|---|
| Desktop | Check the section on a wide screen. |
| Tablet | Check the section in tablet view. |
| Mobile | Check the section in mobile view. |
Code tabs
Use the code tabs when you are ready to copy the section into your project.
| Tab | Use |
|---|---|
| Preview | View the section as it will appear on a page. |
| HTML | Copy the section HTML for the selected framework. |
| CSS | Copy the matching section CSS when CSS is available. |
| JS | Copy JavaScript only when the section includes it. |
Copy behavior
Open the HTML, CSS, or JS tab after choosing any available background option. Paste the copied code into the matching starter project file.
Access
Free sections can be previewed and copied with a free account. Pro sections require a Pro plan to unlock full preview and source code access.