{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "page-header",
  "name": "Page header",
  "category": "Navigation",
  "description": "The top of an application page: where you are, what this is, its facts and the actions you can take.",
  "tags": [
    "page header",
    "page title",
    "heading with actions",
    "toolbar",
    "app header",
    "admin",
    "breadcrumbs and title",
    "detail page header"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "app page header",
      "page title with actions",
      "detail page heading",
      "title and buttons",
      "record header"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "breadcrumbs",
      "navbar"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/page-header",
  "markdownUrl": "https://mian.ro/ai/components/page-header.md",
  "classes": [
    {
      "name": "mn-pagehead",
      "description": "The header, with a rule beneath."
    },
    {
      "name": "mn-pagehead-row",
      "description": "Title block on the left, actions on the right; wraps on narrow widths."
    },
    {
      "name": "mn-pagehead-title · mn-pagehead-desc",
      "description": "The <h1> and one sentence under it."
    },
    {
      "name": "mn-pagehead-meta",
      "description": "A list of facts with icons: owner, status, updated."
    },
    {
      "name": "mn-pagehead-actions",
      "description": "Buttons. One primary at most."
    }
  ],
  "accessibility": [
    "The title is the page’s only <h1>.",
    "Breadcrumbs go in a <nav aria-label=\"Breadcrumb\"> above the title.",
    "Put the primary action last in the source so it sits at the end, where people look for it."
  ],
  "examples": [
    {
      "title": "Detail page",
      "description": null,
      "html": "<header class=\"mn-pagehead\">\n  <nav class=\"mn-breadcrumbs\" aria-label=\"Breadcrumb\"><ol><li><a href=\"#\">Projects</a></li><li><a href=\"#\">Harbour office</a></li><li><span aria-current=\"page\">Fit-out</span></li></ol></nav>\n  <div class=\"mn-pagehead-row\">\n    <div><h1 class=\"mn-pagehead-title\">Fit-out, floors 2–4</h1>\n      <ul class=\"mn-pagehead-meta\"><li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/></svg> Ilse Brandt</li><li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"M3 10h18M8 3v4M16 3v4\"/></svg> Due 14 Nov 2026</li><li><span class=\"mn-badge mn-badge-soft mn-success\">On track</span></li></ul></div>\n    <div class=\"mn-pagehead-actions\"><button class=\"mn-btn mn-btn-outline\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13\"/></svg> Share</button><button class=\"mn-btn\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg> Add task</button></div>\n  </div>\n</header>"
    }
  ],
  "css": ".mn-pagehead { display: grid; gap: .8rem; min-width: 0; padding-bottom: 1.1rem; border-bottom: var(--mn-border-w) solid var(--mn-border); }\n.mn-pagehead-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; min-width: 0; }\n.mn-pagehead-title { margin: 0; font: var(--mn-heading-weight) 1.5rem/1.2 var(--mn-font-heading); letter-spacing: -.02em; color: var(--mn-fg); }\n.mn-pagehead-desc { margin: .3rem 0 0; max-width: 44rem; color: var(--mn-muted); font-size: .9375rem; line-height: 1.5; }\n.mn-pagehead-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .5rem 0 0; padding: 0; list-style: none; color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-pagehead-meta > li { display: inline-flex; align-items: center; gap: .35rem; }\n.mn-pagehead-actions { display: flex; flex-wrap: wrap; gap: .5rem; }\n.mn-pagehead:has(> .mn-tab-list) { padding-bottom: 0; border-bottom: 0; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/page-header.json"
  }
}
