Pricing Section
ID: pricing-v2
A responsive grid of pricing tier cards with plan names, prices, feature lists, and CTA buttons. One tier can be highlighted to draw attention to your recommended plan.
Live preview
Fields
| Field | Type | Label | Default |
|---|---|---|---|
eyebrow | text | Eyebrow | Pricing |
headline | text | Headline | Simple, transparent pricing |
description | textarea | Description | Choose the plan that works for you. |
tiers | array | Pricing Tiers | 3 default tiers |
Tier item fields
| Field | Type | Label | Default |
|---|---|---|---|
name | text | Plan Name | Plan |
price | number | Price (0 = Free, empty = Custom) | 0 |
period | text | Period | per month |
description | textarea | Description | Plan description |
features | textarea | Features (one per line) | Feature 1, Feature 2, Feature 3 |
cta | text | Button Text | Get Started |
highlighted | boolean | Highlighted | false |
badge | text | Badge Text | -- |
Default content
Eyebrow: Pricing
Headline: Simple, transparent pricing
Tiers:
- Free ($0) — basic features, "Get Started"
- Pro ($29/mo, highlighted, "Most Popular" badge) — expanded features
- Enterprise (Custom pricing) — full feature set, "Contact Sales"
Price display logic
- price = 0 displays "Free"
- price = null / empty displays "Custom"
- Any other number displays "$XX"
When to use
Present plan options side by side. Works with 2-3 tiers; three is ideal.
Tips
- Mark your recommended plan with
highlighted: trueand add a badge like "Most Popular". - Enter features one per line. Each line becomes a checkmark item in the card.
- More than 4 tiers can overwhelm visitors.