# Feature grid · MIAN

Features as a ruled editorial grid or with icons, plus a check list for plans and specs.

- Id: `feature-grid` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/feature-grid
- Use for: features list, services list, what we do, capabilities, benefits, plan features checklist.
- On a page: explanation · prominence medium · density medium. Usually after: hero, logo-cloud, bento. Usually before: 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.

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-features`: The grid (a <ul>): 1, 2, then mn-features-3 or mn-features-4 columns as the section widens.
- `mn-features-ruled`: A hairline above each feature instead of boxes: calmer than a wall of cards.
- `mn-feature`: One feature: optional mn-feature-icon, mn-feature-title (<h3>) and a paragraph.
- `mn-checklist`: 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

### Ruled features

```html
<section class="mn-section mn-section-sm">
  <div class="mn-container">
    <ul class="mn-features mn-features-3 mn-features-ruled">
      <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>
      <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>
      <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>
    </ul>
  </div>
</section>
```

### With icons and a check list

```html
<section class="mn-section mn-section-sm">
  <div class="mn-container mn-split mn-split-top">
    <ul class="mn-features">
      <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>
      <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>
    </ul>
    <ul class="mn-checklist">
      <li>Unlimited bank and card connections</li>
      <li>Multi-entity consolidation</li>
      <li>Exports to Xero, NetSuite and DATEV</li>
      <li class="mn-off"><span class="mn-sr-only">Not included: </span>On-premise hosting</li>
    </ul>
  </div>
</section>
```

## Source

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