Getting Started
Preview
Use Preview to view any KitFront section 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 the responsive view 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 | Test the same section in Desktop, Tablet, and Mobile views. |
| 4 | Open HTML, CSS, or JS and copy the code into your project. |
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 and copy the code you need. 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.