{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "process",
  "name": "Process",
  "category": "Sections",
  "description": "Numbered steps in a row, how it works, how to order, what happens next.",
  "tags": [
    "process",
    "steps",
    "how it works",
    "workflow",
    "timeline",
    "onboarding",
    "numbered"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "explanation",
    "intents": [
      "how it works",
      "our process",
      "steps",
      "onboarding steps",
      "what happens next",
      "workflow"
    ],
    "prominence": "medium",
    "density": "low",
    "worksAfter": [
      "bento",
      "feature-grid"
    ],
    "worksBefore": [
      "testimonial",
      "faq",
      "cta"
    ],
    "alternatives": [
      "steps",
      "timeline"
    ],
    "avoid": "More than five steps, or steps that are really features."
  },
  "url": "https://mian.ro/components/process",
  "markdownUrl": "https://mian.ro/ai/components/process.md",
  "classes": [
    {
      "name": "mn-process",
      "description": "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": [
    {
      "title": "How it works",
      "description": null,
      "html": "<section class=\"mn-section mn-section-sm\"><div class=\"mn-container\"><ol class=\"mn-process\">\n  <li><h3>Connect</h3><p>Banks, cards and payroll, read-only, in about ten minutes.</p></li>\n  <li><h3>Review</h3><p>Approve the first matches; Ledger writes rules from them.</p></li>\n  <li><h3>Close</h3><p>Lock the period and export the trail for your auditor.</p></li>\n</ol></div></section>"
    }
  ],
  "css": ".mn-process { display: grid; gap: 2.25rem; margin: 0; padding: 0; list-style: none; counter-reset: mn-step; }\n@container mn (min-width: 48rem) { .mn-process { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.5rem; } }\n.mn-process > li { display: grid; gap: .5rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--mn-fg); counter-increment: mn-step; }\n.mn-process > li > * { margin: 0; }\n.mn-process > li::before { content: counter(mn-step, decimal-leading-zero); font: 500 .8125rem/1 var(--mn-font-mono); color: var(--mn-muted); margin-bottom: .5rem; }\n.mn-process h3 { font: var(--mn-heading-weight) 1.0625rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; }\n.mn-process p { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/process.json"
  }
}