# Process · MIAN

Numbered steps in a row, how it works, how to order, what happens next.

- Id: `process` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/process
- Use for: how it works, our process, steps, onboarding steps, what happens next, workflow.
- On a page: explanation · prominence medium · density low. Usually after: bento, feature-grid. Usually before: testimonial, faq, cta.
- Alternatives: steps, timeline.
- Avoid: More than five steps, or steps that are really features.

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-process`: An <ol> of steps: stacked, then one column per step. Numbers come from a CSS counter.

## Accessibility

- An ordered list announces the number of steps; the visible numbers are decorative.

## Examples

### How it works

```html
<section class="mn-section mn-section-sm"><div class="mn-container"><ol class="mn-process">
  <li><h3>Connect</h3><p>Banks, cards and payroll, read-only, in about ten minutes.</p></li>
  <li><h3>Review</h3><p>Approve the first matches; Ledger writes rules from them.</p></li>
  <li><h3>Close</h3><p>Lock the period and export the trail for your auditor.</p></li>
</ol></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/process/source