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/vendor/flatpickr/dist/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/vendor/flatpickr/dist/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 MoreUsage
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/vendor/dropzone/dist/min/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/vendor/dropzone/dist/min/dropzone.min.js"></script><div class="card rounded-12 shadow-40 border border-gray-200">
<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>Drag and Drop Files</span>
<div class="fileuploader-input-button mt-3"><span>Or Browse</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 data-name="Cancel Icon" xmlns="http://www.w3.org/2000/svg" width="16.25" height="16.25" viewBox="0 0 16.25 16.25">
<path data-name="Icon Color" d="M8.125,16.25A8.125,8.125,0,1,1,16.25,8.125,8.134,8.134,0,0,1,8.125,16.25Zm0-15.235a7.11,7.11,0,1,0,7.109,7.11A7.118,7.118,0,0,0,8.125,1.015Zm-3.01,10.5a.376.376,0,0,1-.3-.6l.036-.042L7.593,8.125,4.849,5.381a.376.376,0,0,1,.49-.568l.041.036L8.125,7.593l2.743-2.744a.376.376,0,0,1,.532,0,.379.379,0,0,1,.036.49l-.036.041L8.657,8.125,11.4,10.868a.376.376,0,0,1-.49.568l-.042-.036L8.125,8.657,5.381,11.4A.373.373,0,0,1,5.115,11.51Z" fill="#807e7e"/>
</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
.progressas a wrapper to indicate the max value of the progress bar. - We use the inner
.progress-barto indicate the progress so far. - The
.progress-barrequires an inline style, utility class, or custom CSS to set their width. - The
.progress-baralso 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
Value
Value
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 xmlns="http://www.w3.org/2000/svg" width="13.502" height="7.5" viewBox="0 0 13.502 7.5">
<path data-name="Icon Color" d="M12.751,0h-12A.735.735,0,0,0,.079.417.741.741,0,0,0,.153,1.2l.068.077,6,6a.75.75,0,0,0,.977.073l.085-.073,6.033-6.035.04-.049.059-.092.03-.063L13.475.95l.02-.1L13.5.8l0-.052L13.5.7,13.495.648l-.02-.1L13.442.458,13.413.4,13.35.3a.772.772,0,0,0-.091-.1L13.2.147,13.106.089,13.044.059,12.951.026l-.1-.02L12.8,0Zm-6,5.689h0L2.561,1.5H10.94L6.752,5.689Z" transform="translate(13.502 7.5) rotate(180)" fill="#212121"></path>
</svg>
</a>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="13.502" height="7.5" viewBox="0 0 13.502 7.5">
<path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#212121"></path>
</svg>
</a>
<span class="ms-2">+565</span>
</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
<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
<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/vendor/isotope-layout/dist/isotope.pkgd.min.js"></script>
<script src="assets/vendor/isotope-packery/packery-mode.pkgd.min.js"></script>
<script src="assets/vendor/masonry-layout/dist/masonry.pkgd.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/vendor/purecounterjs/dist/purecounter.js"></script>
0+
Daily content pieces
0
Users per day
0+
Featured articles
<section class="fabrx-section bg-white">
<div class="container">
<div class="row">
<div class="col-sm-4 my-2">
<div class="text-center">
<h2 class="mb-0"><span class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="43">0</span>+</h2>
<p>Daily content pieces</p>
</div>
</div>
<div class="col-sm-4 my-2">
<div class="text-center">
<h2 class="mb-0"><span class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="54231">0</span></h2>
<p>Users per day</p>
</div>
</div>
<div class="col-sm-4 my-2">
<div class="text-center">
<h2 class="mb-0"><span class="counter purecounter" data-purecounter-start="0" data-purecounter-end="12" data-purecounter-delay="50">0</span>+</h2>
<p>Featured articles</p>
</div>
</div>
</div>
</div>
</section>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/vendor/swiper/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/vendor/swiper/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" class="rounded-6">
</div>
<div class="swiper-slide">
<img src="assets/images/galleries/gallery-24.jpg" alt="Galleries" class="rounded-6">
</div>
<div class="swiper-slide">
<img src="assets/images/galleries/gallery-24.jpg" alt="Galleries" class="rounded-6">
</div>
<div class="swiper-slide">
<img src="assets/images/galleries/gallery-24.jpg" alt="Galleries" class="rounded-6">
</div>
<div class="swiper-slide">
<img src="assets/images/galleries/gallery-24.jpg" alt="Galleries" class="rounded-6">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
var swiper = new Swiper('.brand-slider', {
slidesPerView: 6,
spaceBetween: 6,
pagination: {
el: '.swiper-pagination',
clickable: true,
type: "bullets",
},
breakpoints: {
0: {
slidesPerView: 2,
},
575: {
slidesPerView: 3,
},
768: {
slidesPerView: 4,
},
1024: {
slidesPerView: 6,
},
}
});<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" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-25.jpg" alt="Galleries" class="rounded-6"></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" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries" class="rounded-6"></div>
<div class="swiper-slide"><img src="assets/images/galleries/gallery-26.jpg" alt="Galleries" class="rounded-6"></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
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
Abayo Stevens
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
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
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
<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 text-gray-800 font-weight-semibold">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 text-gray-800 font-weight-semibold">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 text-gray-800 font-weight-semibold">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 text-gray-800 font-weight-semibold">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 text-gray-800 font-weight-semibold">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/vendor/simplebar/dist/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/vendor/simplebar/dist/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">
<h6>Stacked columns</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action3"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Single bar</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action4"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Stacked bar</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action5"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Multiple bar</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action6"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Single line</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action7"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Double line</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action8"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Curved line</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action9"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Dot Plots Chart</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action10"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Stacked area</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action11"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Area chart</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action12"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Pie Chart</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action13"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Pie Chart</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action14"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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">
<h6>Pie Chart</h6>
<div class="dropdown text-end mb-md-2 ms-auto">
<a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-primary" id="Action15"><small>This week</small> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 13.502 7.5"><path data-name="Icon Color" d="M12.751,7.5h-12a.75.75,0,0,1-.6-1.2L.221,6.22l6-6A.75.75,0,0,1,7.2.147L7.282.22l6.033,6.035.04.049.059.092.03.063.032.092.02.1L13.5,6.7l0,.052,0,.052-.005.049-.02.1-.032.092-.03.063-.063.1a.772.772,0,0,1-.091.1l-.061.05-.092.058-.062.031-.093.032-.1.02-.05,0Zm-6-5.689h0L2.561,6H10.94L6.752,1.811Z" transform="translate(13.502 7.5) rotate(180)" fill="#0D6EFD"></path></svg></a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="Action3">
<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>