Fabrx - Plugins

Date Pickers

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value. Learn More

Usage

In order to use this plugin on your page you will need to include the below css in the “Optional CSS” area from the page’s head.

<link href="assets/css/flatpickr.min.css" rel="stylesheet" type="text/css" media="all">

In order to use this plugin on your page you will need to include the below script in the “Optional JS” area from the page’s footer.

<script src="assets/js/flatpickr.min.js"></script>

Single Datepicker

Add the .fabrx-datepicker class on the text input that you want to use as a datepicker.

<div class="fabrx-datepicker" data-inline="true"></div>

flatpickr('.fabrx-datepicker', {
  locale: {
    weekdays: {
      shorthand: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      longhand: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
  },
});

Single Range Datepicker

Add the .fabrx-date-datepicker class on the text input that you want to become a datepicker.

<div class="fabrx-datepicker" data-inline="true"></div>

flatpickr('.fabrx-date-rangepicker', {
  mode: 'range',
  locale: {
    weekdays: {
      shorthand: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      longhand: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
  },
});

Range Datepicker

Add the .fabrx-multidate-datepicker class on the text input that you want to become a datepicker.

<div class="fabrx-multidate-rangepicker" data-inline="true"></div>

flatpickr('.fabrx-multidate-rangepicker', {
  mode: 'range',
  showMonths: 2,
  locale: {
    weekdays: {
      shorthand: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      longhand: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
  },
});

File Upload

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. Learn More

Usage

In order to use this plugin on your page you will need to include the below css in the “Optional CSS” area from the page’s head.


<link href="assets/css/dropzone.min.css" rel="stylesheet" type="text/css" media="all">

In order to use this plugin on your page you will need to include the below script in the “Optional JS” area from the page’s footer.

<script src="assets/js/dropzone.min.js"></script>

<div class="card rounded-6 shadow-40">
<div class="card-body">
  <form class="dropzone dropzone-multiple p-0 fileuploader-input" id="my-awesome-dropzone" data-dropzone action="../assets/img/">
    <div class="fallback"><input name="file" type="file" multiple></div>
    <div class="dz-message" data-dz-message>
      <span>Drop your files here</span>
      <div class="fileuploader-input-button mt-3"><span>Choose Files</span></div>
    </div>
    <div class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
      <div class="d-flex media align-items-center px-3 py-2 btn-reveal-trigger"><img class="dz-image" src="..." alt="..." data-dz-thumbnail>
        <div class="flex-1 d-flex justify-content-between content-boxfile">
          <div>
            <h6 data-dz-name></h6>
            <div class="d-flex align-items-center small">
              <p class="mb-0 fs--1 text-400 lh-1" data-dz-size></p>
            </div>
          </div>
          <a class="dropdown-item" href="#!" data-dz-remove>
            <svg id="Icon_Close_Fill" data-name="Icon/Close Fill" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path data-name="Icon Color" d="M12,24A12,12,0,0,1,3.515,3.515,12,12,0,1,1,20.485,20.485,11.922,11.922,0,0,1,12,24ZM12,13.37h0l3.643,3.642L17,15.657l-3.644-3.644L17,8.369,15.645,7.013,12,10.658,8.357,7.013,7,8.369l3.644,3.644L7,15.657l1.356,1.355L12,13.37Z" fill="#272626"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </form>
</div>
</div>

window.Dropzone ? window.Dropzone.autoDiscover = false : '';
var dropzoneInit = function dropzoneInit() {
  var merge = window._.merge;
  var Selector = {
    DROPZONE: '[data-dropzone]',
    DZ_ERROR_MESSAGE: '.dz-error-message',
    DZ_PREVIEW: '.dz-preview',
    DZ_PROGRESS: '.dz-preview .dz-preview-cover .dz-progress',
    DZ_PREVIEW_COVER: '.dz-preview .dz-preview-cover'
  };
  var ClassName = {
    DZ_FILE_PROCESSING: 'dz-file-processing',
    DZ_FILE_COMPLETE: 'dz-file-complete',
    DZ_COMPLETE: 'dz-complete',
    DZ_PROCESSING: 'dz-processing'
  };
  var DATA_KEY = {
    OPTIONS: 'options'
  };
  var Events = {
    ADDED_FILE: 'addedfile',
    COMPLETE: 'complete'
  };
  var dropzones = document.querySelectorAll(Selector.DROPZONE);
  !!dropzones.length && dropzones.forEach(function (item) {
    // const element = item;
    // const $this = $(element);
    var userOptions = utils.getData(item, DATA_KEY.OPTIONS);
    userOptions = userOptions || {};
    var data = userOptions.data ? userOptions.data : {};
    var options = merge({
      url: '/assets/php/',
      addRemoveLinks: false,
      previewsContainer: item.querySelector(Selector.DZ_PREVIEW),
      previewTemplate: item.querySelector(Selector.DZ_PREVIEW).innerHTML,
      thumbnailWidth: null,
      thumbnailHeight: null,
      maxFilesize: 20,
      filesizeBase: 1000,
      init: function init() {
        var thisDropzone = this;

        if (data.length) {
          data.forEach(function (v) {
            var mockFile = {
              name: v.name,
              size: v.size
            };
            thisDropzone.options.addedfile.call(thisDropzone, mockFile);
            thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "".concat(v.url, "/").concat(v.name));
          });
        }

        thisDropzone.on(Events.ADDED_FILE, function addedfile() {
          console.log(item.querySelectorAll(Selector.DZ_PREVIEW_COVER));

          if ('maxFiles' in userOptions) {
            if (userOptions.maxFiles === 1 && item.querySelectorAll(Selector.DZ_PREVIEW_COVER).length > 1) {
              item.querySelector(Selector.DZ_PREVIEW_COVER).remove();
            }

            if (userOptions.maxFiles === 1 && this.files.length > 1) {
              this.removeFile(this.files[0]);
            }
          }
        });
      }
    }, userOptions); // eslint-disable-next-line

    item.querySelector(Selector.DZ_PREVIEW).innerHTML = "";
    var dropzone = new window.Dropzone(item, options);
    dropzone.on(Events.ADDED_FILE, function () {
      if (item.querySelector(Selector.DZ_PREVIEW_COVER)) {
        item.querySelector(Selector.DZ_PREVIEW_COVER).classList.remove(ClassName.DZ_FILE_COMPLETE);
      }

      item.classList.add(ClassName.DZ_FILE_PROCESSING);
    });
    dropzone.on(Events.COMPLETE, function () {
      if (item.querySelector(Selector.DZ_PREVIEW_COVER)) {
        item.querySelector(Selector.DZ_PREVIEW_COVER).classList.remove(ClassName.DZ_PROCESSING);
      }

      item.classList.add(ClassName.DZ_FILE_COMPLETE);
    });
  });
};

Progress

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. Learn More

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

We use the .progress as a wrapper to indicate the max value of the progress bar.
We use the inner .progress-bar to indicate the progress so far.
The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
The .progress-bar also requires some role and aria attributes to make it accessible.

Put that all together, and you have the following examples.

<div class="progress-item">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-item">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-item">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-item">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>

Tooltip Progress

<div class="progress-item progress-sm mb-4 mb-md-5">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <span class="progress-tooltip">25%</span>
  </div>
</div>
</div>
<div class="progress-item progress-sm mb-4 mb-md-5">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <span class="progress-tooltip">50%</span>
  </div>
</div>
</div>
<div class="progress-item progress-sm mb-4 mb-md-5">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <span class="progress-tooltip">75%</span>
  </div>
</div>
</div>
<div class="progress-item progress-sm mb-0 mb-md-5">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <span class="progress-tooltip">100%</span>
  </div>
</div>
</div>

Label + Value Progress

Label

Value

Label

Value

Label

Value

Label

Value

<div class="progress-item">
<div class="progress-title">
  <div class="float-start">Label</div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-title">
  <small class="float-end">Value</small>
</div>
</div>
<div class="progress-item">
<div class="progress-title">
  <div class="float-start">Label</div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-title">
  <small class="float-end">Value</small>
</div>
</div>
<div class="progress-item">
<div class="progress-title">
  <div class="float-start">Label</div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-title">
  <small class="float-end">Value</small>
</div>
</div>
<div class="progress-item">
<div class="progress-title">
  <div class="float-start">Label</div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-title">
  <small class="float-end">Value</small>
</div>
</div>

Value Progress

Value

<div class="progress-item">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-title">
  <small class="float-end">Value</small>
</div>
</div>
<div class="progress-item">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-title">
  <small class="float-end">Value</small>
</div>
</div>
<div class="progress-item">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-title">
  <small class="float-end">Value</small>
</div>
</div>
<div class="progress-item">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="max-width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-title">
  <small class="float-end">Value</small>
</div>
</div>

Circle Progress

download loading bar JS and CSS files ( or, the zipped pack ) and include them in your HTML: Learn More

Usage

Create an element with ldBar class and set its value by data-value attribute:

<link href="assets/css/loading-bar.min.css" rel="stylesheet" type="text/css" media="all">
<script src="assets/js/loading-bar.min.js"></script>

var progressBar = function progressBar() {
  var merge = window._.merge; // progressbar.js@1.0.0 version is used
  // Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

  /*-----------------------------------------------
  |   Progress Circle
  -----------------------------------------------*/

  var progresCircle = document.querySelectorAll('.progress-circle');

  if (progresCircle.length) {
    progresCircle.forEach(function (item) {
      var userOptions = utils.getData(item, 'options');
      var defaultOptions = {
        strokeWidth: 2,
        trailWidth: 2,
        trailColor: utils.grays['100'],
        easing: 'easeInOut',
        duration: 3000,
        svgStyle: {
          'stroke-linecap': 'round',
          display: 'block',
          width: '100%'
        },
        text: {
          autoStyleContainer: false
        },
        // Set default step function for all animate calls
        step: function step(state, circle) {
          // Change stroke color during progress
          // circle.path.setAttribute('stroke', state.color);
          // Change stroke width during progress
          // circle.path.setAttribute('stroke-width', state.width);
          var percentage = Math.round(circle.value() * 100);
          circle.setText("<span class='value'>".concat(percentage, "<b>%</b></span> <span>").concat(userOptions.text || '', "</span>"));
        }
      };
      var options = merge(defaultOptions, userOptions);
      var bar = new ProgressBar.Circle(item, options);
      var linearGradient = "<defs>\n        <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0%\" stop-color='#1970e2' />\n          <stop offset=\"100%\" stop-color='#4695ff' />\n        </linearGradient>\n      </defs>";
      bar.svg.insertAdjacentHTML('beforeEnd', linearGradient);
      var playProgressTriggered = false;

      var progressCircleAnimation = function progressCircleAnimation() {
        if (!playProgressTriggered) {
          if (utils.isScrolledIntoView(item).partial) {
            bar.animate(options.progress / 100);
            playProgressTriggered = true;
          }
        }

        return playProgressTriggered;
      };

      progressCircleAnimation();
      window.addEventListener('scroll', function () {
        progressCircleAnimation();
      });
    });
  }
};

<div class="ldBar fabrx-circle-progress label-center" data-stroke-width="8" data-stroke="#006EFF" data-size="200" data-stroke-trail="#f3f3f3" data-stroke-trail-width="11" data-preset="circle" data-value="50"></div>

Ratings

Hearts

<div class="w-100 float-start">
<div class="float-start mb-2 mb-md-4">
  <div class="fabrx-ratings has-hearts rating">
    <input type="radio" id="heart1" name="heart" value="1">
    <label for="heart1" class="custom-starboxes"></label>
    <input type="radio" id="heart2" name="heart" value="2">
    <label for="heart2" class="custom-starboxes"></label>
    <input type="radio" id="heart3" name="heart" value="3">
    <label for="heart3" class="custom-starboxes"></label>
    <input type="radio" id="heart4" name="heart" value="4">
    <label for="heart4" class="custom-starboxes"></label>
    <input type="radio" id="heart5" name="heart" value="5">
    <label for="heart5" class="custom-starboxes"></label>
  </div>
</div>
</div>

<div class="w-100 float-start">
  <div class="float-start mb-2 mb-md-4">
    <div class="fabrx-ratings has-hearts rating">
      <input type="radio" id="heart6" name="heart2" value="1">
      <label for="heart6" class="custom-starboxes"></label>
      <input type="radio" id="heart7" name="heart2" value="2">
      <label for="heart7" class="custom-starboxes"></label>
      <input type="radio" id="heart8" name="heart2" value="3">
      <label for="heart8" class="custom-starboxes"></label>
      <input type="radio" id="heart9" name="heart2" value="4">
      <label for="heart9" class="custom-starboxes"></label>
      <input type="radio" id="heart10" name="heart2" value="5" checked="checked">
      <label for="heart10" class="custom-starboxes"></label>
    </div>
  </div>
</div>
<div class="w-100 float-start">
  <div class="float-start mb-2 mb-md-4">
    <div class="fabrx-ratings has-hearts rating">
      <input type="radio" id="heart11" name="heart3" value="1">
      <label for="heart11" class="custom-starboxes"></label>
      <input type="radio" id="heart12" name="heart3" value="2">
      <label for="heart12" class="custom-starboxes"></label>
      <input type="radio" id="heart13" name="heart3" value="3">
      <label for="heart13" class="custom-starboxes"></label>
      <input type="radio" id="heart14" name="heart3" value="4" checked="checked">
      <label for="heart14" class="custom-starboxes"></label>
      <input type="radio" id="heart15" name="heart3" value="5">
      <label for="heart15" class="custom-starboxes"></label>
    </div>
  </div>
</div>
<div class="w-100 float-start">
  <div class="float-start mb-2 mb-md-4">
    <div class="fabrx-ratings has-hearts rating">
      <input type="radio" id="heart16" name="heart4" value="1">
      <label for="heart16" class="custom-starboxes"></label>
      <input type="radio" id="heart17" name="heart4" value="2">
      <label for="heart17" class="custom-starboxes"></label>
      <input type="radio" id="heart18" name="heart4" value="3" checked="checked">
      <label for="heart18" class="custom-starboxes"></label>
      <input type="radio" id="heart19" name="heart4" value="4">
      <label for="heart19" class="custom-starboxes"></label>
      <input type="radio" id="heart20" name="heart4" value="5">
      <label for="heart20" class="custom-starboxes"></label>
    </div>
  </div>
</div>
<div class="w-100 float-start">
  <div class="float-start mb-2 mb-md-4">
    <div class="fabrx-ratings has-hearts rating">
      <input type="radio" id="heart21" name="heart5" value="1">
      <label for="heart21" class="custom-starboxes"></label>
      <input type="radio" id="heart22" name="heart5" value="2" checked="checked">
      <label for="heart22" class="custom-starboxes"></label>
      <input type="radio" id="heart23" name="heart5" value="3">
      <label for="heart23" class="custom-starboxes"></label>
      <input type="radio" id="heart24" name="heart5" value="4">
      <label for="heart24" class="custom-starboxes"></label>
      <input type="radio" id="heart25" name="heart5" value="5">
      <label for="heart25" class="custom-starboxes"></label>
    </div>
  </div>
</div>
<div class="w-100 float-start">
  <div class="float-start">
    <div class="fabrx-ratings has-hearts rating">
      <input type="radio" id="heart26" name="heart6" value="1" checked="checked">
      <label for="heart26" class="custom-starboxes"></label>
      <input type="radio" id="heart27" name="heart6" value="2">
      <label for="heart27" class="custom-starboxes"></label>
      <input type="radio" id="heart28" name="heart6" value="3">
      <label for="heart28" class="custom-starboxes"></label>
      <input type="radio" id="heart29" name="heart6" value="4">
      <label for="heart29" class="custom-starboxes"></label>
      <input type="radio" id="heart30" name="heart6" value="5">
      <label for="heart30" class="custom-starboxes"></label>
    </div>
  </div>
</div>

Star

<div class="w-100 float-start">
<div class="float-start mb-2 mb-md-4">
  <div class="fabrx-ratings has-rating rating">
    <input type="radio" id="radio1" name="rate" value="1">
    <label for="radio1" class="custom-starboxes"></label>
    <input type="radio" id="radio2" name="rate" value="2">
    <label for="radio2" class="custom-starboxes"></label>
    <input type="radio" id="radio3" name="rate" value="3">
    <label for="radio3" class="custom-starboxes"></label>
    <input type="radio" id="radio4" name="rate" value="4">
    <label for="radio4" class="custom-starboxes"></label>
    <input type="radio" id="radio5" name="rate" value="5">
    <label for="radio5" class="custom-starboxes"></label>
  </div>
</div>
</div>
<div class="w-100 float-start">
<div class="float-start mb-2 mb-md-4">
  <div class="fabrx-ratings has-rating rating">
    <input type="radio" id="radio6" name="rate2" value="1">
    <label for="radio6" class="custom-starboxes"></label>
    <input type="radio" id="radio7" name="rate2" value="2">
    <label for="radio7" class="custom-starboxes"></label>
    <input type="radio" id="radio8" name="rate2" value="3">
    <label for="radio8" class="custom-starboxes"></label>
    <input type="radio" id="radio9" name="rate2" value="4">
    <label for="radio9" class="custom-starboxes"></label>
    <input type="radio" id="radio10" name="rate2" value="5" checked="checked">
    <label for="radio10" class="custom-starboxes"></label>
  </div>
</div>
</div>
<div class="w-100 float-start">
<div class="float-start mb-2 mb-md-4">
  <div class="fabrx-ratings has-rating rating">
    <input type="radio" id="radio11" name="rate3" value="1">
    <label for="radio11" class="custom-starboxes"></label>
    <input type="radio" id="radio12" name="rate3" value="2">
    <label for="radio12" class="custom-starboxes"></label>
    <input type="radio" id="radio13" name="rate3" value="3">
    <label for="radio13" class="custom-starboxes"></label>
    <input type="radio" id="radio14" name="rate3" value="4" checked="checked">
    <label for="radio14" class="custom-starboxes"></label>
    <input type="radio" id="radio15" name="rate3" value="5">
    <label for="radio15" class="custom-starboxes"></label>
  </div>
</div>
</div>
<div class="w-100 float-start">
<div class="float-start mb-2 mb-md-4">
  <div class="fabrx-ratings has-rating rating">
    <input type="radio" id="radio16" name="rate4" value="1">
    <label for="radio16" class="custom-starboxes"></label>
    <input type="radio" id="radio17" name="rate4" value="2">
    <label for="radio17" class="custom-starboxes"></label>
    <input type="radio" id="radio18" name="rate4" value="3" checked="checked">
    <label for="radio18" class="custom-starboxes"></label>
    <input type="radio" id="radio19" name="rate4" value="4">
    <label for="radio19" class="custom-starboxes"></label>
    <input type="radio" id="radio20" name="rate4" value="5">
    <label for="radio20" class="custom-starboxes"></label>
  </div>
</div>
</div>
<div class="w-100 float-start">
<div class="float-start mb-2 mb-md-4">
  <div class="fabrx-ratings has-rating rating">
    <input type="radio" id="radio21" name="rate5" value="1">
    <label for="radio21" class="custom-starboxes"></label>
    <input type="radio" id="radio22" name="rate5" value="2" checked="checked">
    <label for="radio22" class="custom-starboxes"></label>
    <input type="radio" id="radio23" name="rate5" value="3">
    <label for="radio23" class="custom-starboxes"></label>
    <input type="radio" id="radio24" name="rate5" value="4">
    <label for="radio24" class="custom-starboxes"></label>
    <input type="radio" id="radio25" name="rate5" value="5">
    <label for="radio25" class="custom-starboxes"></label>
  </div>
</div>
</div>
<div class="w-100 float-start">
<div class="float-start">
  <div class="fabrx-ratings has-rating rating">
    <input type="radio" id="radio26" name="rate6" value="1" checked="checked">
    <label for="radio26" class="custom-starboxes"></label>
    <input type="radio" id="radio27" name="rate6" value="2">
    <label for="radio27" class="custom-starboxes"></label>
    <input type="radio" id="radio28" name="rate6" value="3">
    <label for="radio28" class="custom-starboxes"></label>
    <input type="radio" id="radio29" name="rate6" value="4">
    <label for="radio29" class="custom-starboxes"></label>
    <input type="radio" id="radio30" name="rate6" value="5">
    <label for="radio30" class="custom-starboxes"></label>
  </div>
</div>
</div>

Thumb

<a href="#0" class="fabrx-like">
<svg data-name="Icon/Thumb Up" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 24 24">
  <defs>
    <clipPath>
      <path data-name="Icon Color" d="M10.5,21a9.019,9.019,0,0,1-3.95-.949L5,19.3V12.634A7,7,0,0,1,6.622,8.153l.524-.628A8,8,0,0,0,9,2.4V1.5A1.5,1.5,0,0,1,10.5,0a2.1,2.1,0,0,1,.75.2A6.756,6.756,0,0,1,14,5.5V7a1,1,0,0,0,1,1h3.5A2.487,2.487,0,0,1,21,10.55v.05l-1,7.95A2.5,2.5,0,0,1,17.5,21ZM.5,21a.472.472,0,0,1-.5-.5V9.5A.472.472,0,0,1,.5,9h3a.472.472,0,0,1,.5.5v11a.472.472,0,0,1-.5.5Z" fill="#006EFF"></path>
    </clipPath>
  </defs>
  <g data-name="Group 18">
    <path data-name="Icon Color" d="M10.5,21a9.019,9.019,0,0,1-3.95-.949L5,19.3V12.634A7,7,0,0,1,6.622,8.153l.524-.628A8,8,0,0,0,9,2.4V1.5A1.5,1.5,0,0,1,10.5,0a2.1,2.1,0,0,1,.75.2A6.756,6.756,0,0,1,14,5.5V7a1,1,0,0,0,1,1h3.5A2.487,2.487,0,0,1,21,10.55v.05l-1,7.95A2.5,2.5,0,0,1,17.5,21ZM.5,21a.472.472,0,0,1-.5-.5V9.5A.472.472,0,0,1,.5,9h3a.472.472,0,0,1,.5.5v11a.472.472,0,0,1-.5.5Z" fill="#006EFF"></path>
  </g>
</svg> 1k
</a>

<a href="#0" class="fabrx-like">
<svg data-name="Icon/Thumb Down" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24">
  <path data-name="Icon Color" d="M10.5-21a9.019,9.019,0,0,0-3.95.949L5-19.3v6.665A7,7,0,0,0,6.622-8.153l.524.628A8,8,0,0,1,9-2.4v.9A1.5,1.5,0,0,0,10.5,0a2.1,2.1,0,0,0,.75-.2A6.756,6.756,0,0,0,14-5.5V-7a1,1,0,0,1,1-1h3.5A2.487,2.487,0,0,0,21-10.55v-.05l-1-7.95A2.5,2.5,0,0,0,17.5-21ZM.5-21a.472.472,0,0,0-.5.5v11A.472.472,0,0,0,.5-9h3A.472.472,0,0,0,4-9.5v-11a.472.472,0,0,0-.5-.5Z" transform="translate(0 24)" fill="#006EFF"></path>
</svg> 28
</a>

<a href="#0" class="fabrx-like">
<svg data-name="Icon/Thumb Up" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 24 24">
  <defs>
    <clipPath>
      <path data-name="Icon Color" d="M10.5,21a9.019,9.019,0,0,1-3.95-.949L5,19.3V12.634A7,7,0,0,1,6.622,8.153l.524-.628A8,8,0,0,0,9,2.4V1.5A1.5,1.5,0,0,1,10.5,0a2.1,2.1,0,0,1,.75.2A6.756,6.756,0,0,1,14,5.5V7a1,1,0,0,0,1,1h3.5A2.487,2.487,0,0,1,21,10.55v.05l-1,7.95A2.5,2.5,0,0,1,17.5,21ZM.5,21a.472.472,0,0,1-.5-.5V9.5A.472.472,0,0,1,.5,9h3a.472.472,0,0,1,.5.5v11a.472.472,0,0,1-.5.5Z" fill="#006EFF"></path>
    </clipPath>
  </defs>
  <g data-name="Group 18">
    <path data-name="Icon Color" d="M10.5,21a9.019,9.019,0,0,1-3.95-.949L5,19.3V12.634A7,7,0,0,1,6.622,8.153l.524-.628A8,8,0,0,0,9,2.4V1.5A1.5,1.5,0,0,1,10.5,0a2.1,2.1,0,0,1,.75.2A6.756,6.756,0,0,1,14,5.5V7a1,1,0,0,0,1,1h3.5A2.487,2.487,0,0,1,21,10.55v.05l-1,7.95A2.5,2.5,0,0,1,17.5,21ZM.5,21a.472.472,0,0,1-.5-.5V9.5A.472.472,0,0,1,.5,9h3a.472.472,0,0,1,.5.5v11a.472.472,0,0,1-.5.5Z" fill="#006EFF"></path>
  </g>
</svg>
</a>

<a href="#0" class="fabrx-like">
<svg data-name="Icon/Thumb Down" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24">
  <path data-name="Icon Color" d="M10.5-21a9.019,9.019,0,0,0-3.95.949L5-19.3v6.665A7,7,0,0,0,6.622-8.153l.524.628A8,8,0,0,1,9-2.4v.9A1.5,1.5,0,0,0,10.5,0a2.1,2.1,0,0,0,.75-.2A6.756,6.756,0,0,0,14-5.5V-7a1,1,0,0,1,1-1h3.5A2.487,2.487,0,0,0,21-10.55v-.05l-1-7.95A2.5,2.5,0,0,0,17.5-21ZM.5-21a.472.472,0,0,0-.5.5v11A.472.472,0,0,0,.5-9h3A.472.472,0,0,0,4-9.5v-11a.472.472,0,0,0-.5-.5Z" transform="translate(0 24)" fill="#006EFF"></path>
</svg>
</a>

$('.fabrx-like').click(function () {
  $('.fabrx-like').removeClass('active');
  $(this).addClass('active');   
});

Emoji

<div class="fabrx-emoji">
<a href="#0">
  <svg id="Emoji_01" data-name="Emoji 01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
    <defs>
      <linearGradient x1="0.584" x2="0.439" y2="0.999" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="#f9c172"></stop>
        <stop offset="1" stop-color="#f9d572"></stop>
      </linearGradient>
    </defs>
    <g data-name="Rating/Emojis/Single/State/Inactive">
      <circle cx="16" cy="16" r="16" fill="url(#linear-gradient)"></circle>
    </g>
    <path data-name="Fill Color" d="M.955,12.3v-2h13v2ZM10.7,1.73a1.73,1.73,0,1,1,1.73,1.73A1.729,1.729,0,0,1,10.7,1.73ZM0,1.73A1.73,1.73,0,1,1,1.73,3.46,1.729,1.729,0,0,1,0,1.73Z" transform="translate(9.045 10.702)" fill="#121212"></path>
  </svg>
</a>
<a href="#0">
  <svg id="Emoji_02" data-name="Emoji 02" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
    <defs>
      <linearGradient x1="0.584" x2="0.439" y2="0.999" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="#f9c172"></stop>
        <stop offset="1" stop-color="#f9d572"></stop>
      </linearGradient>
    </defs>
    <g data-name="Rating/Emojis/Single/State/Inactive">
      <circle cx="16" cy="16" r="16" fill="url(#linear-gradient)"></circle>
    </g>
    <path data-name="Fill Color" d="M7.208,14.1A10.048,10.048,0,0,1,0,9.609l1.453-.939a8.217,8.217,0,0,0,13.812,0l1.454.939a10.043,10.043,0,0,1-8.39,4.552A9.766,9.766,0,0,1,7.208,14.1Zm4.9-12.368a1.73,1.73,0,1,1,1.73,1.73A1.73,1.73,0,0,1,12.107,1.73Zm-10.7,0a1.73,1.73,0,1,1,1.73,1.73A1.73,1.73,0,0,1,1.4,1.73Z" transform="translate(7.641 10.702)" fill="#121212"></path>
  </svg>
</a>
<a href="#0">
  <svg id="Emoji_03" data-name="Emoji 03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
    <defs>
      <linearGradient x1="0.584" x2="0.439" y2="0.999" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="#f9c172"></stop>
        <stop offset="1" stop-color="#f9d572"></stop>
      </linearGradient>
    </defs>
    <g data-name="Rating/Emojis/Single/State/Inactive">
      <circle cx="16" cy="16" r="16" fill="url(#linear-gradient)"></circle>
    </g>
    <path data-name="Fill Color" d="M3.658,10.847a3.405,3.405,0,1,1,3.406,3.406A3.405,3.405,0,0,1,3.658,10.847ZM10.7,1.73a1.73,1.73,0,1,1,1.73,1.73A1.729,1.729,0,0,1,10.7,1.73ZM0,1.73A1.73,1.73,0,1,1,1.73,3.46,1.729,1.729,0,0,1,0,1.73Z" transform="translate(8.937 10.702)" fill="#121212"></path>
  </svg>
</a>
<a href="#0">
  <svg id="Emoji_04" data-name="Emoji 04" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
    <defs>
      <linearGradient x1="0.584" x2="0.439" y2="0.999" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="#f9c172"></stop>
        <stop offset="1" stop-color="#f9d572"></stop>
      </linearGradient>
    </defs>
    <g data-name="Rating/Emojis/Single/State/Inactive">
      <circle cx="16" cy="16" r="16" fill="url(#linear-gradient)"></circle>
    </g>
    <path data-name="Fill Color" d="M9.547,9.58a8.281,8.281,0,0,0-8.182,3L0,11.522a9.944,9.944,0,0,1,15.713,0l-1.366,1.062A8.218,8.218,0,0,0,9.547,9.58ZM11.5,1.73a1.729,1.729,0,1,1,1.729,1.73A1.729,1.729,0,0,1,11.5,1.73Zm-10.7,0a1.73,1.73,0,1,1,1.73,1.73A1.729,1.729,0,0,1,.794,1.73Z" transform="translate(8.143 10.702)" fill="#121212"></path>
  </svg>
</a>
<a href="#0">
  <svg id="Emoji_05" data-name="Emoji 05" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
    <defs>
      <linearGradient x1="0.584" x2="0.439" y2="0.999" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="#f9c172"></stop>
        <stop offset="1" stop-color="#f9d572"></stop>
      </linearGradient>
    </defs>
    <g data-name="Rating/Emojis/Single/State/Inactive">
      <circle cx="16" cy="16" r="16" fill="url(#linear-gradient)"></circle>
    </g>
    <path data-name="Fill Color" d="M16.272,16.694a8.219,8.219,0,0,0-14.688.727L0,16.726a10.023,10.023,0,0,1,8.588-5.935,10.032,10.032,0,0,1,9.191,5.054c.16.285.309.581.44.881l-1.583.7C16.527,17.174,16.4,16.93,16.272,16.694ZM12.749,7.21a1.73,1.73,0,1,1,1.73,1.73A1.729,1.729,0,0,1,12.749,7.21Zm-10.7,0a1.73,1.73,0,1,1,1.73,1.73A1.73,1.73,0,0,1,2.047,7.21Zm10.615-4.6L16.275,0l1.013,1.4L13.675,4.015ZM1.661,1.4,2.675,0,6.288,2.613l-1.013,1.4Z" transform="translate(6.89 7.222)" fill="#121212"></path>
  </svg>
</a>
</div>

Voting

<div class="fabrx-volting">
<a href="#0">
  <svg class="vertical-none" data-name="Icon/Arrows/Caret/Up" xmlns="http://www.w3.org/2000/svg" width="11" height="10" viewBox="0 0 24 24">
    <path data-name="Icon Color" d="M12,0,24,18H0Z" transform="translate(0 3)" fill="#3f3b3b"></path>
  </svg>
</a>
<a href="#0">
  <svg class="vertical-none" data-name="Icon/Arrows/Caret/Down" xmlns="http://www.w3.org/2000/svg" width="11" height="10" viewBox="0 0 24 24">
    <path data-name="Icon Color" d="M12,0,24-18H0Z" transform="translate(0 21)" fill="#3f3b3b"></path>
  </svg>
</a>
</div>

Sliders

Slider for Bootstrap bootstrap-slider.js. Examples for the bootstrap-slider component. Learn More

Usage

In order to use this plugin on your page you will need to include the below css in the “Optional CSS” area from the page’s head.

<link href="assets/css/bootstrap-slider.min.css" rel="stylesheet" type="text/css" media="all">

In order to use this plugin on your page you will need to include the below script in the “Optional JS” area from the page’s footer.

<script src="assets/js/bootstrap-slider.min.js"></script>

document.querySelectorAll('input[type="range"]').forEach(FabrxRange => {
  var slider = new Slider(FabrxRange, {
    formatter: function(value) {
      return 'Current value: ' + value;
    }
  });
});

Slider

Label

0 100

<div class="fabrx-range-slider pb-3 mb-3 mb-sm-5">
  <input type="range" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="10"/>
</div>
<div class="fabrx-range-slider mb-2 mb-sm-4">
  <input type="range" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="10"/>
  <div class="progress-title">
    <div class="float-end">Label</div>
  </div>
</div>
<div class="fabrx-range-slider">
  <div class="progress-title">
    <div class="float-lef">Label</div>
  </div>
  <input type="range" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="10"/>
  <div class="progress-title">
    <small class="float-start">0</small>
    <small class="float-end">100</small>
  </div>
</div>

Range slider

Label

0 100

<div class="fabrx-range-slider pb-3 mb-3 mb-sm-5">
  <input type="range" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[300,700]"/>
</div>
<div class="fabrx-range-slider mb-2 mb-sm-4">
  <input type="range" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[300,700]"/>
  <div class="progress-title">
    <div class="float-end">Label</div>
  </div>
</div>
<div class="fabrx-range-slider">
  <div class="progress-title">
    <div class="float-lef">Label</div>
  </div>
  <input type="range" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[300,700]"/>
  <div class="progress-title">
    <small class="float-start">0</small>
    <small class="float-end">100</small>
  </div>
</div>

Spinners

Indicate the loading state of a component or page with Bootstrap spinners. Please read the official Bootstrap documentation for a full list of options.

Examples

<div class="spinner-border" role="status"></div>

<div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<div class="spinner-border spinner-fill" role="status"></div>

Masonry

masonry is the default layout mode. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. masonry uses the same code from the Masonry library. Learn More

HTML

Include the Masonry .js file in your site.

<script src="assets/js/masonry.min.js"></script>

document.querySelectorAll('.fabrx-masonry').forEach(FabrxMasonry => {
  var FabrxISO = new Isotope(FabrxMasonry, {
    itemSelector: '.masonry-item',
    layoutMode: 'packery',
    percentPosition: true,
    isFitWidth: true,
  });
});

<div class="fabrx-masonry">
<div class="masonry-item">
  <div class="card">
    <img src="assets/images/galleries/gallery-9.jpg" alt="Card Image" class="rounded-6">
  </div>
</div>
<div class="masonry-item">
  <div class="card">
    <img src="assets/images/galleries/gallery-10.jpg" alt="Card Image" class="rounded-6">
  </div>
</div>
<div class="masonry-item">
  <div class="card">
    <img src="assets/images/galleries/gallery-11.jpg" alt="Card Image" class="rounded-6">
  </div>
</div>
<div class="masonry-item">
  <div class="card">
    <img src="assets/images/galleries/gallery-14.jpg" alt="Card Image" class="rounded-6">
  </div>
</div>
<div class="masonry-item">
  <div class="card">
    <img src="assets/images/galleries/gallery-12.jpg" alt="Card Image" class="rounded-6">
  </div>
</div>
<div class="masonry-item">
  <div class="card">
    <img src="assets/images/galleries/gallery-13.jpg" alt="Card Image" class="rounded-6">
  </div>
</div>
</div>

CountUp

A pure JavaScript counter plugin which counts down or counts up towards to a specific point when the counter is scrolled into view. Learn More

Usage

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="assets/js/purecounter.min.js"></script>

0+

Daily content pieces

0

Users per day

0+

Swiper

A slideshow component for cycling through elements—images or slides of text—like a swiper. Learn More

Usage

In order to use this plugin on your page you will need to include the below css in the “Optional CSS” area from the page’s head.

<link href="assets/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" media="all">

In order to use this plugin on your page you will need to include the below script in the “Optional JS” area from the page’s footer.

<script src="assets/js/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper('.single-swiper', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    type: "bullets",
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
</script>

Slides only

<div class="swiper-container single-swiper text-center">
<div class="swiper-wrapper">
  <div class="swiper-slide">
    <img src="assets/images/galleries/gallery-24.jpg" alt="Galleries">
  </div>
  <div class="swiper-slide">
    <img src="assets/images/galleries/gallery-24.jpg" alt="Galleries">
  </div>
  <div class="swiper-slide">
    <img src="assets/images/galleries/gallery-24.jpg" alt="Galleries">
  </div>
  <div class="swiper-slide">
    <img src="assets/images/galleries/gallery-24.jpg" alt="Galleries">
  </div>
  <div class="swiper-slide">
    <img src="assets/images/galleries/gallery-24.jpg" alt="Galleries">
  </div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

var swiper = new Swiper('.brand-slider', {
  slidesPerView: 5,
  spaceBetween: 6,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    type: "bullets",
  },
  breakpoints: {
    0: {
      slidesPerView: 2,
    },
    575: {
      slidesPerView: 3,
    },
    768: {
      slidesPerView: 4,
    },
    1024: {
      slidesPerView: 5,
    },
  }
});

<section class="fabrx-section text-center bg-white">
<div class="container">
  <div class="swiper-slider-box">
    <div class="swiper-container brand-slider">
      <div class="swiper-wrapper mb-md-4">
        <div class="swiper-slide"><img src="assets/images/brand-icons/brand-icon-6.svg" alt="Google"></div>
        <div class="swiper-slide"><img src="assets/images/brand-icons/brand-icon-7.svg" alt="Uber"></div>
        <div class="swiper-slide"><img src="assets/images/brand-icons/brand-icon-8.svg" alt="BuzzFeed"></div>
        <div class="swiper-slide"><img src="assets/images/brand-icons/brand-icon-9.svg" alt="Samsung"></div>
        <div class="swiper-slide"><img src="assets/images/brand-icons/brand-icon-10.svg" alt="Stripe"></div>
        <div class="swiper-slide"><img src="assets/images/brand-icons/brand-icon-8.svg" alt="BuzzFeed"></div>
        <div class="swiper-slide"><img src="assets/images/brand-icons/brand-icon-9.svg" alt="Samsung"></div>
        <div class="swiper-slide"><img src="assets/images/brand-icons/brand-icon-10.svg" alt="Stripe"></div>
      </div>
      <div class="swiper-pagination pt-md-3"></div>
    </div>
  </div>
</div>
</section>


					var swiper = new Swiper('.swiper-threecol', {
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    type: "bullets",
  },
  breakpoints: {
    0: {
      slidesPerView: 2,
    },
    575: {
      slidesPerView: 2,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  }
});

<div class="swiper-slider-box">
  <div class="swiper-container swiper-threecol">
    <div class="swiper-wrapper mb-md-4">
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries"></div>
    </div>
    <div class="swiper-pagination pt-md-3"></div>
  </div>
</div>


					var swiper = new Swiper('.swiper-twohalf', {
  slidesPerView: 2.5,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    type: "bullets",
  },
  breakpoints: {
    0: {
      slidesPerView: 1.5,
    },
    575: {
      slidesPerView: 1.5,
    },
    768: {
      slidesPerView: 1.5,
    },
    1024: {
      slidesPerView: 2.5,
    },
  }
});

<div class="swiper-slider-box">
  <div class="swiper-container swiper-twohalf">
    <div class="swiper-wrapper mb-md-4">
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries"></div>
      <div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries"></div>
    </div>
    <div class="swiper-pagination pt-md-3"></div>
  </div>
</div>

Beth Murphy Creative Director, Amazon

White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence of the stars Sea of Tranquility

Jesús Moruga Creative Director, Amazon

Abayo Stevens Creative Director, Amazon

Beth Murphy Creative Director, Amazon

Jesús Moruga Creative Director, Amazon

<div class="swiper-slider-box">
  <div class="swiper-container single-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="card">
          <div class="card-body text-center py-0">
            <div class="testimonial-author border-bottom-0 mb-0">
              <a href="#0" class="fabrx-avatar xl mb-2"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></a>
              <div class="px-3">
                <strong class="d-block">Beth Murphy</strong>
                <small class="d-block text-secondary">Creative Director, Amazon</small>
              </div>
            </div>
            <p class="font-size-14 text-dark">White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence of the stars Sea of Tranquility</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card">
          <div class="card-body text-center py-0">
            <div class="testimonial-author border-bottom-0 mb-0">
              <a href="#0" class="fabrx-avatar xl mb-2"><img src="assets/images/avatars/avatar-2.png" alt="Avatar"></a>
              <div class="px-3">
                <strong class="d-block">Jesús Moruga</strong>
                <small class="d-block text-secondary">Creative Director, Amazon</small>
              </div>
            </div>
            <p class="font-size-14 text-dark">White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence of the stars Sea of Tranquility</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card">
          <div class="card-body text-center py-0">
            <div class="testimonial-author border-bottom-0 mb-0">
              <a href="#0" class="fabrx-avatar xl mb-2"><img src="assets/images/avatars/avatar-3.png" alt="Avatar"></a>
              <div class="px-3">
                <strong class="d-block">Abayo Stevens</strong>
                <small class="d-block text-secondary">Creative Director, Amazon</small>
              </div>
            </div>
            <p class="font-size-14 text-dark">White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence of the stars Sea of Tranquility</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card">
          <div class="card-body text-center py-0">
            <div class="testimonial-author border-bottom-0 mb-0">
              <a href="#0" class="fabrx-avatar xl mb-2"><img src="assets/images/avatars/avatar-1.png" alt="Avatar"></a>
              <div class="px-3">
                <strong class="d-block">Beth Murphy</strong>
                <small class="d-block text-secondary">Creative Director, Amazon</small>
              </div>
            </div>
            <p class="font-size-14 text-dark">White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence of the stars Sea of Tranquility</p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card">
          <div class="card-body text-center py-0">
            <div class="testimonial-author border-bottom-0 mb-0">
              <a href="#0" class="fabrx-avatar xl mb-2"><img src="assets/images/avatars/avatar-2.png" alt="Avatar"></a>
              <div class="px-3">
                <strong class="d-block">Jesús Moruga</strong>
                <small class="d-block text-secondary">Creative Director, Amazon</small>
              </div>
            </div>
            <p class="font-size-14 text-dark">White dwarf a still more glorious dawn awaits tingling of the spine emerged into consciousness Vangelis shores of the cosmic ocean. Tendrils of gossamer clouds kindling the energy hidden in matter concept of the number one permanence of the stars Sea of Tranquility</p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

Custom Scrollbar

SimpleBar is a simple, standalone JavaScript library that appends a custom scrollbar to any scrollable container which has overflowing content. Works with CSS overflow: auto property and keeps the native scroll behavior. Learn More

Usage

In order to use this plugin on your page you will need to include the following css in the “Optional CSS” area from the page’s head

<link href="assets/css/simplebar.min.css" rel="stylesheet" type="text/css" media="all">

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer and use this classes .fabrx-scroll:

<script src="assets/js/simplebar.min.js"></script>

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.

<div class="fabrx-scroll" data-simplebar style="height: 100px;">
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>

Charts

Simple yet flexible Javascript charting for designers & developers. Learn More

Usage

In order to use this charts on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="assets/js/highcharts.min.js"></script>
<script src="assets/js/highcharts-more.min.js"></script>
<script src="assets/js/solid-gauge.min.js"></script>
<script src="assets/js/charts-light.js"></script>

After that, simply copy one of the code examples demonstrated below and include it in your page.

Examples

Stacked columns

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Stacked columns</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action3"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxStackedChartThree"></div>
</div>
</div>

Single bar Table Example

Single bar

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Single bar</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action4"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxStackedChartTwo"></div>
</div>
</div>

Stacked bar Table Example

Stacked bar

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Stacked bar</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action5"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxStackedChartOne"></div>
</div>
</div>

Multiple bar Table Example

Multiple bar

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Multiple bar</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action6"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxMultipleColumnsChartOne"></div>
</div>
</div>

Single line Table Example

Single line

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Single line</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action7"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxPointsChartOne"></div>
</div>
</div>

Double line Table Example

Double line

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Double line</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action8"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxPointsChartTwo"></div>
</div>
</div>

Curved line Table Example

Curved line

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Curved line</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action9"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxSplineChartOne"></div>
</div>
</div>

Dot Plots Table Example

Dot Plots Chart

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Dot Plots Chart</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action10"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="Fabrx3dBubbleChartOne"></div>
</div>
</div>

Stacked area Table Example

Stacked area

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Stacked area</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action11"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxAreaChartTwo"></div>
</div>
</div>

Area chart Table Example

Area chart

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Area chart</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action12"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxAreaChartOne"></div>
</div>
</div>

Pie Table Example

Pie Chart

<div class="card rounded-24 shadow-40">
<div class="card-body">
	<div class="d-flex align-items-center mb-4">
	  <h5 class="font-weight-regular">Pie Chart</h5>
	  <div class="dropdown text-end mb-md-2 ms-auto">
	    <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action13"><small>This week</small></a>
	    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
	      <a class="dropdown-item" href="#0">Action</a>
	      <a class="dropdown-item" href="#0">Another action</a>
	      <a class="dropdown-item" href="#0">Something else here</a>
	    </div>
	  </div>
	</div>
	<div id="FabrxPieChartOne"></div>
	</div>
</div>

Pie Table Example

Pie Chart

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Pie Chart</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action14"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxPieChartTwo"></div>
</div>
</div>

Pie Table Example

Pie Chart

<div class="card rounded-24 shadow-40">
<div class="card-body">
  <div class="d-flex align-items-center mb-4">
    <h5 class="font-weight-regular">Pie Chart</h5>
    <div class="dropdown text-end mb-md-2 ms-auto">
      <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle text-primary" id="Action14"><small>This week</small></a>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3" style="">
        <a class="dropdown-item" href="#0">Action</a>
        <a class="dropdown-item" href="#0">Another action</a>
        <a class="dropdown-item" href="#0">Something else here</a>
      </div>
    </div>
  </div>
  <div id="FabrxPieChartThree"></div>
</div>
</div>