{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "leaderboard",
  "name": "Leaderboard",
  "category": "Data display",
  "description": "A ranked list, top sellers, customers, contributors, with medals for the top three and a trend.",
  "tags": [
    "leaderboard",
    "ranking",
    "top",
    "sales team",
    "scores",
    "standings",
    "best sellers",
    "gamification"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "ranking",
      "top sellers",
      "leaderboard",
      "top customers"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/leaderboard",
  "markdownUrl": "https://mian.ro/ai/components/leaderboard.md",
  "classes": [
    {
      "name": "mn-leaderboard",
      "description": "The ranking (<ol>); numbers come from a CSS counter."
    },
    {
      "name": "mn-leader",
      "description": "A row: avatar, mn-leader-name (name and detail), mn-leader-value (value and change)."
    }
  ],
  "accessibility": [
    "An ordered list conveys rank; the medal colours are decoration.",
    "Write the change as text with its direction (“+12%”)."
  ],
  "examples": [
    {
      "title": "Top sellers, Q3",
      "description": null,
      "html": "<ol class=\"mn-leaderboard\" style=\"max-width:26rem\">\n  <li class=\"mn-leader\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">MR</span><span class=\"mn-leader-name\"><strong>Maren Richter</strong><small>Berlin</small></span><span class=\"mn-leader-value\">€184,200<small>+12%</small></span></li>\n  <li class=\"mn-leader\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">JO</span><span class=\"mn-leader-name\"><strong>Jonas Olsen</strong><small>Oslo</small></span><span class=\"mn-leader-value\">€162,900<small>+4%</small></span></li>\n  <li class=\"mn-leader\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">AP</span><span class=\"mn-leader-name\"><strong>Ana Popescu</strong><small>Cluj</small></span><span class=\"mn-leader-value\">€151,300<small>+22%</small></span></li>\n  <li class=\"mn-leader\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">LK</span><span class=\"mn-leader-name\"><strong>Lea Kim</strong><small>Vienna</small></span><span class=\"mn-leader-value\">€98,400<small>+2%</small></span></li>\n</ol>"
    }
  ],
  "css": ".mn-leaderboard { margin: 0; padding: 0; list-style: none; counter-reset: mn-rank; }\n.mn-leader { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: var(--mn-border-w) solid var(--mn-border); counter-increment: mn-rank; }\n.mn-leader:last-child { border-bottom: 0; }\n.mn-leader::before { content: counter(mn-rank); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--mn-muted); font: 700 .875rem/1 var(--mn-font); font-variant-numeric: tabular-nums; }\n.mn-leader:nth-child(1)::before { background: #f5c542; color: #3b2a00; }\n.mn-leader:nth-child(2)::before { background: #d3d9e0; color: #1f2933; }\n.mn-leader:nth-child(3)::before { background: #e3a877; color: #3a1d06; }\n.mn-leader-name { display: grid; min-width: 0; line-height: 1.3; }\n.mn-leader-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }\n.mn-leader-name small { color: var(--mn-muted); font-size: .8125rem; }\n.mn-leader-value { display: grid; justify-items: end; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; }\n.mn-leader-value small { color: var(--mn-success-text); font-size: .75rem; font-weight: 500; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/leaderboard.json"
  }
}