{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "article",
  "type": "registry:ui",
  "title": "Article (MIAN)",
  "description": "A long-read layout: headline, byline, a comfortable reading column, wide figures, drop cap and pull quotes.",
  "categories": [
    "sections",
    "article",
    "blog post",
    "long read",
    "editorial"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/article.css",
      "type": "registry:file",
      "target": "mian/components/article.css",
      "content": ".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; }"
    },
    {
      "path": "mian/examples/article.html",
      "type": "registry:file",
      "target": "mian/examples/article.html",
      "content": "<!-- Article -->\n<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>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/article",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-article",
        "mn-article-head",
        "mn-article-meta · mn-article-byline",
        "mn-article-body",
        "mn-article-wide",
        "mn-dropcap · mn-pullquote"
      ],
      "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."
      ],
      "intents": [
        "blog post",
        "long read",
        "case study text",
        "editorial article",
        "essay",
        "news story"
      ]
    }
  }
}