Component pattern · updated 3 Sept 2026
Feature comparison table
A feature comparison table sets a product against alternatives in a grid of checkable rows, one column per option, one row per property, with the product's own column visually promoted. It is a pricing table without prices, and it is only as honest as its rows are checkable.
Think of it as
A spec sheet taped to a shop shelf, three phones side by side. Useful exactly to the degree the numbers on it are real and comparable.
Worked example
Our DESIGN.md versus design tokens page is this pattern: nine rows, four columns, our column tinted, and every claim in our column linked to the live file it describes, including the token fingerprint printed from the real theme. A row that could not be checked was not written.
Why it matters
Comparison tables are where marketing most often crosses into assertion. The design question (how to promote one column without breaking the one-primary rule) is minor next to the editorial one: whether each cell is a property or an opinion. Answer-engines quote these tables, so a wrong cell travels.
How it fails
Checkmarks against competitors that are simply left blank rather than researched. A promoted column with its own colour outside the token set. Icons as the only cell content, unreadable to a screen reader and to an agent.
What to measure open the decoder →
- Whether each cell contains text, not only an icon
- Whether the promoted column introduces an off-token colour
- Horizontal scroll behaviour at 390px: the table should scroll inside its own container, never the page
- Muted-text contrast in the "no" cells
Where you meet it
- Product marketing sites
- Review and affiliate sites
- Procurement pages
On this site
Two live examples on this site, DESIGN.md vs tokens and submission costs, both with every cell sourced or marked as unknown.
Showcase collections that exhibit it
Build it
Next rung
A comparison table promises checkability. The questions it raises but cannot fit are what the FAQ accordion below it is for.