Info Card - Soft UI

The DefaultInfoCard component helps you to simply create a beautiful card displaying data in an interesting way.

Demo

Use this info card example with Vue Soft UI Dashboard PRO.

Salary

Belong Interactive

+$2000

<template>
<default-info-card
 icon="text-white fas fa-landmark"
 title="Salary"
 description="Belong Interactive"
 value="+$2000"
/>
</template>

<script>
import DefaultInfoCard from '@/examples/Cards/DefaultInfoCard.vue";
export default { components: { DefaultInfoCard, }, };
</script>

1<template>
2<default-info-card
3 icon="text-white fas fa-landmark"
4 title="Salary"
5 description="Belong Interactive"
6 value="+$2000"
7/>
8</template>
9
10<script>
11import DefaultInfoCard from '@/examples/Cards/DefaultInfoCard.vue";
12export default { components: { DefaultInfoCard, }, };
13</script>

Props Information

Name	Type	Default	Description
icon*	['String', 'Object']	['component', 'background']	`icon` as an Object allows to set the icon `component` and icon `background` color.
title*	String		`title` is used to set the title of the `DefaultInfoCard` component.
description	String		`description` is used to set the description of the `DefaultInfoCard` component.
value	['String', 'Number']		`value` is used to set a value to the `DefaultInfoCard` component.