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
// Soft UI Dashboard React examples
import DefaultPricingCard from "examples/Cards/PricingCards/DefaultPricingCard";
premium
$89
10 team members
40GB Cloud storage
Integration help
Sketch Files
API Access
Complete documentation
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| 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 } | 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. |
Outlined Pricing Card
PRO
// Soft UI Dashboard PRO React examples
import OutlinedPricingCard from "examples/Cards/PricingCards/OutlinedPricingCard";
Pro
$299
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | dark | Used to set the OutlinedPricingCard color. |
| title* | string | Used to set the OutlinedPricingCard title. Its a required prop. | |
| description* | string | Used to set the OutlinedPricingCard description. Its a required prop. | |
| price* | { value: string, type: string } | Used to set the OutlinedPricingCard price details. Its a required prop. | |
| specifications* | array | Used to set the OutlinedPricingCard 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 } | Used to set the OutlinedPricingCard route and action button text. Its a required prop. |
Waved Pricing Card
PRO
// Soft UI Dashboard PRO React examples
import WavedPricingCard from "examples/Cards/PricingCards/WavedPricingCard";
Company
$779
per year
10 Projects
1 Team Member
5 Personal Contacts
500 Messages
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | dark | Used to set the WavedPricingCard color. |
| title* | string | Used to set the WavedPricingCard title. Its a required prop. | |
| price* | { value: string, currency: string, type: string } | Used to set the WavedPricingCard price details. Its a required prop. | |
| specifications* | array | Used to set the WavedPricingCard specifications, its an array of objects with the following keys: `count` and `label`. Its a required prop. | |
| action* | { type: ["enternal", "internal"], route: string, label: string } | Used to set the WavedPricingCard route and action button text. Its a required prop. |