Statistics Card

PRO

The Statistics Cards components helps you to simply create a beautiful card displaying data in an interesting way.

Mini Statistics Card

Today's Money

$53,000

+55% since yesterday

<template>
 <MiniStatisticsCard
  title="Today's Money"
  value="$53,000"
  description="<span
  class='text-sm font-weight-bolder text-success'>
  +55%</span> since yesterday"
   :icon="{
    component: 'ni ni-money-coins',
    background: 'bg-gradient-primary',
    shape: 'rounded-circle'
  }"
 />
</template>

<script setup>
import MiniStatisticsCard from '@/examples/cards/MiniStatisticsCard.vue";
</script>

1<template>
2 <MiniStatisticsCard
3  title="Today's Money"
4  value="$53,000"
5  description="<span
6  class='text-sm font-weight-bolder text-success'>
7  +55%</span> since yesterday"
8   :icon="{
9    component: 'ni ni-money-coins',
10    background: 'bg-gradient-primary',
11    shape: 'rounded-circle'
12  }"
13 />
14</template>
15
16<script setup>
17import MiniStatisticsCard from '@/examples/cards/MiniStatisticsCard.vue";
18</script>

Props Information

Name	Type	Default	Description
rowReverse	boolean	false	Used to set the of the `MiniStatisticsCard` component to RTL.
title*	StringObject		`title` as an obbject allows to set the title `text` and `color`. It is a required prop.
description	stringnode		Used to set description of the card.
value*	StringNumberObject		`value` as an Object allows to set the value `text` and the value's `color`. It is a required prop.
percentage	StringObject		`percentage` as an object allows to set the percentage `value` and percentage's `color`.
icon	StringObject		`icon` as an object allows to set the icon `component`, icon `background` color and icon `shape`.
classContent	String		`classContent` is used to apply custom classes around the content of the `MiniStatisticsCard`.

Complex Statistics Card

PRO

1600

Active Users

+3%

<template>
 <ComplexStatisticsCard
  icon="text-dark ni ni-circle-08"
  percentage="+3%"
  :count="{ number: 1600, label: 'Active Users' }"
  background-color="dark"
 />
</template>

<script setup>
import ComplexStatisticsCard from "@/examples/cards/ComplexStatisticsCard.vue";
</script>

1<template>
2 <ComplexStatisticsCard
3  icon="text-dark ni ni-circle-08"
4  percentage="+3%"
5  :count="{ number: 1600, label: 'Active Users' }"
6  background-color="dark"
7 />
8</template>
9
10<script setup>
11import ComplexStatisticsCard from "@/examples/cards/ComplexStatisticsCard.vue";
12</script>

Props Information

Name	Type	Description
image	StringObject	`image` as an object allows to set the background image using`url` and background overlay color using `overlay` color.
icon*	StringObject	`icon` as an object allows to set the icon `component` and icon `background` color. It is a required prop.
count	Object	`count` allows to set the count's `number` and the count's `label`.
percentage	StringObject	`percentage` as an Object allows to set the percentage `label` and percentage's `color`.
menu	Object	`menu` is an object that allows you set the `id` and menu `items`.