Info Cards

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

Default Info Card

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";
12
13export default {
14 components: {
15    DefaultInfoCard,
16   },
17 };
18</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.