Section reference › Pricing & commerce

Pricing plans `"type": "pricing"`

Side-by-side plan cards with price, feature list and a button, plus an optional monthly/yearly switch. Use it for subscriptions, memberships, packages or room rates.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "pricing",
  "eyebrow": "Pricing",
  "title": "Simple plans that grow with you",
  "text": "Start free for 14 days. No credit card needed.",
  "toggle": true,
  "saveLabel": "Save 20%",
  "currency": "$",
  "plans": [
    {
      "name": "Starter",
      "text": "For freelancers and small teams.",
      "price": "19",
      "yearly": "15",
      "features": [
        "Up to 3 users",
        "10 projects",
        "Email support"
      ],
      "excluded": [
        "Custom domain",
        "Advanced reports"
      ],
      "button": {
        "label": "Start free trial",
        "href": "contact.html"
      }
    },
    {
      "name": "Growth",
      "text": "For growing teams that need more.",
      "price": "49",
      "yearly": "39",
      "featured": true,
      "badge": "Most popular",
      "features": [
        "Up to 15 users",
        "Unlimited projects",
        "Custom domain",
        "Priority support"
      ],
      "excluded": [
        "Advanced reports"
      ],
      "button": {
        "label": "Start free trial",
        "href": "contact.html"
      }
    },
    {
      "name": "Business",
      "text": "For companies with advanced needs.",
      "price": "99",
      "yearly": "79",
      "features": [
        "Unlimited users",
        "Unlimited projects",
        "Custom domain",
        "Advanced reports",
        "Dedicated manager"
      ],
      "button": {
        "label": "Talk to sales",
        "href": "contact.html"
      }
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string (HTML allowed)	—	Section heading. You can use <em> or <br> inside it.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: `center \| start`
`plans`	array	—	The plan cards. See the "plans" fields.
`currency`	string	`the demo's currency, else "$"`	Symbol shown before every price. Defaults to "currency" in demo.json; set it here to override, or "" for no symbol.
`period`	string	`/mo`	Text after the price for every plan, e.g. "/night" or "/session". Use "" for one-off prices. A plan's own "period" wins.
`toggle`	boolean	`false`	Show a Monthly/Yearly switch. When switched, each price changes to the plan's "yearly" value. Values: `true \| false`
`monthlyLabel`	string	`Monthly`	Left label of the switch.
`yearlyLabel`	string	`Yearly`	Right label of the switch.
`saveLabel`	string	—	Small highlight after the yearly label, e.g. "Save 20%".
`columns`	number	`number of plans, max 3`	Cards per row on large screens. Values: `1 \| 2 \| 3 \| 4`
`buttons`	array	—	Buttons shown centred below the plans (same shape as other buttons: label, href, style, icon).

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `plans`#

Option	Type	Default	Description
`name`	string	—	Plan name.
`text`	string	—	One-line description under the name.
`price`	string \| number	—	Price without the currency symbol, e.g. "29".
`yearly`	string \| number	—	Price shown when the switch is on Yearly. Usually the monthly price when billed yearly (the period text does not change). Defaults to "price".
`period`	string	—	Overrides the section "period" for this plan, e.g. "/user/mo".
`features`	array of strings	—	Included features (check mark).
`excluded`	array of strings	—	Features not included (greyed out with a cross), listed after the included ones.
`button`	object	—	Button settings (label, href, style, icon). Label defaults to "Get started"; style defaults to "primary" on the featured plan and "outline" on others.
`featured`	boolean	—	true highlights this card.
`badge`	string	—	Small label on top of the card, e.g. "Most popular".

Tips#

Use 3 plans for the classic layout. For 4 plans set "columns": 4.
Mark only one plan as "featured".
The toggle only changes the number, not the period text, so "yearly" should usually be the per-month price when paid yearly (e.g. price "49", yearly "39").
Write prices without the currency symbol; it comes from "currency".

Editing it in the HTML files#

Each plan is a .plan card. The price is the span inside .plan-price: when you change it, also change its data-monthly and data-yearly attributes, because the switch copies those values into the span. The featured card has the extra class is-featured.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/home-2.html (source src/demos/creative-agency/pages/home-2.json)
Real Estate: template/real-estate/pricing.html (source src/demos/real-estate/pages/pricing.json)
Corporate: template/corporate/engagements.html (source src/demos/corporate/pages/engagements.json)
Finance: template/finance/index.html (source src/demos/finance/pages/index.json)
Law Firm: template/law-firm/fees.html (source src/demos/law-firm/pages/fees.json)
SaaS Product: template/saas/index.html (source src/demos/saas/pages/index.json)
Mobile App: template/mobile-app/index.html (source src/demos/mobile-app/pages/index.json)
Tech Conference: template/conference/index.html (source src/demos/conference/pages/index.json)
Online Academy: template/education/index.html (source src/demos/education/pages/index.json)
Restaurant: template/restaurant/gift-cards.html (source src/demos/restaurant/pages/gift-cards.json)
Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
Hotel & Resort: template/hotel/index.html (source src/demos/hotel/pages/index.json)
Wedding: template/wedding/index.html (source src/demos/wedding/pages/index.json)
Gym & Fitness: template/gym/index.html (source src/demos/gym/pages/index.json)
Yoga Studio: template/yoga/index.html (source src/demos/yoga/pages/index.json)
Day Spa & Salon: template/spa/index.html (source src/demos/spa/pages/index.json)
Medical Clinic: template/medical/index.html (source src/demos/medical/pages/index.json)
Dental Clinic: template/dental/index.html (source src/demos/dental/pages/index.json)
Pet Care: template/pet-care/boarding.html (source src/demos/pet-care/pages/boarding.json)
Construction: template/construction/pricing.html (source src/demos/construction/pages/pricing.json)
Car Dealer: template/car-dealer/finance.html (source src/demos/car-dealer/pages/finance.json)
Travel Agency: template/travel/pricing.html (source src/demos/travel/pages/pricing.json)
Photographer: template/photography/index.html (source src/demos/photography/pages/index.json)
Interior Design: template/interior-design/index.html (source src/demos/interior-design/pages/index.json)
Portfolio: template/portfolio/home-2.html (source src/demos/portfolio/pages/home-2.json)
Music Festival: template/music-festival/index.html (source src/demos/music-festival/pages/index.json)
Charity: template/charity/donate.html (source src/demos/charity/pages/donate.json)

Pricing plans "type": "pricing"