{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "article",
  "name": "Article",
  "category": "Sections",
  "description": "A long-read layout: headline, byline, a comfortable reading column, wide figures, drop cap and pull quotes.",
  "tags": [
    "article",
    "blog post",
    "long read",
    "editorial",
    "reading",
    "byline",
    "drop cap",
    "pull quote",
    "magazine",
    "journal"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "content",
    "intents": [
      "blog post",
      "long read",
      "case study text",
      "editorial article",
      "essay",
      "news story"
    ],
    "prominence": "high",
    "density": "medium",
    "worksAfter": [],
    "worksBefore": [
      "story-card"
    ],
    "alternatives": [
      "docs-layout"
    ],
    "avoid": "Lines wider than about 75 characters; ads inside the text."
  },
  "url": "https://mian.ro/components/article",
  "markdownUrl": "https://mian.ro/ai/components/article.md",
  "classes": [
    {
      "name": "mn-article",
      "description": "The <article>, a container for its own layout."
    },
    {
      "name": "mn-article-head",
      "description": "Headline block: eyebrow, mn-display or mn-title, intro, meta."
    },
    {
      "name": "mn-article-meta · mn-article-byline",
      "description": "Date, reading time and the author with avatar."
    },
    {
      "name": "mn-article-body",
      "description": "The reading column (42rem). Combine with mn-prose."
    },
    {
      "name": "mn-article-wide",
      "description": "A figure that breaks out wider than the text."
    },
    {
      "name": "mn-dropcap · mn-pullquote",
      "description": "Drop cap for the first paragraph; a large pull quote."
    }
  ],
  "accessibility": [
    "Use <article> with one heading at its top; put the date in <time datetime=\"…\">.",
    "Keep lines between 60 and 75 characters: mn-article-body does this at 1.125rem.",
    "A pull quote repeats text from the article, so mark it aria-hidden=\"true\" to avoid reading it twice."
  ],
  "examples": [
    {
      "title": "Article",
      "description": null,
      "html": "<article class=\"mn-article mn-section mn-section-sm\"><div class=\"mn-container\">\n  <header class=\"mn-article-head\"><p class=\"mn-eyebrow\">Essay · Craft</p><h1 class=\"mn-title\">What a noodle maker knows about interfaces</h1>\n    <div class=\"mn-article-byline\"><span class=\"mn-avatar mn-avatar-sm\">IS</span><span><strong>Ilinca Sava</strong><small><time datetime=\"2026-09-21\">21 September 2026</time> · 9 min read</small></span></div></header>\n  <div class=\"mn-article-body mn-prose\" style=\"margin-top:2rem\">\n    <p class=\"mn-dropcap\">A bowl of lamian starts as one lump of dough. Stretched, folded and stretched again, it doubles with every pull, two strands, four, eight, until there are hundreds.</p>\n    <figure class=\"mn-article-wide\"><div class=\"mn-media\" style=\"--ratio:21/9\"><svg viewBox=\"0 0 600 360\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" aria-label=\"Map: a 10.4 km loop\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"600\" height=\"360\" fill=\"var(--mn-surface-2)\"/>\n<g stroke=\"color-mix(in srgb, var(--mn-fg) 10%, transparent)\" stroke-width=\"10\">\n  <path d=\"M0 80h600M0 190h600M0 300h600M90 0v360M230 0v360M380 0v360M520 0v360\"/>\n</g>\n<path d=\"M300 360c40-80 60-110 150-120\" stroke=\"color-mix(in srgb, var(--mn-info) 45%, transparent)\" stroke-width=\"22\" fill=\"none\" stroke-linecap=\"round\"/>\n<path d=\"M120 292c-30-60-20-140 40-176s150-40 206-10 120 70 112 132-70 84-150 70-116-8-150 14-44-10-58-30\" fill=\"none\" stroke=\"var(--mn-primary)\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<circle cx=\"120\" cy=\"292\" r=\"10\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-primary)\" stroke-width=\"5\"/>\n<circle cx=\"478\" cy=\"246\" r=\"7\" fill=\"var(--mn-accent)\"/></svg></div><figcaption class=\"mn-caption\">Fig. 1: The path of a single strand through eight folds.</figcaption></figure>\n    <p>The dough never changes. The hands do.</p>\n    <blockquote class=\"mn-pullquote\" aria-hidden=\"true\">The dough never changes. The hands do.</blockquote>\n  </div>\n</div></article>"
    }
  ],
  "css": ".mn-article { container: mn / inline-size; }\n.mn-article-head { display: grid; gap: 1.25rem; max-width: 46rem; margin-inline: auto; }\n.mn-article-head > * { margin: 0; }\n.mn-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--mn-muted); font-size: .875rem; }\n.mn-article-byline { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; }\n.mn-article-byline span { display: grid; line-height: 1.35; }\n.mn-article-byline small { color: var(--mn-muted); font-size: .8125rem; }\n.mn-article-body { max-width: 42rem; margin-inline: auto; font-size: 1.125rem; line-height: 1.75; }\n.mn-article-body > figure { margin-block: 2.25rem; }\n.mn-article-wide { --_w: min(100cqi - 2 * var(--mn-gutter), 62rem); width: var(--_w); margin-inline: calc((var(--_w) - 100%) / -2); }\n.mn-dropcap::first-letter { float: left; margin: .08em .12em 0 0; font: var(--mn-heading-weight) 3.6em/.8 var(--mn-font-heading); color: var(--mn-fg); }\n.mn-pullquote { margin: 2.5rem 0; padding: 0; border: 0; font: var(--mn-heading-weight) clamp(1.4rem, 1.1rem + 1.4cqi, 2rem)/1.3 var(--mn-font-heading); letter-spacing: -.02em; color: var(--mn-fg); font-style: normal; text-wrap: balance; }\n.mn-article-body .mn-pullquote { border: 0; padding: 0; color: var(--mn-fg); font-style: normal; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/article.json"
  }
}