Pricing Cards

PRO

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


The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Default Pricing Card

// Material Kit 2 PRO React Examples import DefaultPricingCard from "examples/Cards/PricingCards/DefaultPricingCard";
starter

$99/mo

2 team members

20GB Cloud storage

Integration help

Sketch Files

API Access

Complete documentation

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark''white'Used to set the DefaultPricingCard background color.
badge*{ color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"], label: string }Used to set the DefaultPricingCard badge content and style. Its a required prop.
price*{ currency: string, value: string, type: string, }Used to set the DefaultPricingCard price details. Its a required prop.
specifications*arrayUsed to set the DefaultPricingCard specifications, its an array of objects with the following keys: `label` and `includes`. Its a required prop.
action*{ type: ["enternal", "internal"], route: string, label: string, color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"] }Used to set the DefaultPricingCard route and action button style. Its a required prop.

Simple Pricing Card

// Material Kit 2 PRO React Examples import SimplePricingCard from "examples/Cards/PricingCards/SimplePricingCard";
Premium
Free access for 200 members

$499 / year


Complete documentation

Working materials in Sketch

20GB cloud storage

100 team members

Props Information

NameTypeDefaultDescription
variant'contained''gradient'containedUsed to set the SimplePricingCard background color type.
color'primary''secondary''info''success''warning''error''light''dark'Used to set the SimplePricingCard background color or some content color based on the `variant` prop.
title*stringUsed to define the SimplePricingCard title. Its a required prop.
description*stringUsed to define the SimplePricingCard description. Its a required prop.
price*{ value: string, type: string, }Used to set the SimplePricingCard price details. Its a required prop.
specifications*arrayUsed to set the SimplePricingCard specifications or included features.
action*{ type: ["enternal", "internal"], route: string, label: string, }Used to set the SimplePricingCard route and action button text. Its a required prop.