Comparison

Example

A centered eyebrow and heading introduce a Comparison table that sets Convert beside a competitor, row by row.

Composition

A comparison section pairs a centered header with the Comparison table:

• Eyebrow, the short kicker above the heading that frames the head-to-head.
• Comparison table, the feature rows that set Convert beside a competitor, with the Convert column highlighted.

Usage

The comparison section makes the case for Convert by putting it beside a competitor on the features that matter.

• Highlight only the Convert column, never style a competitor column to compete with it.
• Keep rows factual, name features plainly and let the marks carry the contrast.
• Use 6-8 rows at most so the table stays scannable.
• Pair the table with a clear heading that names what's being compared.
• Place the section after the value prop, before pricing, once interest is built, ahead of the ask.

Code

Link comparison.css, then set the centered header over a .cmp table, highlight the Convert column, mark cells with ph-check / ph-x or short text.

<link rel="stylesheet" href="/_shared/components/comparison.css">

<div style="text-align:center">
  <p class="kicker">Convert vs the rest</p>
  <h2>See the difference</h2>
</div>
<table class="cmp">
  <thead>
    <tr>
      <th class="cmp__feature-h">Feature</th>
      <th class="cmp__convert">Convert</th>
      <th class="cmp__other">Competitor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cmp__feature">Server-side testing</td>
      <td class="cmp__convert"><i class="ph ph-check" aria-label="Yes"></i></td>
      <td class="cmp__other"><i class="ph ph-x" aria-label="No"></i></td>
    </tr>
  </tbody>
</table>