Components
Comparison Table
A feature matrix — plans across the top, features down the side, with checks and crosses.
Live demo
See it in action
| StarterFreeGet started | PopularPro$29/moStart trial | Business$79/moContact sales | |
|---|---|---|---|
| Core | |||
| Projects | 3 | Unlimited | Unlimited |
| Storage | 1 GB | 50 GB | 500 GB |
| Custom domain | No | Yes | Yes |
| Support | |||
| Email support | Yes | Yes | Yes |
| Priority support | No | No | Yes |
| SSO & audit logsEnterprise security | No | No | Yes |
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section class="fw-flexbox fw-flex fw-contained fw-collapse">
<div class="comparison-table ct-574320bb fw-ct fw-ct--style-bordered fw-ct--highlight fw-ct--center">
<div class="fw-ct__scroll">
<table class="fw-ct__table">
<thead>
<tr>
<th class="fw-ct__corner" scope="col"></th>
<th class="fw-ct__col" scope="col"><span class="fw-ct__name">Starter</span><span class="fw-ct__price">Free</span><a class="fw-ct__btn" href="#">Get started</a></th>
<th class="fw-ct__col is-featured" scope="col"><span class="fw-ct__badge">Popular</span><span class="fw-ct__name">Pro</span><span class="fw-ct__price">$29/mo</span><a class="fw-ct__btn" href="#">Start trial</a></th>
</tr>
</thead>
<tbody>
<tr>
<th class="fw-ct__feature" scope="row"><span class="fw-ct__feature-label">Projects</span></th>
<td class="fw-ct__cell"><span class="fw-ct__val">3</span></td>
<td class="fw-ct__cell is-featured"><span class="fw-ct__val">Unlimited</span></td>
</tr>
<tr>
<th class="fw-ct__feature" scope="row"><span class="fw-ct__feature-label">Priority support</span></th>
<td class="fw-ct__cell"><svg class="fw-ct__cross" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg><span class="screen-reader-text">No</span></td>
<td class="fw-ct__cell is-featured"><svg class="fw-ct__check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg><span class="screen-reader-text">Yes</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>To learn more about the Comparison Table shortcode, please check out the online manual here.