{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "feature-grid",
  "name": "Feature grid",
  "category": "Sections",
  "description": "Features as a ruled editorial grid or with icons, plus a check list for plans and specs.",
  "tags": [
    "features",
    "feature grid",
    "benefits",
    "services",
    "why us",
    "check list",
    "bullet list",
    "website"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "explanation",
    "intents": [
      "features list",
      "services list",
      "what we do",
      "capabilities",
      "benefits",
      "plan features checklist"
    ],
    "prominence": "medium",
    "density": "medium",
    "worksAfter": [
      "hero",
      "logo-cloud",
      "bento"
    ],
    "worksBefore": [
      "testimonial",
      "pricing",
      "cta",
      "process"
    ],
    "alternatives": [
      "bento",
      "process",
      "faq"
    ],
    "avoid": "Three identical icon cards with adjectives. Use the ruled variant with specific claims, and do not follow another grid with it."
  },
  "url": "https://mian.ro/components/feature-grid",
  "markdownUrl": "https://mian.ro/ai/components/feature-grid.md",
  "classes": [
    {
      "name": "mn-features",
      "description": "The grid (a <ul>): 1, 2, then mn-features-3 or mn-features-4 columns as the section widens."
    },
    {
      "name": "mn-features-ruled",
      "description": "A hairline above each feature instead of boxes: calmer than a wall of cards."
    },
    {
      "name": "mn-feature",
      "description": "One feature: optional mn-feature-icon, mn-feature-title (<h3>) and a paragraph."
    },
    {
      "name": "mn-checklist",
      "description": "A list with check marks. <li class=\"mn-off\"> marks something not included."
    }
  ],
  "accessibility": [
    "Feature titles are headings (<h3> under the section’s <h2>).",
    "Icons are decorative (aria-hidden): the title carries the meaning.",
    "mn-checklist marks are CSS: for “not included” items add visually hidden text such as “Not included:”.",
    "Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview."
  ],
  "examples": [
    {
      "title": "Ruled features",
      "description": null,
      "html": "<section class=\"mn-section mn-section-sm\">\n  <div class=\"mn-container\">\n    <ul class=\"mn-features mn-features-3 mn-features-ruled\">\n      <li class=\"mn-feature\"><h3 class=\"mn-feature-title\">Rules that learn</h3><p>Approve a match once and Ledger writes the rule. Most teams stop touching 80% of transactions within a month.</p></li>\n      <li class=\"mn-feature\"><h3 class=\"mn-feature-title\">Every currency, one ledger</h3><p>Rates are locked at the transaction date and revaluations post automatically at month-end.</p></li>\n      <li class=\"mn-feature\"><h3 class=\"mn-feature-title\">An audit trail that reads</h3><p>Each entry links to the bank line, the invoice and the person who approved it.</p></li>\n    </ul>\n  </div>\n</section>"
    },
    {
      "title": "With icons and a check list",
      "description": null,
      "html": "<section class=\"mn-section mn-section-sm\">\n  <div class=\"mn-container mn-split mn-split-top\">\n    <ul class=\"mn-features\">\n      <li class=\"mn-feature\"><span class=\"mn-feature-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M13 2 4 14h7l-1 8 9-12h-7Z\"/></svg></span><h3 class=\"mn-feature-title\">Overnight matching</h3><p>Feeds arrive at 02:00 and are matched before 06:00.</p></li>\n      <li class=\"mn-feature\"><span class=\"mn-feature-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\"/><path d=\"M8 11V7a4 4 0 0 1 8 0v4\"/></svg></span><h3 class=\"mn-feature-title\">Read-only bank access</h3><p>Ledger can see balances; it can never move money.</p></li>\n    </ul>\n    <ul class=\"mn-checklist\">\n      <li>Unlimited bank and card connections</li>\n      <li>Multi-entity consolidation</li>\n      <li>Exports to Xero, NetSuite and DATEV</li>\n      <li class=\"mn-off\"><span class=\"mn-sr-only\">Not included: </span>On-premise hosting</li>\n    </ul>\n  </div>\n</section>"
    }
  ],
  "css": ".mn-features { display: grid; gap: clamp(2rem, 4cqi, 3rem) clamp(1.5rem, 4cqi, 3rem); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }\n@container mn (min-width: 40rem) { .mn-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n@container mn (min-width: 62rem) { .mn-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }\n.mn-feature { display: grid; gap: .55rem; align-content: start; min-width: 0; }\n.mn-feature > * { margin: 0; }\n.mn-features-ruled .mn-feature { padding-top: 1.25rem; border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-feature-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .45rem; border-radius: var(--mn-radius-field); background: var(--mn-surface-2); color: var(--mn-fg); }\n.mn-feature-icon svg { width: 1.2rem; height: 1.2rem; }\n.mn-feature-title { font: var(--mn-heading-weight) 1.0625rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); }\n.mn-feature p { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; text-wrap: pretty; }\n.mn-checklist { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }\n.mn-checklist > li { position: relative; padding-inline-start: 1.65rem; line-height: 1.5; }\n.mn-checklist > li::before {\n  content: \"\"; position: absolute; left: 0; top: .18em; width: 1.1em; height: 1.1em; background: var(--mn-primary-text);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\") center / contain no-repeat;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n.mn-checklist > li.mn-off { color: var(--mn-muted); }\n.mn-checklist > li.mn-off::before { background: var(--mn-input); -webkit-mask-image: linear-gradient(transparent 45%, #000 45% 58%, transparent 58%); mask-image: linear-gradient(transparent 45%, #000 45% 58%, transparent 58%); -webkit-mask-size: 70% 100%; mask-size: 70% 100%; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/feature-grid.json"
  }
}