{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "profile-header",
  "name": "Profile header",
  "category": "Data display",
  "description": "The top of a profile page: cover, avatar, name, bio, details, stats and a follow button.",
  "tags": [
    "profile",
    "user profile",
    "account",
    "cover",
    "bio",
    "followers",
    "social",
    "about me",
    "creator"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "profile page",
      "user profile",
      "account header",
      "creator profile"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/profile-header",
  "markdownUrl": "https://mian.ro/ai/components/profile-header.md",
  "classes": [
    {
      "name": "mn-profile",
      "description": "The header. Add mn-card for a surface."
    },
    {
      "name": "mn-profile-cover",
      "description": "Cover band (optionally with an image inside)."
    },
    {
      "name": "mn-profile-top",
      "description": "Avatar overlapping the cover, and actions."
    },
    {
      "name": "mn-profile-name",
      "description": "Name and handle."
    },
    {
      "name": "mn-profile-bio · mn-profile-meta · mn-profile-stats",
      "description": "Bio, details with icons, counts."
    }
  ],
  "accessibility": [
    "The name is the page’s heading (<h1> on a profile page).",
    "Follow is a toggle button with aria-pressed, or a clear “Follow” / “Following” label."
  ],
  "examples": [
    {
      "title": "Profile",
      "description": null,
      "html": "<section class=\"mn-card mn-profile\" style=\"max-width:36rem\" aria-labelledby=\"pf-name\">\n  <div class=\"mn-profile-cover\" aria-hidden=\"true\"></div>\n  <div class=\"mn-profile-body\">\n    <div class=\"mn-profile-top\"><span class=\"mn-avatar mn-avatar-xl mn-primary\" aria-hidden=\"true\">IS</span><div class=\"mn-row\"><button class=\"mn-btn mn-btn-outline mn-btn-sm\" type=\"button\">Message</button><button class=\"mn-btn mn-btn-sm\" type=\"button\" aria-pressed=\"false\">Follow</button></div></div>\n    <h3 class=\"mn-profile-name\" id=\"pf-name\"><strong>Ilinca Sava</strong><span>@ilinca</span></h3>\n    <p class=\"mn-profile-bio\">Writes about craft and software. Book on repair, <em>Second Hands</em>, out in spring.</p>\n    <p class=\"mn-profile-meta\"><span><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 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z\"/><circle cx=\"12\" cy=\"10\" r=\"2.5\"/></svg> Cluj-Napoca</span><span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1\"/><path d=\"M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1\"/></svg> fieldnotes.example</span><span><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> Joined 2019</span></p>\n    <p class=\"mn-profile-stats\"><span><strong>412</strong>following</span><span><strong>18.2k</strong>followers</span><span><strong>1,204</strong>posts</span></p>\n  </div>\n</section>"
    }
  ],
  "css": ".mn-profile { container: mn-profile / inline-size; overflow: hidden; }\n.mn-profile-cover { height: clamp(6rem, 24cqi, 11rem); background: linear-gradient(135deg, color-mix(in oklab, var(--mn-primary) 30%, var(--mn-surface-2)), color-mix(in oklab, var(--mn-accent) 30%, var(--mn-surface-2))); }\n.mn-profile-cover > * { width: 100%; height: 100%; border-radius: 0; }\n.mn-profile-body { display: grid; gap: .75rem; padding: 0 1.25rem 1.25rem; }\n.mn-profile-body > * { margin: 0; }\n.mn-profile-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: -2.5rem; }\n.mn-profile-top > .mn-avatar { --_s: 5rem; box-shadow: 0 0 0 4px var(--mn-surface); font-size: 1.6rem; }\n.mn-profile-name { display: grid; gap: .1rem; }\n.mn-profile-name strong { font: var(--mn-heading-weight) 1.35rem/1.2 var(--mn-font-heading); letter-spacing: -.015em; }\n.mn-profile-name span { color: var(--mn-muted); font-size: var(--mn-text-sm); }\n.mn-profile-bio { font-size: .9375rem; line-height: 1.55; max-width: 40em; }\n.mn-profile-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--mn-muted); font-size: .8125rem; }\n.mn-profile-meta > span { display: inline-flex; align-items: center; gap: .35rem; }\n.mn-profile-stats { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: var(--mn-text-sm); color: var(--mn-muted); }\n.mn-profile-stats strong { color: var(--mn-fg); font-weight: 650; font-variant-numeric: tabular-nums; margin-inline-end: .25rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/profile-header.json"
  }
}