Counter Cards

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.

Default Counter Card

100+

Design Blocks

Mix the sections, change the colors and unleash your creativity

<script setup>
// Vue Material Kit 2 component
import DefaultCounterCard from "@/examples/cards/counterCards/DefaultCounterCard.vue";
</script>
<template>
 <DefaultCounterCard
  title="Design Blocks"
  description="Mix the sections, change the colors and unleash your creativity"
  :count="100"
  suffix="+"
  :duration="3000"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import DefaultCounterCard from "@/examples/cards/counterCards/DefaultCounterCard.vue";
4</script>
5<template>
6 <DefaultCounterCard
7  title="Design Blocks"
8  description="Mix the sections, change the colors and unleash your creativity"
9  :count="100"
10  suffix="+"
11  :duration="3000"
12 />
13</template>

Props Information

Name	Type	Default	Description
count*	'Number'		Used to set a value for the `DefaultCounterCard` component. It is a required prop.
suffix	string		Used to set a `suffix` for the component. to RTL.
duration	'Number'	4000	Used to set the duration of the `DefaultCounterCard` count number.
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	String	success	Used to set the title color.
divider	'vertical''horizontal'		Used to set divider for the `DefaultCounterCard` component.