{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "story-card",
  "type": "registry:ui",
  "title": "Story card (MIAN)",
  "description": "Articles and posts in a grid or as a lead story: image, kicker, headline, excerpt and byline, the headline is the link.",
  "categories": [
    "sections",
    "story",
    "post",
    "article card",
    "blog"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/story-card.css",
      "type": "registry:file",
      "target": "mian/components/story-card.css",
      "content": ".mn-stories { display: grid; gap: 3rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; }\n.mn-story { position: relative; display: grid; gap: .55rem; align-content: start; min-width: 0; }\n.mn-story > * { margin: 0; }\n.mn-story > .mn-media { margin-bottom: .45rem; }\n.mn-story > .mn-media > * { transition: scale 600ms var(--mn-ease); }\n.mn-story:hover > .mn-media > * { scale: 1.03; }\n.mn-story-title { font: var(--mn-heading-weight) clamp(1.2rem, 1.05rem + .5cqi, 1.45rem)/1.25 var(--mn-font-heading); letter-spacing: -.015em; color: var(--mn-fg); text-wrap: balance; }\n.mn-story-lead .mn-story-title { font-size: clamp(2rem, 1.3rem + 2.6cqi, 3.2rem); line-height: 1.08; letter-spacing: -.03em; }\n.mn-story-title a { color: inherit; text-decoration: none; }\n.mn-story-title a::after { content: \"\"; position: absolute; inset: 0; z-index: 1; }\n.mn-story-title a:focus-visible { outline: none; }\n.mn-story:has(.mn-story-title a:focus-visible) { box-shadow: var(--mn-focus); border-radius: var(--mn-radius-box); }\n.mn-story:hover .mn-story-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }\n.mn-story-excerpt { color: var(--mn-muted); font-size: .9688rem; line-height: 1.6; }\n.mn-story-meta { color: var(--mn-muted); font-size: .8125rem; }"
    },
    {
      "path": "mian/examples/story-card.html",
      "type": "registry:file",
      "target": "mian/examples/story-card.html",
      "content": "<!-- Stories -->\n<ul class=\"mn-stories\">\n  <li class=\"mn-story\"><div class=\"mn-media\" style=\"--ratio:3/2\"><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><p class=\"mn-eyebrow\">Places</p><h3 class=\"mn-story-title\"><a href=\"#\">Ten kilometres of Bucharest at 6 a.m.</a></h3><p class=\"mn-story-excerpt\">A running route through the city before the city starts.</p><p class=\"mn-story-meta\">Mia Lund · <time datetime=\"2026-09-14\">14 September</time> · 7 min</p></li>\n  <li class=\"mn-story\"><div class=\"mn-media\" style=\"--ratio:3/2\"><svg viewBox=\"0 0 600 450\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"600\" height=\"450\" fill=\"var(--mn-fg)\"/><path d=\"M0 330 300 90l300 240Z\" fill=\"var(--mn-accent)\"/><circle cx=\"300\" cy=\"300\" r=\"40\" fill=\"var(--mn-bg)\"/></svg></div><p class=\"mn-eyebrow\">Craft</p><h3 class=\"mn-story-title\"><a href=\"#\">The potter who throws the same bowl every day</a></h3><p class=\"mn-story-excerpt\">Twenty years, one shape, and never the same bowl twice.</p><p class=\"mn-story-meta\">Ana Popescu · <time datetime=\"2026-08-31\">31 August</time> · 8 min</p></li>\n</ul>"
    }
  ],
  "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/story-card",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-stories",
        "mn-story",
        "mn-story-lead"
      ],
      "accessibility": [
        "The headline link is stretched over the whole card, so each story is one link and one tab stop.",
        "Put the date in <time datetime=\"…\">.",
        "Headline levels follow the page: <h2> for the lead, <h3> in a grid under a section heading."
      ],
      "intents": [
        "blog index",
        "articles grid",
        "news list",
        "latest posts",
        "magazine front page",
        "case studies list"
      ]
    }
  }
}