Vue Info Cards - Argon

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

Mini Info Card

Full Body

Moderate

What matters is the people who are sparked by it. And the people who are liked.

1<template>
2 <info-card
3  title="Full Body"
4  description="What matters is the people who are sparked by it. And the people who are liked."
5  :badge="{ text: 'Moderate', color: 'success' }"
6/>
7</template>
8
9<script>
10import InfoCard from '@/examples/Cards/InfoCard.vue";
11export default {
12 components: {
13    InfoCard,
14   },
15 };
16</script>

<template>
 <info-card
  title="Full Body"
  description="What matters is the people who are sparked by it. And the people who are liked."
  :badge="{ text: 'Moderate', color: 'success' }"
/>
</template>

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

Props Information

Name	Type	Default	Description
icon*	Object	['component', 'background']	Used to set the icon `component` and icon `background` color. It is a required prop.
title	String		`title` is used to set the title of the `MiniInfoCard` component.
description	String		`description` is used to set the description of the `MiniInfoCard` component.

Default Info Card

Salary

Belong Interactive

+$2000

1<template>
2 <default-info-card
3  :icon="{
4    component: 'fas fa-landmark',
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 {
16 components: {
17    DefaultInfoCard,
18   },
19 };
20</script>

<template>
 <default-info-card
  :icon="{
    component: 'fas fa-landmark',
    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>

Props Information

Name	Type	Default	Description
icon*	['String', 'Object']	['component', 'background']	`icon` as an bject allows to set the icon `component` and icon `background` color. 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 `DefaultInfoCard`.

Mini Info Card

754 m

New York City

1<template>
2  <mini-info-card
3  :icon="{ component: 'ni ni-curved-next', background: 'success' }"
4  title="754
5  <span class='text-sm text-secondary'>m</span>"
6  description="New York City"
7/>
8</template>
9
10<script>
11import MiniInfoCard from '@/examples/Cards/MiniInfoCard.vue";
12export default {
13 components: {
14    MiniInfoCard,
15   },
16 };
17</script>

<template>
  <mini-info-card
  :icon="{ component: 'ni ni-curved-next', background: 'success' }"
  title="754
  <span class='text-sm text-secondary'>m</span>"
  description="New York City"
/>
</template>

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

Props Information

Name	Type	Default	Description
icon*	Object	['component', 'background']	Used to set the icon `component` and icon `background` color. It is a required prop.
title	String		`title` is used to set the title of the `MiniInfoCard` component.
description	String		`description` is used to set the description of the `MiniInfoCard` component.