Comparison table
Plans or products side by side: grouped feature rows, included and not-included marks, a highlighted column and a sticky header.
Compare plans
| Feature | Starter€0 | Team€12 / seat | Business€29 / seat |
|---|---|---|---|
| Books | |||
| Entities | 1 | 5 | Unlimited |
| Bank feeds | Included | Included | Included |
| Multi-currency | Not included | Included | Included |
| Control | |||
| Approval flows | Not included | Included | Included |
| Audit log | Not included | 90 days | Unlimited |
| SSO | Not included | Not included | Included |
<div class="mn-table-wrap"><table class="mn-table mn-compare">
<caption class="mn-sr-only">Plan comparison</caption>
<thead><tr><th scope="col">Feature</th><th scope="col">Starter<small>€0</small></th><th scope="col" class="mn-compare-featured">Team<small>€12 / seat</small></th><th scope="col">Business<small>€29 / seat</small></th></tr></thead>
<tbody>
<tr class="mn-compare-group"><th scope="colgroup" colspan="4">Books</th></tr>
<tr><th scope="row">Entities</th><td>1</td><td class="mn-compare-featured">5</td><td>Unlimited</td></tr>
<tr><th scope="row">Bank feeds</th><td><span class="mn-compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span class="mn-sr-only">Included</span></span></td><td class="mn-compare-featured"><span class="mn-compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span class="mn-sr-only">Included</span></span></td><td><span class="mn-compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span class="mn-sr-only">Included</span></span></td></tr>
<tr><th scope="row">Multi-currency</th><td><span class="mn-compare-no"><span class="mn-sr-only">Not included</span></span></td><td class="mn-compare-featured"><span class="mn-compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span class="mn-sr-only">Included</span></span></td><td><span class="mn-compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span class="mn-sr-only">Included</span></span></td></tr>
<tr class="mn-compare-group"><th scope="colgroup" colspan="4">Control</th></tr>
<tr><th scope="row">Approval flows</th><td><span class="mn-compare-no"><span class="mn-sr-only">Not included</span></span></td><td class="mn-compare-featured"><span class="mn-compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span class="mn-sr-only">Included</span></span></td><td><span class="mn-compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span class="mn-sr-only">Included</span></span></td></tr>
<tr><th scope="row">Audit log</th><td><span class="mn-compare-no"><span class="mn-sr-only">Not included</span></span></td><td class="mn-compare-featured">90 days</td><td>Unlimited</td></tr>
<tr><th scope="row">SSO</th><td><span class="mn-compare-no"><span class="mn-sr-only">Not included</span></span></td><td class="mn-compare-featured"><span class="mn-compare-no"><span class="mn-sr-only">Not included</span></span></td><td><span class="mn-compare-yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span class="mn-sr-only">Included</span></span></td></tr>
</tbody></table></div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/comparison.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-compare | The table (inside mn-table-wrap). Header row sticks while scrolling. |
| mn-compare-group | A row that names a group of features (a <th colspan>). |
| mn-compare-featured | On the <col> or cells of the plan to highlight. |
| mn-compare-yes · mn-compare-no | Included / not included marks, with text for screen readers. |
Accessibility
- It is a real table: plans are column headers, features are row headers, so each cell is announced as “Team, Audit log, Included”.
- Marks carry visually hidden text; never rely on the tick alone.
- On narrow screens the table scrolls inside mn-table-wrap with the feature column kept visible.