Comparison table

A feature-by-feature table that puts Convert beside a competitor, the Convert column is highlighted, cells use check and cross marks.

Examples

Feature	Convert	Competitor
Server-side testing
First-party data
Unlimited projects		Add-on
Dedicated support

<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>
    <tr>
      <td class="cmp__feature">Unlimited projects</td>
      <td class="cmp__convert"><i class="ph ph-check" aria-label="Yes"></i></td>
      <td class="cmp__other">Add-on</td>
    </tr>
  </tbody>
</table>

Usage

Highlight only the Convert column (.cmp__convert), it is the single emphasized axis in the table.
Keep features factual and verifiable, every row should be defensible against the competitor's public documentation.
Use check (ph-check) and cross (ph-x) for boolean rows, and short text for nuanced ones (e.g. "Add-on").
Cap the table at roughly 6-8 rows, beyond that the comparison loses focus.

States

Static (default), the comparison table is static; it does not animate or reorder. Rows reflow only with responsive width.

Code

Link the component stylesheet, then drop in the table markup:

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

<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>