Pricing Cards
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 Dashboard 2 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
| Name | Type | Default | Description |
|---|---|---|---|
| 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* | array | Used 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. |