blocks/pricing-card
Type Aliases
Section titled “Type Aliases”PricingPlan
Section titled “PricingPlan”PricingPlan =
object
Caller-provided pricing plan data.
Properties
Section titled “Properties”name:
ReactNode
description?
Section titled “description?”
optionaldescription?:ReactNode
price?
Section titled “price?”
optionalprice?:ReactNode
interval?
Section titled “interval?”
optionalinterval?:ReactNode
PricingCardVariant
Section titled “PricingCardVariant”PricingCardVariant =
"outline"|"spec"
Supported PricingCard looks.
PricingCardProps
Section titled “PricingCardProps”PricingCardProps =
HTMLAttributes<HTMLDivElement> > &object
Props accepted by PricingCard.
Type Declaration
Section titled “Type Declaration”plan:
PricingPlan
features?
Section titled “features?”
optionalfeatures?:ReactNode
Caller-owned feature rows.
action?
Section titled “action?”
optionalaction?:ReactNode
Caller-owned action control; this block never invokes or configures it.
status?
Section titled “status?”
optionalstatus?:ReactNode
Caller-owned status content, such as a badge.
optionalart?:ReactNode
Caller-owned illustration, such as an img with its own alt text.
variant?
Section titled “variant?”
optionalvariant?:PricingCardVariant
outline is the quiet default. spec is a printed spec sheet: an inked name
band, a framed illustration window, the price on one line and a hard offset
shadow.
featured?
Section titled “featured?”
optionalfeatured?:boolean
Marks the one plan a page recommends with a heavier shadow.
density?
Section titled “density?”
optionaldensity?:CardProps["density"]
Use tighter section spacing for dense plan comparisons.
Variables
Section titled “Variables”PricingCard
Section titled “PricingCard”
constPricingCard:ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > &object&RefAttributes<HTMLDivElement>>>>
Displays supplied plan data and slots; checkout and policy stay with the host.