Pricing Card

Present a package price and features.

How to use

Enter package name, price, currency and period label.
Edit features and the button URL.
Enable the popular badge on the highlighted package.

Things to check

This is promotional content; entering a price does not create a payment integration.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

Find a property

25 / 25

accentColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

backgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

borderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

borderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

buttonBackgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

buttonLink

Popup content or button target; enter the text/address in the relevant editor and check presentation mode.

buttonText

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

buttonTextColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

buttonUrl

An image, media or link source. Use the media picker or an accessible URL and verify it loads in the presentation.

string

currency

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

features

Feature rows displayed on the card; use short, comparable statements.

string[]

isPopular

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

period

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

planName

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

popular

Enables or configures the associated visual emphasis; check legibility on the background.

premiumBadgeColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

premiumText

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

price

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

priceColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

shadow

Enables or configures the associated visual emphasis; check legibility on the background.

boolean

showButton

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

showPremiumBadge

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

textColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

title

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

titleColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string