How do I add the Pricing block to a Hugo site?

Add a "block: pricing" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Is the Pricing block free to use?

Yes. Every HugoBlox block is free and open-source under the MIT license — use it in personal and commercial projects, with no attribution required.

Can I customize the Pricing block?

Yes. It exposes 26 content options, and inherits the shared block settings for background, spacing, and colors. You can also describe the changes you want to Hugo Chat AI and it will edit the config for you.

Does the Pricing block work with any Hugo theme?

The block ships in the open-source HugoBlox kit. Add the kit to any Hugo site and the block becomes available in your page sections — there is no theme lock-in.

hugoblox.com/blocks/pricing

Calls to actionFree · MITPreact · interactive

Pricing block

Pricing tiers with a monthly/yearly toggle, feature checklists, a highlighted plan, and per-tier CTAs.

Customize with AI View source

Add it to any Hugo page's sections list — no build step.

v1.0.0Version

26Options

MITLicense

Quick start

Add the Pricing block

Drop this into your page's front matter, under the sections list. Edit the values, and HugoBlox renders the block — no build step.

Add to your page's sections

- block: pricing
  content:
    title: Simple, transparent pricing
    subtitle: Start free. Upgrade when you're ready. No credit card required.
    billing_toggle:
      enabled: true
      monthly_label: Monthly
      yearly_label: Yearly
      yearly_discount: Save 20%
    tiers:
      - name: Starter
        description: Perfect for personal projects and portfolios.
        price:
          monthly: "0"
          yearly: "0"
          currency: $
        price_suffix: ""
        price_note: Free forever
        highlight: false
        cta:
          text: Get started free
          url: /signup
          icon: hero/arrow-right
          style: outline
        features:
          - text: 5 pages
            included: true
          - text: 1 GB storage
            included: true
          - text: Custom domain
            included: false
          - text: Analytics
            included: false
          - text: Priority support
            included: false
      - name: Pro
        badge: Most popular
        description: For freelancers and growing teams.
        price:
          monthly: "19"
          yearly: "15"
          currency: $
        price_suffix: /month
        price_note: Billed annually
        highlight: true
        cta:
          text: Start free trial
          url: /signup/pro
          icon: hero/arrow-right
          style: primary
        features:
          - text: Unlimited pages
            included: true
          - text: 10 GB storage
            included: true
          - text: Custom domain
            included: true
          - text: Analytics
            included: true
          - text: Priority support
            included: false
      - name: Business
        description: Scale with confidence and dedicated support.
        price:
          monthly: "49"
          yearly: "39"
          currency: $
        price_suffix: /month
        price_note: Billed annually
        highlight: false
        cta:
          text: Start free trial
          url: /signup/business
          icon: hero/arrow-right
          style: outline
        features:
          - text: Unlimited pages
            included: true
          - text: 100 GB storage
            included: true
          - text: Custom domain
            included: true
          - text: Analytics
            included: true
          - text: Priority support
            included: true

Reference

Configuration

Every option the Pricing block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`title`	`string`	—	Section heading (supports Markdown bold/italic)
`subtitle`	`string`	—	Supporting sentence below the title — context or reassurance
`billing_toggle`	`object`	—	Optional monthly/yearly billing toggle. Only shown when tiers have different monthly and yearly prices.
`billing_toggle.enabled`	`boolean`	false	Show the monthly/yearly billing toggle. Set to true when tiers have both monthly and yearly prices.
`billing_toggle.monthly_label`	`string`	Monthly	Label for monthly billing option
`billing_toggle.yearly_label`	`string`	Yearly	Label for yearly billing option
`billing_toggle.yearly_discount`	`string`	—	Discount badge text shown next to the yearly option. E.g. 'Save 20%', '2 months free'.
`tiers`required	`object[]`	—	Pricing tiers. Use 2–4 tiers; 3 is most common (Free/Pro/Business or Starter/Pro/Enterprise).
`tiers[].name`required	`string`	—	Tier name. Keep short: Starter, Pro, Business, Enterprise, Team.
`tiers[].badge`	`string`	—	Small floating badge above the card, e.g. 'Most popular', 'Best value'. Leave empty for no badge. Only one tier should have a badge.
`tiers[].description`	`string`	—	Short tier positioning statement — who it's for
`tiers[].price`	`object`	—	Pricing amounts. Set monthly and yearly to different values to enable the billing toggle for this tier. Set both to '0' for a free tier. Leave both empty for a 'Contact us' tier.
`tiers[].price.monthly`	`string`	—	Monthly price as a plain number string (no currency symbol). Use '0' for free, leave empty for 'Contact us' tiers. E.g. '29', '99', '0', ''.
`tiers[].price.yearly`	`string`	—	Yearly price per month as a plain number string — typically 15–25% lower than monthly. E.g. if monthly is '29', set yearly to '23'. Leave empty if no yearly option.
`tiers[].price.currency`	`string`	$	Currency symbol shown before the price. E.g. '$', '€', '£'. Leave empty for free or contact-us tiers.
`tiers[].price_suffix`	`string`	/month	Text shown after the price amount, e.g. '/month', '/user/month', '/year'. Leave empty for free or contact tiers.
`tiers[].price_note`	`string`	—	Static note under the price — shown in all billing modes. Use for tiers that don't change with the toggle (free tiers, contact-us tiers). E.g. 'Free forever', 'Custom pricing'. For paid tiers with a toggle, use price_note_monthly + price_note_yearly instead.
`tiers[].price_note_monthly`	`string`	—	Note shown only when monthly billing is selected. Overrides price_note for monthly mode. E.g. 'Billed monthly', 'Cancel anytime'.
`tiers[].price_note_yearly`	`string`	—	Note shown only when yearly billing is selected. Overrides price_note for yearly mode. E.g. 'Billed annually', 'Save $XX/year'.
`tiers[].highlight`	`boolean`	false	Visually emphasise this tier with a primary colour ring and slight scale-up. Use on your primary conversion target (usually the same tier that has the badge). Only one tier should be highlighted.
`tiers[].cta`	`object`	—	Call-to-action button for this tier
`tiers[].cta.text`required	`string`	—	Button label. Match the commitment: free tiers → 'Get started free'; paid tiers → 'Start free trial' or 'Choose plan'; enterprise → 'Contact sales'.
`tiers[].cta.url`required	`string`	—	Button destination URL. Use relative paths for internal pages or absolute URLs for external links (e.g. sign-up page).
`tiers[].cta.icon`	`string`	—	Optional icon after the button label. Supports hero/ pack. E.g. 'hero/arrow-right'.
`tiers[].cta.style`	`primary \| outline`	outline	Button visual style. Use 'primary' (filled) on the highlighted tier; 'outline' on others.
`tiers[].features`	`object[]`	—	Feature list for this tier. Each item is either a plain string (included) or an object with text, included flag, and optional note. Show 4–8 features per tier for best scannability.

Compose

Works well with

Blocks that pair naturally with Pricing on the same page.

CTA Card Features Testimonials

Frequently asked

Pricing block FAQ

Add a "block: pricing" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Ready to build with the Pricing block?

Customize with AI View source