How do I add the Comparison Table block to a Hugo site?

Add a "block: comparison-table" 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 Comparison Table 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 Comparison Table block?

Yes. It exposes 18 content options, plus 1 design 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 Comparison Table 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/comparison-table

FeaturesFree · MITPreact · interactive

Comparison Table block

Win the comparison: a side-by-side feature matrix against competitors with your column highlighted and a CTA.

Customize with AI View source

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

v1.0.0Version

18Options

MITLicense

Quick start

Add the Comparison Table 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: comparison-table
  content:
    subtitle: How we compare
    title: Why teams switch to Hugo Blox
    text: We picked the categories that matter to teams shipping today.
    competitors:
      - name: Hugo Blox
        tagline: Open-source page builder
        highlight: true
        badge: Recommended
      - name: WordPress
        tagline: Self-hosted CMS
      - name: Squarespace
        tagline: Hosted website builder
      - name: Webflow
        tagline: Visual web builder
    rows:
      - feature: Performance
        category: true
      - feature: Build time
        note: 100 pages, cold cache
        values:
          - <3s
          - 60s+
          - —
          - 20s+
      - feature: Lighthouse score
        values:
          - "100"
          - "70"
          - "90"
          - "95"
      - feature: Cost & ownership
        category: true
      - feature: Free tier
        values:
          - true
          - true
          - false
          - false
      - feature: Self-hosted
        values:
          - true
          - true
          - false
          - false
      - feature: Source code access
        values:
          - true
          - true
          - false
          - false
        highlight: true
      - feature: Monthly cost
        values:
          - Free
          - $5+ hosting
          - $23/mo
          - $29/mo
      - feature: Developer experience
        category: true
      - feature: Git-based content
        values:
          - true
          - false
          - false
          - false
      - feature: AI site builder
        values:
          - true
          - false
          - false
          - partial
      - feature: Custom code
        values:
          - true
          - true
          - limited
          - limited
    cta:
      text: Start free
      url: https://hugoblox.com/templates/
      icon: hero/arrow-right

Reference

Configuration

Every option the Comparison Table block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`subtitle`	`string`	—	Optional eyebrow label rendered in small caps above the title. E.g. 'How we compare', 'Why us'.
`title`	`string`	—	Section heading. Frames the comparison. E.g. 'How we compare', 'Why teams switch to {product}'.
`text`	`string`	—	Optional subtitle beneath the title — sets up the comparison.
`competitors`required	`object[]`	—	The columns of the table — one per product being compared. Mark exactly one as `highlight: true` to show it as your product. 3–4 competitors works best; more compresses readability on desktop.
`competitors[].name`required	`string`	—	Product or company name. Shown as the column header.
`competitors[].tagline`	`string`	—	Optional one-line description shown under the competitor name. E.g. 'Self-hosted CMS', 'Visual web builder'.
`competitors[].highlight`	`boolean`	false	Set to true on your product. Highlights the column, applies brand colour, and surfaces the CTA. Exactly one competitor should have this set.
`competitors[].badge`	`string`	—	Optional pill badge above the competitor name. E.g. 'Recommended', 'Best value', 'Most popular'.
`rows`required	`object[]`	—	Feature rows. Each row has a feature label and a `values` array — one entry per competitor in the same order as the `competitors` array. Use 6–14 rows for best results. Group with category rows (`category: true`) for tables of 10+ features.
`rows[].feature`required	`string`	—	Feature name shown in the leftmost column.
`rows[].note`	`string`	—	Optional clarifying note shown under the feature label in smaller text.
`rows[].values`	`object[]`	—	Cell values, one per competitor in order. Accepts: boolean (true→green check, false→gray cross), string ('yes'/'no'/'partial'/'—' map to icons; any other string renders as text e.g. '$29/mo', '<3s', 'Unlimited'), or object {value, note, emphasis} for finer control.
`rows[].category`	`boolean`	false	Set to true to render this row as a section header (uppercase, no values). Use to group features into sections like 'Performance', 'Pricing', 'Support'.
`rows[].highlight`	`boolean`	false	Tints this row's background — use to emphasise key differentiators (1–2 rows max).
`cta`	`object`	—	Call-to-action button rendered in the highlighted column footer.
`cta.text`required	`string`	—	CTA label
`cta.url`required	`string`	—	Destination URL (relative or absolute)
`cta.icon`	`string`	—	Optional icon shown after the label. E.g. 'arrow-right', 'hero/arrow-right'.

Design options

Properties set under the block's design key — shared background, spacing, and color settings apply on top.

Property	Type	Default	Description
`row_striping`	`boolean`	false	Apply subtle zebra-striping to data rows for readability. Recommended for tables with 10+ rows; unnecessary for shorter tables. Category headers and explicitly highlighted rows are excluded from striping.

Compose

Works well with

Blocks that pair naturally with Comparison Table on the same page.

CTA Card Features Pricing

Frequently asked

Comparison Table block FAQ

Add a "block: comparison-table" 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 Comparison Table block?

Customize with AI View source