Components

Button

Buttons come in three sizes and button variations such as btn-primary's default color can be overridden by setting new property values in the :root of your custom css file.

<button class="btn-primary btn-md">btn-primary md</button>
<a class="link-underline">link-underline</a>

CSS customization

To override the default settings of the buttons, simply set a new style for the button property values in your custom CSS file. View the example below:

// Your Custom CSS File
:root {
  --btn-primary-bg: (your custom background-color);
  --btn-primary-bg-hover: (your custom hover background-color);
  --btn-primary-border-radius: (your custom border-radius);
  --btn-primary-text: (your custom color)
  --btn-secondary-border: (your custom border color);
  --btn-secondary-border-radius: (your custom border-radius);
  --btn-secondary-text: (your custom color);
  --btn-secondary-bg-hover: (your custom background color);
  --btn-secondary-text-hover: (your custom color);
  --link-underline-text: (your custom color);
  --link-underline-border: (your custom border color);
  --link-underline-hover: (your custom color);
  --link-underline-border-hover: (your customer border color);
}

Input

<input class="input-sm">

Tabs

Tabs are great for organizing content and consist of two parts: tab-menu and its corresponding content, tab-contents. To match the tab link to its content, simply use the same value for the data-tab as shown below. Override the default color of the tab menu links by setting a new property value in the :root of your custom CSS file.

<!-- Tab menu container -->
<div class="tab-menu">
  <a data-tab="one">tab-menu #1</a>
  ...
</div>

<!-- Tab contents container -->
<div class="tab-contents">
  <div data-tab="one">tab-content #1</div>
  ...
</div>

// Your Custom CSS File
:root {
  --tab-menu: (your custom menu color);
  --tab-menu-border-bottom: (your custom menu border color);
}

Accordion

The accordion component provides a way to organize content by topic and consists of two parts: the button takes on the class accordion and plus sign plus and the content which takes on the class accordion-content. The accordion is responsive and stacked vertically by default.

<button class="accordion">accordion 1<div class="plus"></div></button>
<div class="accordion-content">accordion content 1</div>

// Your Custom CSS File
:root {
  --accordion-bg: (your custom accordion color);
  --accordion-bg-active: (your custom accordion active color);
}

Carousel

The carousel component is designed to display multiple images for ecommerce application. The carousel is responsive by default and offers three ways to navigate the images. Swipe and arrow controllers move the slide one at a time while the bottom navigation allows you to get to a specific slide location.

The height of the carousel is based on the height of the first image and vertically center aligned. This means subsequent images with greater height will be automatically cropped on the top and bottom.

As a best practice, make sure all images have consistent size ratios. Though the slide-prev, slide-next as well as slide-nav utility classes provide multiple means of navigating the slides, for best user experience, implement just one navigation option. Override the default styles by setting new property values in the :root of your custom CSS file.

<!-- Carousel container -->
<div class="carousel">
  
  <!-- Controllers -->
  // You can omit the controllers 
  <div class="slide-prev ml-3"></div>
  <div class="slide-next mr-3"></div>

  <!-- Slides container -->
  <div class="slide-container">
    <!-- Slides -->
    <img class="slide" src="#" alt="Image for Carousel">
    ...
  </div>

  <!-- Navigation container -->
  // You can omit the navigation
  <div class="slide-nav-container">
    <!-- Navigation items -->
    <div class="slide-nav"></div>
    ...
  </div>
</div>

  // Your Custom CSS File
  :root {
  --arrow-border: (Your custom border);
  --arrow-border-width: (Your custom border width);
  ...
  }

Horizontal Scroll

The horizontal scroll component is useful for displaying collection of items for ecommerce application and works with touch, click and drag. Use the scrollX utility class to enable the horizontal scroll.

<!-- Horizontal scroll container -->
<div class="scrollX">

  <!-- Set min width and layout items horizontally -->
  <div class="d-flex gap-flex-col-1 width-min-xl">
    <div class="d-grid d-justify-center d-content-center col-2 bg-blue-100 rounded">item 1</div>
    ...
  </div>
</div>