{ "$schema": "https://mian.ro/schema/v2/registry.json", "schemaVersion": "2.0.0", "generatedAt": "2026-10-02T13:14:06.957Z", "id": "comparison", "name": "Comparison table", "category": "Sections", "description": "Plans or products side by side: grouped feature rows, included and not-included marks, a highlighted column and a sticky header.", "tags": [ "comparison table", "compare plans", "feature comparison", "pricing table", "plan matrix", "saas", "versus", "website" ], "requiresJs": false, "license": "LicenseRef-MIAN-1.0", "composition": { "role": "decision", "intents": [ "compare plans", "feature comparison table", "plan matrix", "versus competitors", "which plan" ], "prominence": "medium", "density": "high", "worksAfter": [ "pricing" ], "worksBefore": [ "faq", "cta" ], "alternatives": [ "pricing", "table" ], "avoid": "Comparing against named competitors without facts you can back up." }, "url": "https://mian.ro/components/comparison", "markdownUrl": "https://mian.ro/ai/components/comparison.md", "classes": [ { "name": "mn-compare", "description": "The table (inside mn-table-wrap). Header row sticks while scrolling." }, { "name": "mn-compare-group", "description": "A row that names a group of features (a )." }, { "name": "mn-compare-featured", "description": "On the or cells of the plan to highlight." }, { "name": "mn-compare-yes · mn-compare-no", "description": "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": [ { "title": "Compare plans", "description": null, "html": "
\n \n \n \n \n \n \n \n \n \n \n \n
Plan comparison
FeatureStarter€0Team€12 / seatBusiness€29 / seat
Books
Entities15Unlimited
Bank feedsIncludedIncludedIncluded
Multi-currencyNot includedIncludedIncluded
Control
Approval flowsNot includedIncludedIncluded
Audit logNot included90 daysUnlimited
SSONot includedNot includedIncluded
" } ], "css": ".mn-compare { min-width: 36rem; }\n.mn-compare thead th { position: sticky; top: 0; z-index: 1; background: var(--mn-surface); vertical-align: bottom; font: var(--mn-heading-weight) 1rem/1.3 var(--mn-font-heading); }\n.mn-compare thead th small { display: block; margin-top: .15rem; color: inherit; font: 400 var(--mn-text-sm) var(--mn-font); font-variant-numeric: tabular-nums; }\n.mn-compare tbody th[scope=\"row\"] { font-weight: 400; color: var(--mn-fg); }\n.mn-compare th[scope=\"row\"], .mn-compare thead th:first-child { position: sticky; left: 0; background: var(--mn-surface); }\n.mn-compare td { text-align: center; font-variant-numeric: tabular-nums; }\n.mn-compare thead th:not(:first-child) { text-align: center; }\n.mn-compare .mn-compare-featured { background: color-mix(in oklab, var(--mn-primary) 7%, var(--mn-surface)); }\n.mn-compare-group th { padding-top: 1.25rem; background: none; color: var(--mn-muted); font: 600 .75rem/1 var(--mn-font); letter-spacing: .06em; text-transform: uppercase; text-align: start; }\n.mn-compare-yes { display: inline-grid; place-items: center; color: var(--mn-primary-text); }\n.mn-compare-yes svg { width: 1.1rem; height: 1.1rem; }\n.mn-compare-no { display: inline-block; width: .8rem; height: 2px; vertical-align: middle; background: var(--mn-input); }", "js": null, "install": { "css": "https://mian.ro/dist/mian.css", "js": null, "registryItem": "https://mian.ro/r/comparison.json" } }