Widgets

Statistic Cards
Widget Statistic Style 1
Total Point 340
Learning Time 21 hr
Complete Cources 26
Certivicates 7
Widget Statistic Style 2
Site View 14,840
29.4%
Visitor 32,830
-0.13%
Likes 12,840
29.4%
Comment 890
29.4%
Widget Statistic Style 3
Revenue $23,980
29.4%
Customers 48.39k
-0.23%
Orders 21.50k
-0.13%
Conversion 22.50%
29.4%
Widget Statistic Style 4
On hold tickets 23
8.3%
Open the ticket 8
-0.13%
Due tickets today 3
8.3%
Unassigned 6
8.3%
Widget Statistic with Chart
Campaign Sent 12,840
29.4%
Deals 974
1.13%
Booked Revenue $253k
11.7%
New Leads 14,840
29.4%
Documentation
Available Parameters
Parameter Type Description
style Text Set variation style for Widget Statistic component.
List of available variations :
  • widget-statistic-style-1
  • widget-statistic-style-2
  • widget-statistic-style-3
  • widget-statistic-style-4
  • widget-statistic-with-chart
title Text
required 		Display Title of Widget Statistic component.
value Text
required 		Display Text Value of Widget Statistic component.
growth Text HTML Display Growth Value of Widget Statistic component.
baseId Unique Text
required for widget-statistic-with-chart 		Set Unique Base ID for Widget Statistic with Chart component.
chartData Array of Number
required for widget-statistic-with-chart 		Set chart data values for Widget Statistic with Chart component.
Example:
[7, 11, 12, 10,14, 15,12, 4,5, 8,4, 2]
chartType Text
Default : line 		Set chart type for Widget Statistic with Chart component.
List of available Chart Type :
  • line
  • bar
chartColor Text of HEX Color
Default : #1F58D4 		Set chart color for Widget Statistic component.
Starter Kit Codes
Starter Kit Code 
<div class="row">
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-1",
			"title"		: "Total Point",
			"value"		: "340",
			"icon"		: "ic ic-money primary-1",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-1",
			"title"		: "Learning Time",
			"value"		: "21 hr",
			"icon"		: "ic ic-user-circle primary-1",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-1",
			"title"		: "Complete Cources",
			"value"		: "26",
			"icon"		: "ic ic-arrow-square-up-right primary-1",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-1",
			"title"		: "Certivicates",
			"value"		: "7",
			"icon"		: "ic ic-chart-line-up primary-1",
		} %}
	</div>
</div>
Starter Kit Code 
<div class="row">
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-2",
			"title"		: "Site View",
			"value"		: "14,840",
			"icon"		: "ic ic-eye",
			"growth"		: "<span class=\"badge rounded-pill text-bg-success\"><i class=\"ic ic-trend-up\"></i>29.4%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-2",
			"title"		: "Visitor",
			"value"		: "32,830",
			"icon"		: "ic ic-user-square",
			"growth"		: "<span class=\"badge rounded-pill text-bg-danger\"><i class=\"ic ic-trend-down\"></i>-0.13%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-2",
			"title"		: "Likes",
			"value"		: "12,840",
			"icon"		: "ic ic-thumbs-up",
			"growth"		: "<span class=\"badge rounded-pill text-bg-success\"><i class=\"ic ic-trend-up\"></i>29.4%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-2",
			"title"		: "Comment",
			"value"		: "890",
			"icon"		: "ic ic-chat-centered-dots",
			"growth"		: "<span class=\"badge rounded-pill text-bg-success\"><i class=\"ic ic-trend-up\"></i>29.4%</span>",
		} %}
	</div>
</div>
Starter Kit Code 
<div class="row">
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-3",
			"title"		: "Revenue",
			"value"		: "$23,980",
			"icon"		: "ic ic-money",
			"growth"		: "<span class=\"badge rounded-pill text-bg-success\"><i class=\"ic ic-trend-up\"></i>29.4%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-3",
			"title"		: "Customers",
			"value"		: "48.39k",
			"icon"		: "ic ic-user-circle",
			"growth"		: "<span class=\"badge rounded-pill text-bg-danger\"><i class=\"ic ic-trend-down\"></i>-0.23%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-3",
			"title"		: "Orders",
			"value"		: "21.50k",
			"icon"		: "ic ic-arrow-square-up-right",
			"growth"		: "<span class=\"badge rounded-pill text-bg-danger\"><i class=\"ic ic-trend-down\"></i>-0.13%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-3",
			"title"		: "Conversion",
			"value"		: "22.50%",
			"icon"		: "ic ic-chart-line-up",
			"growth"		: "<span class=\"badge rounded-pill text-bg-success\"><i class=\"ic ic-trend-up\"></i>29.4%</span>",
		} %}
	</div>
</div>
Starter Kit Code 
<div class="row">
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-4",
			"title"		: "On hold tickets",
			"value"		: "23",
			"valueClasses"	: "bg-brand-primary-1",
			"growth"		: "<span class=\"text-success\"><i class=\"ic ic-trend-up\"></i>8.3%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-4",
			"title"		: "Open the ticket",
			"value"		: "8",
			"valueClasses"	: "bg-brand-primary-2",
			"growth"		: "<span class=\"text-danger\"><i class=\"ic ic-trend-down\"></i>-0.13%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-4",
			"title"		: "Due tickets today",
			"value"		: "3",
			"valueClasses"	: "bg-brand-secondary-1",
			"growth"		: "<span class=\"text-success\"><i class=\"ic ic-trend-up\"></i>8.3%</span>",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"style"		: "widget-statistic-style-4",
			"title"		: "Unassigned",
			"value"		: "6",
			"valueClasses"	: "bg-brand-secondary-2",
			"growth"		: "<span class=\"text-success\"><i class=\"ic ic-trend-up\"></i>8.3%</span>",
		} %}
	</div>
</div>
Starter Kit Code 
<div class="row">
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"baseId"	: "widget-statistic-with-chart-1",
			"style"		: "widget-statistic-with-chart",
			"title"		: "Campaign Sent",
			"value"		: "12,840",
			"growth"		: "<span class=\"badge rounded-pill text-bg-success\"><i class=\"ic ic-trend-up\"></i>29.4%</span>",

			"chartData"	: [
				10, 15, 
				5, 12,
				0, 11,
				10, 0,
				2, 15,
				4, 12
			],
			"chartType"	: "line",
			"chartColor"	: "#1F58D4",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"baseId"	: "widget-statistic-with-chart-2",
			"style"		: "widget-statistic-with-chart",
			"title"		: "Deals",
			"value"		: "974",
			"growth"		: "<span class=\"badge rounded-pill text-bg-danger\"><i class=\"ic ic-trend-down\"></i>1.13%</span>",

			"chartData"	: [
				8, 10, 
				6, 2,
				4, 8,
				10, 14,
				12, 15,
				10, 3
			],
			"chartType"	: "bar",
			"chartColor"	: "#F9BD29",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"baseId"	: "widget-statistic-with-chart-3",
			"style"		: "widget-statistic-with-chart",
			"title"		: "Booked Revenue",
			"value"		: "$253k",
			"growth"		: "<span class=\"badge rounded-pill text-bg-success\"><i class=\"ic ic-trend-up\"></i>11.7%</span>",

			"chartData"	: [
				3, 1, 
				2, 4,
				0, 5,
				7, 5,
				8, 15,
				2, 5
			],
			"chartType"	: "line",
			"chartColor"	: "#1F58D4",
		} %}
	</div>
	<div class="col-md-3">
		{# include widgets/statistic  #}
		{% include "../../widgets/statistic.twig", with {
			"baseId"	: "widget-statistic-with-chart",
			"style"		: "widget-statistic-with-chart",
			"title"		: "New Leads",
			"value"		: "14,840",
			"growth"		: "<span class=\"badge rounded-pill text-bg-success\"><i class=\"ic ic-trend-up\"></i>29.4%</span>",

			"chartData"	: [
				7, 11, 
				12, 10,
				14, 15,
				12, 4,
				5, 8,
				4, 2
			],
			"chartType"	: "bar",
			"chartColor"	: "#93B1F4",
		} %}
	</div>
</div>