{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "hero",
  "name": "Hero",
  "category": "Sections",
  "description": "The opening section of a page: a display headline, an intro, actions and optional media, stacked, split or centred.",
  "tags": [
    "hero",
    "landing",
    "header section",
    "above the fold",
    "headline",
    "intro",
    "splash",
    "jumbotron",
    "website"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "opening",
    "intents": [
      "landing page opening",
      "above the fold",
      "headline and call to action",
      "product introduction",
      "homepage top",
      "agency statement",
      "split hero with image"
    ],
    "prominence": "high",
    "density": "low",
    "worksAfter": [
      "site-header"
    ],
    "worksBefore": [
      "logo-cloud",
      "figures",
      "bento",
      "feature-grid",
      "media"
    ],
    "alternatives": [
      "article",
      "figures",
      "slides"
    ],
    "avoid": "Do not default to badge + giant headline + paragraph + two buttons. A statement headline alone, a split with the real product, or a figure can open better. One primary action only."
  },
  "url": "https://mian.ro/components/hero",
  "markdownUrl": "https://mian.ro/ai/components/hero.md",
  "classes": [
    {
      "name": "mn-hero",
      "description": "Use with mn-section. Stacked by default: copy, then media."
    },
    {
      "name": "mn-hero-split",
      "description": "Copy and media side by side on wide sections."
    },
    {
      "name": "mn-hero-center",
      "description": "Centred copy."
    },
    {
      "name": "mn-hero-in",
      "description": "Inner grid; put it on the mn-container."
    },
    {
      "name": "mn-hero-copy",
      "description": "An <h1 class=\"mn-display\">, mn-intro, mn-hero-actions, mn-hero-note. Start with the headline: no badge above it; put news in the note or a banner."
    },
    {
      "name": "mn-poster",
      "description": "A headline sized to the width of its container, for one very large statement or a wordmark."
    },
    {
      "name": "mn-hero-media",
      "description": "Screenshot: product UI, illustration or photo. mn-hero-media-fade fades a tall screenshot out at the bottom."
    }
  ],
  "accessibility": [
    "The hero headline is usually the page’s only <h1>.",
    "Primary and secondary actions should be links (<a class=\"mn-btn\">) when they navigate.",
    "Media that carries meaning needs alt text; decorative art is aria-hidden.",
    "Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview."
  ],
  "examples": [
    {
      "title": "Split hero",
      "description": null,
      "html": "<section class=\"mn-section mn-hero mn-hero-split\">\n  <div class=\"mn-container mn-hero-in\">\n    <div class=\"mn-hero-copy\">\n      <h1 class=\"mn-display\">Hand-pulled noodles, pulled to order.</h1>\n      <p class=\"mn-intro\">Twelve seats at the counter, one broth simmered for eighteen hours, and noodles stretched in front of you.</p>\n      <div class=\"mn-hero-actions\"><a class=\"mn-btn mn-btn-lg\" href=\"#\">Book a seat</a><a class=\"mn-btn mn-btn-lg mn-btn-ghost\" href=\"#\">See the menu <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"/></svg></a></div>\n      <p class=\"mn-hero-note\">Tue–Sun · 12:00–15:00, 18:00–22:30</p>\n    </div>\n    <div class=\"mn-hero-media\"><div class=\"mn-media\" style=\"--ratio:4/3\"><svg viewBox=\"0 0 400 300\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" aria-label=\"Illustration: a bowl of noodles with chopsticks\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"400\" height=\"300\" fill=\"var(--mn-surface-2)\"/>\n<g fill=\"none\" stroke=\"var(--mn-muted)\" stroke-width=\"3\" stroke-linecap=\"round\" opacity=\".55\">\n  <path d=\"M160 70c-12-16 12-24 0-42\"/><path d=\"M200 62c-12-16 12-24 0-42\"/><path d=\"M240 70c-12-16 12-24 0-42\"/>\n</g>\n<path d=\"M70 140h260c0 70-52 118-130 118S70 210 70 140Z\" fill=\"var(--mn-surface)\" stroke=\"var(--mn-fg)\" stroke-width=\"3\"/>\n<path d=\"M150 258h100v10a8 8 0 0 1-8 8h-84a8 8 0 0 1-8-8Z\" fill=\"var(--mn-fg)\"/>\n<g fill=\"none\" stroke=\"var(--mn-primary)\" stroke-width=\"4\" stroke-linecap=\"round\">\n  <path d=\"M92 142c20-26 44 10 66-12s40 14 62-8 38 16 60-4 30 4 34 12\"/>\n  <path d=\"M100 150c24-18 40 12 62-6s42 12 66-6 36 12 56-2 24 2 26 8\" opacity=\".75\"/>\n</g>\n<ellipse cx=\"200\" cy=\"140\" rx=\"130\" ry=\"10\" fill=\"none\" stroke=\"var(--mn-fg)\" stroke-width=\"3\"/>\n<circle cx=\"262\" cy=\"128\" r=\"16\" fill=\"var(--mn-accent)\"/><circle cx=\"262\" cy=\"128\" r=\"7\" fill=\"var(--mn-surface)\"/>\n<g stroke=\"var(--mn-fg)\" stroke-width=\"6\" stroke-linecap=\"round\"><path d=\"M250 30 170 150\"/><path d=\"M280 36 190 152\"/></g></svg></div></div>\n  </div>\n</section>"
    },
    {
      "title": "Centred hero with product UI",
      "description": null,
      "html": "<section class=\"mn-section mn-hero mn-hero-center\">\n  <div class=\"mn-container mn-hero-in\">\n    <div class=\"mn-hero-copy\">\n      <p class=\"mn-eyebrow\">For finance teams of 5 to 500</p>\n      <h1 class=\"mn-display\">Close the books in four days, not fourteen.</h1>\n      <p class=\"mn-intro\">Ledger reconciles every account overnight and hands you the exceptions.</p>\n      <div class=\"mn-hero-actions\"><a class=\"mn-btn mn-btn-lg\" href=\"#\">Start free</a><a class=\"mn-btn mn-btn-lg mn-btn-outline\" href=\"#\">Book a demo</a></div>\n    </div>\n    <div class=\"mn-hero-media mn-hero-media-fade\">\n      <div class=\"mn-card\"><div class=\"mn-card-body mn-stack\">\n        <div class=\"mn-row\" style=\"justify-content:space-between\"><strong>September close</strong><span class=\"mn-badge mn-badge-soft mn-success\">On track</span></div>\n        <div class=\"mn-progress\" role=\"progressbar\" aria-label=\"Close progress\" aria-valuenow=\"72\" style=\"--_v:72%\"></div>\n        <div class=\"mn-table-wrap\"><table class=\"mn-table\"><thead><tr><th scope=\"col\">Account</th><th scope=\"col\">Status</th><th scope=\"col\" style=\"text-align:right\">Unmatched</th></tr></thead><tbody><tr><td>Operating · 4410</td><td><span class=\"mn-badge mn-badge-soft mn-success\">Matched</span></td><td style=\"text-align:right\">€0.00</td></tr><tr><td>Stripe payouts</td><td><span class=\"mn-badge mn-badge-soft mn-warning\">Review</span></td><td style=\"text-align:right\">€1,284.10</td></tr></tbody></table></div>\n      </div></div>\n    </div>\n  </div>\n</section>"
    }
  ],
  "css": ".mn-hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 8vw, 6.5rem); }\n.mn-hero-in { display: grid; gap: clamp(2.5rem, 6cqi, 4.5rem); }\n.mn-hero-copy { display: grid; gap: 1.5rem; justify-items: start; max-width: 52rem; }\n.mn-hero-copy > * { margin: 0; }\n.mn-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }\n.mn-hero-note { font-size: .875rem; color: var(--mn-muted); }\n.mn-hero-center .mn-hero-copy { justify-items: center; margin-inline: auto; text-align: center; }\n.mn-hero-center .mn-hero-actions { justify-content: center; }\n.mn-hero-media { min-width: 0; }\n.mn-hero-media-fade { max-height: 34rem; overflow: hidden; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }\n@container mn (min-width: 56rem) {\n  .mn-hero-split .mn-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }\n  .mn-hero-split .mn-hero-copy { max-width: 36rem; }\n  .mn-hero-split .mn-display { font-size: clamp(2.6rem, 1.2rem + 3.7cqi, 4.6rem); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/hero.json"
  }
}