Default Counter Card

The Counter Cards components helps you to simply create a beautiful animations that display numerical data in a more interesting way. It uses vue-count-to in base and you can use all of its props.

Demo

21 °C

Living Room

Temperature

<template>
 <DefaultCounterCard
 color="success"
 :count="21"
 suffix="°C"
 title="Living Room"
 description="Temperature"
/>
</template>

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

1<template>
2 <DefaultCounterCard
3 color="success"
4 :count="21"
5 suffix="°C"
6 title="Living Room"
7 description="Temperature"
8/>
9</template>
10
11<script setup>
12import DefaultCounterCard from "@/examples/cards/DefaultCounterCard.vue";
13</script>

Props Information

Name	Type	Default	Description
count*	Number		Used to set a value for the `DefaultCounterCard` component. It is a required prop.
duration	Number	4000	Used to set duration of the `DefaultCounterCard` animation.
prefix	string		Used to set a prefix for the component.
suffix	string		Used to set a suffix for the component.
title*	String		Used to set title of the `DefaultCounterCard` component. It is a required prop.
description*	String		Used to set description of the `DefaultCounterCard` component. It is a required prop.
color*	successprimarysecondaryinfowarningerrordarkdangerlight		It is used to set `DefaultCounterCard` text color. It is a required prop.