Statistics Card - Soft UI

PRO

Our Vue Statistics Cards are used for showing relevant metrics to the users See below our examples that you can use with Vue Soft UI Dashboard PRO.


Mini Statistics Card

Use this example to create a simple statistics card.

Today's Money

$53,000

Props Information

NameTypeDefaultDescription
directionReversebooleanfalseUsed to set the of the MiniStatisticsCard component to RTL.
title['String', 'Object']['text', 'color']title as an Object allows to set the title text and color.
value*['String', 'Number', 'Object']['text', 'color']value as an Object allows to set the value text and the value's color.
percentage['String', 'Object']['value', 'color']percentage as an Object allows to set the percentage value and percentage's color.
icon['String', 'Object']['component', 'background']icon as an Object allows to set the icon component and icon background color.
classContentStringclassContent is used to apply custom classes around the content of the MiniStatisticsCard.

Complex Statistics Card

PRO

Use this example to create a complex statistics card.

Props Information

NameTypeDefaultDescription
icon*['String', 'Object']['component', 'background']icon as an Object allows to set the icon component and icon background color.
countObject['number', 'label']count allows to set the count's number and the count's label.
percentage['String', 'Object']['label', 'color']percentage as an Object allows to set the percentage label and percentage's color.
backgroundColorStringbackgroundColor is used to apply custom background color to ComplexStatisticsCard component.