Info Cards

The Info Cards components helps you to simply create beautiful cards for display less amount of data.

Default Info Card

Fully integrated

We get insulted by others, lose trust for those We get back freezes

<script setup>
// Vue Material Kit 2 component
import DefaultInfoCard from "@/examples/cards/infoCards/DefaultInfoCard.vue";
</script>
<template>
 <DefaultInfoCard
  color="success"
  icon="public"
  title="Fully integrated"
  description="We get insulted by others, lose trust for those We get back freezes"
/>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import DefaultInfoCard from "@/examples/cards/infoCards/DefaultInfoCard.vue";
4</script>
5<template>
6 <DefaultInfoCard
7  color="success"
8  icon="public"
9  title="Fully integrated"
10  description="We get insulted by others, lose trust for those We get back freezes"
11/>
12</template>

Props Information

Name	Type	Default	Description
icon	'component''size''color'		Used to set the `icon`. It can be string or an object. As an object it accepts the following keys: `component` used to set the icon name. `size` used to set the icon size. `color` used to set the icon color.
image	'component''class'		Used to set the `DefaultInfoCard` image. `component` used to set the image. `class` used to apply custom class to the image.
title*	'text''class'		Used to set the `DefaultInfoCard` title. It can be a string or an object. As an object accepts the following keys: `text` used to set the title text. `class` used to apply custom class to the title. It is a required prop.
description*	'text''class'		Used to set the `DefaultInfoCard` description. It can be a string or an object. As an object accepts the following keys: `text` used to set the description text. `class` used to apply custom class to the description. It is a required prop.
col	string	col-md-6	Used to set custom numer of columns to the `DefaultInfoCard` component.

Filled Info Card

Netflix's 'Shuffle Play' feature

The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.

More about us

<script setup>
// Vue Material Kit 2 component
import FilledInfoCard from "@/examples/cards/infoCards/FilledInfoCard.vue";
</script>
<template>
 <FilledInfoCard
  class="p-4"
  :color="{
    background: 'bg-gradient-success',
    text: 'white',
  }"
  :icon="{ component: 'shuffle', color: 'white' }"
  title="Netflix's 'Shuffle Play' feature"
  description="The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever."
  :action="{
    route: 'javascript:;',
    label: { text: 'More about us', color: 'white' },
  }"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import FilledInfoCard from "@/examples/cards/infoCards/FilledInfoCard.vue";
4</script>
5<template>
6 <FilledInfoCard
7  class="p-4"
8  :color="{
9    background: 'bg-gradient-success',
10    text: 'white',
11  }"
12  :icon="{ component: 'shuffle', color: 'white' }"
13  title="Netflix's 'Shuffle Play' feature"
14  description="The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever."
15  :action="{
16    route: 'javascript:;',
17    label: { text: 'More about us', color: 'white' },
18  }"
19 />
20</template>

Props Information

Name	Type	Default	Description
color	'text''background'	background: bg-gray-100	Used to set the `FilledInfoCard` text and background color.
icon	'component''color'		Used to set the `icon`. It accepts the following keys: `component` used to set the icon name. `color` used to set the icon color.
title*	string		Used to set the `FilledInfoCard` title. It is a required prop.
description*	string		Used to set the `FilledInfoCard` description. It is a required prop.
action*	object		Used to set the `FilledInfoCard` action button. It accepts the following keys: Required `label` of type object with `text` and `color`keys Required `route` of type string.

Simple Info Card

Pro

Modular Components

The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.

<script setup>
// Vue Material Kit 2 component
import SimpleInfoCard from "@/examples/cards/infoCards/SimpleInfoCard.vue";
</script>
<template>
 <SimpleInfoCard
  color="success"
  icon="payment"
  title="Modular Components"
  description="The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever."
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import SimpleInfoCard from "@/examples/cards/infoCards/SimpleInfoCard.vue";
4</script>
5<template>
6 <SimpleInfoCard
7  color="success"
8  icon="payment"
9  title="Modular Components"
10  description="The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever."
11 />
12</template>

Props Information

Name	Type	Default	Description
direction	string	text-start	Used to set the `SimpleInfoCard` text direction.
variant	'contained''gradient'	gradient	Used to set the `SimpleInfoCard` color variant.
color	'primary''secondary''info''success''warning''danger''error''light''dark'	success	Used to set the `SimpleInfoCard` text and background color.
icon*	'component''color'		Used to set the `icon`. It can be a string or an object. It accepts the following keys: `component` used to set the icon name. `color` used to set the icon color. It is a required prop.
size	string	md	Used to set the `SimpleInfoCard` icon size.
title*	string		Used to set the `SimpleInfoCard` title. It is a required prop.
description*	string		Used to set the `SimpleInfoCard` description. It is a required prop.