Pricing Cards

PRO

The Pricing Cards components helps you to simply create a beautiful pricing card for your pages.

Default Pricing Card

STARTER

$99/mo

2 team members

20GB Cloud storage

Integration help

Sketch Files

API Access

Complete documentation

Join

<script setup>
// Vue Material Kit 2 component
import DefaultPricingCard from "@/examples/cards/pricingCards/DefaultPricingCard.vue";
</script>
<template>
 <DefaultPricingCard
   :badge="{ color: 'light', label: 'Starter' }"
   :price="{ currency: '$', amount: '59', charged: 'mo' }"
   :specifications="[
     { label: '2 team members', includes: true },
     { label: '20GB Cloud storage', includes: true },
     { label: 'Integration help', includes: true },
     { label: 'Sketch Files', includes: false },
     { label: 'API Access', includes: false },
     { label: 'Complete documentation', includes: false },
   ]"
   :action="{
     color: 'dark',
     route: 'javascript:;',
     label: 'Join',
   }"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import DefaultPricingCard from "@/examples/cards/pricingCards/DefaultPricingCard.vue";
4</script>
5<template>
6 <DefaultPricingCard
7   :badge="{ color: 'light', label: 'Starter' }"
8   :price="{ currency: '$', amount: '59', charged: 'mo' }"
9   :specifications="[
10     { label: '2 team members', includes: true },
11     { label: '20GB Cloud storage', includes: true },
12     { label: 'Integration help', includes: true },
13     { label: 'Sketch Files', includes: false },
14     { label: 'API Access', includes: false },
15     { label: 'Complete documentation', includes: false },
16   ]"
17   :action="{
18     color: 'dark',
19     route: 'javascript:;',
20     label: 'Join',
21   }"
22 />
23</template>

Props Information

Name	Type	Description
color	'primary''secondary''info''success''warning''danger''error''light''dark'	Used to set the Card background color.
badge*	'color''label'	Used to set the `DefaultPricingCard` badge content and style. Its a required prop.
price*	'currency''amount''charged'	Used to set the `DefaultPricingCard` price details. Its a required prop.
specifications*	array	Used to set the `DefaultPricingCard` specifications, its an array of objects with the following keys: `label` and `includes`. Its a required prop.
action	'route''label''color'	Used to set the `DefaultPricingCard` route, label and action button style. Its a required prop.

Simple Pricing Card

Premium

Free access for 200 members

$499 /mo

Buy Now

Complete documentation

Working materials in Sketch

2GB cloud storage

100 team members

<script setup>
// Vue Material Kit 2 component
import SimplePricingCard from "@/examples/cards/pricingCards/SimplePricingCard.vue";
</script>
<template>
 <SimplePricingCard
  col="col-6 mx-auto"
  color="bg-gradient-dark"
  title="Premium"
  description="Free access for 200 members"
  :price="499"
  :action="{ route: '', label: 'Buy now', color: 'btn-white' }"
  :specifications="[
    'Complete documentation',
    'Working materials in Sketch',
    '2GB cloud storage',
    '100 team members',
  ]"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import SimplePricingCard from "@/examples/cards/pricingCards/SimplePricingCard.vue";
4</script>
5<template>
6 <SimplePricingCard
7  col="col-6 mx-auto"
8  color="bg-gradient-dark"
9  title="Premium"
10  description="Free access for 200 members"
11  :price="499"
12  :action="{ route: '', label: 'Buy now', color: 'btn-white' }"
13  :specifications="[
14    'Complete documentation',
15    'Working materials in Sketch',
16    '2GB cloud storage',
17    '100 team members',
18  ]"
19 />
20</template>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''danger''error''light''dark'		Used to set the Card background color.
title*	string		Used to set the `SimplePricingCard` title. Its a required prop.
description*	string		Used to set the `SimplePricingCard` description. Its a required prop.
price*	'currency''amount''charged'		Used to set the `SimplePricingCard` price details. It can be a number or an object. Its a required prop.
specifications*	array		Used to set the `SimplePricingCard` specifications. It is an array of strings and It's a required prop.
action	'route''label''color'		Used to set the `SimplePricingCard` route, label and action button style. Its a required prop.
col	string	col-lg-3 col-sm-6	Used to set the `SimplePricingCard` column.

Simple Info Pricing Card

Standard

$59

per month

50GB File Storage
100 Users
Premium Support

<script setup>
// Vue Material Kit 2 component
import SimplePricingCard from "@/examples/cards/pricingCards/SimplePricingCard.vue";

// image
import patternLines from "@/assets/img/shapes/pattern-lines.svg";
</script>
<template>
 <SimpleInfoPricingCard
  variant="gradient"
  color="success"
  :image="patternLines"
  title="Standard"
  :price="{
    currency: '$',
    amount: '59',
    charged: 'per month',
  }"
  :specifications="[
    '<b>50GB <span>File Storage</span>',
    '<b>100</b> <span>Users</span>',
    '<b>Premium</b> <span>Support</span>',
  ]"
  :action="{
    color: 'btn-white',
    label: 'Request a demo',
}"
/>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import SimplePricingCard from "@/examples/cards/pricingCards/SimplePricingCard.vue";
4
5// image
6import patternLines from "@/assets/img/shapes/pattern-lines.svg";
7</script>
8<template>
9 <SimpleInfoPricingCard
10  variant="gradient"
11  color="success"
12  :image="patternLines"
13  title="Standard"
14  :price="{
15    currency: '$',
16    amount: '59',
17    charged: 'per month',
18  }"
19  :specifications="[
20    '<b>50GB <span>File Storage</span>',
21    '<b>100</b> <span>Users</span>',
22    '<b>Premium</b> <span>Support</span>',
23  ]"
24  :action="{
25    color: 'btn-white',
26    label: 'Request a demo',
27}"
28/>
29</template>

Props Information

Name	Type	Description
variant	'fill''gradient'	Used to set the `SimpleInfoPricingCard` color variant.
color	'primary''secondary''info''success''warning''danger''error''light''dark'	Used to set the `SimpleInfoPricingCard` background color.
image	string	Used to set an image on the `SimpleInfoPricingCard`.
title*	string	Used to set the `SimpleInfoPricingCard` title. Its a required prop.
price*	'currency''amount''charged'	Used to set the `SimpleInfoPricingCard` price details. It can be a number or an object. Its a required prop.
specifications*	array	Used to set the `SimpleInfoPricingCard` specifications. It is an array of strings and It's a required prop.
action	'label''color'	Used to set the `SimpleInfoPricingCard` label and action button style.

Mini Pricing Card

Starter

$199

Complete documentation

Working materials in Sketch

500MB cloud storage

Lite support

Buy Now

<script setup>
// Vue Material Kit 2 component
import MiniPricingCard from "@/examples/cards/pricingCards/MiniPricingCard.vue";
</script>
<template>
 <MiniPricingCard
  title="Starter"
  :price="{ currency: '$', amount: '199' }"
  :specifications="[
    'Complete documentation',
    'Working materials in Sketch',
    '500MB cloud storage',
    'Lite support',
 ]"
/>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MiniPricingCard from "@/examples/cards/pricingCards/MiniPricingCard.vue";
4</script>
5<template>
6 <MiniPricingCard
7  title="Starter"
8  :price="{ currency: '$', amount: '199' }"
9  :specifications="[
10    'Complete documentation',
11    'Working materials in Sketch',
12    '500MB cloud storage',
13    'Lite support',
14 ]"
15/>
16</template>

Props Information

Name	Type	Description
title*	string	Used to set the `MiniPricingCard` title. Its a required prop.
price*	'currency''amount'	Used to set the `MiniPricingCard` price details. It can be a number or an object. Its a required prop.
specifications*	array	Used to set the `MiniPricingCard` specifications. It is an array of strings and It's a required prop.
action	'label''route''color''class'	Used to set the `MiniPricingCard` label, route, color and custom action button style.