Foundations
List Items
Use default list styling or icon list helpers for content lists inside KitFront sections.
Default lists
Bootstrap starter lists are styled automatically when the list has no custom class. Default list markers use the brand color.
- Responsive website sections
- Bootstrap and Tailwind versions
- Copy-ready HTML, CSS, and JS
<ul>
<li>Responsive website sections</li>
<li>Bootstrap and Tailwind versions</li>
<li>Copy-ready HTML, CSS, and JS</li>
</ul>Icon list
Use .kf-list-icon when list items should use the default Font Awesome fa-check icon instead of bullets.
- Preview before copying
- Test desktop, tablet, and mobile
- Copy code into your project
<ul class="kf-list-icon">
<li>Preview before copying</li>
<li>Test desktop, tablet, and mobile</li>
<li>Copy code into your project</li>
</ul>Change icon
To change the icon, update content: '\f00c' in .kf-list-icon li::before inside assets/css/core.css. Use the Unicode value for the Font Awesome icon you want.
Default lists
Tailwind starter lists are styled automatically when the list has no custom class. Default list markers use the brand color.
- Responsive website sections
- Bootstrap and Tailwind versions
- Copy-ready HTML, CSS, and JS
<ul>
<li>Responsive website sections</li>
<li>Bootstrap and Tailwind versions</li>
<li>Copy-ready HTML, CSS, and JS</li>
</ul>Icon list
Use kf-list-icon when list items should use the default Font Awesome fa-check icon instead of bullets.
- Preview before copying
- Test desktop, tablet, and mobile
- Copy code into your project
<ul class="kf-list-icon">
<li>Preview before copying</li>
<li>Test desktop, tablet, and mobile</li>
<li>Copy code into your project</li>
</ul>Change icon
To change the icon, update before:content-['\f00c'] in .kf-list-icon li inside src/assets/css/input.css. Use the Unicode value for the Font Awesome icon you want.