Vue Statistics Card - Argon

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

Props Information

NameTypeDefaultDescription
rowReversebooleanfalseUsed to set the of the MiniStatisticsCard component to RTL.
title*['String', 'Object']title as an obbject allows to set the title text and color. It is a required prop.
description'string', 'node'Used to set description of the card.
value*['String', 'Number', 'Object']value as an Object allows to set the value text and the value's color. It is a required prop.
percentage['String', 'Object']percentage as an object allows to set the percentage value and percentage's color.
icon['String', 'Object']icon as an object allows to set the icon component, icon background color and icon shape.
classContentStringclassContent is used to apply custom classes around the content of the MiniStatisticsCard.

Complex Statistics Card

PRO

Props Information

NameTypeDefaultDescription
img['String', 'Object']img as an object allows to set the background image usingurl and background overlay color using overlay color.
icon*['String', 'Object']icon as an object allows to set the icon component and icon background color. It is a required prop.
countObjectcount allows to set the count's number and the count's label.
percentage['String', 'Object']percentage as an Object allows to set the percentage label and percentage's color.