{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "layout",
  "name": "Page layout",
  "category": "Sections",
  "description": "Containers, section rhythm, display type and grids, the frame every page is built in.",
  "tags": [
    "layout",
    "container",
    "section",
    "page",
    "grid",
    "columns",
    "split",
    "display heading",
    "eyebrow",
    "typography scale",
    "spacing",
    "website"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "frame",
    "intents": [
      "page structure",
      "section spacing",
      "two column split",
      "content width",
      "grid columns",
      "container",
      "display headline",
      "eyebrow label"
    ],
    "prominence": "low",
    "density": "low",
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": "Do not add your own container, max-width or section padding CSS, mn-section and mn-container already set the rhythm."
  },
  "url": "https://mian.ro/components/layout",
  "markdownUrl": "https://mian.ro/ai/components/layout.md",
  "classes": [
    {
      "name": "mn-site",
      "description": "On <body>: a full-height column so the footer sits at the bottom."
    },
    {
      "name": "mn-skip",
      "description": "A “Skip to content” link, visible on focus. Point it at <main id=\"main\">."
    },
    {
      "name": "mn-container",
      "description": "Centred content width with side gutters. mn-container-narrow (46rem) · mn-container-wide (88rem). --mn-container sets it."
    },
    {
      "name": "mn-section",
      "description": "A band of the page with vertical rhythm (--mn-section-space) and a container for queries. mn-section-sm · mn-section-flush (no top padding) · mn-section-muted · mn-section-bordered."
    },
    {
      "name": "mn-section-head",
      "description": "Eyebrow, title and intro above a section. mn-section-head-center · mn-section-head-split (title left, intro right)."
    },
    {
      "name": "mn-eyebrow",
      "description": "A short label above a title. Use it on a few sections, not all."
    },
    {
      "name": "mn-display · mn-title · mn-subtitle",
      "description": "Fluid display type for heroes, section titles and sub-titles, in the noodle’s heading font."
    },
    {
      "name": "mn-intro",
      "description": "Intro paragraph, fluid size, 38em measure."
    },
    {
      "name": "mn-cols mn-cols-2|3|4",
      "description": "Equal columns that collapse on narrow sections."
    },
    {
      "name": "mn-split",
      "description": "Two columns (text + media). mn-split-start / mn-split-end make one side wider, mn-split-reverse swaps them, mn-split-top aligns to the top."
    },
    {
      "name": "mn-grid",
      "description": "Auto-filling grid; --mn-min sets the smallest column (default 16rem)."
    },
    {
      "name": "--mn-container · --mn-gutter · --mn-section-space",
      "description": "Page-level tokens. Override on :root or any noodle."
    }
  ],
  "accessibility": [
    "Use one <h1> per page (usually the hero’s mn-display) and keep heading levels in order: mn-title is for <h2>.",
    "Landmarks: <header>, <main id=\"main\">, <footer>; name repeated <nav>s with aria-label.",
    "Put mn-skip as the first element of <body>.",
    "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": "Section head and split",
      "description": null,
      "html": "<section class=\"mn-section mn-section-sm\">\n  <div class=\"mn-container\">\n    <div class=\"mn-section-head mn-section-head-split\">\n      <div><p class=\"mn-eyebrow\">Close in four days</p><h2 class=\"mn-title\">Month-end without the spreadsheet relay.</h2></div>\n      <div><p class=\"mn-intro\">Reconciliations run every night, so the last week of the month is review, not data entry.</p></div>\n    </div>\n    <div class=\"mn-split\">\n      <div class=\"mn-stack\"><h3 class=\"mn-subtitle\">Every account, matched overnight</h3><p class=\"mn-muted\" style=\"margin:0\">Bank feeds, card processors and payroll arrive at 02:00 and are matched against the ledger before anyone logs in.</p></div>\n      <div class=\"mn-media mn-media-placeholder\" style=\"--ratio:4/3\" role=\"img\" aria-label=\"Photo: the reconciliation screen on a laptop, three-quarter angle\">Photo: the reconciliation screen on a laptop, three-quarter angle</div>\n    </div>\n  </div>\n</section>"
    },
    {
      "title": "Columns",
      "description": null,
      "html": "<section class=\"mn-section mn-section-sm\">\n  <div class=\"mn-container mn-cols mn-cols-3\">\n    <div><h3 class=\"mn-subtitle\">01: Connect</h3><p class=\"mn-muted\">Link banks, cards and payroll in ten minutes.</p></div>\n    <div><h3 class=\"mn-subtitle\">02: Match</h3><p class=\"mn-muted\">Rules learn from every approval you make.</p></div>\n    <div><h3 class=\"mn-subtitle\">03: Close</h3><p class=\"mn-muted\">Export an audit trail your accountant signs off.</p></div>\n  </div>\n</section>"
    }
  ],
  "css": ":root, [data-noodle] {\n  --mn-container: 74rem;\n  --mn-gutter: clamp(1.25rem, 4.5vw, 2.5rem);\n  --mn-section-space: clamp(4.5rem, 9vw, 8rem);\n}\n.mn-site { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; }\n.mn-site > main { flex: 1 0 auto; }\n.mn-skip { position: absolute; left: .75rem; top: -5rem; z-index: 100; padding: .6rem 1rem; border-radius: var(--mn-radius-field); background: var(--mn-primary); color: var(--mn-primary-fg); font-weight: 600; text-decoration: none; }\n.mn-skip:focus { top: .75rem; outline: none; box-shadow: var(--mn-focus); }\n.mn-container { container: mn / inline-size; width: min(100% - 2 * var(--mn-gutter), var(--mn-container)); margin-inline: auto; }\n.mn-container-narrow { --mn-container: 46rem; }\n.mn-container-wide { --mn-container: 88rem; }\n.mn-section { container: mn / inline-size; padding-block: var(--mn-section-space); }\n.mn-section-sm { padding-block: calc(var(--mn-section-space) * .55); }\n.mn-section-flush { padding-top: 0; }\n.mn-section-muted { background-color: var(--mn-surface-2); }\n.mn-section-bordered { border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-section-head { display: grid; gap: 1rem; max-width: 44rem; margin-bottom: clamp(2.25rem, 5cqi, 4rem); }\n.mn-section-head > *, .mn-section-head > div > * { margin: 0; }\n.mn-section-head > div { display: grid; gap: 1rem; align-content: start; }\n.mn-section-head-center { margin-inline: auto; text-align: center; justify-items: center; }\n@container mn (min-width: 52rem) {\n  .mn-section-head-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 6cqi, 5rem); max-width: none; }\n}\n.mn-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font: 500 .875rem/1.3 var(--mn-font); color: var(--mn-primary-text); }\n.mn-display, .mn-title, .mn-subtitle {\n  margin: 0; color: var(--mn-fg); font-family: var(--mn-font-heading); font-weight: var(--mn-heading-weight);\n  text-wrap: balance; overflow-wrap: break-word; hyphens: auto;\n}\n.mn-display { font-size: clamp(2.6rem, 1.3rem + 5.4cqi, 5.75rem); line-height: 1.02; letter-spacing: -.04em; }\n.mn-title { font-size: clamp(2rem, 1.35rem + 2.7cqi, 3.35rem); line-height: 1.07; letter-spacing: -.032em; }\n.mn-subtitle { font-size: clamp(1.25rem, 1.05rem + .9cqi, 1.6rem); line-height: 1.25; letter-spacing: -.015em; }\n.mn-intro { margin: 0; max-width: 38em; font-size: clamp(1.0625rem, .98rem + .55cqi, 1.3rem); line-height: 1.6; color: var(--mn-muted); text-wrap: pretty; }\n.mn-grid { display: grid; gap: var(--mn-gap, clamp(1rem, 2.5cqi, 1.75rem)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mn-min, 16rem)), 1fr)); }\n.mn-cols { display: grid; gap: var(--mn-gap, 2rem clamp(1.5rem, 4cqi, 3rem)); grid-template-columns: minmax(0, 1fr); }\n@container mn (min-width: 40rem) { .mn-cols-2, .mn-cols-3, .mn-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n@container mn (min-width: 62rem) { .mn-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }\n.mn-split { display: grid; gap: clamp(2rem, 6cqi, 5rem); align-items: center; }\n@container mn (min-width: 52rem) {\n  .mn-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }\n  .mn-split-start { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }\n  .mn-split-end { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }\n  .mn-split-reverse > :first-child { order: 2; }\n  .mn-split-top { align-items: start; }\n}\n.mn-split > * { min-width: 0; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/layout.json"
  }
}