Pricing options

Ready to use

GitHub

Storybook

Examples

Default

Cards variant

Gradient variant

Center alignment

One option

This is the one-option layout for the pricing options component

Two options

This is the two-item layout for the pricing options component.

Three and four options

PricingOptions supports a maximum of four items in both default and card layouts.

Please refer to our Storybook examples to see the component in a full-width context as originally intended.

PricingOptions is designed to fill the width of the page’s main container, thus it cannot be accurately represented within the narrower container of this documentation.

Feature list sets

Use PricingOptions.FeatureListGroupHeading to group feature items together.

Included and excluded features

Use PricingOptions.FeatureListItem with variant="included" and variant="excluded" to list included and excluded features.

Component props

PricingOptions Required

Name	Type	Default	required	Description
`as`	`'section'` `'div'`	`section`	`false`	Applies the underlying HTML element
`children`	`PricingOptions.Item`		`true`	Applies the underlying HTML element
`variant`	`'default'` `'default-gradient'` `'cards'` `'cards-gradient'`		`false`	Sets the style variant

PricingOptions.Item Required

One item per pricing plan to be displayed. Maximum of 3 items.

Name	Type	Default	required	Description
`children`	`'PricingOptions.Heading'` `'PricingOptions.Label'` `'PricingOptions.Price'` `'PricingOptions.FeatureList'` `'PricingOptions.Footnote'`	`undefined`	`true`	The contents of the item

PricingOptions.Heading Required

Name	Type	Default	required	Description
`as`	`'h1'` `'h2'` `'h3'` `'h4'` `'h5'` `'h6'`	`h3`	`false`	Applies the underlying HTML heading level element
`children`	`ReactNode`	`undefined`	`true`	The heading of the item

PricingOptions.Label

Name	Type	Default	required	Description
`children`	`ReactNode`	`undefined`	`true`	The label of the item

PricingOptions.Description

Name	Type	Default	required	Description
`children`	`ReactNode`	`undefined`	`true`	The description of the item

PricingOptions.Price

Name	Type	Default	required	Description
`children`	`ReactNode`	`undefined`	`true`	The price of the item
`currencyCode`	`string`	`USD`	`false`	The currency code
`currencySymbol`	`string`	`$`	`false`	The currency symbol
`originalPrice`	`string`	`undefined`	`false`	The initial price before any discounts are applied
`trailingText`	`string`		`false`	The trailing text

PricingOptions.FeatureList

Name	Type	Default	required	Description
`children`	`'PricingOptions.Heading'` `'PricingOptions.Item'`	`undefined`	`true`	The list of features
`accordionAs`	`'h1'` `'h2'` `'h3'` `'h4'` `'h5'` `'h6'`	`h4`	`false`	Applies the underlying HTML heading level element
`expanded`	`boolean`	`true`	`false`	Controls visibility of feature items. Accepts Object type for granular control at different viewport sizes.
`hasDivider`	`boolean`	`true`	`false`	Controls visibility of a visual border between feature lists and adjacent actions

PricingOptions.FeatureListGroupHeading

Name	Type	Default	required	Description
`children`	`ReactNode`	`"What's included"`	`false`	A custom title for the feature list

PricingOptions.FeatureListGroupHeading

Name	Type	Default	required	Description
`as`	`h4, h5, h6`	`h4`	`false`	Applies the underlying HTML heading level element
`children`	`ReactNode`	`undefined`	`true`	The heading of the feature list set

PricingOptions.FeatureListItem

Name	Type	Default	required	Description
`children`	`ReactNode`	`undefined`	`true`	The item of the feature list set
`variant`	`'included'` `'excluded'`	`included`	`false`	The variant of the feature list set

PricingOptions.Footnote

Name	Type	Default	required	Description
`children`	`ReactNode`	`undefined`	`true`	The footnote of the item