{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "story-card",
  "name": "Story card",
  "category": "Sections",
  "description": "Articles and posts in a grid or as a lead story: image, kicker, headline, excerpt and byline, the headline is the link.",
  "tags": [
    "story",
    "post",
    "article card",
    "blog",
    "news",
    "magazine",
    "feed",
    "teaser",
    "journal",
    "latest posts"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "catalogue",
    "intents": [
      "blog index",
      "articles grid",
      "news list",
      "latest posts",
      "magazine front page",
      "case studies list"
    ],
    "prominence": "medium",
    "density": "medium",
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "work-grid",
      "product-card"
    ],
    "avoid": "Every story the same size, make the lead story larger."
  },
  "url": "https://mian.ro/components/story-card",
  "markdownUrl": "https://mian.ro/ai/components/story-card.md",
  "classes": [
    {
      "name": "mn-stories",
      "description": "An auto-filling grid of stories (a <ul>), or use mn-cols for a fixed number of columns."
    },
    {
      "name": "mn-story",
      "description": "One story: mn-media, mn-eyebrow (kicker), mn-story-title with a link, mn-story-excerpt, mn-story-meta."
    },
    {
      "name": "mn-story-lead",
      "description": "A lead story with a much larger headline."
    }
  ],
  "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."
  ],
  "examples": [
    {
      "title": "Stories",
      "description": null,
      "html": "<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>"
    }
  ],
  "css": ".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; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/story-card.json"
  }
}