# Integrations · MIAN

A directory of integrations or partners: mark, name, category and one line on what it does, each tile one link.

- Id: `integrations` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/integrations
- Use for: integrations directory, works with, app marketplace, connectors, partners grid.
- On a page: catalogue · prominence medium · density medium. Usually after: bento, feature-grid. Usually before: cta.
- Alternatives: logo-cloud.
- Avoid: Listing integrations that do not exist yet as if they did.

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-integrations`: The grid (auto-fills columns).
- `mn-integration`: A tile (<article>); its name is the link.
- `mn-integration-mark`: The logo or initials, in a square.
- `mn-integration-cat`: The category, small.

## Accessibility

- Each integration is an article whose name is the link; the mark is decorative (aria-hidden).
- Filter chips above the grid are toggle buttons; announce the result count.

## Examples

### Integrations

```html
<div class="mn-integrations">
  <article class="mn-integration"><span class="mn-integration-mark" aria-hidden="true">BF</span><p class="mn-integration-cat">Banking</p><h3><a href="#">Bank feeds</a></h3><p>Daily transactions from 40 Romanian and EU banks.</p></article>
  <article class="mn-integration"><span class="mn-integration-mark" aria-hidden="true">eF</span><p class="mn-integration-cat">Tax</p><h3><a href="#">e-Factura</a></h3><p>Send and receive invoices through ANAF.</p></article>
  <article class="mn-integration"><span class="mn-integration-mark" aria-hidden="true">PR</span><p class="mn-integration-cat">People</p><h3><a href="#">Payroll</a></h3><p>Salaries and contributions booked each month.</p></article>
  <article class="mn-integration"><span class="mn-integration-mark" aria-hidden="true">St</span><p class="mn-integration-cat">Payments</p><h3><a href="#">Stripe</a></h3><p>Card payouts matched to invoices.</p></article>
  <article class="mn-integration"><span class="mn-integration-mark" aria-hidden="true">Sl</span><p class="mn-integration-cat">Messaging</p><h3><a href="#">Slack</a></h3><p>Approvals and alerts in the channel you choose.</p></article>
  <article class="mn-integration"><span class="mn-integration-mark" aria-hidden="true">WH</span><p class="mn-integration-cat">Developers</p><h3><a href="#">Webhooks</a></h3><p>Every event, signed, to your endpoint.</p></article>
</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/integrations/source