Reusable Components

Buttons

Multiple button styles are included by default. These styles automatically inherit colors from your global tokens.

.btn-primary
.btn-primary-outline

.btn-secondary
.btn-secondary-outline

.btn-light
.btn-light-outline

.btn-dark
.btn-dark-outline

.btn-white
.btn-white-outline

Button sizes are also available.

.btn-sm
.btn-lg
.btn-block

Link Buttons

Link buttons are lightweight text-based actions commonly used inside content sections.

.btn-link
.btn-link-arrow

.btn-link-primary
.btn-link-secondary
.btn-link-dark
.btn-link-light
.btn-link-white

<a href="#" class="btn-link btn-link-arrow">
  Learn More
</a>

Breadcrumbs

KitFront includes a simple breadcrumb component for inner pages.

<ol class="breadcrumbs">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>

  <li class="breadcrumb-item active">
    <span>About Us</span>
  </li>
</ol>

Pagination

Pre-styled pagination is included for blogs, archives, and listing pages.

<ul class="pagination">
  <li><a class="page-link current">1</a></li>
  <li><a class="page-link">2</a></li>
  <li><a class="page-link">3</a></li>
</ul>

Best practices

• Use global button styles whenever possible.
• Customize button colors from tokens instead of editing components directly.
• Use breadcrumbs on inner pages only.
• Keep pagination styles consistent throughout the website.