✳️Common - Padding & Content Width

⚜️ Custom Gaps Style Partial + Class (Remove space after # in Partial Code)

Mobile : 0px to 767px

Tablet : 768px to 1199px

Desktop : From 1200px

<section class="has-custom-paddings" style="# $include|partial/common/custom-paddings$#" > </section>

⚜️ Content Width - Desktop, Tablet & Mobile

content-width

✳️Common - Button & Link Style Selector

⚜️ Button Styles Partial (Both Sets Are Same)

# $include|partial/common/custom-btn-styles-one$#

# $include|partial/common/custom-btn-styles-two$#

<button class="# $include|partial/common/custom-btn-styles-one$#">Button Text</button>

<button class="# $include|partial/common/custom-btn-styles-two$#">Button Text</button>

✳️Buttons

<button class="btn btn-action">
  <span class="text">CTA Action Button</span>
</button>

<button class="btn btn-action-custom">
  <span class="text">CTA Action Custom Button</span>
</button>

<button class="btn btn-ghost-light">
  <span class="text">CTA Ghost Light Button</span>
</button>

<button class="btn btn-ghost-custom-light">
  <span class="text">CTA Ghost Custom Light Button</span>
</button>

<button class="btn btn-ghost-custom-dark">
  <span class="text">CTA Ghost Custom Dark Button</span>
</button>

✳️Links

<a class="link link-primary">
  <span class="text">CTA Primary Link</span>
</a>

<a class="link link-primary-light">
  <span class="text">CTA Primary Link Light</span>
</a>

<a class="link link-primary-custom">
  <span class="text">CTA Primary Link Custom</span>
</a>

<a class="link link-secondary">
  <span class="text">CTA Secondary Link</span>
</a>

<a class="link link-secondary-light">
  <span class="text">CTA Secondary Link Light</span>
</a>

<a class="link link-secondary-custom">
  <span class="text">CTA Secondary Link Custom</span>
</a>

✳️Image Loaders

Add Following Class to the Picture Tag Wrapper (IMPORTANT - ONLY USE FOR LAZYLOADED IMAGES)

custom-image-loader

<div class="image-wrap custom-image-loader">
  <picture>
    <!-- Usual picture Tag Code -->
  </picture>
</div>

✳️Other Loaders / Skeletions (EJS Etc...)

✳️Slider Controls

⚜️ Slider Scrollbar (Used Only On Mobile in Design)

# $include|partial/slider-controls/slider-basic-scrollbar$#

⚜️ Slider Bullet Pagination (Used Only On Mobile in Design)

# $include|partial/slider-controls/slider-basic-bullets$#

⚜️ Slider Nav With Pagination (Mobile Only Pagination)

# $include|partial/slider-controls/slider-vertical-navigation$#

⚜️ Slider Vertical Navigation (Mobile Horizontal)

# $include|partial/slider-controls/slider-vertical-navigation$#

⚜️ Slider Full Controls

# $include|partial/slider-controls/slider-full-controls$#

✳️Slider Control Examples

⚜️ Slider With Scrollbar (Used Only On Mobile in Design)

⚜️ Slider With Bullet Pagination (Used Only On Mobile in Design)

⚜️ Slider With Navigation & Pagination (Mobile Only Pagination)

⚜️ Verical Slider (Mobile Horizontal)

⚜️ Slider With Full Controls - IN PROGRESS (Will be Added After Hero)

✳️Select2 Styles (With Smooth Open/Close)

Events Module