# Comparison table · MIAN

Plans or products side by side: grouped feature rows, included and not-included marks, a highlighted column and a sticky header.

- Id: `comparison` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/comparison
- Use for: compare plans, feature comparison table, plan matrix, versus competitors, which plan.
- On a page: decision · prominence medium · density high. Usually after: pricing. Usually before: faq, cta.
- Alternatives: pricing, table.
- Avoid: Comparing against named competitors without facts you can back up.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

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

## Examples

### Compare plans

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

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/comparison/source