Skip to main content
The ComparisonTable block renders a structured comparison table — useful for sponsorship tier comparisons, feature matrices, or plan comparisons. It supports highlighted columns (e.g. the recommended tier) and header rows for grouping.

​
Props

​
heading
string
Section heading rendered as <h2>.
​
description
string
Supporting text below the heading.
​
columns
Column[]
Array of column header objects. Each has:
  • title (string) — column header label
  • highlighted (boolean) — when true, the column is visually highlighted (e.g. a recommended tier)
​
rows
Row[]
Array of row objects. Each has:
  • feature (string) — the row label in the first column
  • values (string[]) — cell values corresponding to each column
  • isHeader (boolean) — when true, the row renders as a section header across all columns
​
links
Button[]
Optional CTA buttons rendered below the table.

​
Usage in Sanity Studio

  1. Add a Comparison Table block to a page.
  2. Define Columns — mark the recommended one as highlighted.
  3. Add Rows — use isHeader: true for section dividers.
  4. Add optional Links for sign-up or contact CTAs.

​
Example

{
  _type: 'comparisonTable',
  heading: 'Sponsorship Tiers',
  columns: [
    { title: 'Bronze', highlighted: false },
    { title: 'Silver', highlighted: false },
    { title: 'Gold', highlighted: true }
  ],
  rows: [
    { feature: 'Logo on website', values: ['✓', '✓', '✓'], isHeader: false },
    { feature: 'Number of projects', values: ['1', '2', '3'], isHeader: false }
  ]
}