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

// Otis Kit PRO 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	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.

Simple Pricing Card

// Otis Kit PRO 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

Name	Type	Default	Description
variant	'contained''gradient'	contained	Used 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*	string		Used to define the `SimplePricingCard` title. Its a required prop.
description*	string		Used 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*	array		Used 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.