Info Cards

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

Info Card

Full Body

Moderate

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

<template>
 <InfoCard
  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 setup>
import InfoCard from '@/examples/Cards/InfoCard.vue";
</script>

1<template>
2 <InfoCard
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 setup>
10import InfoCard from '@/examples/Cards/InfoCard.vue";
11</script>

Props Information

Name	Type	Default	Description
badge	Object	textcolor	Used to set the badge `text` and badge `color`.
title*	String		`title` is used to set the title of the `InfoCard` component. It is a required prop.
description	String		`description` is used to set the description of the `InfoCard` component.

Default Info Card

Salary

Belong Interactive

+$2000

<template>
 <DefaultInfoCard
  :icon="{
    component: 'fas fa-landmark',
    background: 'bg-gradient-success',
  }"
  title="Salary"
  description="Belong Interactive"
  value="+$2000"
/>
</template>

<script setup>
import DefaultInfoCard from '@/examples/cards/DefaultInfoCard.vue";
</script>

1<template>
2 <DefaultInfoCard
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 setup>
14import DefaultInfoCard from '@/examples/cards/DefaultInfoCard.vue";
15</script>

Props Information

Name	Type	Default	Description
icon*	Object	componentbackground	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 `DefaultInfoCard` component. It is a required prop.
description	String		`description` is used to set the description of the `DefaultInfoCard` component.
value	StringNumber		`value` is used to set a value at the bottom of the `DefaultInfoCard` component.

Mini Info Card

754 m

New York City

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

<script setup>
import MiniInfoCard from "@/examples/cards/MiniInfoCard.vue";
</script>

1<template>
2 <MiniInfoCard
3  :icon="{ component: '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 setup>
11import MiniInfoCard from "@/examples/cards/MiniInfoCard.vue";
12</script>

Props Information

Name	Type	Default	Description
icon*	Object	componentbackground	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. It is a required prop.
description*	String		`description` is used to set the description of the `MiniInfoCard` component. It is a required prop.