Info Cards - Material

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

Demo

Salary

Belong Interactive

+$2000

<template>
 <default-info-card
  :icon="{
    component: 'account_balance',
    background: 'bg-gradient-success',
  }"
  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="{
4    component: 'account_balance',
5    background: 'bg-gradient-success',
6  }"
7  title="Salary"
8  description="Belong Interactive"
9  value="+$2000"
10/>
11</template>
12
13<script>
14import DefaultInfoCard from '@/examples/Cards/DefaultInfoCard.vue";
15export default { components: { DefaultInfoCard, }, };
16</script>

Props Information

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